From 7b97fda4be0b172f71aaaf78661040ad6ffc57d2 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Thu, 21 Aug 2025 09:34:51 +0800
Subject: [PATCH] 'commit'

---
 .../__pycache__/JmTxt2ImgUtil.cpython-310.pyc | Bin 0 -> 2675 bytes
 dsLightRag/Routes/JiMengRoute.py              |   3 +
 .../__pycache__/JiMengRoute.cpython-310.pyc   | Bin 0 -> 1331 bytes
 .../Routes/__pycache__/QA.cpython-310.pyc     | Bin 6599 -> 6676 bytes
 dsLightRag/static/JiMeng/image_preview.html   | 243 ++++++++++++++
 dsLightRag/static/JiMeng/prompt_input.html    | 316 +++++++++++++++++-
 6 files changed, 555 insertions(+), 7 deletions(-)
 create mode 100644 dsLightRag/JiMeng/Kit/__pycache__/JmTxt2ImgUtil.cpython-310.pyc
 create mode 100644 dsLightRag/Routes/__pycache__/JiMengRoute.cpython-310.pyc
 create mode 100644 dsLightRag/static/JiMeng/image_preview.html

diff --git a/dsLightRag/JiMeng/Kit/__pycache__/JmTxt2ImgUtil.cpython-310.pyc b/dsLightRag/JiMeng/Kit/__pycache__/JmTxt2ImgUtil.cpython-310.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..7990fa668c602cdde118f4ca36851a3e8ad28cf8
GIT binary patch
literal 2675
zcmZ`5?{5^xb!TsHZ*P5fHuhnI3B;|6l&ccEK`5%Mq>AF27D52o5Tcc()%j*PuerUw
z?9PSQx~mMf3kDNROCYJSatC%|H#K&sl{gN@pZY&k`<2`K@hPA31*K8n?4GHq+CA;e
zdvD(FdGFmC;jqlXvub@l^h1c_o-kzRBLMOyyw*Qq!5l^@PVsi6AQ$Hq-raqQ4|YB!
z=zhhoi;AcRlmKG9zLcZ~m7og?DOqn&8eG_)3h7}bj5xv<BBZg1lqSLt?;=fVGf-NJ
zoDwC`!fr+@BA2Tbi@?<e)IFrlr8O1yk|=|I$Ke2$CO9mO^GZ8u#KH5tIgDjxA89YV
zK=y&$e$rGpfE&pES#FMJG8px{Z!A=U=(rOxpDmw!t6%N!?R&Sk&x23(^&UC;o(I2m
zrswV6(=lXA$MhaU*Nrs54af9e(=^N;0~3ax9JJ14QbrsTbM)}Rm*Q4}YC4Ho9j|m8
zd?_7&2ByddB(($AiDku;z?fjZ?0kHHya}(>0Sn<+-XZ4*^35v(@natrCb)5=h}hrH
z#Y8)JOh5f0J#<u0D#4z2PnkvnR4e<3!HslM9nz9RYMfYVlB9_lPpKaqdR0B1K%jg3
zX#{|kMGw5zdvHRzVU&YZ-R1L$@&z!gaa1VybEt?4BK8##a0H4%o(HOwgXHFYIbR`&
z1%L!97aDQ^S=|7I7?k(ZF!tw!Sq_UiKU{|}4%a~=IN)OZIJ$&fc}e4nJm?8xIf;rq
zZrID^#nB@<vCxP^MP!}^s0oLQ2uIin-BoDLL5bu8v}K&jOEgM%7g~#u9I(_l$LE8z
z4L7xMxnLWYmvd5KPfpGSiu?edZ^(yo4dykvx6qyo0{5<Zi8RxFfVI#UV2$Qv@Kwx*
zbK$dGKX;bHt^J$;evf>KxO@b0qs<W4ZW_%+n8i7W!;R`W$|Zzb^N~M9E}#ostSt*o
z$5n29R=zUh%s#G6U5@c~z$EXh=gEjIW=uoRP+K^4vj6m`KTFTO@@rd2K%r$1{Fj(B
z|5bHup}V7Y>(lDWN~Lh|jV!yxm+OSmR<V3><&A9g|A^TFj?=i(JgBAP=7`D=buey`
z*ACm9$x35XX0&cihZ22?Uaq+`p>sHs9F@9`Y41Q~b!EfASX#eYdQ@QHT>b24qtXzi
z8LPXi%SN3~QI~7Kv^D1}f8s^E?e>Y-ep3QzGsqS{EVhgd6%vsp79?QUGSapmXZ4I_
zizLlbV2g3+EJkL{X4$?Zp{D3cYL;qc6K>VF09CEGmO411x|05ksimnM?ENr7GOiBU
zqH&X27c@F#`>jk$qqbO&KREc>VN95u8DQFd7By`lo7J%GXX{~;^{3L3b(_APHPua&
zEvAfQk^sAwK4+M0mYO^)u||`%m+gc2?666!jFGm8I%wb#g&#IdRuguRu&JWzR#K5Q
zJ-K}y^56)C=4H2GOP)<)Dq*+?^_-R>Dw`;ZYzz*Q1a*rjP)~&|f}w1R+LFtcHB&Ys
zOPtvS#-4WnwtE0uXASc_Y%npHG(g8;R?xn9a=^Rcfwwg}@NBr8p<1dlGh#=)K|+Za
z^v^+`^*StqpGV?P2mCUUeej|vilBBM&&zxSFwxiS3-L|7z&D{*UPSzlLNM~LX4H(N
zG5)8~J<rT^KCk{nEMQBj8>Xt-va0F^&O+R(9a7czvvGH%s;b!r9=O$Hhv06hme2_u
zGO+n7qqCTIEWctXE5CMlEp{~$Cm@06{SoBSnMFOWrByZi52*aw?4mQjR4v|d=GVS|
zG+kOBD{Wo}xO`=;_T5Bv>Y?*s%9&hr);FJwU94_=Sy|euUjM?GoPtyDs5(CFY>k)J
zKPun<nDNiwb{6gcb9rXDHhI1J=Q$u&re;gu-KyT7cm6b8XZvQMdVjJuw^sSfL}`85
zncZ~0StxC6fDfRsGB?INS^sPOX!VA(@ONi<>B-n7kF7d!+gYAr4f^<t^7JK-*;&0&
z`Qz2fM@!Ddubt^hP*uKmyR>-&=$?4>@>p$r5iFLct~oQ)<vU-4tY@ow@0urGTX^Jr
z`;ZyhmU3=P1AlpjaeCH4gXh3bHpon6;~oSHDXkXoGwWB@c2e9Nf~)f^u8ob_-G|QQ
z4d?NL%HM8+9*Da9=}P&N73ZtT^6JepxB<B;+$`T+1Xa%6)!N*>^5%o`w_8l}>Z~)n
zR$gDKeZB~?*#@|0Zwj61JKo(9d(nImC?*?`c7QdmmQI?in(c6pkv^v-JH5?qVYlhs
zj#gT{=IDgx=-mD;a7UQZ`rOI0uLO5WDIvFi*w+H|kvCd`FszQd6T>{jT=@kvE*w2^
z<RlC^_PJn(`>9Fd`tRduoPxR1n1I1yK=lvR36cdGT+ZMT!_?!H0#^`bPaO=w`F{@N
zIL38V-t=Xq?{<jogZW?{Wa$6s6<d1U>$=~tzX9u)ut=PQ*e}Y55c|nKz<g|H?H}Q#
MZUM=B6bV268{YrVtpET3

literal 0
HcmV?d00001

diff --git a/dsLightRag/Routes/JiMengRoute.py b/dsLightRag/Routes/JiMengRoute.py
index 00beceed..cad42929 100644
--- a/dsLightRag/Routes/JiMengRoute.py
+++ b/dsLightRag/Routes/JiMengRoute.py
@@ -41,6 +41,9 @@ async def prompt_input(request: fastapi.Request):
                 "image_url": image_url
             }
         }
+    except HTTPException as e:
+        logger.error(f"请求参数错误: {str(e.detail)}")
+        raise e
     except Exception as e:
         logger.error(f"图片生成失败: {str(e)}")
         raise HTTPException(status_code=500, detail=f"图片生成失败: {str(e)}")
diff --git a/dsLightRag/Routes/__pycache__/JiMengRoute.cpython-310.pyc b/dsLightRag/Routes/__pycache__/JiMengRoute.cpython-310.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..6a16ad1f2986c0a321c9a396739253713f3477ba
GIT binary patch
literal 1331
zcmYjR-)kI29G{t;+uQq@XxmT(HBZ95Bv5<`BAyy(+G`C-O6d|<)|<(8ulwViowd1e
zk(vrtF*HhikSe`ME%YfV7KKuL@x{MkUdvsQCtvy`SpCjk(%u~Vo$rs&cjh~vneWAw
zN)f?$^y&Sp4{``S)yC+cV7v!k@*N0<7!Hs<oUx6;CIJqKO|bSEpc}T4=`^5W&dz0e
zE-*vWHZ$D}@}Xs07;(b#%<?cRY!bV`QLo5LJJ>Gs95-7P_^PZ3kuhHAjWdX_GRLh~
zRtT%G>KF7TwqIp<5!J>Hp)Pc>hE<_HKerI4k_#{@XP1`dXIGoNE&VtGN2#84qUJ|!
z9@Xc-G(U)=72nfo=fb5`d1fy3)=JZE+n;XvA&<P&gk}4izYc!BUn9zF3%=s7Dk@zs
z0Xq*s=Nj)Q>ti?JPAY=6%5+=AVOu(W)J~<!3;s#U6WPSNzM}yIBTe_8@Ffbw=XmW*
z7xmB%ngasQqIKNGJ<RY9UMF3WOi02AGZ@_@8(11W%5q(D2mM5LFh(-hGrORz8(GBc
z8pjb$EGu*kAG6|*#$~jKD3YYpz-XOfv{nIpo|UB4rLDqEe4N##8*riP^fP)L1HRY^
zj_{{4d|BgPqM@=18}SWmJkGz4YSoLHHO+{>1stTO;JEuw9{2aY9o*j9zxViHce8(c
zWAObR&{;~PE7Qbj#*8bIaq0R&`W7S%wtws2+Uwu>WB;o!_qXp3Zfzax{yuoP@%NK&
zUaT@RnZ5?lQ4rwzU*84LrG>`K<l$cs&hB&QR|P+Gz3kR%hN9V~`H&|GI2C2CbkmcN
zG2Cfb<KgxX2fMqllMamT)W7%e;L$HLlm0U}W38lUD~Tgzcw7ntpvnwl&*MT-KU#@}
zep9OI@rVmoawjW8<+u>BP(~t!sA@pr<-5&^5_rT3Ey`MqYXIgCka!)mf8PFZW|<|I
zV{r|pc@ejGQ-ap;y{mG;^_H`KNS4p}7vM=}##Fnb%A+s!G^~?Mfgm>ssp2B0xQxe1
zk&I(v5KIaA&-%BTp8&sgql!=B37E-q@g}6yPN=*-pdWcEzv99zwtYb$aCG<>+RgQa
z{tprQ?c1k^l}w%Y<<yJ5yCnT!NR277{#6CwuQ4Rfa-7Hwx#NflSU`={8&{l0<AMXt
z?wp^!qQ;LM@7EV+9k_30HUpnWQqgvtKp!p)`!K6FBW*;yp_jDY31gN9{9WCtiFR4Y
XB4uC!elS;!qCpG_=Qp2Q<^=v9nXiz~

literal 0
HcmV?d00001

diff --git a/dsLightRag/Routes/__pycache__/QA.cpython-310.pyc b/dsLightRag/Routes/__pycache__/QA.cpython-310.pyc
index 26fd0ed9387183d1219eaa6c1ef516ec0308c593..754c6454d1172b77b90e04497e4f6ba0f90c99b7 100644
GIT binary patch
delta 790
zcmYjPO=}ZT6n*c_Br{E$uQp%Pv?ka{C<r1gB9sOf6>8PAwYC*4V(3d_(%7^w4@%;M
zBC#+F3x(H>)WT%pLUB|23tYKzQ9%&$Q(Sp(TG3gYd*+-w@1FaZZxct8ftug%Bk&|%
ze|(wGo(8sj^rpINri{8Q$nyHy*}iXD_kCf6ykUp5nNi;ZyVk@6;bfMql9py`6_Xnl
zsq|HRVn?k7hxh)MTtDyQz7B)hkJZumzz4?tJaE8{2@jrVD}<7r+%00m@gl=RZop<8
z+R|mv4cWTm?J!E3ZO04U;S<IO9pZ*N1V<hdcpq{!tR=1GX{P01WyoIC;rPe_Yk7H;
z$KDd#J44#EW!MHMJigB?0^H+9c%tVT=yoWDZMH^qBBPCSN?Ili4at}r=ax*U$<Wwd
z(6wyc_Fx>)hxu?XQu0K@Z)LEObTo^&)M2*10SkaO@>gwBV56HlEQsu)^9naErmn(W
zF2VGRiU|&BW9%}+U@yZ6WcV4nF^$ghrE|6CjLL*<wkci#p2kht?+)-QJoQg6!*+Pp
z>P|RC)9OX|snuke^lzGJvUFygbv>fEU2TX6`~_!U!@np^srN%w(?GefUQ~Kyfli$*
zN0unPtv*GwG^Tz;kNRhzzpIssQp~IESdu<c?_$^Uc~He7!Yul_EWavt&AJpDJ=RyP
ztrx0D#XW4AL%5Id0O29R6v6_+lJdr%g;s!e&COzCw<dU9tg4;(Tyzcn48jwHYX~`Y
z9zPw=0Ub|@UOb~(E0xMyB~d{CIY8IgD8R41T^4idbHb*1m9?^TTFqNyG^gs;<3Fm$
B$3y@C

delta 741
zcmYjP%}*0S9R1Diw!7WZ?RU4^4>W?18Vv`G2V(Ug(F!PPkw(-Q;*_POX>r-4X|pTQ
zYSIe{aX6S@ldZ;!H`24l8-IeaiT{8XZ*p~}h2S3EynSzX-kV=$@ABcaQuFy_pwAcm
z^ZK8O1Enf^!c$x3s#$tI)%zr81^GP(@QT|-%>?<a)U^xKfFTD3uz8CwOIXyP>?zB}
zI%)b7+t~BJSVCCF-W_fq@JNSW1_UpzT>*=3W+brB@mX9K*@CG!eoJV(yBvb%>$aPI
zt#ml-Z-W!)0t?s&`W|TWY}I+&)jVqk%OOjky9akT+l@mw{01!d>~&}%TeL(BIP#X$
zfO3};#?gT-&QiCF5ba(~31CJVhX`zmh6c>26T>l6B{(p)tvGQ@uw1MT)itaRD#bfI
z``1*;i8il+gW8-WtkDBdEqS805M`+i!8kfmoHQ1PnFTtxJk1`iEPod@wBrV$K?BWH
zEs03MOHY|Mf9#zbcnRjU5E}v84@;)k8No@MI@L?`bf=>(z$2PyOD`psJ7jfKhfJEh
z3$BQLmr>lTG<vSk4}?a^uW*Gth%BO+-p5EDp$YOgI*B4=G`8oxL9a)j*NdichkT7C
z(LM4rcG0^)Rb!FCO%hPgjNf83$KW=DIR^6#W*FRMaG&JW$AKkE`_e|SQLh<z%Xmn>
zsdLd4=8rR2W^kTCmZakcnJlH5q%kNVR%*Ils_Mow=0Bm(7uQzlZQU#xIdT-Y&;l{F
QNpzKb(8f@feAkx#0UwOFRR910

diff --git a/dsLightRag/static/JiMeng/image_preview.html b/dsLightRag/static/JiMeng/image_preview.html
new file mode 100644
index 00000000..cb452d8f
--- /dev/null
+++ b/dsLightRag/static/JiMeng/image_preview.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>首帧预览</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            padding: 30px;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #2c3e50;
+        }
+        .image-container {
+            display: flex;
+            justify-content: center;
+            margin: 30px 0;
+            min-height: 400px;
+            align-items: center;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            padding: 20px;
+        }
+        #previewImage {
+            max-width: 100%;
+            max-height: 600px;
+            border-radius: 6px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .loading {
+            text-align: center;
+            font-size: 18px;
+            color: #666;
+        }
+        .btn-group {
+            display: flex;
+            justify-content: center;
+            margin-top: 30px;
+            gap: 20px;
+        }
+        .btn {
+            padding: 12px 25px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background 0.3s;
+        }
+        .btn-primary {
+            background-color: #3498db;
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #2980b9;
+        }
+        .btn-secondary {
+            background-color: #95a5a6;
+            color: white;
+        }
+        .btn-secondary:hover {
+            background-color: #7f8c8d;
+        }
+        .btn-danger {
+            background-color: #e74c3c;
+            color: white;
+        }
+        .btn-danger:hover {
+            background-color: #c0392b;
+        }
+        /* 添加遮罩动画样式 */
+        .mask {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, visibility 0.3s;
+        }
+        .mask.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .loader {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #3498db;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .mask-text {
+            color: white;
+            margin-top: 20px;
+            text-align: center;
+            font-size: 18px;
+        }
+        .mask-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>首帧预览</h1>
+        <div class="image-container">
+            <div class="loading" id="loading">加载中...</div>
+            <img id="previewImage" style="display: none;">
+        </div>
+        <div class="btn-group">
+            <button class="btn btn-danger" id="backBtn">返回修改</button>
+            <button class="btn btn-secondary" id="regenerateBtn">重新生成</button>
+            <button class="btn btn-primary" id="confirmBtn">确认满意</button>
+        </div>
+    </div>
+
+    <!-- 添加遮罩层 -->
+    <div class="mask" id="mask">
+        <div class="mask-content">
+            <div class="loader"></div>
+            <div class="mask-text" id="maskText">正在生成图片，请稍候...</div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const imageUrl = sessionStorage.getItem('generatedImageUrl');
+            const prompt = sessionStorage.getItem('lastPrompt');
+            const previewImage = document.getElementById('previewImage');
+            const loading = document.getElementById('loading');
+            const backBtn = document.getElementById('backBtn');
+            const regenerateBtn = document.getElementById('regenerateBtn');
+            const confirmBtn = document.getElementById('confirmBtn');
+            const mask = document.getElementById('mask');
+            const maskText = document.getElementById('maskText');
+
+            if (!imageUrl) {
+                alert('没有找到生成的图片，请返回重新生成');
+                window.location.href = 'prompt_input.html';
+                return;
+            }
+
+            // 加载图片
+            previewImage.onload = function() {
+                loading.style.display = 'none';
+                previewImage.style.display = 'block';
+            };
+            previewImage.onerror = function() {
+                loading.textContent = '图片加载失败';
+            };
+            previewImage.src = imageUrl;
+
+            // 返回修改按钮
+            backBtn.addEventListener('click', function() {
+                window.location.href = 'prompt_input.html';
+            });
+
+            // 重新生成按钮
+            regenerateBtn.addEventListener('click', function() {
+                // 显示遮罩动画
+                mask.classList.add('active');
+                maskText.textContent = '正在重新生成图片，请稍候...';
+
+                // 调用 API 重新生成图片
+                fetch('/api/jimeng/prompt_input', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ prompt: prompt })
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('网络响应异常');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // 隐藏遮罩动画
+                    mask.classList.remove('active');
+
+                    if (data.code === 200) {
+                        // 更新图片 URL
+                        const newImageUrl = data.data.image_url;
+                        sessionStorage.setItem('generatedImageUrl', newImageUrl);
+                        previewImage.src = newImageUrl;
+                    } else {
+                        alert('图片生成失败: ' + data.message);
+                        loading.style.display = 'none';
+                        previewImage.style.display = 'block';
+                    }
+                })
+                .catch(error => {
+                    // 隐藏遮罩动画
+                    mask.classList.remove('active');
+
+                    console.error('生成图片时出错:', error);
+                    alert('生成图片时出错: ' + error.message);
+                    loading.style.display = 'none';
+                    previewImage.style.display = 'block';
+                });
+            });
+
+            // 确认满意按钮
+            confirmBtn.addEventListener('click', function() {
+                alert('首帧确认成功！即将进入下一环节');
+                // 这里可以添加跳转到下一步的逻辑
+                // window.location.href = 'next_step.html';
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/dsLightRag/static/JiMeng/prompt_input.html b/dsLightRag/static/JiMeng/prompt_input.html
index 8de0705f..e007ef94 100644
--- a/dsLightRag/static/JiMeng/prompt_input.html
+++ b/dsLightRag/static/JiMeng/prompt_input.html
@@ -144,6 +144,188 @@
             margin-bottom: 10px;
         }
     </style>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            padding: 30px;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #2c3e50;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+            color: #555;
+        }
+        input[type="text"], textarea {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border 0.3s;
+        }
+        input[type="text"]:focus, textarea:focus {
+            border-color: #3498db;
+            outline: none;
+        }
+        .required::after {
+            content: ' *';
+            color: red;
+        }
+        .tag-container {
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: 10px;
+            padding: 10px;
+            border: 1px dashed #ccc;
+            border-radius: 6px;
+            min-height: 50px;
+        }
+        .tag {
+            background-color: #3498db;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 20px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .tag span {
+            margin-right: 5px;
+        }
+        .tag button {
+            background: none;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .add-tag {
+            display: flex;
+            margin-top: 10px;
+        }
+        .add-tag input {
+            flex: 1;
+            margin-right: 10px;
+        }
+        .btn {
+            padding: 12px 20px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background 0.3s;
+        }
+        .btn-primary {
+            background-color: #3498db;
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #2980b9;
+        }
+        .btn-secondary {
+            background-color: #95a5a6;
+            color: white;
+            margin-left: 10px;
+        }
+        .btn-secondary:hover {
+            background-color: #7f8c8d;
+        }
+        .btn-group {
+            display: flex;
+            justify-content: center;
+            margin-top: 30px;
+        }
+        .placeholder {
+            color: #999;
+            font-style: italic;
+        }
+        .example-tip {
+            background-color: #f8f9fa;
+            padding: 15px;
+            border-radius: 6px;
+            margin-top: 5px;
+            font-size: 14px;
+            color: #666;
+        }
+        .sample-container {
+            margin-top: 10px;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+        .sample-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        /* 添加遮罩动画样式 */
+        .mask {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, visibility 0.3s;
+        }
+        .mask.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .loader {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: #3498db;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .mask-text {
+            color: white;
+            margin-top: 20px;
+            text-align: center;
+            font-size: 18px;
+        }
+        .mask-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    </style>
 </head>
 <body>
     <div class="container">
@@ -191,7 +373,7 @@
 
                 <div class="form-group">
                     <label for="atmosphere" class="required">氛围-情绪</label>
-                    <input type="text" id="atmosphere" placeholder="例如：温馨" required>
+                    <input type="text" id="atmosphere" placeholder="例如：温暖" required>
                     <div class="example-tip">请描述画面想要传达的整体氛围或情绪</div>
                 </div>
 
@@ -369,7 +551,6 @@
                 const creationMethod = document.querySelector('input[name="creationMethod"]:checked').value;
 
                 if (creationMethod === 'prompt') {
-                    // 原有的提示词生成逻辑
                     // 收集表单数据
                     const formData = {
                         timeWeatherLight: document.getElementById('timeWeatherLight').value,
@@ -391,11 +572,10 @@
                     }
                     prompt += `，氛围${formData.atmosphere}。`;
 
-                    // 在实际应用中，这里应该发送数据到后端
-                    console.log('生成的提示词:', prompt);
-                    alert('提示词已生成：\n' + prompt + '\n\n下一步将生成首帧图片');
+                    // 调用 API 生成图片
+                    generateImage(prompt);
                 } else {
-                    // 新增的图片上传逻辑
+                    // 图片上传逻辑
                     if (imageUpload.files.length === 0) {
                         alert('请先选择要上传的图片');
                         return;
@@ -403,10 +583,55 @@
 
                     const file = imageUpload.files[0];
                     console.log('上传的图片:', file.name);
-                    alert('图片已上传：\n' + file.name + '\n\n下一步将使用此图片作为首帧');
+                    // 这里应该实现图片上传逻辑
+                    alert('图片上传功能尚未实现');
                 }
             });
 
+            // 新增函数：调用 API 生成图片
+            function generateImage(prompt) {
+                // 显示遮罩动画
+                mask.classList.add('active');
+                maskText.textContent = '正在生成图片，请稍候...';
+
+                console.log('生成的提示词:', prompt);
+
+                // 发送请求到后端 API
+                fetch('/api/jimeng/prompt_input', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ prompt: prompt })
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('网络响应异常');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // 隐藏遮罩动画
+                    mask.classList.remove('active');
+
+                    if (data.code === 200) {
+                        // 保存图片 URL 和提示词并跳转到预览页面
+                        sessionStorage.setItem('generatedImageUrl', data.data.image_url);
+                        sessionStorage.setItem('lastPrompt', prompt);
+                        window.location.href = 'image_preview.html';
+                    } else {
+                        alert('图片生成失败: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    // 隐藏遮罩动画
+                    mask.classList.remove('active');
+
+                    console.error('生成图片时出错:', error);
+                    alert('生成图片时出错: ' + error.message);
+                });
+            }
+
             // 表单重置事件
             promptForm.addEventListener('reset', function() {
                 // 清空标签
@@ -423,4 +648,81 @@
         });
     </script>
 </body>
