Add codex to image providers

2026-05-08 12:01:28 +00:00 · 2026-04-25 17:01:40 +07:00
parent 14ff69bf90
commit 83418e8a9d
4 changed files with 102 additions and 31 deletions
--- a/open-sse/config/providerModels.js
+++ b/open-sse/config/providerModels.js
@@ -37,9 +37,9 @@ export const PROVIDER_MODELS = {
    { id: "gpt-5-codex", name: "GPT 5 Codex" },
    { id: "gpt-5-codex-mini", name: "GPT 5 Codex Mini" },
    // Image models (uses image_generation tool, requires Plus/Pro plan)
-    { id: "gpt-5.4-image", name: "GPT 5.4 Image", type: "image", capabilities: ["text2img", "edit"] },
-    { id: "gpt-5.3-image", name: "GPT 5.3 Image", type: "image", capabilities: ["text2img", "edit"] },
-    { id: "gpt-5.2-image", name: "GPT 5.2 Image", type: "image", capabilities: ["text2img", "edit"] },
+    { id: "gpt-5.4-image", name: "GPT 5.4 Image", type: "image", capabilities: ["text2img", "edit"], params: ["size", "quality", "background", "image_detail", "output_format"] },
+    { id: "gpt-5.3-image", name: "GPT 5.3 Image", type: "image", capabilities: ["text2img", "edit"], params: ["size", "quality", "background", "image_detail", "output_format"] },
+    { id: "gpt-5.2-image", name: "GPT 5.2 Image", type: "image", capabilities: ["text2img", "edit"], params: ["size", "quality", "background", "image_detail", "output_format"] },
  ],
  gc: [  // Gemini CLI
    { id: "gemini-3-flash-preview", name: "Gemini 3 Flash Preview" },
@@ -345,14 +345,13 @@ export const PROVIDER_MODELS = {
    { id: "DeepSeek-V3.2", name: "DeepSeek-V3.2" },
  ],
  byteplus: [
-    { id: "doubao-seed-2.0-pro", name: "Doubao Seed 2.0 Pro" },
-    { id: "doubao-seed-2.0-code", name: "Doubao Seed 2.0 Code" },
-    { id: "doubao-seed-2.0-lite", name: "Doubao Seed 2.0 Lite" },
-    { id: "doubao-seed-code", name: "Doubao Seed Code" },
-    { id: "glm-5.1", name: "GLM-5.1" },
-    { id: "glm-4.7", name: "GLM-4.7" },
-    { id: "kimi-k2.5", name: "Kimi-K2.5" },
-    { id: "gpt-oss-120b", name: "GPT-OSS-120B" },
+    { id: "seed-2-0-pro-260328", name: "Seed 2.0 Pro" },
+    { id: "seed-2-0-code-preview-260328", name: "Seed 2.0 Code Preview" },
+    { id: "seed-2-0-mini-260215", name: "Seed 2.0 Mini" },
+    { id: "seed-2-0-lite-260228", name: "Seed 2.0 Lite" },
+    { id: "kimi-k2-thinking-251104", name: "Kimi K2 Thinking" },
+    { id: "glm-4-7-251222", name: "GLM 4.7" },
+    { id: "gpt-oss-120b-250805", name: "GPT-OSS-120B" },
  ],
  deepseek: [
    { id: "deepseek-v4-flash", name: "DeepSeek V4 Flash" },
--- a/open-sse/handlers/imageGenerationCore.js
+++ b/open-sse/handlers/imageGenerationCore.js
@@ -83,11 +83,11 @@ function toCodexDataUrl(input) {
 }

 // Build content array with optional reference images, mirroring codex-imagen tagging
-function buildCodexContent(prompt, refs) {
+function buildCodexContent(prompt, refs, detail = CODEX_REF_DETAIL) {
  const content = [];
  refs.forEach((url, index) => {
    content.push({ type: "input_text", text: `<image name=image${index + 1}>` });
-    content.push({ type: "input_image", image_url: url, detail: CODEX_REF_DETAIL });
+    content.push({ type: "input_image", image_url: url, detail });
    content.push({ type: "input_text", text: "</image>" });
  });
  content.push({ type: "input_text", text: prompt });
@@ -280,11 +280,16 @@ function buildImageBody(provider, model, body) {
      if (Array.isArray(images)) images.forEach((i) => { const u = toCodexDataUrl(i); if (u) refs.push(u); });
      const single = toCodexDataUrl(image);
      if (single) refs.push(single);
+      const detail = body.image_detail || CODEX_REF_DETAIL;
+      const imgTool = { type: "image_generation", output_format: (body.output_format || "png").toLowerCase() };
+      if (body.size && body.size !== "") imgTool.size = body.size;
+      if (body.quality && body.quality !== "") imgTool.quality = body.quality;
+      if (body.background && body.background !== "") imgTool.background = body.background;
      return {
        model: stripCodexImageModel(model),
        instructions: "",
-        input: [{ type: "message", role: "user", content: buildCodexContent(prompt, refs) }],
-        tools: [{ type: "image_generation", output_format: "png" }],
+        input: [{ type: "message", role: "user", content: buildCodexContent(prompt, refs, detail) }],
+        tools: [imgTool],
        tool_choice: "auto",
        parallel_tool_calls: false,
        prompt_cache_key: randomUUID(),
@@ -404,6 +409,7 @@ export async function handleImageGenerationCore({
  credentials,
  log,
  streamToClient = false,
+  binaryOutput = false,
  onCredentialsRefreshed,
  onRequestSuccess,
 }) {
@@ -524,7 +530,26 @@ export async function handleImageGenerationCore({

  const normalized = normalizeImageResponse(responseBody, provider, body.prompt);

-  log?.debug?.("IMAGE", `Success | images=${normalized.data?.length || 0}`);
+  // Binary output: decode first b64_json into raw bytes
+  if (binaryOutput) {
+    const first = normalized.data?.[0];
+    const b64 = first?.b64_json;
+    if (b64) {
+      const buf = Buffer.from(b64, "base64");
+      const fmt = (body.output_format || "png").toLowerCase();
+      const mime = fmt === "jpeg" || fmt === "jpg" ? "image/jpeg" : fmt === "webp" ? "image/webp" : "image/png";
+      return {
+        success: true,
+        response: new Response(buf, {
+          headers: {
+            "Content-Type": mime,
+            "Content-Disposition": `inline; filename="image.${fmt === "jpeg" ? "jpg" : fmt}"`,
+            "Access-Control-Allow-Origin": "*",
+          },
+        }),
+      };
+    }
+  }

  return {
    success: true,
--- a/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/[id]/page.js
@@ -65,10 +65,13 @@ const KIND_EXAMPLE_CONFIG = {
    defaultResponse: `{\n  "data": [\n    { "url": "...", "b64_json": "..." }\n  ]\n}`,
    extraFields: [
      { key: "n", label: "n", type: "number", default: 1, min: 1, max: 4 },
-      { key: "size", label: "Size", type: "select", default: "1024x1024", options: ["1024x1024", "1024x1792", "1792x1024", "auto"] },
-      { key: "quality", label: "Quality", type: "select", default: "", options: ["", "standard", "hd", "high", "low", "auto"] },
+      { key: "size", label: "Size", type: "select", default: "auto", options: ["auto", "1024x1024", "1024x1536", "1536x1024", "1024x1792", "1792x1024"] },
+      { key: "quality", label: "Quality", type: "select", default: "auto", options: ["auto", "low", "medium", "high", "standard", "hd"] },
+      { key: "background", label: "Background", type: "select", default: "auto", options: ["auto", "transparent", "opaque"] },
      { key: "style", label: "Style", type: "select", default: "", options: ["", "vivid", "natural"] },
      { key: "response_format", label: "Format", type: "select", default: "", options: ["", "url", "b64_json"] },
+      { key: "image_detail", label: "Image Detail", type: "select", default: "high", options: ["auto", "low", "high", "original"] },
+      { key: "output_format", label: "Codec", type: "select", default: "png", options: ["png", "jpeg", "webp"] },
    ],
  },
  imageToText: {
@@ -879,6 +882,8 @@ function GenericExampleCard({ providerId, kind }) {
  const [result, setResult] = useState(null);
  const [progress, setProgress] = useState(null); // { stage, bytesReceived }
  const [partialImage, setPartialImage] = useState(null);
+  const [imageOutputFormat, setImageOutputFormat] = useState("json"); // json | binary
+  const [binaryImageUrl, setBinaryImageUrl] = useState("");
  const [running, setRunning] = useState(false);
  const [error, setError] = useState("");
  const [connections, setConnections] = useState([]);
@@ -928,12 +933,14 @@ function GenericExampleCard({ providerId, kind }) {
    ...(supportsEdit && refImage.trim() ? { image: refImage.trim() } : {}),
  };

-  // Streaming supported for codex image (Plus/Pro accounts)
-  const useStreaming = kind === "image" && providerId === "codex";
+  // Streaming supported for codex image (Plus/Pro accounts) — disabled when binary output requested
+  const wantBinary = kind === "image" && imageOutputFormat === "binary";
+  const useStreaming = kind === "image" && providerId === "codex" && !wantBinary;
+  const apiPathWithQuery = `${apiPath}${wantBinary ? "?response_format=binary" : ""}`;
  const headersPreview = `-H "Content-Type: application/json" \\\n  -H "Authorization: Bearer ${apiKey || "YOUR_KEY"}"${pinnedConnectionId ? ` \\\n  -H "x-connection-id: ${pinnedConnectionId}"` : ""}${useStreaming ? ` \\\n  -H "Accept: text/event-stream"` : ""}`;
-  const curlSnippet = `curl -X ${kindConfig.endpoint.method} ${endpoint}${apiPath} \\
+  const curlSnippet = `curl -X ${kindConfig.endpoint.method} ${endpoint}${apiPathWithQuery} \\
  ${headersPreview.replace(/\\\n  /g, "\\\n  ")} \\
-  -d '${JSON.stringify(requestBody)}'`;
+  -d '${JSON.stringify(requestBody)}'${wantBinary ? " \\\n  --output image.png" : ""}`;

  const handleRun = async () => {
    if (!input.trim() || !modelFull) return;
@@ -942,6 +949,7 @@ function GenericExampleCard({ providerId, kind }) {
    setResult(null);
    setProgress(null);
    setPartialImage(null);
+    if (binaryImageUrl) { try { URL.revokeObjectURL(binaryImageUrl); } catch {} setBinaryImageUrl(""); }
    const start = Date.now();
    try {
      const headers = { "Content-Type": "application/json" };
@@ -949,7 +957,7 @@ function GenericExampleCard({ providerId, kind }) {
      if (pinnedConnectionId) headers["x-connection-id"] = pinnedConnectionId;
      if (useStreaming) headers["Accept"] = "text/event-stream";
      const body = { ...requestBody, model: modelFull };
-      const res = await fetch(`/api${apiPath}`, {
+      const res = await fetch(`/api${apiPathWithQuery}`, {
        method: kindConfig.endpoint.method,
        headers,
        body: JSON.stringify(body),
@@ -959,7 +967,16 @@ function GenericExampleCard({ providerId, kind }) {
        setError(data?.error?.message || data?.error || `HTTP ${res.status}`);
        return;
      }
-      const isSse = (res.headers.get("content-type") || "").includes("text/event-stream");
+      const ctype = res.headers.get("content-type") || "";
+      // Binary image response — convert to blob URL
+      if (ctype.startsWith("image/")) {
+        const blob = await res.blob();
+        const objUrl = URL.createObjectURL(blob);
+        setBinaryImageUrl(objUrl);
+        setResult({ data: { binary: true, mime: ctype, size: blob.size }, latencyMs: Date.now() - start });
+        return;
+      }
+      const isSse = ctype.includes("text/event-stream");
      if (isSse && res.body) {
        // Parse SSE: progress / partial_image / done / error
        const reader = res.body.getReader();
@@ -1171,6 +1188,20 @@ function GenericExampleCard({ providerId, kind }) {
          </Row>
        ))}

+        {/* Output Format toggle (image only) — last */}
+        {kind === "image" && (
+          <Row label="Output Format">
+            <select
+              value={imageOutputFormat}
+              onChange={(e) => setImageOutputFormat(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm border border-border rounded-lg bg-background focus:outline-none focus:border-primary"
+            >
+              <option value="json">JSON (Base64)</option>
+              <option value="binary">Binary File</option>
+            </select>
+          </Row>
+        )}
+
        {/* Curl + Run */}
        <div className="mt-1">
          <div className="flex items-center justify-between mb-1.5">
@@ -1206,7 +1237,7 @@ function GenericExampleCard({ providerId, kind }) {
            </span>
            <span className="text-xs text-text-muted">
              {progress?.stage || "starting"}
-              {progress?.bytesReceived ? ` · ${(progress.bytesReceived / 1024).toFixed(1)} KB` : ""}
+              {!running && progress?.bytesReceived ? ` · ${(progress.bytesReceived / 1024).toFixed(1)} KB` : ""}
            </span>
          </div>
        )}
@@ -1245,12 +1276,24 @@ function GenericExampleCard({ providerId, kind }) {
          <pre className="bg-sidebar rounded-lg px-3 py-2.5 text-xs font-mono text-text-main overflow-x-auto whitespace-pre opacity-70">
            {result ? resultJson : exConfig.defaultResponse}
          </pre>
-          {kind === "image" && result?.data?.data?.[0] && (
+          {kind === "image" && (binaryImageUrl || result?.data?.data?.[0]) && (
+            <div className="mt-2">
+              <div className="flex items-center justify-end mb-1.5">
+                <a
+                  href={binaryImageUrl || (result?.data?.data?.[0]?.b64_json ? `data:image/png;base64,${result.data.data[0].b64_json}` : result?.data?.data?.[0]?.url || "")}
+                  download="image.png"
+                  className="flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+                >
+                  <span className="material-symbols-outlined text-[14px]">download</span>
+                  Download
+                </a>
+              </div>
              <img
-              src={result.data.data[0].b64_json ? `data:image/png;base64,${result.data.data[0].b64_json}` : result.data.data[0].url}
+                src={binaryImageUrl || (result?.data?.data?.[0]?.b64_json ? `data:image/png;base64,${result.data.data[0].b64_json}` : result?.data?.data?.[0]?.url)}
                alt="Generated"
-              className="max-w-full rounded-lg border border-border mt-2"
+                className="max-w-full rounded-lg border border-border"
              />
+            </div>
          )}
        </div>
      </div>
--- a/src/sse/handlers/imageGeneration.js
+++ b/src/sse/handlers/imageGeneration.js
@@ -27,8 +27,10 @@ export async function handleImageGeneration(request) {
    return errorResponse(HTTP_STATUS.BAD_REQUEST, "Invalid JSON body");
  }

+  const url = new URL(request.url);
  const preferredConnectionId = request.headers.get("x-connection-id") || null;
  const wantsStream = (request.headers.get("accept") || "").includes("text/event-stream");
+  const binaryOutput = url.searchParams.get("response_format") === "binary";
  const modelStr = body.model;

  const apiKey = extractApiKey(request);
@@ -53,6 +55,7 @@ export async function handleImageGeneration(request) {
      body,
      modelInfo: { provider, model },
      credentials: null,
+      binaryOutput,
    });
    if (result.success) return result.response;
    return errorResponse(result.status || HTTP_STATUS.BAD_GATEWAY, result.error || "Image generation failed");
@@ -85,6 +88,7 @@ export async function handleImageGeneration(request) {
      modelInfo: { provider, model },
      credentials: refreshedCredentials,
      streamToClient: wantsStream,
+      binaryOutput,
      onCredentialsRefreshed: async (newCreds) => {
        await updateProviderCredentials(credentials.connectionId, {
          accessToken: newCreds.accessToken,