From 3e45ff94980e661143bff696cfd536f0c7cfa059 Mon Sep 17 00:00:00 2001
From: Your Name <mail@llycloud.com>
Date: Tue, 12 May 2026 20:06:48 +0000
Subject: [PATCH 1/4] Add streaming image support and source deploy compose

---
 deploy/nginx.conf                   |   2 +
 docker-compose.yml                  |   9 +
 scripts/mock-image-api.mjs          |  99 +++++++++++
 src/components/DetailModal.tsx      |  15 +-
 src/components/SettingsModal.tsx    |  26 ++-
 src/components/TaskCard.tsx         |  15 +-
 src/lib/api.test.ts                 | 101 ++++++++++++
 src/lib/apiProfiles.test.ts         |  15 ++
 src/lib/apiProfiles.ts              |  15 +-
 src/lib/imageApiShared.ts           |   1 +
 src/lib/openaiCompatibleImageApi.ts | 246 +++++++++++++++++++++++++++-
 src/lib/urlSettings.ts              |   6 +-
 src/store.ts                        |  33 +++-
 src/types.ts                        |   4 +-
 14 files changed, 573 insertions(+), 14 deletions(-)
 create mode 100644 docker-compose.yml

diff --git a/deploy/nginx.conf b/deploy/nginx.conf
index 11f741ae..c311a9b6 100644
--- a/deploy/nginx.conf
+++ b/deploy/nginx.conf
@@ -34,6 +34,8 @@ server {
 
         proxy_pass ${API_PROXY_URL}/;
         proxy_http_version 1.1;
+        proxy_ssl_server_name on;
+        proxy_ssl_name $proxy_host;
         proxy_set_header Host $proxy_host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..f9e57ce1
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,9 @@
+services:
+  gpt-image-playground:
+    image: gpt-image-playground:latest
+    pull_policy: build
+    build:
+      context: .
+      dockerfile: deploy/Dockerfile
+      pull: true
+    restart: unless-stopped
diff --git a/scripts/mock-image-api.mjs b/scripts/mock-image-api.mjs
index 0aaeaf67..df5ca2b2 100644
--- a/scripts/mock-image-api.mjs
+++ b/scripts/mock-image-api.mjs
@@ -42,6 +42,21 @@ function sendJson(res, status, payload, options = {}) {
   send(res, status, appendCors({ 'Content-Type': 'application/json; charset=utf-8' }, options.cors !== false), body)
 }
 
+async function sendSse(res, events, options = {}) {
+  res.writeHead(200, appendCors({
+    'Content-Type': 'text/event-stream; charset=utf-8',
+    'Cache-Control': 'no-store',
+    Connection: 'keep-alive',
+  }, options.cors !== false))
+
+  for (const event of events) {
+    res.write(`data: ${JSON.stringify(event)}\n\n`)
+    await new Promise((resolve) => setTimeout(resolve, 250))
+  }
+  res.write('data: [DONE]\n\n')
+  res.end()
+}
+
 function readBody(req) {
   return new Promise((resolve) => {
     const chunks = []
@@ -140,10 +155,68 @@ function isOpenAIImagesPath(pathname) {
   return pathname.endsWith('/v1/images/generations') || pathname.endsWith('/v1/images/edits')
 }
 
+function isOpenAIResponsesPath(pathname) {
+  return pathname.endsWith('/v1/responses')
+}
+
 function isCustomPath(pathname) {
   return pathname === '/custom/random-image' || pathname === '/custom/generate'
 }
 
+function createImagesStreamEvents(req, mode, n, isEdit) {
+  const created = Math.floor(Date.now() / 1000)
+  const prefix = isEdit ? 'image_edit' : 'image_generation'
+  const partialCount = mode === 'empty' ? 0 : 2
+  const partials = Array.from({ length: partialCount }, (_, i) => ({
+    type: `${prefix}.partial_image`,
+    created_at: created,
+    partial_image_index: i,
+    b64_json: tinyPngBase64,
+    output_format: 'png',
+    quality: 'auto',
+    size: '1024x1024',
+  }))
+  const completed = Array.from({ length: n }, () => ({
+    type: `${prefix}.completed`,
+    created_at: created,
+    b64_json: tinyPngBase64,
+    output_format: 'png',
+    quality: 'auto',
+    size: '1024x1024',
+  }))
+  return [...partials, ...completed]
+}
+
+function createResponsesStreamEvents(mode) {
+  const partials = mode === 'empty'
+    ? []
+    : [0, 1].map((index) => ({
+        type: 'response.image_generation_call.partial_image',
+        output_index: 0,
+        item_id: 'mock-image-generation',
+        partial_image_index: index,
+        partial_image_b64: tinyPngBase64,
+      }))
+
+  return [
+    ...partials,
+    {
+      type: 'response.completed',
+      response: {
+        output: mode === 'empty' ? [] : [{
+          type: 'image_generation_call',
+          status: 'completed',
+          revised_prompt: `mock ${mode} response image`,
+          result: tinyPngBase64,
+          output_format: 'png',
+          quality: 'auto',
+          size: '1024x1024',
+        }],
+      },
+    },
+  ]
+}
+
 async function handleApi(req, res, url) {
   const body = req.method === 'GET' ? { json: null } : await readBody(req)
   const mode = getMode(url, body.json)
@@ -169,9 +242,30 @@ async function handleApi(req, res, url) {
     return
   }
 
+  const wantsStream = (body.json && typeof body.json === 'object' && body.json.stream === true) ||
+    /name="stream"[\s\S]*?\r?\n\r?\ntrue/.test(body.text)
+  if (wantsStream) {
+    await sendSse(res, createImagesStreamEvents(req, mode, n, url.pathname.endsWith('/v1/images/edits')))
+    return
+  }
+
   sendJson(res, 200, createOpenAIResponse(req, mode, n))
 }
 
+async function handleResponses(req, res, url) {
+  const body = req.method === 'GET' ? { json: null } : await readBody(req)
+  const mode = getMode(url, body.json)
+
+  if (body.json && typeof body.json === 'object' && body.json.stream === true) {
+    await sendSse(res, createResponsesStreamEvents(mode))
+    return
+  }
+
+  sendJson(res, 200, {
+    output: createResponsesStreamEvents(mode).at(-1)?.response?.output ?? [],
+  })
+}
+
 async function handleCustom(req, res, url) {
   const body = req.method === 'GET' ? { json: null } : await readBody(req)
   const mode = getMode(url, body.json)
@@ -257,6 +351,11 @@ const server = http.createServer(async (req, res) => {
       return
     }
 
+    if (isOpenAIResponsesPath(url.pathname)) {
+      await handleResponses(req, res, url)
+      return
+    }
+
     if (isCustomPath(url.pathname)) {
       await handleCustom(req, res, url)
       return
diff --git a/src/components/DetailModal.tsx b/src/components/DetailModal.tsx
index c06de6e2..8a103b31 100644
--- a/src/components/DetailModal.tsx
+++ b/src/components/DetailModal.tsx
@@ -22,6 +22,7 @@ export default function DetailModal() {
   const showToast = useStore((s) => s.showToast)
   const settings = useStore((s) => s.settings)
   const dismissedCodexCliPrompts = useStore((s) => s.dismissedCodexCliPrompts)
+  const streamPreviewSrc = useStore((s) => detailTaskId ? s.streamPreviews[detailTaskId] || '' : '')
 
   const [imageIndex, setImageIndex] = useState(0)
   const [imageSrcs, setImageSrcs] = useState<Record<string, string>>({})
@@ -408,7 +409,19 @@ export default function DetailModal() {
                 </svg>
                 {formatDuration()}
               </div>
-              {task.status === 'running' && (
+              {task.status === 'running' && streamPreviewSrc && (
+                <>
+                  <img
+                    src={streamPreviewSrc}
+                    className="max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] object-contain"
+                    alt=""
+                  />
+                  <span className="absolute bottom-4 right-4 bg-blue-500/80 text-white text-xs px-2 py-0.5 rounded backdrop-blur-sm">
+                    流式预览
+                  </span>
+                </>
+              )}
+              {task.status === 'running' && !streamPreviewSrc && (
                 <svg className="w-10 h-10 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index bff32f1e..3c4591e9 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -164,7 +164,8 @@ function isPristineNewOpenAIProfile(profile: ApiProfile) {
     profile.timeout === DEFAULT_SETTINGS.timeout &&
     profile.apiMode === 'images' &&
     profile.codexCli === false &&
-    profile.apiProxy === defaultProfile.apiProxy
+    profile.apiProxy === defaultProfile.apiProxy &&
+    profile.streamImages === defaultProfile.streamImages
 }
 
 function getImportedProfileFromMergedSettings(
@@ -484,6 +485,7 @@ export default function SettingsModal() {
         timeout: Number(profile.timeout) || DEFAULT_SETTINGS.timeout,
         apiProxy: profile.provider === 'openai' && apiProxyAvailable ? (apiProxyLocked || profile.apiProxy) : false,
         codexCli: profile.provider === 'openai' ? profile.codexCli : false,
+        streamImages: profile.provider === 'openai' ? profile.streamImages : false,
       }
     })
     const fallbackProfile = createDefaultOpenAIProfile({ id: newId('openai') })
@@ -523,6 +525,7 @@ export default function SettingsModal() {
       const model = profile.model.trim() || getDefaultModelForMode(profile.apiMode)
       url.searchParams.set('model', !options.includeApiKey && options.useNewApiModel ? '{model}' : model)
       if (profile.codexCli) url.searchParams.set('codexCli', 'true')
+      if (profile.streamImages) url.searchParams.set('streamImages', 'true')
 
       let result = url.toString()
       if (!options.includeApiKey) {
@@ -1524,6 +1527,27 @@ export default function SettingsModal() {
                 </div>
               )}
 
+              {activeProfile.provider === 'openai' && (
+                <div className="block">
+                  <div className="mb-1.5 flex items-center justify-between">
+                    <span className="block text-sm text-gray-600 dark:text-gray-300">流式图片预览</span>
+                    <button
+                      type="button"
+                      onClick={() => updateActiveProfile({ streamImages: !activeProfile.streamImages }, true)}
+                      className={`relative inline-flex h-4 w-7 items-center rounded-full transition-colors ${activeProfile.streamImages ? 'bg-blue-500' : 'bg-gray-300 dark:bg-gray-600'}`}
+                      role="switch"
+                      aria-checked={!!activeProfile.streamImages}
+                      aria-label="流式图片预览"
+                    >
+                      <span className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${activeProfile.streamImages ? 'translate-x-[14px]' : 'translate-x-[2px]'}`} />
+                    </button>
+                  </div>
+                  <div data-selectable-text className="text-xs text-gray-500 dark:text-gray-500">
+                    开启后请求会发送 <code className="rounded bg-gray-100 px-1 py-0.5 dark:bg-white/[0.06]">stream: true</code> 和 <code className="rounded bg-gray-100 px-1 py-0.5 dark:bg-white/[0.06]">partial_images: 2</code>，任务生成中会显示部分图片预览。
+                  </div>
+                </div>
+              )}
+
               <label className="block">
                 <span className="mb-1.5 block text-sm text-gray-600 dark:text-gray-300">
                   模型 ID
diff --git a/src/components/TaskCard.tsx b/src/components/TaskCard.tsx
index 1951add3..fa56bc3f 100644
--- a/src/components/TaskCard.tsx
+++ b/src/components/TaskCard.tsx
@@ -33,6 +33,7 @@ export default function TaskCard({
   const [swipeActionActive, setSwipeActionActive] = useState(false)
   const toggleTaskSelection = useStore((s) => s.toggleTaskSelection)
   const settings = useStore((s) => s.settings)
+  const streamPreviewSrc = useStore((s) => s.streamPreviews[task.id] || '')
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
   const swipeResetTimerRef = useRef<number | null>(null)
   const suppressClickUntilRef = useRef(0)
@@ -265,7 +266,19 @@ export default function TaskCard({
       <div className="flex h-40">
         {/* 左侧图片区域 */}
         <div className="w-40 min-w-[10rem] h-full bg-gray-100 dark:bg-black/20 relative flex items-center justify-center overflow-hidden flex-shrink-0">
-          {task.status === 'running' && (
+          {task.status === 'running' && streamPreviewSrc && (
+            <>
+              <img
+                src={streamPreviewSrc}
+                className="h-full w-full object-cover"
+                alt=""
+              />
+              <span className="absolute bottom-1 right-1 bg-blue-500/80 text-white text-xs px-1.5 py-0.5 rounded">
+                预览
+              </span>
+            </>
+          )}
+          {task.status === 'running' && !streamPreviewSrc && (
             <div className="flex flex-col items-center gap-2">
               <svg
                 className="w-8 h-8 text-blue-400 animate-spin"
diff --git a/src/lib/api.test.ts b/src/lib/api.test.ts
index f92ad752..f3c8541a 100644
--- a/src/lib/api.test.ts
+++ b/src/lib/api.test.ts
@@ -99,6 +99,107 @@ describe('callImageApi', () => {
     }])
   })
 
+  it('streams Images API partial images and resolves the final completed image', async () => {
+    const streamBody = [
+      'data: {"type":"image_generation.partial_image","partial_image_index":0,"b64_json":"cGFydGlhbA=="}',
+      '',
+      'data: {"type":"image_generation.completed","b64_json":"ZmluYWw=","size":"1024x1024","quality":"high","output_format":"png"}',
+      '',
+      'data: [DONE]',
+      '',
+    ].join('\n')
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(streamBody, {
+      status: 200,
+      headers: { 'Content-Type': 'text/event-stream' },
+    }))
+    const partialImages: string[] = []
+
+    const result = await callImageApi({
+      settings: {
+        ...DEFAULT_SETTINGS,
+        apiKey: 'test-key',
+        streamImages: true,
+        profiles: DEFAULT_SETTINGS.profiles.map((profile) => ({
+          ...profile,
+          apiKey: 'test-key',
+          streamImages: true,
+        })),
+      },
+      prompt: 'prompt',
+      params: { ...DEFAULT_PARAMS },
+      inputImageDataUrls: [],
+      onPartialImage: (partial: { image: string }) => partialImages.push(partial.image),
+    } as any)
+
+    const [, init] = fetchMock.mock.calls[0]
+    const body = JSON.parse(String((init as RequestInit).body))
+    expect(body).toMatchObject({
+      stream: true,
+      partial_images: 2,
+    })
+    expect(partialImages).toEqual(['data:image/png;base64,cGFydGlhbA=='])
+    expect(result).toMatchObject({
+      images: ['data:image/png;base64,ZmluYWw='],
+      actualParams: {
+        output_format: 'png',
+        quality: 'high',
+        size: '1024x1024',
+      },
+      actualParamsList: [{
+        output_format: 'png',
+        quality: 'high',
+        size: '1024x1024',
+      }],
+    })
+  })
+
+  it('streams Responses API partial images and resolves the completed response image', async () => {
+    const streamBody = [
+      'data: {"type":"response.image_generation_call.partial_image","partial_image_index":0,"partial_image_b64":"cGFydGlhbA=="}',
+      '',
+      'data: {"type":"response.completed","response":{"output":[{"type":"image_generation_call","result":"ZmluYWw=","revised_prompt":"rewritten","size":"1024x1024"}]}}',
+      '',
+      'data: [DONE]',
+      '',
+    ].join('\n')
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(streamBody, {
+      status: 200,
+      headers: { 'Content-Type': 'text/event-stream' },
+    }))
+    const partialImages: string[] = []
+
+    const result = await callImageApi({
+      settings: {
+        ...DEFAULT_SETTINGS,
+        apiKey: 'test-key',
+        apiMode: 'responses',
+        streamImages: true,
+        profiles: DEFAULT_SETTINGS.profiles.map((profile) => ({
+          ...profile,
+          apiKey: 'test-key',
+          apiMode: 'responses',
+          streamImages: true,
+        })),
+      },
+      prompt: 'prompt',
+      params: { ...DEFAULT_PARAMS },
+      inputImageDataUrls: [],
+      onPartialImage: (partial: { image: string }) => partialImages.push(partial.image),
+    } as any)
+
+    const [, init] = fetchMock.mock.calls[0]
+    const body = JSON.parse(String((init as RequestInit).body))
+    expect(body.stream).toBe(true)
+    expect(body.tools[0].partial_images).toBe(2)
+    expect(partialImages).toEqual(['data:image/png;base64,cGFydGlhbA=='])
+    expect(result).toMatchObject({
+      images: ['data:image/png;base64,ZmluYWw='],
+      actualParams: { size: '1024x1024' },
+      actualParamsList: [{ size: '1024x1024' }],
+      revisedPrompts: ['rewritten'],
+    })
+  })
+
   it('uses the same-origin API proxy path when API proxy is enabled', async () => {
     vi.stubEnv('VITE_API_PROXY_AVAILABLE', 'true')
     const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(JSON.stringify({
diff --git a/src/lib/apiProfiles.test.ts b/src/lib/apiProfiles.test.ts
index 9c73f431..48e8162e 100644
--- a/src/lib/apiProfiles.test.ts
+++ b/src/lib/apiProfiles.test.ts
@@ -529,6 +529,21 @@ describe('custom providers', () => {
     expect(profile.model).toBe(DEFAULT_IMAGES_MODEL)
   })
 
+  it('enables streaming image previews by default for new OpenAI profiles while preserving explicit false', () => {
+    expect(createDefaultOpenAIProfile().streamImages).toBe(true)
+    expect(DEFAULT_SETTINGS.streamImages).toBe(true)
+    expect(DEFAULT_SETTINGS.profiles[0].streamImages).toBe(true)
+
+    const normalized = normalizeSettings({
+      profiles: [
+        createDefaultOpenAIProfile({ streamImages: false }),
+      ],
+    })
+
+    expect(normalized.streamImages).toBe(false)
+    expect(normalized.profiles[0].streamImages).toBe(false)
+  })
+
   it('restores OpenAI-compatible URL after switching through fal.ai', () => {
     const openaiProfile = createDefaultOpenAIProfile({
       baseUrl: 'https://api.compat.example.com/v1',
diff --git a/src/lib/apiProfiles.ts b/src/lib/apiProfiles.ts
index ae65836e..6fede70f 100644
--- a/src/lib/apiProfiles.ts
+++ b/src/lib/apiProfiles.ts
@@ -267,6 +267,7 @@ export function createDefaultOpenAIProfile(overrides: Partial<ApiProfile> = {}):
     apiMode: 'images',
     codexCli: false,
     apiProxy: DEFAULT_OPENAI_API_PROXY,
+    streamImages: true,
     ...overrides,
   }
 }
@@ -283,6 +284,7 @@ export function createDefaultFalProfile(overrides: Partial<ApiProfile> = {}): Ap
     apiMode: 'images',
     codexCli: false,
     apiProxy: false,
+    streamImages: false,
     ...overrides,
   }
 }
@@ -297,6 +299,7 @@ export function switchApiProfileProvider(profile: ApiProfile, provider: ApiProvi
       codexCli: profile.codexCli,
       apiProxy: profile.apiProxy,
       responseFormatB64Json: profile.responseFormatB64Json,
+      streamImages: profile.streamImages,
     },
   }
   const savedDraft = providerDrafts[provider]
@@ -311,6 +314,7 @@ export function switchApiProfileProvider(profile: ApiProfile, provider: ApiProvi
       codexCli: false,
       apiProxy: false,
       responseFormatB64Json: savedDraft?.responseFormatB64Json,
+      streamImages: false,
       providerDrafts,
     }
   }
@@ -326,6 +330,7 @@ export function switchApiProfileProvider(profile: ApiProfile, provider: ApiProvi
       codexCli: false,
       apiProxy: false,
       responseFormatB64Json: savedDraft?.responseFormatB64Json,
+      streamImages: false,
       providerDrafts,
     }
   }
@@ -339,6 +344,7 @@ export function switchApiProfileProvider(profile: ApiProfile, provider: ApiProvi
     codexCli: savedDraft?.codexCli ?? profile.codexCli,
     apiProxy: savedDraft?.apiProxy ?? DEFAULT_OPENAI_API_PROXY,
     responseFormatB64Json: savedDraft?.responseFormatB64Json,
+    streamImages: savedDraft?.streamImages ?? (profile.provider === 'openai' ? profile.streamImages : true),
     providerDrafts,
   }
 }
@@ -361,6 +367,7 @@ function normalizeProviderDraft(input: unknown, provider: ApiProvider, customPro
     codexCli: typeof input.codexCli === 'boolean' ? input.codexCli : fallback.codexCli,
     apiProxy: typeof input.apiProxy === 'boolean' ? input.apiProxy : fallback.apiProxy,
     responseFormatB64Json: input.responseFormatB64Json === true ? true : undefined,
+    streamImages: typeof input.streamImages === 'boolean' ? input.streamImages : fallback.streamImages,
   }
 }
 
@@ -394,6 +401,7 @@ export function normalizeApiProfile(input: unknown, fallback?: Partial<ApiProfil
     codexCli: Boolean(record.codexCli),
     apiProxy: typeof record.apiProxy === 'boolean' ? record.apiProxy : defaults.apiProxy,
     responseFormatB64Json: record.responseFormatB64Json === true ? true : undefined,
+    streamImages: typeof record.streamImages === 'boolean' ? record.streamImages : defaults.streamImages,
     providerDrafts: normalizeProviderDrafts(record.providerDrafts, customProviderIds),
   }
 }
@@ -424,6 +432,7 @@ export function normalizeSettings(input: Partial<AppSettings> | unknown): AppSet
     codexCli: Boolean(record.codexCli),
     apiProxy: typeof record.apiProxy === 'boolean' ? record.apiProxy : DEFAULT_OPENAI_API_PROXY,
     responseFormatB64Json: record.responseFormatB64Json === true ? true : undefined,
+    streamImages: typeof record.streamImages === 'boolean' ? record.streamImages : true,
   })
   const profiles = Array.isArray(record.profiles) && record.profiles.length
     ? record.profiles.map((profile) => normalizeApiProfile(profile, undefined, customProviderIds))
@@ -441,6 +450,7 @@ export function normalizeSettings(input: Partial<AppSettings> | unknown): AppSet
     apiMode: active.apiMode,
     codexCli: active.codexCli,
     apiProxy: active.apiProxy,
+    streamImages: active.streamImages,
     customProviders,
     providerOrder: Array.isArray(record.providerOrder) ? record.providerOrder.map(String) : undefined,
     clearInputAfterSubmit: typeof record.clearInputAfterSubmit === 'boolean' ? record.clearInputAfterSubmit : false,
@@ -542,6 +552,7 @@ export function getActiveApiProfile(settings: Partial<AppSettings> | unknown): A
     apiMode: record.apiMode === 'images' || record.apiMode === 'responses' ? record.apiMode : profile.apiMode,
     codexCli: typeof record.codexCli === 'boolean' ? record.codexCli : profile.codexCli,
     apiProxy: typeof record.apiProxy === 'boolean' ? record.apiProxy : profile.apiProxy,
+    streamImages: typeof record.streamImages === 'boolean' ? record.streamImages : profile.streamImages,
   }
 }
 
@@ -563,7 +574,8 @@ function isDefaultOpenAIProfile(profile: ApiProfile): boolean {
     profile.timeout === DEFAULT_API_TIMEOUT &&
     profile.apiMode === 'images' &&
     profile.codexCli === false &&
-    profile.apiProxy === DEFAULT_OPENAI_API_PROXY
+    profile.apiProxy === DEFAULT_OPENAI_API_PROXY &&
+    profile.streamImages === true
 }
 
 function hasOnlyDefaultProfiles(settings: AppSettings): boolean {
@@ -718,6 +730,7 @@ export const DEFAULT_SETTINGS: AppSettings = normalizeSettings({
   apiMode: 'images',
   codexCli: false,
   apiProxy: DEFAULT_OPENAI_API_PROXY,
+  streamImages: true,
   customProviders: [],
   clearInputAfterSubmit: false,
   persistInputOnRestart: true,
diff --git a/src/lib/imageApiShared.ts b/src/lib/imageApiShared.ts
index 69a3523f..f5616cd3 100644
--- a/src/lib/imageApiShared.ts
+++ b/src/lib/imageApiShared.ts
@@ -18,6 +18,7 @@ export interface CallApiOptions {
   maskDataUrl?: string
   onFalRequestEnqueued?: (request: { requestId: string; endpoint: string }) => void
   onCustomTaskEnqueued?: (task: { taskId: string }) => void
+  onPartialImage?: (partial: { image: string; partialImageIndex?: number }) => void
 }
 
 export interface CallApiResult {
diff --git a/src/lib/openaiCompatibleImageApi.ts b/src/lib/openaiCompatibleImageApi.ts
index 02983f69..5d998009 100644
--- a/src/lib/openaiCompatibleImageApi.ts
+++ b/src/lib/openaiCompatibleImageApi.ts
@@ -1,4 +1,4 @@
-import type { ApiProfile, CustomProviderDefinition, CustomProviderPollMapping, CustomProviderResultMapping, CustomProviderSubmitMapping, ImageApiResponse, ResponsesApiResponse, TaskParams } from '../types'
+import type { ApiProfile, CustomProviderDefinition, CustomProviderPollMapping, CustomProviderResultMapping, CustomProviderSubmitMapping, ImageApiResponse, ImageResponseItem, ResponsesApiResponse, ResponsesOutputItem, TaskParams } from '../types'
 import { dataUrlToBlob, imageDataUrlToPngBlob, maskDataUrlToPngBlob } from './canvasImage'
 import { buildApiUrl, readClientDevProxyConfig, shouldUseApiProxy } from './devProxy'
 import {
@@ -19,6 +19,7 @@ import {
 } from './imageApiShared'
 
 const PROMPT_REWRITE_GUARD_PREFIX = 'Use the following text as the complete prompt. Do not rewrite it:'
+const DEFAULT_STREAM_PARTIAL_IMAGES = 2
 
 function appendQuery(path: string, query?: Record<string, string>): string {
   if (!query || !Object.keys(query).length) return path
@@ -82,6 +83,96 @@ function createRequestHeaders(profile: ApiProfile): Record<string, string> {
   }
 }
 
+function isEventStreamResponse(response: Response): boolean {
+  return response.headers.get('Content-Type')?.toLowerCase().includes('text/event-stream') ?? false
+}
+
+function isRecordValue(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+}
+
+function getStringValue(source: Record<string, unknown>, key: string): string | undefined {
+  const value = source[key]
+  return typeof value === 'string' && value.trim() ? value : undefined
+}
+
+function getNumberValue(source: Record<string, unknown>, key: string): number | undefined {
+  const value = source[key]
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined
+}
+
+function getStreamEventErrorMessage(event: Record<string, unknown>): string | null {
+  const error = event.error
+  if (isRecordValue(error)) {
+    const message = getStringValue(error, 'message')
+    if (message) return message
+  }
+  if (typeof error === 'string' && error.trim()) return error
+
+  const type = getStringValue(event, 'type')
+  if (type?.endsWith('.failed')) {
+    return getStringValue(event, 'message') ?? '流式请求失败'
+  }
+  return null
+}
+
+function parseServerSentEventBlock(block: string): string | null {
+  const dataLines: string[] = []
+  for (const line of block.split(/\r?\n/)) {
+    if (!line || line.startsWith(':')) continue
+    if (!line.startsWith('data:')) continue
+    dataLines.push(line.slice(5).replace(/^ /, ''))
+  }
+
+  const data = dataLines.join('\n').trim()
+  if (!data || data === '[DONE]') return null
+  return data
+}
+
+async function readJsonServerSentEvents(response: Response, onEvent: (event: Record<string, unknown>) => void | Promise<void>): Promise<void> {
+  if (!response.body) throw new Error('接口未返回可读取的流式响应')
+
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder()
+  let buffer = ''
+
+  const processBlock = async (block: string) => {
+    const data = parseServerSentEventBlock(block)
+    if (!data) return
+
+    let event: unknown
+    try {
+      event = JSON.parse(data)
+    } catch {
+      throw new Error('流式响应包含无法解析的 JSON 事件')
+    }
+    if (!isRecordValue(event)) return
+
+    const errorMessage = getStreamEventErrorMessage(event)
+    if (errorMessage) throw new Error(errorMessage)
+
+    await onEvent(event)
+  }
+
+  while (true) {
+    const { value, done } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+
+    let separatorIndex = buffer.search(/\r?\n\r?\n/)
+    while (separatorIndex >= 0) {
+      const block = buffer.slice(0, separatorIndex)
+      const separator = buffer.match(/\r?\n\r?\n/)?.[0] ?? '\n\n'
+      buffer = buffer.slice(separatorIndex + separator.length)
+      await processBlock(block)
+      separatorIndex = buffer.search(/\r?\n\r?\n/)
+    }
+  }
+
+  buffer += decoder.decode()
+  if (buffer.trim()) await processBlock(buffer)
+}
+
 function createResponsesImageTool(
   params: TaskParams,
   isEdit: boolean,
@@ -95,6 +186,10 @@ function createResponsesImageTool(
     output_format: params.output_format,
   }
 
+  if (profile.streamImages) {
+    tool.partial_images = DEFAULT_STREAM_PARTIAL_IMAGES
+  }
+
   if (!profile.codexCli) {
     tool.quality = params.quality
   }
@@ -216,6 +311,123 @@ async function parseImagesApiResponse(payload: ImageApiResponse, mime: string, s
   }
 }
 
+function eventToImageResponseItem(event: Record<string, unknown>): ImageResponseItem {
+  return {
+    b64_json: getStringValue(event, 'b64_json'),
+    revised_prompt: getStringValue(event, 'revised_prompt'),
+    size: getStringValue(event, 'size'),
+    quality: getStringValue(event, 'quality'),
+    output_format: getStringValue(event, 'output_format'),
+    output_compression: getNumberValue(event, 'output_compression'),
+    moderation: getStringValue(event, 'moderation'),
+  }
+}
+
+async function parseImagesApiStreamResponse(
+  response: Response,
+  mime: string,
+  onPartialImage?: CallApiOptions['onPartialImage'],
+): Promise<CallApiResult> {
+  const completedItems: ImageResponseItem[] = []
+
+  await readJsonServerSentEvents(response, (event) => {
+    const type = getStringValue(event, 'type')
+    if (type === 'image_generation.partial_image' || type === 'image_edit.partial_image') {
+      const b64 = getStringValue(event, 'b64_json')
+      if (b64) {
+        onPartialImage?.({
+          image: normalizeBase64Image(b64, mime),
+          partialImageIndex: getNumberValue(event, 'partial_image_index'),
+        })
+      }
+      return
+    }
+
+    if (type === 'image_generation.completed' || type === 'image_edit.completed') {
+      completedItems.push(eventToImageResponseItem(event))
+    }
+  })
+
+  if (!completedItems.length) {
+    throw new Error('流式接口未返回最终图片数据')
+  }
+
+  const images = completedItems
+    .map((item) => item.b64_json)
+    .filter((b64): b64 is string => Boolean(b64))
+    .map((b64) => normalizeBase64Image(b64, mime))
+  if (!images.length) throw new Error('流式接口未返回可用图片数据')
+
+  const actualParamsList = completedItems.map((item) => mergeActualParams(pickActualParams(item)))
+  const actualParams = mergeActualParams(
+    actualParamsList[0],
+    images.length > 1 ? { n: images.length } : undefined,
+  )
+  return {
+    images,
+    actualParams,
+    actualParamsList,
+    revisedPrompts: completedItems.map((item) => item.revised_prompt),
+  }
+}
+
+function getResponsesStreamPayload(event: Record<string, unknown>): ResponsesApiResponse | null {
+  const response = event.response
+  if (isRecordValue(response)) return response as ResponsesApiResponse
+
+  const item = event.item
+  if (isRecordValue(item) && item.type === 'image_generation_call') {
+    return { output: [item as ResponsesOutputItem] }
+  }
+
+  return null
+}
+
+async function parseResponsesApiStreamResponse(
+  response: Response,
+  mime: string,
+  onPartialImage?: CallApiOptions['onPartialImage'],
+): Promise<CallApiResult> {
+  let completedPayload: ResponsesApiResponse | null = null
+  const outputItems: ResponsesOutputItem[] = []
+
+  await readJsonServerSentEvents(response, (event) => {
+    const type = getStringValue(event, 'type')
+    if (type === 'response.image_generation_call.partial_image') {
+      const b64 = getStringValue(event, 'partial_image_b64')
+      if (b64) {
+        onPartialImage?.({
+          image: normalizeBase64Image(b64, mime),
+          partialImageIndex: getNumberValue(event, 'partial_image_index'),
+        })
+      }
+      return
+    }
+
+    const payload = getResponsesStreamPayload(event)
+    if (!payload) return
+
+    if (type === 'response.output_item.done' && Array.isArray(payload.output)) {
+      outputItems.push(...payload.output)
+      return
+    }
+
+    completedPayload = payload
+  })
+
+  const payload = completedPayload ?? (outputItems.length ? { output: outputItems } : null)
+  if (!payload) throw new Error('流式接口未返回最终图片数据')
+
+  const imageResults = parseResponsesImageResults(payload, mime)
+  const actualParams = mergeActualParams(imageResults[0]?.actualParams ?? {})
+  return {
+    images: imageResults.map((result) => result.image),
+    actualParams,
+    actualParamsList: imageResults.map((result) => mergeActualParams(result.actualParams ?? {})),
+    revisedPrompts: imageResults.map((result) => result.revisedPrompt),
+  }
+}
+
 export async function callOpenAICompatibleImageApi(opts: CallApiOptions, profile: ApiProfile, customProvider?: CustomProviderDefinition | null): Promise<CallApiResult> {
   if (customProvider) {
     return callCustomHttpImageApi(opts, profile, customProvider)
@@ -228,7 +440,7 @@ export async function callOpenAICompatibleImageApi(opts: CallApiOptions, profile
 
 async function callImagesApi(opts: CallApiOptions, profile: ApiProfile, customProvider?: CustomProviderDefinition | null): Promise<CallApiResult> {
   const n = opts.params.n > 0 ? opts.params.n : 1
-  if (profile.codexCli && n > 1) {
+  if ((profile.codexCli || profile.streamImages) && n > 1) {
     return callImagesApiConcurrent(opts, profile, n, customProvider)
   }
 
@@ -236,7 +448,14 @@ async function callImagesApi(opts: CallApiOptions, profile: ApiProfile, customPr
 }
 
 async function callImagesApiConcurrent(opts: CallApiOptions, profile: ApiProfile, n: number, customProvider?: CustomProviderDefinition | null): Promise<CallApiResult> {
-  const singleOpts = { ...opts, params: { ...opts.params, n: 1, quality: 'auto' as const } }
+  const singleOpts = {
+    ...opts,
+    params: {
+      ...opts.params,
+      n: 1,
+      ...(profile.codexCli ? { quality: 'auto' as const } : {}),
+    },
+  }
   const results = await Promise.allSettled(
     Array.from({ length: n }).map(() => callImagesApiSingle(singleOpts, profile, customProvider)),
   )
@@ -306,6 +525,10 @@ async function callImagesApiSingle(opts: CallApiOptions, profile: ApiProfile, cu
       if (profile.responseFormatB64Json) {
         formData.append('response_format', 'b64_json')
       }
+      if (profile.streamImages) {
+        formData.append('stream', 'true')
+        formData.append('partial_images', String(DEFAULT_STREAM_PARTIAL_IMAGES))
+      }
 
       const imageBlobs: Blob[] = []
       for (let i = 0; i < inputImageDataUrls.length; i++) {
@@ -364,6 +587,10 @@ async function callImagesApiSingle(opts: CallApiOptions, profile: ApiProfile, cu
       if (profile.responseFormatB64Json) {
         body.response_format = 'b64_json'
       }
+      if (profile.streamImages) {
+        body.stream = true
+        body.partial_images = DEFAULT_STREAM_PARTIAL_IMAGES
+      }
 
       response = await fetch(buildApiUrl(profile.baseUrl, paths.generationPath, proxyConfig, useApiProxy), {
         method: 'POST',
@@ -381,6 +608,10 @@ async function callImagesApiSingle(opts: CallApiOptions, profile: ApiProfile, cu
       throw new Error(await getApiErrorMessage(response))
     }
 
+    if (profile.streamImages && isEventStreamResponse(response)) {
+      return parseImagesApiStreamResponse(response, mime, opts.onPartialImage)
+    }
+
     return parseImagesApiResponse(await response.json() as ImageApiResponse, mime, controller.signal)
   } finally {
     clearTimeout(timeoutId)
@@ -736,12 +967,15 @@ async function callResponsesImageApiSingle(opts: CallApiOptions, profile: ApiPro
         (opts.maskDataUrl ? getDataUrlEncodedByteSize(opts.maskDataUrl) : 0),
     )
 
-    const body = {
+    const body: Record<string, unknown> = {
       model: profile.model,
       input: createResponsesInput(prompt, inputImageDataUrls),
       tools: [createResponsesImageTool(params, inputImageDataUrls.length > 0, profile, opts.maskDataUrl)],
       tool_choice: 'required',
     }
+    if (profile.streamImages) {
+      body.stream = true
+    }
 
     const response = await fetch(buildApiUrl(profile.baseUrl, 'responses', proxyConfig, useApiProxy), {
       method: 'POST',
@@ -758,6 +992,10 @@ async function callResponsesImageApiSingle(opts: CallApiOptions, profile: ApiPro
       throw new Error(await getApiErrorMessage(response))
     }
 
+    if (profile.streamImages && isEventStreamResponse(response)) {
+      return parseResponsesApiStreamResponse(response, mime, opts.onPartialImage)
+    }
+
     const payload = await response.json() as ResponsesApiResponse
     const imageResults = parseResponsesImageResults(payload, mime)
     const actualParams = mergeActualParams(
diff --git a/src/lib/urlSettings.ts b/src/lib/urlSettings.ts
index 98052401..bc34860a 100644
--- a/src/lib/urlSettings.ts
+++ b/src/lib/urlSettings.ts
@@ -9,7 +9,7 @@ import {
   normalizeSettings,
 } from './apiProfiles'
 
-const URL_SETTING_KEYS = ['settings', 'apiUrl', 'apiKey', 'codexCli', 'apiMode', 'model']
+const URL_SETTING_KEYS = ['settings', 'apiUrl', 'apiKey', 'codexCli', 'apiMode', 'model', 'streamImages']
 
 function getProfileDedupKey(profile: Pick<AppSettings['profiles'][number], 'provider' | 'baseUrl' | 'apiKey' | 'model' | 'apiMode'>) {
   return JSON.stringify([
@@ -86,9 +86,10 @@ export function buildSettingsFromUrlParams(currentSettings: Partial<AppSettings>
   const codexCliParam = searchParams.get('codexCli')
   const apiModeParam = searchParams.get('apiMode')
   const modelParam = searchParams.get('model')
+  const streamImagesParam = searchParams.get('streamImages')
   const apiMode: ApiMode | undefined = apiModeParam === 'images' || apiModeParam === 'responses' ? apiModeParam : undefined
 
-  const hasLegacyOpenAIParams = apiUrlParam !== null || apiKeyParam !== null || codexCliParam !== null || apiMode !== undefined || modelParam !== null
+  const hasLegacyOpenAIParams = apiUrlParam !== null || apiKeyParam !== null || codexCliParam !== null || apiMode !== undefined || modelParam !== null || streamImagesParam !== null
   const settings = importedSettings == null
     ? normalizeSettings(currentSettings)
     : activateFirstImportedProfile(mergeImportedSettings(currentSettings, importedSettings), importedSettings)
@@ -105,6 +106,7 @@ export function buildSettingsFromUrlParams(currentSettings: Partial<AppSettings>
     if (apiKeyParam !== null) profile.apiKey = apiKeyParam.trim()
     if (modelParam !== null && modelParam.trim()) profile.model = modelParam.trim()
     if (codexCliParam !== null) profile.codexCli = codexCliParam.trim().toLowerCase() === 'true'
+    if (streamImagesParam !== null) profile.streamImages = streamImagesParam.trim().toLowerCase() === 'true'
 
     const existingProfile = settings.profiles.find((item) => getProfileDedupKey(item) === getProfileDedupKey(profile))
     if (existingProfile) {
diff --git a/src/store.ts b/src/store.ts
index e3bf922f..14ad4e84 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -376,6 +376,8 @@ interface AppState {
   // 任务列表
   tasks: TaskRecord[]
   setTasks: (t: TaskRecord[]) => void
+  streamPreviews: Record<string, string>
+  setTaskStreamPreview: (taskId: string, image?: string) => void
 
   // 搜索和筛选
   searchQuery: string
@@ -441,7 +443,8 @@ export const useStore = create<AppState>()(
           incoming.timeout !== undefined ||
           incoming.apiMode !== undefined ||
           incoming.codexCli !== undefined ||
-          incoming.apiProxy !== undefined
+          incoming.apiProxy !== undefined ||
+          incoming.streamImages !== undefined
         const merged = normalizeSettings({ ...previous, ...incoming })
         if (hasLegacyOverrides && incoming.profiles === undefined) {
           merged.profiles = merged.profiles.map((profile) =>
@@ -455,6 +458,7 @@ export const useStore = create<AppState>()(
                   apiMode: incoming.apiMode === 'images' || incoming.apiMode === 'responses' ? incoming.apiMode : profile.apiMode,
                   codexCli: incoming.codexCli ?? profile.codexCli,
                   apiProxy: incoming.apiProxy ?? profile.apiProxy,
+                  streamImages: incoming.streamImages ?? profile.streamImages,
                 }
               : profile,
           )
@@ -570,6 +574,18 @@ export const useStore = create<AppState>()(
           ? { supportPromptSkippedForImportedData: false }
           : {}),
       })),
+      streamPreviews: {},
+      setTaskStreamPreview: (taskId, image) => set((s) => {
+        if (image) {
+          if (s.streamPreviews[taskId] === image) return s
+          return { streamPreviews: { ...s.streamPreviews, [taskId]: image } }
+        }
+
+        if (!(taskId in s.streamPreviews)) return s
+        const next = { ...s.streamPreviews }
+        delete next[taskId]
+        return { streamPreviews: next }
+      }),
 
       // Search & Filter
       searchQuery: '',
@@ -1274,10 +1290,16 @@ async function executeTask(taskId: string) {
           customRecoverable: false,
         })
       },
+      onPartialImage: (partial) => {
+        useStore.getState().setTaskStreamPreview(taskId, partial.image)
+      },
     })
 
     const latestBeforeSuccess = useStore.getState().tasks.find((t) => t.id === taskId)
-    if (!latestBeforeSuccess || latestBeforeSuccess.status !== 'running') return
+    if (!latestBeforeSuccess || latestBeforeSuccess.status !== 'running') {
+      useStore.getState().setTaskStreamPreview(taskId)
+      return
+    }
 
     // 存储输出图片
     const outputIds: string[] = []
@@ -1318,8 +1340,12 @@ async function executeTask(taskId: string) {
 
     // 更新任务
     const latestBeforeUpdate = useStore.getState().tasks.find((t) => t.id === taskId)
-    if (!latestBeforeUpdate || latestBeforeUpdate.status !== 'running') return
+    if (!latestBeforeUpdate || latestBeforeUpdate.status !== 'running') {
+      useStore.getState().setTaskStreamPreview(taskId)
+      return
+    }
     clearOpenAIWatchdogTimer(taskId)
+    useStore.getState().setTaskStreamPreview(taskId)
     updateTaskInStore(taskId, {
       outputImages: outputIds,
       rawImageUrls: result.rawImageUrls?.length ? result.rawImageUrls : undefined,
@@ -1347,6 +1373,7 @@ async function executeTask(taskId: string) {
     clearOpenAIWatchdogTimer(taskId)
     const latestTask = useStore.getState().tasks.find((t) => t.id === taskId) ?? task
     if (latestTask.status !== 'running') return
+    useStore.getState().setTaskStreamPreview(taskId)
     const latestFalRequestInfo = falRequestInfo ?? (latestTask.falRequestId && latestTask.falEndpoint
       ? { requestId: latestTask.falRequestId, endpoint: latestTask.falEndpoint }
       : null)
diff --git a/src/types.ts b/src/types.ts
index 7081c511..554e6468 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -64,7 +64,8 @@ export interface ApiProfile {
   codexCli: boolean
   apiProxy: boolean
   responseFormatB64Json?: boolean
-  providerDrafts?: Partial<Record<ApiProvider, Partial<Pick<ApiProfile, 'baseUrl' | 'model' | 'apiMode' | 'codexCli' | 'apiProxy' | 'responseFormatB64Json'>>>>
+  streamImages?: boolean
+  providerDrafts?: Partial<Record<ApiProvider, Partial<Pick<ApiProfile, 'baseUrl' | 'model' | 'apiMode' | 'codexCli' | 'apiProxy' | 'responseFormatB64Json' | 'streamImages'>>>>
 }
 
 export interface AppSettings {
@@ -76,6 +77,7 @@ export interface AppSettings {
   apiMode: ApiMode
   codexCli: boolean
   apiProxy: boolean
+  streamImages?: boolean
   customProviders: CustomProviderDefinition[]
   providerOrder?: string[]
   clearInputAfterSubmit: boolean

From a98f34be8320c842aa29d2ea14730a151a12dfab Mon Sep 17 00:00:00 2001
From: Your Name <mail@llycloud.com>
Date: Tue, 12 May 2026 20:35:47 +0000
Subject: [PATCH 2/4] Allow full referrer policy for iframe deploy

---
 deploy/nginx.conf | 1 +
 1 file changed, 1 insertion(+)

diff --git a/deploy/nginx.conf b/deploy/nginx.conf
index c311a9b6..6c480798 100644
--- a/deploy/nginx.conf
+++ b/deploy/nginx.conf
@@ -5,6 +5,7 @@ server {
     root /usr/share/nginx/html;
     index index.html;
     client_max_body_size 600m;
+    add_header Referrer-Policy "unsafe-url" always;
 
     # gzip 压缩
     gzip on;

From a594b31876eebd3b6fe0aecd4ebdda5274f5d8bd Mon Sep 17 00:00:00 2001
From: Your Name <mail@llycloud.com>
Date: Tue, 12 May 2026 20:43:09 +0000
Subject: [PATCH 3/4] Disable API proxy response buffering

---
 deploy/nginx.conf | 1 +
 1 file changed, 1 insertion(+)

diff --git a/deploy/nginx.conf b/deploy/nginx.conf
index 6c480798..64decf1a 100644
--- a/deploy/nginx.conf
+++ b/deploy/nginx.conf
@@ -44,6 +44,7 @@ server {
         proxy_connect_timeout 60s;
         proxy_send_timeout 600s;
         proxy_read_timeout 600s;
+        proxy_buffering off;
         proxy_request_buffering off;
     }
     # END API PROXY

From 986da686ac5599083f4d08dcc733843dfdeb8b0a Mon Sep 17 00:00:00 2001
From: Your Name <mail@llycloud.com>
Date: Tue, 12 May 2026 20:44:33 +0000
Subject: [PATCH 4/4] Remove compose file from upstream PR

---
 docker-compose.yml | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 docker-compose.yml

diff --git a/docker-compose.yml b/docker-compose.yml
deleted file mode 100644
index f9e57ce1..00000000
--- a/docker-compose.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-services:
-  gpt-image-playground:
-    image: gpt-image-playground:latest
-    pull_policy: build
-    build:
-      context: .
-      dockerfile: deploy/Dockerfile
-      pull: true
-    restart: unless-stopped