+</html>
+<!-- 添加遮罩层 -->
+<div class="mask" id="mask">
+    <div class="mask-content">
+        <div class="loader"></div>
+        <div class="mask-text" id="maskText">正在生成图片，请稍候...</div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // ... existing code ...
+        const mask = document.getElementById('mask');
+        const maskText = document.getElementById('maskText');
+
+        // ... existing code ...
+
+        // 新增函数：调用 API 生成图片
+        function generateImage(prompt) {
+            // 显示遮罩动画
+            mask.classList.add('active');
+            maskText.textContent = '正在生成图片，请稍候...';
+
+            console.log('生成的提示词:', prompt);
+
+            // 发送请求到后端 API
+            fetch('/api/jimeng/prompt_input', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ prompt: prompt })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('网络响应异常');
+                }
+                return response.json();
+            })
+            .then(data => {
+                // 隐藏遮罩动画
+                mask.classList.remove('active');
+
+                if (data.code === 200) {
+                    // 保存图片 URL 并跳转到预览页面
+                    sessionStorage.setItem('generatedImageUrl', data.data.image_url);
+                    window.location.href = 'image_preview.html';
+                } else {
+                    alert('图片生成失败: ' + data.message);
+                }
+            })
+            .catch(error => {
+                // 恢复按钮状态
+                submitBtn.disabled = false;
+                submitBtn.textContent = '确认并继续';
+
+                console.error('生成图片时出错:', error);
+                alert('生成图片时出错: ' + error.message);
+            });
+        }
+
+        // 表单重置事件
+        promptForm.addEventListener('reset', function() {
+            // 清空标签
+            while (tagContainer.firstChild) {
+                tagContainer.removeChild(tagContainer.firstChild);
+            }
+            tagContainer.appendChild(placeholder);
+            checkTagContainer();
+            sampleContainer.style.display = 'none';
+        });
+
+        // 初始化检查
+        checkTagContainer();
+    });
+</script>
+</body>
 </html>
\ No newline at end of file