From b68431828c01203f79224656faf3f16ac9d49e9c Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Mon, 25 Aug 2025 15:36:15 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/Routes/MjRoute.py                  |   37 +-
 .../__pycache__/MjRoute.cpython-310.pyc       |  Bin 4059 -> 4010 bytes
 dsLightRag/static/Midjourney/mj.html          | 1528 +++++++++--------
 3 files changed, 869 insertions(+), 696 deletions(-)

diff --git a/dsLightRag/Routes/MjRoute.py b/dsLightRag/Routes/MjRoute.py
index fbf4653b..c6bd6142 100644
--- a/dsLightRag/Routes/MjRoute.py
+++ b/dsLightRag/Routes/MjRoute.py
@@ -13,7 +13,7 @@ from Config import Config
 import asyncio
 import threading
 from fastapi.responses import StreamingResponse
-
+from fastapi import APIRouter, Request, HTTPException, BackgroundTasks
 # 创建路由路由器
 router = APIRouter(prefix="/api/mj", tags=["文生图"])
 
@@ -144,24 +144,21 @@ async def submit_imagine(request: ImagineRequest, background_tasks: BackgroundTa
         raise HTTPException(status_code=500, detail=f"提交文生图请求失败: {str(e)}")
 
 
-@router.get("/task_status", response_model=TaskStatusResponse)
-async def get_task_status(task_id: str = Query(..., description="任务ID")):
-    """
-    查询文生图任务状态
+# 在文件顶部确保已定义任务状态缓存
+task_status_cache = {}
+@router.get("/task_status")
+async def get_task_status(task_id: str):
+    if not task_id:
+        raise HTTPException(status_code=400, detail="task_id 参数缺失")
     
-    Args:
-        task_id: 任务ID
-    
-    Returns:
-        任务状态信息
-    """
-    if task_id not in TASK_STATUS:
+    # 将所有 task_status_store 替换为 task_status_cache
+    if task_id not in task_status_cache:
         raise HTTPException(status_code=404, detail="任务ID不存在")
-
-    return TaskStatusResponse(
-        task_id=task_id,
-        status=TASK_STATUS[task_id]["status"],
-        image_url=TASK_STATUS[task_id]["image_url"],
-        progress=TASK_STATUS[task_id]["progress"],
-        error=TASK_STATUS[task_id]["error"]
-    )
+    
+    return {
+        "task_id": task_id,
+        "status": task_status_cache[task_id]["status"],
+        "progress": task_status_cache[task_id]["progress"] ,
+        "result": task_status_cache[task_id]["result"],
+        "error": task_status_cache[task_id]["error"]
+    }
diff --git a/dsLightRag/Routes/__pycache__/MjRoute.cpython-310.pyc b/dsLightRag/Routes/__pycache__/MjRoute.cpython-310.pyc
index 3ffd6196785c36ed2d086f6c59b3271c6d14134f..5305056860cfd98ff616df316561a0bd8e523bc3 100644
GIT binary patch
delta 1288
zcmZuw&2Q665ck@S<2a6!(DWl8O_~6u5eE)H-#Zi#Qq_tlct{{2<VzKGx2a2$z}n#e
zh(O^0NEM(3!GS|7ae((Fo{*lNfE!o-0&{KP2p3LVm{|)561MiInVp%Po!Q^Kt^84O
zI;oVUz_;f7wd{@FbxOp&yZdR6D%4y}wrtmK<=uQM<)&I`H%$~~(*(7egeKQjx4@K*
zA}ehYcidClGE1<ET-K7BS8%ZjYR@S13QbYxx<Vb6y{5TU(9<*ndPeFsR#@3ivof-R
zQFPn-FDe~kRhnbzC7lk_k?Z<3;_iSXJ6U04l8$Z?I>x}6=4nCNc2ROtsTaj%a-&e!
zc?>EF<0sg;F7pF!fW}P#VW^+Shfq_|L0|R2ngj8v!i%_F6lHCCGz%iCKE_yzNirly
zcvhUz{_72++X%ua!WcpxVFCe<<yC-C^V$Kgp&A|hO)8-@4uEdH4S*Rihs=VO3+5iL
z)o6NcRwtpunSZv^_Sr(KL)r5U{kU4KfK!wZ50Po=8sCPptS<LF6W=1FB0ib*;h#A3
zDX}-PNUGvN;xws=kBPZl27*IlwbN`e9_n6usl#jHH>;Gw3hO2><Ka`nx2A_=eS{4Z
zRuZqQH>50XCTDBtAL`w%N5dH6KE4k__an#~X2geN-iYog9D8#9S2W31;X~Eqd?#*9
zB1BnHItUON!7^tJ$`9bq_rA)O&WVfmq23%=F4%j5hJR+k4;n$&muD;z*#G*WjG11;
z@=pO=C6^RG5h#>Um1^ti8t4HzPxuh*=`{9z?~(%aH1c4TQv91_Mp6&V30T&n7|=2K
zyLShYb&+B6MjoB$-(Gun|JnOjFZz%F<%hxG-9s0o+}6vN{ac$yX1D%d@BjU<|L6&q
zPgeyKpFzML)nidper8g659<oE1LZF)HWrtGM^V&|Jqy!K7Ay=n--l=)$*o?|RhyWa
zO;pVy(Qka_$M6DEVH|1VwVR>7;&<A78grVo5wIZbwODBKXzqMIEB<sinHS}BvBy*B
zX7Elo0EQ(X^HE7QE+<NI1UWb`QP>kXDWQJ01A~fh%a0=LMZn7pkU*A(ObE>xn3V1+
jI|z+cd^{N@O#G8Bj*JmUwX~9!(K1HP%n^OXgvtH_zH<^-

delta 1282
zcmZuw&1)1%6z}Tpnd#~IOfvbHOi$9|CxfD**$5%~rO_zJ9@dM_C5)-c*qWJ%)zuz$
zg%}gqB`^!2mId+PW<gjNAqT;Ws0aUx^57-Lz3joWmwm6s#0aUPe!P11-m71|dhegn
zH>25hCgU0~-r7&D|2MFf^~euvM;<S-G<9gQL8#j?Yei=KIm}Ayq~--it;~{aL@#&F
zEE>4jC{0Zo(*{k`%!)xXtY_J(`LNH@9PD#?Utz@?`)FQ!j-VIq>6o;a`LvJa=4@J^
z{VVn|sqF{5BM0aJtDphP(m^^ziyd>0&|wCSv_!p?7#JR;<g!sM%T@BLJZgR{_rf!{
z383uxAQZe0#K#67M)k0qvc?DVAeLZ-4uESoBu@&2=jEF9Y`TDE{RjgHg9t+iqX-z5
z`vA%cT7p+_+YP)UVPNjb-|Qmsp8jn&&B_RBw7ZWII#n&+gR<t@_jEk5NyvySC9C~=
z81uvOYI2tN@<s9rsmKBMd?5$UDn8$CG#FQQ(3)%Wid=BL4Dziyyo|vQ%lq#5kdLN>
z?V^bcRY@+TO43X{A!WIdn))6cl^sO^RWZadehM^v3_(-HD>>GP%7)RkW*}yQX1x)#
z*r!LxvGk$o(`cl#5(lZ8;0I7~5TQ#6rLO^0TwLd@PWdEiKBrJ;@0?suf4g`NPJT)s
z7xnPwOepFi3XetjVVlpNzgu0uI8`MoMOiq@g9Q<^Tl#`o0tVXy<piwPu)+%fOXQ9r
zjN62#1fhhQ)asb`h%ixm$AC(-i`!DHcxGFS?<f;s;&ftAZOQ0oi0Aq+wjMtEcjK?E
zKYn@t`@?q+UUu2NUwyW9cS(MT4V~5e13KYv^VVJ(eq<uzt#CqbFxGD8%~$JNOB?z~
zu4TN%@8CkdM|D(V-PG=NWO4m#_!ry*sFJSjm-$w?1`{*8@+`qL#6~dhI;k`<O_R72
z#MLwYkzc|{hg1T~FK9KCeItbQe+63Q(7IqEXfow+b}M3`2>Dq#pXKDde48yTsyJ^)
z0%|r1S6<TP%XP=;V$)<lcO15<rmgISHZ(F81V4#@40aWbevYncXR_I*(LDPG|2{kc
bfbG3A<#Mj4H*2|;XXUMYyx<f_I`GN=&@>;D

diff --git a/dsLightRag/static/Midjourney/mj.html b/dsLightRag/static/Midjourney/mj.html
index e9d0df9a..d984e6ed 100644
--- a/dsLightRag/static/Midjourney/mj.html
+++ b/dsLightRag/static/Midjourney/mj.html
@@ -7,7 +7,7 @@
     <!-- 引入 Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- 引入 Font Awesome -->
-    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <!-- Tailwind 配置 -->
     <script>
         tailwind.config = {
@@ -35,17 +35,21 @@
             .content-auto {
                 content-visibility: auto;
             }
+
             .glass-effect {
                 backdrop-filter: blur(10px);
                 background-color: rgba(255, 255, 255, 0.7);
             }
+
             .glass-effect-dark {
                 backdrop-filter: blur(10px);
                 background-color: rgba(15, 23, 42, 0.7);
             }
+
             .text-shadow {
                 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             }
+
             .transition-all-300 {
                 transition: all 300ms ease-in-out;
             }
@@ -53,703 +57,812 @@
     </style>
 </head>
 <body class="min-h-screen bg-gradient-to-br from-light to-gray-100 dark:from-dark dark:to-gray-900 text-gray-800 dark:text-gray-100 transition-colors duration-300">
-    <!-- 导航栏 -->
-    <header class="sticky top-0 z-50 glass-effect dark:glass-effect-dark border-b border-gray-200 dark:border-gray-700 shadow-sm">
-        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
-            <div class="flex items-center space-x-2">
-                <i class="fa fa-paint-brush text-primary text-2xl"></i>
-                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Midjourney AI</h1>
+<!-- 导航栏 -->
+<header class="sticky top-0 z-50 glass-effect dark:glass-effect-dark border-b border-gray-200 dark:border-gray-700 shadow-sm">
+    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+        <div class="flex items-center space-x-2">
+            <i class="fa fa-paint-brush text-primary text-2xl"></i>
+            <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Midjourney AI</h1>
+        </div>
+        <nav class="hidden md:flex items-center space-x-6">
+            <a href="#generator"
+               class="font-medium hover:text-primary dark:hover:text-primary transition-colors">生成器</a>
+            <a href="#history"
+               class="font-medium hover:text-primary dark:hover:text-primary transition-colors">历史记录</a>
+            <a href="#gallery" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">画廊</a>
+        </nav>
+        <div class="flex items-center space-x-3">
+            <button id="themeToggle"
+                    class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                <i class="fa fa-moon-o dark:hidden"></i>
+                <i class="fa fa-sun-o hidden dark:inline-block"></i>
+            </button>
+            <button class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                    id="menuToggle">
+                <i class="fa fa-bars"></i>
+            </button>
+        </div>
+    </div>
+    <!-- 移动端菜单 -->
+    <div id="mobileMenu"
+         class="hidden md:hidden glass-effect dark:glass-effect-dark border-t border-gray-200 dark:border-gray-700">
+        <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
+            <a href="#generator" class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">生成器</a>
+            <a href="#history" class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">历史记录</a>
+            <a href="#gallery"
+               class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">画廊</a>
+        </div>
+    </div>
+</header>
+
+<main class="container mx-auto px-4 py-8">
+    <!-- 英雄区 -->
+    <section class="text-center mb-12">
+        <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow">
+            <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">释放您的创意</span>
+        </h2>
+        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
+            使用 Midjourney AI 生成令人惊叹的图像，只需输入文字描述或上传参考图片
+        </p>
+    </section>
+
+    <!-- 生成器区域 -->
+    <section id="generator"
+             class="mb-16 bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
+        <!-- 选项卡 -->
+        <div class="flex border-b border-gray-200 dark:border-gray-700">
+            <button id="textToImageTab"
+                    class="flex-1 py-4 px-6 text-center font-medium text-primary border-b-2 border-primary dark:text-primary dark:border-primary transition-all-300">
+                <i class="fa fa-file-text-o mr-2"></i>文生图
+            </button>
+            <button id="imageToImageTab"
+                    class="flex-1 py-4 px-6 text-center font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-primary dark:hover:text-primary transition-all-300">
+                <i class="fa fa-picture-o mr-2"></i>图生图
+            </button>
+        </div>
+
+        <!-- 文生图面板 -->
+        <div id="textToImagePanel" class="p-6 md:p-8 space-y-6">
+            <div class="space-y-4">
+                <label for="prompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">提示词 <span
+                        class="text-red-500">*</span></label>
+                <div class="flex space-x-2">
+                    <textarea id="prompt" rows="4"
+                              class="flex-1 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary resize-none transition-all-300"
+                              placeholder="描述您想要生成的图像..."></textarea>
+                    <button id="randomPromptBtn"
+                            class="p-3 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all-300"
+                            title="随机示例">
+                        <i class="fa fa-random text-primary mr-1"></i>随机
+                    </button>
+                </div>
+                <div class="text-xs text-gray-500 dark:text-gray-400">
+                    提示越详细，生成的图像越符合您的预期。尝试指定风格、细节、光照等。
+                </div>
             </div>
-            <nav class="hidden md:flex items-center space-x-6">
-                <a href="#generator" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">生成器</a>
-                <a href="#history" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">历史记录</a>
-                <a href="#gallery" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">画廊</a>
-            </nav>
-            <div class="flex items-center space-x-3">
-                <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
-                    <i class="fa fa-moon-o dark:hidden"></i>
-                    <i class="fa fa-sun-o hidden dark:inline-block"></i>
-                </button>
-                <button class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" id="menuToggle">
-                    <i class="fa fa-bars"></i>
-                </button>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="space-y-2">
+                    <label for="style" class="block text-sm font-medium text-gray-700 dark:text-gray-300">风格</label>
+                    <select id="style"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
+                        <option value="default">默认</option>
+                        <option value="realistic">写实</option>
+                        <option value="cartoon">卡通</option>
+                        <option value="anime">动漫</option>
+                        <option value="watercolor">水彩</option>
+                        <option value="oil">油画</option>
+                    </select>
+                </div>
+
+                <div class="space-y-2">
+                    <label for="aspectRatio"
+                           class="block text-sm font-medium text-gray-700 dark:text-gray-300">比例</label>
+                    <select id="aspectRatio"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
+                        <option value="1:1">1:1 (正方形)</option>
+                        <option value="16:9">16:9 (宽屏)</option>
+                        <option value="9:16">9:16 (竖屏)</option>
+                        <option value="4:3">4:3 (标准)</option>
+                        <option value="3:2">3:2 (照片)</option>
+                    </select>
+                </div>
+
+                <div class="space-y-2">
+                    <label for="quality" class="block text-sm font-medium text-gray-700 dark:text-gray-300">质量</label>
+                    <select id="quality"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
+                        <option value="standard">标准</option>
+                        <option value="high">高清</option>
+                        <option value="ultra">超高清</option>
+                    </select>
+                </div>
             </div>
         </div>
-        <!-- 移动端菜单 -->
-        <div id="mobileMenu" class="hidden md:hidden glass-effect dark:glass-effect-dark border-t border-gray-200 dark:border-gray-700">
-            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
-                <a href="#generator" class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">生成器</a>
-                <a href="#history" class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">历史记录</a>
-                <a href="#gallery" class="font-medium hover:text-primary dark:hover:text-primary transition-colors py-2">画廊</a>
+
+        <!-- 图生图面板 -->
+        <div id="imageToImagePanel" class="p-6 md:p-8 space-y-6 hidden">
+            <div class="space-y-4">
+                <label for="imagePrompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">提示词 <span
+                        class="text-red-500">*</span></label>
+                <div class="flex space-x-2">
+                    <textarea id="imagePrompt" rows="2"
+                              class="flex-1 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary resize-none transition-all-300"
+                              placeholder="描述您想要生成的图像..."></textarea>
+                    <button id="randomImagePromptBtn"
+                            class="p-3 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-all-300"
+                            title="随机示例">
+                        <i class="fa fa-random text-primary mr-1"></i>随机
+                    </button>
+                </div>
+            </div>
+
+            <div class="space-y-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">上传参考图片 <span
+                        class="text-red-500">*</span></label>
+                <div id="imageUploadArea"
+                     class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-primary dark:hover:border-primary transition-all-300 cursor-pointer bg-gray-50 dark:bg-gray-900">
+                    <input type="file" id="imageUpload" accept="image/*" class="hidden">
+                    <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
+                    <p class="text-gray-500 dark:text-gray-400 mb-2">拖放图片到此处，或</p>
+                    <button id="browseImage"
+                            class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300">
+                        浏览文件
+                    </button>
+                </div>
+                <div id="imagePreview" class="hidden space-y-2">
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">预览：</p>
+                    <img id="previewImage" src="" alt="预览图片"
+                         class="max-h-64 object-contain rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+                    <button id="removeImage"
+                            class="text-red-500 hover:text-red-600 text-sm flex items-center transition-colors">
+                        <i class="fa fa-times-circle mr-1"></i> 移除图片
+                    </button>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="space-y-2">
+                    <label for="imageStyle"
+                           class="block text-sm font-medium text-gray-700 dark:text-gray-300">风格</label>
+                    <select id="imageStyle"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
+                        <option value="default">默认</option>
+                        <option value="realistic">写实</option>
+                        <option value="cartoon">卡通</option>
+                        <option value="anime">动漫</option>
+                        <option value="watercolor">水彩</option>
+                        <option value="oil">油画</option>
+                    </select>
+                </div>
+
+                <div class="space-y-2">
+                    <label for="imageAspectRatio"
+                           class="block text-sm font-medium text-gray-700 dark:text-gray-300">比例</label>
+                    <select id="imageAspectRatio"
+                            class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
+                        <option value="1:1">1:1 (正方形)</option>
+                        <option value="16:9">16:9 (宽屏)</option>
+                        <option value="9:16">9:16 (竖屏)</option>
+                        <option value="4:3">4:3 (标准)</option>
+                        <option value="3:2">3:2 (照片)</option>
+                    </select>
+                </div>
+
+                <div class="space-y-2">
+                    <label for="imageStrength" class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考强度
+                        (0-100)</label>
+                    <input type="range" id="imageStrength" min="0" max="100" value="70"
+                           class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-primary">
+                    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+                        <span>更创意</span>
+                        <span id="strengthValue">70</span>
+                        <span>更相似</span>
+                    </div>
+                </div>
             </div>
         </div>
-    </header>
 
-    <main class="container mx-auto px-4 py-8">
-        <!-- 英雄区 -->
-        <section class="text-center mb-12">
-            <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow">
-                <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">释放您的创意</span>
-            </h2>
-            <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
-                使用 Midjourney AI 生成令人惊叹的图像，只需输入文字描述或上传参考图片
-            </p>
-        </section>
-
-        <!-- 生成器区域 -->
-        <section id="generator" class="mb-16 bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
-            <!-- 选项卡 -->
-            <div class="flex border-b border-gray-200 dark:border-gray-700">
-                <button id="textToImageTab" class="flex-1 py-4 px-6 text-center font-medium text-primary border-b-2 border-primary dark:text-primary dark:border-primary transition-all-300">
-                    <i class="fa fa-file-text-o mr-2"></i>文生图
-                </button>
-                <button id="imageToImageTab" class="flex-1 py-4 px-6 text-center font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-primary dark:hover:text-primary transition-all-300">
-                    <i class="fa fa-picture-o mr-2"></i>图生图
-                </button>
+        <!-- 生成按钮 -->
+        <div class="p-6 md:p-8 bg-gray-50 dark:bg-gray-900 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <div class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
+                <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
+                <span>提示：生成高质量图像可能需要几秒钟时间</span>
             </div>
+            <button id="generateBtn"
+                    class="px-8 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all-300 font-medium flex items-center">
+                <i class="fa fa-magic mr-2"></i>生成图像
+            </button>
+        </div>
+    </section>
 
-            <!-- 文生图面板 -->
-            <div id="textToImagePanel" class="p-6 md:p-8 space-y-6">
-                <div class="space-y-4">
-                    <label for="prompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">提示词 <span class="text-red-500">*</span></label>
-                    <textarea id="prompt" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary resize-none transition-all-300" placeholder="描述您想要生成的图像..."></textarea>
-                    <div class="text-xs text-gray-500 dark:text-gray-400">
-                        提示越详细，生成的图像越符合您的预期。尝试指定风格、细节、光照等。
+    <!-- 生成状态区域 -->
+    <section id="statusSection" class="mb-16 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
+            <div class="flex flex-col items-center text-center space-y-6">
+                <div id="thinkingIndicator" class="flex flex-col items-center space-y-4">
+                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center animate-pulse-slow">
+                        <i class="fa fa-cog fa-spin text-2xl text-primary"></i>
                     </div>
+                    <h3 class="text-xl font-semibold">AI 正在创作中...</h3>
+                    <p class="text-gray-600 dark:text-gray-300 max-w-md">
+                        请稍候，我们的 AI 正在努力为您生成精美的图像
+                    </p>
                 </div>
 
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div class="space-y-2">
-                        <label for="style" class="block text-sm font-medium text-gray-700 dark:text-gray-300">风格</label>
-                        <select id="style" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
-                            <option value="default">默认</option>
-                            <option value="realistic">写实</option>
-                            <option value="cartoon">卡通</option>
-                            <option value="anime">动漫</option>
-                            <option value="watercolor">水彩</option>
-                            <option value="oil">油画</option>
-                        </select>
-                    </div>
+                <div id="progressBarContainer"
+                     class="w-full max-w-2xl bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
+                    <div id="progressBar"
+                         class="bg-gradient-to-r from-primary to-secondary h-full w-0 transition-all duration-300"></div>
+                </div>
 
-                    <div class="space-y-2">
-                        <label for="aspectRatio" class="block text-sm font-medium text-gray-700 dark:text-gray-300">比例</label>
-                        <select id="aspectRatio" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
-                            <option value="1:1">1:1 (正方形)</option>
-                            <option value="16:9">16:9 (宽屏)</option>
-                            <option value="9:16">9:16 (竖屏)</option>
-                            <option value="4:3">4:3 (标准)</option>
-                            <option value="3:2">3:2 (照片)</option>
-                        </select>
-                    </div>
-
-                    <div class="space-y-2">
-                        <label for="quality" class="block text-sm font-medium text-gray-700 dark:text-gray-300">质量</label>
-                        <select id="quality" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
-                            <option value="standard">标准</option>
-                            <option value="high">高清</option>
-                            <option value="ultra">超高清</option>
-                        </select>
-                    </div>
+                <div class="text-sm text-gray-500 dark:text-gray-400">
+                    <span id="progressText">0%</span> 完成
                 </div>
             </div>
+        </div>
+    </section>
 
-            <!-- 图生图面板 -->
-            <div id="imageToImagePanel" class="p-6 md:p-8 space-y-6 hidden">
-                <div class="space-y-4">
-                    <label for="imagePrompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">提示词 <span class="text-red-500">*</span></label>
-                    <textarea id="imagePrompt" rows="2" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-primary resize-none transition-all-300" placeholder="描述您想要生成的图像..."></textarea>
-                </div>
+    <!-- 结果展示区域 -->
+    <section id="resultSection" class="mb-16 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
+            <div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
+                <h3 class="text-xl font-semibold mb-2">生成结果</h3>
+                <p class="text-gray-600 dark:text-gray-300">您的图像已成功生成</p>
+            </div>
 
-                <div class="space-y-4">
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">上传参考图片 <span class="text-red-500">*</span></label>
-                    <div id="imageUploadArea" class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-primary dark:hover:border-primary transition-all-300 cursor-pointer bg-gray-50 dark:bg-gray-900">
-                        <input type="file" id="imageUpload" accept="image/*" class="hidden">
-                        <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
-                        <p class="text-gray-500 dark:text-gray-400 mb-2">拖放图片到此处，或</p>
-                        <button id="browseImage" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300">浏览文件</button>
-                    </div>
-                    <div id="imagePreview" class="hidden space-y-2">
-                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">预览：</p>
-                        <img id="previewImage" src="" alt="预览图片" class="max-h-64 object-contain rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
-                        <button id="removeImage" class="text-red-500 hover:text-red-600 text-sm flex items-center transition-colors">
-                            <i class="fa fa-times-circle mr-1"></i> 移除图片
+            <div class="p-6 md:p-8 flex flex-col items-center">
+                <div id="resultImageContainer" class="relative mb-8 max-w-3xl mx-auto">
+                    <img id="resultImage" src="" alt="生成的图像"
+                         class="max-w-full h-auto rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg transform transition-all duration-500 hover:shadow-xl">
+                    <div class="absolute top-4 right-4 flex space-x-2">
+                        <button id="downloadBtn"
+                                class="p-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-all-300"
+                                title="下载图片">
+                            <i class="fa fa-download"></i>
+                        </button>
+                        <button id="regenerateBtn"
+                                class="p-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-all-300"
+                                title="重新生成">
+                            <i class="fa fa-refresh"></i>
                         </button>
                     </div>
                 </div>
 
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div class="space-y-2">
-                        <label for="imageStyle" class="block text-sm font-medium text-gray-700 dark:text-gray-300">风格</label>
-                        <select id="imageStyle" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
-                            <option value="default">默认</option>
-                            <option value="realistic">写实</option>
-                            <option value="cartoon">卡通</option>
-                            <option value="anime">动漫</option>
-                            <option value="watercolor">水彩</option>
-                            <option value="oil">油画</option>
-                        </select>
-                    </div>
-
-                    <div class="space-y-2">
-                        <label for="imageAspectRatio" class="block text-sm font-medium text-gray-700 dark:text-gray-300">比例</label>
-                        <select id="imageAspectRatio" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary transition-all-300">
-                            <option value="1:1">1:1 (正方形)</option>
-                            <option value="16:9">16:9 (宽屏)</option>
-                            <option value="9:16">9:16 (竖屏)</option>
-                            <option value="4:3">4:3 (标准)</option>
-                            <option value="3:2">3:2 (照片)</option>
-                        </select>
-                    </div>
-
-                    <div class="space-y-2">
-                        <label for="imageStrength" class="block text-sm font-medium text-gray-700 dark:text-gray-300">参考强度 (0-100)</label>
-                        <input type="range" id="imageStrength" min="0" max="100" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-primary">
-                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
-                            <span>更创意</span>
-                            <span id="strengthValue">70</span>
-                            <span>更相似</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 生成按钮 -->
-            <div class="p-6 md:p-8 bg-gray-50 dark:bg-gray-900 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
-                <div class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
-                    <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
-                    <span>提示：生成高质量图像可能需要几秒钟时间</span>
-                </div>
-                <button id="generateBtn" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all-300 font-medium flex items-center">
-                    <i class="fa fa-magic mr-2"></i>生成图像
-                </button>
-            </div>
-        </section>
-
-        <!-- 生成状态区域 -->
-        <section id="statusSection" class="mb-16 hidden">
-            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
-                <div class="flex flex-col items-center text-center space-y-6">
-                    <div id="thinkingIndicator" class="flex flex-col items-center space-y-4">
-                        <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center animate-pulse-slow">
-                            <i class="fa fa-cog fa-spin text-2xl text-primary"></i>
-                        </div>
-                        <h3 class="text-xl font-semibold">AI 正在创作中...</h3>
-                        <p class="text-gray-600 dark:text-gray-300 max-w-md">
-                            请稍候，我们的 AI 正在努力为您生成精美的图像
-                        </p>
-                    </div>
-
-                    <div id="progressBarContainer" class="w-full max-w-2xl bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
-                        <div id="progressBar" class="bg-gradient-to-r from-primary to-secondary h-full w-0 transition-all duration-300"></div>
-                    </div>
-
-                    <div class="text-sm text-gray-500 dark:text-gray-400">
-                        <span id="progressText">0%</span> 完成
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- 结果展示区域 -->
-        <section id="resultSection" class="mb-16 hidden">
-            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
-                <div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
-                    <h3 class="text-xl font-semibold mb-2">生成结果</h3>
-                    <p class="text-gray-600 dark:text-gray-300">您的图像已成功生成</p>
-                </div>
-
-                <div class="p-6 md:p-8 flex flex-col items-center">
-                    <div id="resultImageContainer" class="relative mb-8 max-w-3xl mx-auto">
-                        <img id="resultImage" src="" alt="生成的图像" class="max-w-full h-auto rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg transform transition-all duration-500 hover:shadow-xl">
-                        <div class="absolute top-4 right-4 flex space-x-2">
-                            <button id="downloadBtn" class="p-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-all-300" title="下载图片">
-                                <i class="fa fa-download"></i>
-                            </button>
-                            <button id="regenerateBtn" class="p-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-all-300" title="重新生成">
-                                <i class="fa fa-refresh"></i>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="flex flex-wrap justify-center gap-4 w-full max-w-2xl">
-                        <button id="variationBtn" class="flex-1 px-4 py-2 border border-primary text-primary hover:bg-primary/10 rounded-lg transition-all-300 font-medium flex items-center justify-center">
-                            <i class="fa fa-random mr-2"></i>生成变体
-                        </button>
-                        <button id="upscaleBtn" class="flex-1 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300 font-medium flex items-center justify-center">
-                            <i class="fa fa-search-plus mr-2"></i>放大图像
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- 历史记录区域 -->
-        <section id="history" class="mb-16">
-            <div class="flex justify-between items-center mb-6">
-                <h3 class="text-2xl font-bold">历史记录</h3>
-                <button id="clearHistoryBtn" class="text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 transition-colors">
-                    清除全部
-                </button>
-            </div>
-
-            <div id="historyGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                <!-- 历史记录项会通过 JavaScript 动态添加 -->
-                <div class="col-span-full text-center py-12 text-gray-500 dark:text-gray-400">
-                    <i class="fa fa-history text-4xl mb-4"></i>
-                    <p>暂无历史记录</p>
-                    <p class="text-sm mt-2">开始生成图像以保存到历史记录</p>
-                </div>
-            </div>
-        </section>
-
-        <!-- 画廊区域 -->
-        <section id="gallery" class="mb-16">
-            <h3 class="text-2xl font-bold mb-6">精选画廊</h3>
-            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
-                    <img src="https://picsum.photos/seed/art1/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
-                    <div class="p-4 bg-white dark:bg-gray-800">
-                        <p class="font-medium truncate">梦幻城堡，超现实主义风格</p>
-                    </div>
-                </div>
-                <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
-                    <img src="https://picsum.photos/seed/art2/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
-                    <div class="p-4 bg-white dark:bg-gray-800">
-                        <p class="font-medium truncate">未来城市，赛博朋克风格</p>
-                    </div>
-                </div>
-                <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
-                    <img src="https://picsum.photos/seed/art3/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
-                    <div class="p-4 bg-white dark:bg-gray-800">
-                        <p class="font-medium truncate">奇幻森林，童话风格</p>
-                    </div>
-                </div>
-                <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
-                    <img src="https://picsum.photos/seed/art4/600/400" alt="艺术作品" class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
-                    <div class="p-4 bg-white dark:bg-gray-800">
-                        <p class="font-medium truncate">抽象艺术，色彩斑斓</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </main>
-
-    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
-        <div class="container mx-auto px-4">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="flex items-center space-x-2 mb-4 md:mb-0">
-                    <i class="fa fa-paint-brush text-primary text-xl"></i>
-                    <h2 class="text-lg font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Midjourney AI</h2>
-                </div>
-                <div class="text-sm text-gray-500 dark:text-gray-400 mb-4 md:mb-0">
-                    © 2023 Midjourney AI. 保留所有权利。
-                </div>
-                <div class="flex space-x-4">
-                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
-                        <i class="fa fa-github text-xl"></i>
-                    </a>
-                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
-                        <i class="fa fa-twitter text-xl"></i>
-                    </a>
-                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
-                        <i class="fa fa-instagram text-xl"></i>
-                    </a>
+                <div class="flex flex-wrap justify-center gap-4 w-full max-w-2xl">
+                    <button id="variationBtn"
+                            class="flex-1 px-4 py-2 border border-primary text-primary hover:bg-primary/10 rounded-lg transition-all-300 font-medium flex items-center justify-center">
+                        <i class="fa fa-random mr-2"></i>生成变体
+                    </button>
+                    <button id="upscaleBtn"
+                            class="flex-1 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300 font-medium flex items-center justify-center">
+                        <i class="fa fa-search-plus mr-2"></i>放大图像
+                    </button>
                 </div>
             </div>
         </div>
-    </footer>
+    </section>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // 主题切换功能
-            const themeToggle = document.getElementById('themeToggle');
-            themeToggle.addEventListener('click', function() {
-                document.documentElement.classList.toggle('dark');
-                localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
-            });
-    
-            // 检查本地存储的主题偏好
-            if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                document.documentElement.classList.add('dark');
+    <!-- 历史记录区域 -->
+    <section id="history" class="mb-16">
+        <div class="flex justify-between items-center mb-6">
+            <h3 class="text-2xl font-bold">历史记录</h3>
+            <button id="clearHistoryBtn"
+                    class="text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 transition-colors">
+                清除全部
+            </button>
+        </div>
+
+        <div id="historyGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            <!-- 历史记录项会通过 JavaScript 动态添加 -->
+            <div class="col-span-full text-center py-12 text-gray-500 dark:text-gray-400">
+                <i class="fa fa-history text-4xl mb-4"></i>
+                <p>暂无历史记录</p>
+                <p class="text-sm mt-2">开始生成图像以保存到历史记录</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- 画廊区域 -->
+    <section id="gallery" class="mb-16">
+        <h3 class="text-2xl font-bold mb-6">精选画廊</h3>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
+                <img src="https://picsum.photos/seed/art1/600/400" alt="艺术作品"
+                     class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="p-4 bg-white dark:bg-gray-800">
+                    <p class="font-medium truncate">梦幻城堡，超现实主义风格</p>
+                </div>
+            </div>
+            <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
+                <img src="https://picsum.photos/seed/art2/600/400" alt="艺术作品"
+                     class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="p-4 bg-white dark:bg-gray-800">
+                    <p class="font-medium truncate">未来城市，赛博朋克风格</p>
+                </div>
+            </div>
+            <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
+                <img src="https://picsum.photos/seed/art3/600/400" alt="艺术作品"
+                     class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="p-4 bg-white dark:bg-gray-800">
+                    <p class="font-medium truncate">奇幻森林，童话风格</p>
+                </div>
+            </div>
+            <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group">
+                <img src="https://picsum.photos/seed/art4/600/400" alt="艺术作品"
+                     class="w-full h-60 object-cover transition-transform duration-500 group-hover:scale-110">
+                <div class="p-4 bg-white dark:bg-gray-800">
+                    <p class="font-medium truncate">抽象艺术，色彩斑斓</p>
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+
+<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
+    <div class="container mx-auto px-4">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                <i class="fa fa-paint-brush text-primary text-xl"></i>
+                <h2 class="text-lg font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                    Midjourney AI</h2>
+            </div>
+            <div class="text-sm text-gray-500 dark:text-gray-400 mb-4 md:mb-0">
+                © 2023 Midjourney AI. 保留所有权利。
+            </div>
+            <div class="flex space-x-4">
+                <a href="#"
+                   class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
+                    <i class="fa fa-github text-xl"></i>
+                </a>
+                <a href="#"
+                   class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
+                    <i class="fa fa-twitter text-xl"></i>
+                </a>
+                <a href="#"
+                   class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
+                    <i class="fa fa-instagram text-xl"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+</footer>
+<script>
+    // ==============================================
+    // 全局函数 - 必须放在所有事件监听和调用之前
+    // ==============================================
+    function checkTaskStatus(taskId) {
+      if (!taskId) {
+        console.error('任务ID不存在');
+        return;
+      }
+
+      fetch(`/api/mj/task_status?task_id=${encodeURIComponent(taskId)}`)
+        .then(response => {
+          if (!response.ok) throw new Error('网络响应不正常');
+          return response.json();
+        })
+        .then(data => {
+          const progressBar = document.getElementById('progress-bar');
+          const progressText = document.getElementById('progress-text');
+          const statusDisplay = document.getElementById('status-display');
+
+          if (progressBar && progressText) {
+            const progress = data.progress || 0;
+            progressBar.style.width = `${progress}%`;
+            progressText.textContent = `${progress}%`;
+          }
+
+          if (statusDisplay) {
+            statusDisplay.textContent = `状态: ${data.status || '未知'}`;
+          }
+
+          if (data.status === 'completed') {
+            stopPolling();
+            displayResult(data.result);
+            addToHistory(data);
+          } else if (data.status === 'failed') {
+            stopPolling();
+            showError(data.error || '生成失败，请重试');
+          }
+        })
+        .catch(error => {
+          console.error('获取任务状态时出错:', error);
+          stopPolling();
+          showError('获取状态失败: ' + error.message);
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // 主题切换功能
+        const themeToggle = document.getElementById('themeToggle');
+        themeToggle.addEventListener('click', function () {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+        });
+
+        // 检查本地存储的主题偏好
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        }
+
+        // 移动端菜单切换
+        const menuToggle = document.getElementById('menuToggle');
+        const mobileMenu = document.getElementById('mobileMenu');
+        menuToggle.addEventListener('click', function () {
+            mobileMenu.classList.toggle('hidden');
+        });
+
+        // 选项卡切换
+        const textToImageTab = document.getElementById('textToImageTab');
+        const imageToImageTab = document.getElementById('imageToImageTab');
+        const textToImagePanel = document.getElementById('textToImagePanel');
+        const imageToImagePanel = document.getElementById('imageToImagePanel');
+
+        textToImageTab.addEventListener('click', function () {
+            textToImageTab.classList.add('text-primary', 'border-primary');
+            textToImageTab.classList.remove('text-gray-500', 'border-transparent');
+            imageToImageTab.classList.remove('text-primary', 'border-primary');
+            imageToImageTab.classList.add('text-gray-500', 'border-transparent');
+            textToImagePanel.classList.remove('hidden');
+            imageToImagePanel.classList.add('hidden');
+        });
+
+        imageToImageTab.addEventListener('click', function () {
+            imageToImageTab.classList.add('text-primary', 'border-primary');
+            imageToImageTab.classList.remove('text-gray-500', 'border-transparent');
+            textToImageTab.classList.remove('text-primary', 'border-primary');
+            textToImageTab.classList.add('text-gray-500', 'border-transparent');
+            imageToImagePanel.classList.remove('hidden');
+            textToImagePanel.classList.add('hidden');
+        });
+
+        // 图生图相关功能
+        const browseImage = document.getElementById('browseImage');
+        const imageUpload = document.getElementById('imageUpload');
+        const imageUploadArea = document.getElementById('imageUploadArea');
+        const imagePreview = document.getElementById('imagePreview');
+        const previewImage = document.getElementById('previewImage');
+        const removeImage = document.getElementById('removeImage');
+        const imageStrength = document.getElementById('imageStrength');
+        const strengthValue = document.getElementById('strengthValue');
+
+        browseImage.addEventListener('click', function () {
+            imageUpload.click();
+        });
+
+        imageUploadArea.addEventListener('dragover', function (e) {
+            e.preventDefault();
+            imageUploadArea.classList.add('border-primary');
+        });
+
+        imageUploadArea.addEventListener('dragleave', function () {
+            imageUploadArea.classList.remove('border-primary');
+        });
+
+        imageUploadArea.addEventListener('drop', function (e) {
+            e.preventDefault();
+            imageUploadArea.classList.remove('border-primary');
+            if (e.dataTransfer.files.length) {
+                imageUpload.files = e.dataTransfer.files;
+                handleImageUpload();
             }
-    
-            // 移动端菜单切换
-            const menuToggle = document.getElementById('menuToggle');
-            const mobileMenu = document.getElementById('mobileMenu');
-            menuToggle.addEventListener('click', function() {
-                mobileMenu.classList.toggle('hidden');
-            });
-    
-            // 选项卡切换
-            const textToImageTab = document.getElementById('textToImageTab');
-            const imageToImageTab = document.getElementById('imageToImageTab');
-            const textToImagePanel = document.getElementById('textToImagePanel');
-            const imageToImagePanel = document.getElementById('imageToImagePanel');
-    
-            textToImageTab.addEventListener('click', function() {
-                textToImageTab.classList.add('text-primary', 'border-primary');
-                textToImageTab.classList.remove('text-gray-500', 'border-transparent');
-                imageToImageTab.classList.remove('text-primary', 'border-primary');
-                imageToImageTab.classList.add('text-gray-500', 'border-transparent');
-                textToImagePanel.classList.remove('hidden');
-                imageToImagePanel.classList.add('hidden');
-            });
-    
-            imageToImageTab.addEventListener('click', function() {
-                imageToImageTab.classList.add('text-primary', 'border-primary');
-                imageToImageTab.classList.remove('text-gray-500', 'border-transparent');
-                textToImageTab.classList.remove('text-primary', 'border-primary');
-                textToImageTab.classList.add('text-gray-500', 'border-transparent');
-                imageToImagePanel.classList.remove('hidden');
-                textToImagePanel.classList.add('hidden');
-            });
-    
-            // 图生图相关功能
-            const browseImage = document.getElementById('browseImage');
-            const imageUpload = document.getElementById('imageUpload');
-            const imageUploadArea = document.getElementById('imageUploadArea');
-            const imagePreview = document.getElementById('imagePreview');
-            const previewImage = document.getElementById('previewImage');
-            const removeImage = document.getElementById('removeImage');
-            const imageStrength = document.getElementById('imageStrength');
-            const strengthValue = document.getElementById('strengthValue');
-    
-            browseImage.addEventListener('click', function() {
-                imageUpload.click();
-            });
-    
-            imageUploadArea.addEventListener('dragover', function(e) {
-                e.preventDefault();
-                imageUploadArea.classList.add('border-primary');
-            });
-    
-            imageUploadArea.addEventListener('dragleave', function() {
-                imageUploadArea.classList.remove('border-primary');
-            });
-    
-            imageUploadArea.addEventListener('drop', function(e) {
-                e.preventDefault();
-                imageUploadArea.classList.remove('border-primary');
-                if (e.dataTransfer.files.length) {
-                    imageUpload.files = e.dataTransfer.files;
-                    handleImageUpload();
-                }
-            });
-    
-            imageUpload.addEventListener('change', handleImageUpload);
-    
-            function handleImageUpload() {
-                if (imageUpload.files && imageUpload.files[0]) {
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        previewImage.src = e.target.result;
-                        imagePreview.classList.remove('hidden');
-                    };
-                    reader.readAsDataURL(imageUpload.files[0]);
-                }
+        });
+
+        imageUpload.addEventListener('change', handleImageUpload);
+
+        function handleImageUpload() {
+            if (imageUpload.files && imageUpload.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    previewImage.src = e.target.result;
+                    imagePreview.classList.remove('hidden');
+                };
+                reader.readAsDataURL(imageUpload.files[0]);
             }
-    
-            removeImage.addEventListener('click', function() {
-                imagePreview.classList.add('hidden');
-                imageUpload.value = '';
-            });
-    
-            imageStrength.addEventListener('input', function() {
-                strengthValue.textContent = this.value;
-            });
-    
-            // 生成按钮点击事件
-            const generateBtn = document.getElementById('generateBtn');
-            generateBtn.addEventListener('click', generateImage);
-    
-            // 重新生成按钮点击事件
-            const regenerateBtn = document.getElementById('regenerateBtn');
-            regenerateBtn.addEventListener('click', function() {
-                // 隐藏结果区域
-                document.getElementById('resultSection').classList.add('hidden');
-                // 显示状态区域
-                document.getElementById('statusSection').classList.remove('hidden');
-                // 重新生成
-                generateImage();
-            });
-    
-            // 放大按钮点击事件
-            const upscaleBtn = document.getElementById('upscaleBtn');
-            upscaleBtn.addEventListener('click', function() {
-                alert('图像放大功能即将实现');
-            });
-    
-            // 变体按钮点击事件
-            const variationBtn = document.getElementById('variationBtn');
-            variationBtn.addEventListener('click', function() {
-                alert('生成变体功能即将实现');
-            });
-    
-            // 下载按钮点击事件
-            const downloadBtn = document.getElementById('downloadBtn');
-            downloadBtn.addEventListener('click', function() {
-                const resultImage = document.getElementById('resultImage');
-                const link = document.createElement('a');
-                link.href = resultImage.src;
-                link.download = 'midjourney-image.png';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-            });
-    
-            // 清除历史记录按钮点击事件
-            const clearHistoryBtn = document.getElementById('clearHistoryBtn');
-            clearHistoryBtn.addEventListener('click', function() {
-                if (confirm('确定要清除所有历史记录吗？')) {
-                    localStorage.removeItem('mjHistory');
-                    updateHistoryGrid();
-                }
-            });
-    
-            // 生成图像函数
-            async function generateImage() {
-                let prompt, base64Array = null;
-    
-                // 检查是文生图还是图生图
-                if (!textToImagePanel.classList.contains('hidden')) {
-                    // 文生图
-                    prompt = document.getElementById('prompt').value.trim();
-                    if (!prompt) {
-                        alert('请输入提示词');
-                        return;
-                    }
-                } else {
-                    // 图生图
-                    prompt = document.getElementById('imagePrompt').value.trim();
-                    if (!prompt) {
-                        alert('请输入提示词');
-                        return;
-                    }
-    
-                    if (!imageUpload.files || !imageUpload.files[0]) {
-                        alert('请上传参考图片');
-                        return;
-                    }
-    
-                    // 转换图片为base64
-                    const reader = new FileReader();
-                    reader.onload = function(e) {
-                        base64Array = [e.target.result.split(',')[1]];
-                        submitGenerateRequest(prompt, base64Array);
-                    };
-                    reader.readAsDataURL(imageUpload.files[0]);
+        }
+
+        removeImage.addEventListener('click', function () {
+            imagePreview.classList.add('hidden');
+            imageUpload.value = '';
+        });
+
+        imageStrength.addEventListener('input', function () {
+            strengthValue.textContent = this.value;
+        });
+
+        // 生成按钮点击事件
+        const generateBtn = document.getElementById('generateBtn');
+        generateBtn.addEventListener('click', generateImage);
+
+        // 重新生成按钮点击事件
+        const regenerateBtn = document.getElementById('regenerateBtn');
+        regenerateBtn.addEventListener('click', function () {
+            // 隐藏结果区域
+            document.getElementById('resultSection').classList.add('hidden');
+            // 显示状态区域
+            document.getElementById('statusSection').classList.remove('hidden');
+            // 重新生成
+            generateImage();
+        });
+
+        // 放大按钮点击事件
+        const upscaleBtn = document.getElementById('upscaleBtn');
+        upscaleBtn.addEventListener('click', function () {
+            alert('图像放大功能即将实现');
+        });
+
+        // 变体按钮点击事件
+        const variationBtn = document.getElementById('variationBtn');
+        variationBtn.addEventListener('click', function () {
+            alert('生成变体功能即将实现');
+        });
+
+        // 下载按钮点击事件
+        const downloadBtn = document.getElementById('downloadBtn');
+        downloadBtn.addEventListener('click', function () {
+            const resultImage = document.getElementById('resultImage');
+            const link = document.createElement('a');
+            link.href = resultImage.src;
+            link.download = 'midjourney-image.png';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+
+        // 清除历史记录按钮点击事件
+        const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+        clearHistoryBtn.addEventListener('click', function () {
+            if (confirm('确定要清除所有历史记录吗？')) {
+                localStorage.removeItem('mjHistory');
+                updateHistoryGrid();
+            }
+        });
+
+        // 生成图像函数
+        async function generateImage() {
+            let prompt, base64Array = null;
+
+            // 检查是文生图还是图生图
+            if (!textToImagePanel.classList.contains('hidden')) {
+                // 文生图
+                prompt = document.getElementById('prompt').value.trim();
+                if (!prompt) {
+                    alert('请输入提示词');
                     return;
                 }
-    
-                // 提交生成请求
-                submitGenerateRequest(prompt, base64Array);
-            }
-    
-            // 提交生成请求函数
-            async function submitGenerateRequest(prompt, base64Array) {
-                try {
-                    // 禁用生成按钮
-                    generateBtn.disabled = true;
-                    generateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>正在提交...';
-    
-                    // 准备请求数据
-                    const requestData = {
-                        prompt: prompt,
-                        base64_array: base64Array
-                    };
-    
-                    // 发送请求
-                    const response = await fetch('/api/mj/imagine', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify(requestData)
-                    });
-    
-                    if (!response.ok) {
-                        throw new Error(`提交请求失败: ${response.statusText}`);
-                    }
-    
-                    const data = await response.json();
-                    const taskId = data.task_id;
-    
-                    // 显示状态区域
-                    document.getElementById('statusSection').classList.remove('hidden');
-    
-                    // 开始轮询任务状态
-                    pollTaskStatus(taskId, prompt);
-                } catch (error) {
-                    console.error('生成图像失败:', error);
-                    alert(`生成图像失败: ${error.message}`);
-                    // 恢复生成按钮
-                    generateBtn.disabled = false;
-                    generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
+            } else {
+                // 图生图
+                prompt = document.getElementById('imagePrompt').value.trim();
+                if (!prompt) {
+                    alert('请输入提示词');
+                    return;
                 }
+
+                if (!imageUpload.files || !imageUpload.files[0]) {
+                    alert('请上传参考图片');
+                    return;
+                }
+
+                // 转换图片为base64
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    base64Array = [e.target.result.split(',')[1]];
+                    submitGenerateRequest(prompt, base64Array);
+                };
+                reader.readAsDataURL(imageUpload.files[0]);
+                return;
             }
-    
-            // 轮询任务状态函数
-            function pollTaskStatus(taskId, prompt) {
-                // 轮询配置
-                const queryInterval = 3000;  // 3秒查询一次
-                const maxQueries = 120;      // 最多查询120次（6分钟）
-                let queryCount = 0;          // 当前查询次数
-                const startTime = new Date().getTime();  // 开始时间
-                let timerId = null;  // 用于存储setTimeout的ID
-    
-                function checkTaskStatus() {
-                    if (queryCount >= maxQueries) {
-                        const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
-                        document.getElementById('statusMessage').innerHTML = `<i class="fa fa-exclamation-circle"></i> 图像生成超时（已等待${elapsedTime}秒），您可以稍后在历史记录中查看，或重新生成。`;
-                        document.getElementById('progressText').textContent = '生成超时';
+
+            // 提交生成请求
+            submitGenerateRequest(prompt, base64Array);
+        }
+
+        // 提交生成请求函数
+        async function submitGenerateRequest(prompt, base64Array) {
+            try {
+                // 禁用生成按钮
+                generateBtn.disabled = true;
+                generateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>正在提交...';
+
+                // 准备请求数据
+                const requestData = {
+                    prompt: prompt,
+                    base64_array: base64Array
+                };
+
+                // 发送请求
+                const response = await fetch('/api/mj/imagine', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(requestData)
+                });
+
+                if (!response.ok) {
+                    throw new Error(`提交请求失败: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                const taskId = data.task_id;
+
+                // 显示状态区域
+                document.getElementById('statusSection').classList.remove('hidden');
+
+                // 开始轮询任务状态
+                pollTaskStatus(taskId, prompt);
+            } catch (error) {
+                console.error('生成图像失败:', error);
+                alert(`生成图像失败: ${error.message}`);
+                // 恢复生成按钮
+                generateBtn.disabled = false;
+                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
+            }
+        }
+
+        // 轮询任务状态函数
+        function pollTaskStatus(taskId, prompt) {
+            // 轮询配置
+            const queryInterval = 3000;  // 3秒查询一次
+            const maxQueries = 120;      // 最多查询120次（6分钟）
+            let queryCount = 0;          // 当前查询次数
+            const startTime = new Date().getTime();  // 开始时间
+            let timerId = null;  // 用于存储setTimeout的ID
+
+            if (queryCount >= maxQueries) {
+                const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
+                document.getElementById('statusMessage').innerHTML = `<i class="fa fa-exclamation-circle"></i> 图像生成超时（已等待${elapsedTime}秒），您可以稍后在历史记录中查看，或重新生成。`;
+                document.getElementById('progressText').textContent = '生成超时';
+                // 恢复生成按钮
+                generateBtn.disabled = false;
+                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
+                return;
+            }
+
+            fetch(`/api/mj/task_status?task_id=${taskId}`)
+                .then(response => response.json())
+                .then(data => {
+                    queryCount++;
+                    // 更新状态信息
+                    const statusMessage = document.getElementById('statusMessage');
+                    const progressFill = document.getElementById('progressBar');
+                    const progressText = document.getElementById('progressText');
+
+                    if (data.error) {
+                        statusMessage.innerHTML = `<i class="fa fa-exclamation-circle"></i> 生成失败: ${data.error}`;
+                        statusMessage.style.color = '#ef4444';
                         // 恢复生成按钮
                         generateBtn.disabled = false;
                         generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
                         return;
                     }
-    
-                    fetch(`/api/mj/task_status?task_id=${taskId}`)
-                        .then(response => response.json())
-                        .then(data => {
-                            queryCount++;
-                            // 更新状态信息
-                            const statusMessage = document.getElementById('statusMessage');
-                            const progressFill = document.getElementById('progressBar');
-                            const progressText = document.getElementById('progressText');
-    
-                            if (data.error) {
-                                statusMessage.innerHTML = `<i class="fa fa-exclamation-circle"></i> 生成失败: ${data.error}`;
-                                statusMessage.style.color = '#ef4444';
-                                // 恢复生成按钮
-                                generateBtn.disabled = false;
-                                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
-                                return;
-                            }
-    
-                            statusMessage.innerHTML = `<i class="fa fa-spinner fa-spin"></i> AI 正在创作中...`;
-    
-                            // 更新进度条
-                            let progress = data.progress || 0;
-                            if (progress > 100) progress = 100;
-    
-                            // 计算已等待时间
-                            const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
-                            progressFill.style.width = `${progress}%`;
-                            progressText.textContent = `${Math.round(progress)}%`;
-                            statusMessage.innerHTML += ` (已等待${elapsedTime}秒)`;
-    
-                            // 任务完成
-                            if (data.status === 'completed') {
-                                statusMessage.innerHTML = '<i class="fa fa-check-circle"></i> 图像生成完成！';
-                                statusMessage.style.color = '#10b981';
-    
-                                // 确保进度为100%
-                                progress = 100;
-                                progressFill.style.width = `${progress}%`;
-                                progressText.textContent = `${Math.round(progress)}%`;
-    
-                                // 显示结果
-                                setTimeout(() => {
-                                    showResult(data.image_url, taskId, prompt);
-                                }, 1000);
-    
-                                // 清除定时器
-                                if (timerId) {
-                                    clearTimeout(timerId);
-                                    timerId = null;
-                                }
-                            } else if (data.status === 'failed') {
-                                statusMessage.innerHTML = `<i class="fa fa-exclamation-circle"></i> 生成失败: ${data.error || '未知错误'}`;
-                                statusMessage.style.color = '#ef4444';
-                                // 恢复生成按钮
-                                generateBtn.disabled = false;
-                                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
-                            } else {
-                                // 继续查询
-                                timerId = setTimeout(checkTaskStatus, queryInterval);
-                            }
-                        })
-                        .catch(error => {
-                            console.error('检查任务状态失败:', error);
-                            // 只有在任务未完成且未超时时才继续查询
-                            if (queryCount < maxQueries) {
-                                timerId = setTimeout(checkTaskStatus, queryInterval);
-                            } else {
-                                // 恢复生成按钮
-                                generateBtn.disabled = false;
-                                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
-                            }
-                        });
-                }
-    
-                // 立即检查一次
-                checkTaskStatus();
-            }
-    
-            // 显示结果函数
-            function showResult(imageUrl, taskId, prompt) {
-                // 隐藏状态区域
-                document.getElementById('statusSection').classList.add('hidden');
-    
-                // 显示结果区域
-                const resultSection = document.getElementById('resultSection');
-                resultSection.classList.remove('hidden');
-    
-                // 设置结果图像
-                const resultImage = document.getElementById('resultImage');
-                resultImage.src = imageUrl;
-    
-                // 恢复生成按钮
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
-    
-                // 保存到历史记录
-                saveToHistory(taskId, prompt, imageUrl);
-    
-                // 更新历史记录网格
-                updateHistoryGrid();
-            }
-    
-            // 保存到历史记录函数
-            function saveToHistory(taskId, prompt, imageUrl) {
-                let history = JSON.parse(localStorage.getItem('mjHistory') || '[]');
-                history.unshift({
-                    id: taskId,
-                    prompt: prompt,
-                    imageUrl: imageUrl,
-                    timestamp: new Date().getTime()
+
+                    statusMessage.innerHTML = `<i class="fa fa-spinner fa-spin"></i> AI 正在创作中...`;
+
+                    // 更新进度条
+                    let progress = data.progress || 0;
+                    if (progress > 100) progress = 100;
+
+                    // 计算已等待时间
+                    const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
+                    progressFill.style.width = `${progress}%`;
+                    progressText.textContent = `${Math.round(progress)}%`;
+                    statusMessage.innerHTML += ` (已等待${elapsedTime}秒)`;
+
+                    // 任务完成
+                    if (data.status === 'completed') {
+                        statusMessage.innerHTML = '<i class="fa fa-check-circle"></i> 图像生成完成！';
+                        statusMessage.style.color = '#10b981';
+
+                        // 确保进度为100%
+                        progress = 100;
+                        progressFill.style.width = `${progress}%`;
+                        progressText.textContent = `${Math.round(progress)}%`;
+
+                        // 显示结果
+                        setTimeout(() => {
+                            showResult(data.image_url, taskId, prompt);
+                        }, 1000);
+
+                        // 清除定时器
+                        if (timerId) {
+                            clearTimeout(timerId);
+                            timerId = null;
+                        }
+                    } else if (data.status === 'failed') {
+                        statusMessage.innerHTML = `<i class="fa fa-exclamation-circle"></i> 生成失败: ${data.error || '未知错误'}`;
+                        statusMessage.style.color = '#ef4444';
+                        // 恢复生成按钮
+                        generateBtn.disabled = false;
+                        generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
+                    } else {
+                        // 继续查询
+                        timerId = setTimeout(checkTaskStatus, queryInterval);
+                    }
+                })
+                .catch(error => {
+                    console.error('检查任务状态失败:', error);
+                    // 只有在任务未完成且未超时时才继续查询
+                    if (queryCount < maxQueries) {
+                        timerId = setTimeout(checkTaskStatus, queryInterval);
+                    } else {
+                        // 恢复生成按钮
+                        generateBtn.disabled = false;
+                        generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
+                    }
                 });
-                // 只保留最近20条记录
-                if (history.length > 20) {
-                    history = history.slice(0, 20);
-                }
-                localStorage.setItem('mjHistory', JSON.stringify(history));
-            }
-    
-            // 更新历史记录网格函数
-            function updateHistoryGrid() {
-                const historyGrid = document.getElementById('historyGrid');
-                const history = JSON.parse(localStorage.getItem('mjHistory') || '[]');
-    
-                if (history.length === 0) {
-                    historyGrid.innerHTML = `
+        }
+
+        // 立即检查一次
+        checkTaskStatus();
+    })
+
+    // 显示结果函数
+    function showResult(imageUrl, taskId, prompt) {
+        // 隐藏状态区域
+        document.getElementById('statusSection').classList.add('hidden');
+
+        // 显示结果区域
+        const resultSection = document.getElementById('resultSection');
+        resultSection.classList.remove('hidden');
+
+        // 设置结果图像
+        const resultImage = document.getElementById('resultImage');
+        resultImage.src = imageUrl;
+
+        // 恢复生成按钮
+        generateBtn.disabled = false;
+        generateBtn.innerHTML = '<i class="fa fa-magic mr-2"></i>生成图像';
+
+        // 保存到历史记录
+        saveToHistory(taskId, prompt, imageUrl);
+
+        // 更新历史记录网格
+        updateHistoryGrid();
+    }
+
+    // 保存到历史记录函数
+    function saveToHistory(taskId, prompt, imageUrl) {
+        let history = JSON.parse(localStorage.getItem('mjHistory') || '[]');
+        history.unshift({
+            id: taskId,
+            prompt: prompt,
+            imageUrl: imageUrl,
+            timestamp: new Date().getTime()
+        });
+        // 只保留最近20条记录
+        if (history.length > 20) {
+            history = history.slice(0, 20);
+        }
+        localStorage.setItem('mjHistory', JSON.stringify(history));
+    }
+
+    // 更新历史记录网格函数
+    function updateHistoryGrid() {
+        const historyGrid = document.getElementById('historyGrid');
+        const history = JSON.parse(localStorage.getItem('mjHistory') || '[]');
+
+        if (history.length === 0) {
+            historyGrid.innerHTML = `
                         <div class="col-span-full text-center py-12 text-gray-500 dark:text-gray-400">
                             <i class="fa fa-history text-4xl mb-4"></i>
                             <p>暂无历史记录</p>
                             <p class="text-sm mt-2">开始生成图像以保存到历史记录</p>
                         </div>
                     `;
-                    return;
-                }
-    
-                historyGrid.innerHTML = '';
-                history.forEach(item => {
-                    const date = new Date(item.timestamp);
-                    const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-    
-                    const historyItem = document.createElement('div');
-                    historyItem.className = 'overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group bg-white dark:bg-gray-800';
-                    historyItem.innerHTML = `
+            return;
+        }
+
+        historyGrid.innerHTML = '';
+        history.forEach(item => {
+            const date = new Date(item.timestamp);
+            const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+
+            const historyItem = document.createElement('div');
+            historyItem.className = 'overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all-300 group bg-white dark:bg-gray-800';
+            historyItem.innerHTML = `
                         <div class="relative h-48 overflow-hidden">
                             <img src="${item.imageUrl}" alt="生成的图像" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
@@ -763,26 +876,89 @@
                             </button>
                         </div>
                     `;
-                    historyGrid.appendChild(historyItem);
-                });
-    
-                // 添加历史记录项点击事件
-                document.querySelectorAll('.view-history-item').forEach(button => {
-                    button.addEventListener('click', function() {
-                        const imageUrl = this.getAttribute('data-image-url');
-                        // 显示结果区域
-                        const resultSection = document.getElementById('resultSection');
-                        resultSection.classList.remove('hidden');
-                        // 设置结果图像
-                        const resultImage = document.getElementById('resultImage');
-                        resultImage.src = imageUrl;
-                    });
-                });
-            }
-    
-            // 初始化历史记录网格
-            updateHistoryGrid();
+            historyGrid.appendChild(historyItem);
         });
-    </script>
+
+        // 添加历史记录项点击事件
+        document.querySelectorAll('.view-history-item').forEach(button => {
+            button.addEventListener('click', function () {
+                const imageUrl = this.getAttribute('data-image-url');
+                // 显示结果区域
+                const resultSection = document.getElementById('resultSection');
+                resultSection.classList.remove('hidden');
+                // 设置结果图像
+                const resultImage = document.getElementById('resultImage');
+                resultImage.src = imageUrl;
+            });
+        });
+
+        // 初始化历史记录网格
+        updateHistoryGrid();
+    }
+</script>
+
+<!-- 添加随机示例功能的JavaScript -->
+<script>
+    // 文生图示例提示词库
+    const textPromptExamples = [
+        "一只穿着太空服的柯基犬在火星表面行走，背景是红色星球和远处的地球，科幻风格，高清细节",
+        "中国传统水墨画风格的山间小屋，雾气缭绕，远处有瀑布，意境悠远，留白艺术",
+        "蒸汽朋克风格的城市景观，空中漂浮着飞艇，机械结构细节丰富，黄昏光影，8K分辨率",
+        "可爱的卡通熊猫宇航员在太空中吃竹子，周围有星星和行星，迪士尼风格，明亮色彩",
+        "赛博朋克风格的东京雨夜，霓虹灯闪烁，全息广告，湿润的街道反射， Blade Runner 氛围",
+        "中世纪奇幻城堡坐落在山顶，周围有龙和魔法光芒，日落时分，史诗电影场景",
+        "极简主义风格的室内设计，白色为主色调，原木家具，大窗户，自然光，北欧风格",
+        "未来科技感的跑车设计，流线型车身，透明车顶，悬浮效果，银色金属质感，未来城市背景",
+        "水彩风格的森林动物聚会，兔子、狐狸和松鼠围坐在蘑菇旁，童话风格，柔和色彩",
+        "复古80年代风格的街机游戏厅，霓虹灯光，老式游戏机，像素艺术，怀旧氛围"
+    ];
+
+    // 图生图示例提示词库
+    const imagePromptExamples = [
+        "将图片转换为梵高风格的油画，星月夜笔触，鲜艳色彩",
+        "变成卡通风格，线条简洁，色彩明亮，适合儿童绘本",
+        "转换为赛博朋克风格，添加霓虹灯效果和未来科技元素",
+        "模拟水墨画效果，黑白灰三色，强调意境和笔触",
+        "变成3D渲染风格，添加立体效果和真实光影",
+        "转换为像素艺术，8-bit风格，适合复古游戏场景",
+        "模拟水彩画效果，柔和的色彩过渡和纹理",
+        "变成低多边形风格，几何图形构成，简约美学",
+        "转换为蒸汽朋克风格，添加齿轮、铜制元素和机械结构",
+        "模拟素描效果，铅笔线条，强调轮廓和阴影"
+    ];
+
+    // 页面加载完成后绑定事件
+    document.addEventListener('DOMContentLoaded', function () {
+        // 文生图随机按钮
+        const randomPromptBtn = document.getElementById('randomPromptBtn');
+        const promptInput = document.getElementById('prompt');
+
+        // 图生图随机按钮
+        const randomImagePromptBtn = document.getElementById('randomImagePromptBtn');
+        const imagePromptInput = document.getElementById('imagePrompt');
+
+        // 文生图随机功能
+        if (randomPromptBtn && promptInput) {
+            randomPromptBtn.addEventListener('click', function () {
+                const randomIndex = Math.floor(Math.random() * textPromptExamples.length);
+                promptInput.value = textPromptExamples[randomIndex];
+                // 添加输入框焦点效果
+                promptInput.focus();
+                setTimeout(() => promptInput.blur(), 100);
+            });
+        }
+
+        // 图生图随机功能
+        if (randomImagePromptBtn && imagePromptInput) {
+            randomImagePromptBtn.addEventListener('click', function () {
+                const randomIndex = Math.floor(Math.random() * imagePromptExamples.length);
+                imagePromptInput.value = imagePromptExamples[randomIndex];
+                // 添加输入框焦点效果
+                imagePromptInput.focus();
+                setTimeout(() => imagePromptInput.blur(), 100);
+            });
+        }
+    });
+</script>
 </body>
 </html>
\ No newline at end of file