From 13d4027559d3bacce06cfc7c4dcbda2d04a15309 Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Sun, 10 Aug 2025 23:34:15 +0800
Subject: [PATCH] fix image simulator

---
 src/app/simulator/[id]/page.tsx | 197 +++++++++++++++++++++++++++++---
 1 file changed, 182 insertions(+), 15 deletions(-)

diff --git a/src/app/simulator/[id]/page.tsx b/src/app/simulator/[id]/page.tsx
index 3927d20..e319ed6 100644
--- a/src/app/simulator/[id]/page.tsx
+++ b/src/app/simulator/[id]/page.tsx
@@ -45,6 +45,8 @@ interface SimulatorRun {
   promptContent?: string | null
   output?: string
   error?: string
+  outputType?: string
+  generatedFilePath?: string
   createdAt: string
   completedAt?: string
   temperature?: number
@@ -97,6 +99,9 @@ export default function SimulatorRunPage({ params }: { params: Promise<{ id: str
   const [isEditing, setIsEditing] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [models, setModels] = useState<Model[]>([])
+  const [generatedImageUrl, setGeneratedImageUrl] = useState<string | null>(null)
+  const [isLoadingImage, setIsLoadingImage] = useState(false)
+  const [imageLoadError, setImageLoadError] = useState(false)
   const [editForm, setEditForm] = useState({
     name: '',
     userInput: '',
@@ -118,6 +123,32 @@ export default function SimulatorRunPage({ params }: { params: Promise<{ id: str
     getParams()
   }, [params])
 
+  const fetchImageUrl = useCallback(async (runId: string) => {
+    try {
+      setIsLoadingImage(true)
+      const response = await fetch(`/api/simulator/${runId}/image`)
+
+      if (response.ok) {
+        const data = await response.json()
+        if (data.fileUrl) {
+          setGeneratedImageUrl(data.fileUrl)
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching image URL:', error)
+    } finally {
+      setIsLoadingImage(false)
+    }
+  }, [])
+
+  const copyToClipboard = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error)
+    }
+  }, [])
+
   const fetchRunCallback = useCallback(async () => {
     if (!runId) return
     try {
@@ -126,7 +157,14 @@ export default function SimulatorRunPage({ params }: { params: Promise<{ id: str
       if (response.ok) {
         const data = await response.json()
         setRun(data)
-        setStreamOutput(data.output || '')
+        
+        // 如果是图片类型且有生成的文件路径，获取临时 URL
+        if (data.outputType === 'image' && data.generatedFilePath) {
+          fetchImageUrl(runId)
+        } else {
+          // 只有非图片类型才设置文本输出
+          setStreamOutput(data.output || '')
+        }
       } else if (response.status === 404) {
         router.push('/simulator')
       }
@@ -135,7 +173,7 @@ export default function SimulatorRunPage({ params }: { params: Promise<{ id: str
     } finally {
       setIsLoading(false)
     }
-  }, [runId, router])
+  }, [runId, router, fetchImageUrl])
 
   const fetchModels = useCallback(async () => {
     try {
@@ -297,14 +335,6 @@ export default function SimulatorRunPage({ params }: { params: Promise<{ id: str
     }
   }
 
-  const copyToClipboard = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text)
-      // You could add a toast notification here
-    } catch (error) {
-      console.error('Error copying to clipboard:', error)
-    }
-  }
 
   const handleDuplicateRun = async () => {
     if (!run || !confirm(t('duplicateRunConfirm'))) {
@@ -847,17 +877,154 @@ export default function SimulatorRunPage({ params }: { params: Promise<{ id: str
                   </div>
                 </div>
               </div>
-            ) : currentOutput ? (
+            ) : (run.outputType === 'image' && generatedImageUrl) || (run.outputType !== 'image' && currentOutput) ? (
               <div>
                 <div className="flex items-center space-x-2 mb-4 text-green-600 dark:text-green-400">
                   <CheckCircle2 className="h-4 w-4" />
                   <span className="text-sm font-medium">{t('completed')}</span>
                 </div>
-                <div className="bg-muted rounded-md p-4 border min-h-32 max-h-96 overflow-y-auto">
-                  <div className="text-sm text-foreground whitespace-pre-wrap">
-                    {currentOutput}
+
+                {/* 图片输出 */}
+                {run.outputType === 'image' && generatedImageUrl && (
+                  <div className="bg-gradient-to-br from-slate-50 via-background to-slate-50 dark:from-slate-900 dark:via-background dark:to-slate-900 rounded-2xl p-8 border shadow-lg">
+                    <div className="text-center mb-6">
+                      <div className="inline-flex items-center space-x-2 px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
+                        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                          <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                          <polyline points="21,15 16,10 5,21"></polyline>
+                        </svg>
+                        <span>生成的图片</span>
+                      </div>
+                    </div>
+                    
+                    <div className="flex justify-center mb-6">
+                      <div className="relative group cursor-pointer">
+                        <div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
+                        <img
+                          src={generatedImageUrl}
+                          alt="Generated image"
+                          className="relative max-w-full max-h-[600px] rounded-xl shadow-2xl border border-white/20 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-3xl"
+                          onError={() => {
+                            console.error('Failed to load image')
+                            setImageLoadError(true)
+                          }}
+                          onLoad={() => {
+                            setImageLoadError(false)
+                          }}
+                          onClick={() => window.open(generatedImageUrl, '_blank')}
+                        />
+                      </div>
+                    </div>
+                    
+                    <div className="flex justify-center space-x-4">
+                      <button
+                        onClick={() => window.open(generatedImageUrl, '_blank')}
+                        className="flex items-center space-x-2 px-4 py-2 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-all duration-200 hover:scale-105 text-sm font-medium"
+                      >
+                        <Eye className="h-4 w-4" />
+                        <span>查看大图</span>
+                      </button>
+                      <button
+                        onClick={async () => {
+                          try {
+                            const response = await fetch(generatedImageUrl)
+                            const blob = await response.blob()
+                            const url = window.URL.createObjectURL(blob)
+                            const a = document.createElement('a')
+                            a.style.display = 'none'
+                            a.href = url
+                            a.download = `generated-image-${run.name || 'untitled'}-${Date.now()}.webp`
+                            document.body.appendChild(a)
+                            a.click()
+                            window.URL.revokeObjectURL(url)
+                            document.body.removeChild(a)
+                          } catch (error) {
+                            console.error('Download failed:', error)
+                          }
+                        }}
+                        className="flex items-center space-x-2 px-4 py-2 bg-green-50 hover:bg-green-100 dark:bg-green-900/30 dark:hover:bg-green-900/50 text-green-600 dark:text-green-400 rounded-lg transition-all duration-200 hover:scale-105 text-sm font-medium"
+                      >
+                        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+                        </svg>
+                        <span>下载图片</span>
+                      </button>
+                      <button
+                        onClick={() => copyToClipboard(generatedImageUrl)}
+                        className="flex items-center space-x-2 px-4 py-2 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-lg transition-all duration-200 hover:scale-105 text-sm font-medium"
+                      >
+                        <Copy className="h-4 w-4" />
+                        <span>复制链接</span>
+                      </button>
+                    </div>
                   </div>
-                </div>
+                )}
+
+                {/* 文本输出 - 只在非图片类型时显示 */}
+                {run.outputType !== 'image' && currentOutput && (
+                  <div className="bg-muted rounded-md p-4 border min-h-32 max-h-96 overflow-y-auto">
+                    <div className="text-sm text-foreground whitespace-pre-wrap">
+                      {currentOutput}
+                    </div>
+                  </div>
+                )}
+
+                {/* 图片错误状态 */}
+                {run.outputType === 'image' && generatedImageUrl && imageLoadError && (
+                  <div className="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950/50 dark:to-red-900/50 rounded-xl p-8 border border-red-200 dark:border-red-800">
+                    <div className="flex flex-col items-center justify-center space-y-4">
+                      <div className="p-3 bg-red-100 dark:bg-red-900 rounded-full">
+                        <svg className="h-8 w-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.19 2.5 1.732 2.5z" />
+                        </svg>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-sm font-medium text-red-800 dark:text-red-200">图片加载失败</p>
+                        <p className="text-xs text-red-600 dark:text-red-400 mt-1">图片可能已过期或无法访问</p>
+                      </div>
+                      <button
+                        onClick={() => {
+                          setImageLoadError(false)
+                          if (runId) {
+                            fetchImageUrl(runId)
+                          }
+                        }}
+                        className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-xs rounded-lg transition-colors"
+                      >
+                        重新加载
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {/* 图片加载中状态 */}
+                {run.outputType === 'image' && !generatedImageUrl && isLoadingImage && (
+                  <div className="bg-gradient-to-br from-slate-50 via-background to-slate-50 dark:from-slate-900 dark:via-background dark:to-slate-900 rounded-2xl p-12 border shadow-lg">
+                    <div className="flex flex-col items-center justify-center space-y-6">
+                      <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full blur-md opacity-30 animate-pulse"></div>
+                        <div className="relative p-4 bg-background rounded-full border shadow-sm">
+                          <RefreshCw className="h-8 w-8 animate-spin text-primary" />
+                        </div>
+                      </div>
+                      <div className="text-center space-y-2">
+                        <p className="text-lg font-semibold text-foreground">正在获取图片</p>
+                        <p className="text-sm text-muted-foreground">正在从云端加载您生成的图片...</p>
+                      </div>
+                      <div className="w-32 h-1 bg-muted rounded-full overflow-hidden">
+                        <div className="h-full bg-gradient-to-r from-primary to-primary/50 rounded-full animate-pulse" />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : run.outputType === 'image' && !generatedImageUrl && !isLoadingImage ? (
+              <div className="text-center py-12">
+                <Eye className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
+                <p className="text-muted-foreground">
+                  等待图片生成完成...
+                </p>
               </div>
             ) : (
               <div className="text-center py-12">