Upload index.html

static/index.html

@@ -3,418 +3,152 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Imagen Generator</title>
+    <title>Imagen Multi-Image</title>
     <style>
-        :root {
-            --bg-color: #0b0f19;
-            --card-color: #1a1f2e;
-            --text-color: #e2e8f0;
-            --accent-color: #3b82f6;
-            --input-bg: #2d3748;
-            --danger-color: #ef4444;
-            --success-color: #10b981;
-        }
-        body {
-            font-family: 'Segoe UI', system-ui, sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            margin: 0;
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-        }
-        .container {
-            width: 100%;
-            max-width: 1000px;
-            display: grid;
-            grid-template-columns: 350px 1fr;
-            gap: 20px;
-        }
-        .card {
-            background-color: var(--card-color);
-            padding: 20px;
-            border-radius: 12px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
-        }
-        h1 { margin-top: 0; font-size: 1.5rem; color: var(--accent-color); }
+        :root { --bg: #0b0f19; --card: #1a1f2e; --text: #e2e8f0; --accent: #3b82f6; --input: #2d3748; }
+        body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); padding: 20px; margin: 0; display: flex; justify-content: center; }
+        .container { width: 100%; max-width: 1000px; display: grid; grid-template-columns: 350px 1fr; gap: 20px; }
+        .card { background: var(--card); padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
         .form-group { margin-bottom: 15px; }
-        label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: #a0aec0; }
-        input, select, textarea {
-            width: 100%;
-            padding: 10px;
-            background-color: var(--input-bg);
-            border: 1px solid #4a5568;
-            border-radius: 6px;
-            color: white;
-            box-sizing: border-box;
-            font-size: 0.95rem;
-        }
-        input:focus, select:focus, textarea:focus {
-            outline: none;
-            border-color: var(--accent-color);
-        }
+        label { display: block; margin-bottom: 5px; font-size: 0.85rem; color: #a0aec0; }
+        input, select, textarea { width: 100%; padding: 10px; background: var(--input); border: 1px solid #4a5568; border-radius: 6px; color: white; box-sizing: border-box; }
         
-        /* --- 新增样式：图生图上传预览 --- */
-        .file-upload-wrapper {
-            position: relative;
-            border: 2px dashed #4a5568;
-            border-radius: 6px;
-            padding: 20px;
-            text-align: center;
-            cursor: pointer;
-            transition: border-color 0.3s;
-        }
-        .file-upload-wrapper:hover {
-            border-color: var(--accent-color);
-        }
-        #init_image_input {
-            position: absolute;
-            top: 0; left: 0; width: 100%; height: 100%;
-            opacity: 0;
-            cursor: pointer;
-        }
-        .upload-placeholder { color: #a0aec0; pointer-events: none; }
-        
-        .preview-container {
-            display: none;
-            margin-top: 10px;
-            position: relative;
-            width: fit-content;
-        }
-        #preview-img {
-            max-width: 100%;
-            max-height: 200px;
-            border-radius: 6px;
-            border: 1px solid #4a5568;
-        }
-        .clear-preview-btn {
-            position: absolute;
-            top: -10px;
-            right: -10px;
-            background: var(--danger-color);
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
-            font-weight: bold;
-            line-height: 24px;
-            text-align: center;
-            padding: 0;
-        }
-        /* --------------------------------- */
-
-        button {
-            width: 100%;
-            padding: 12px;
-            background-color: var(--accent-color);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-weight: bold;
-            opacity: 1;
-        }
-        button:hover:not(:disabled) { 
-            background-color: #2563eb; 
-            transform: translateY(-1px);
-        }
-        button:disabled { 
-            background-color: #4a5568; 
-            cursor: not-allowed; 
-            opacity: 0.6; 
-        }
+        /* 多图上传样式 */
+        .upload-box { border: 2px dashed #4a5568; border-radius: 6px; padding: 20px; text-align: center; cursor: pointer; position: relative; }
+        .upload-box:hover { border-color: var(--accent); }
+        #init_image_input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+        #preview-container { display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+        .thumb-box { position: relative; width: 60px; height: 60px; }
+        .thumb-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid #4a5568; }
         
-        .result-area {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 400px;
-            border: 2px dashed #4a5568;
-            border-radius: 12px;
-            position: relative;
-            margin-top: 20px;
-        }
-        #result-img {
-            max-width: 100%;
-            max-height: 600px;
-            border-radius: 8px;
-            display: none;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
-        }
-        .loader {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid var(--accent-color);
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            display: none;
-        }
-        .download-btn {
-            margin-top: 15px;
-            background-color: var(--success-color);
-            width: auto;
-            padding: 8px 20px;
-            display: none;
-            text-decoration: none;
-            color: white;
-            border-radius: 6px;
-        }
+        button { width: 100%; padding: 12px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
+        button:disabled { background: #4a5568; cursor: not-allowed; }
+        .result-area { margin-top: 20px; border: 2px dashed #4a5568; border-radius: 12px; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
+        #result-img { max-width: 100%; display: none; }
+        .loader { border: 4px solid #f3f3f3; border-top: 4px solid var(--accent); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; display: none; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        
-        .disclaimer-box {
-            margin-bottom: 15px;
-            padding: 12px;
-            background-color: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            border-radius: 6px;
-            font-size: 0.85rem;
-            color: #cbd5e1;
-            line-height: 1.5;
-        }
-        .disclaimer-box strong { color: var(--danger-color); display: block; margin-bottom: 5px; }
-        
-        .checkbox-wrapper {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15px;
-            padding: 5px 0;
-            cursor: pointer;
-        }
-        .checkbox-wrapper input[type="checkbox"] {
-            width: 18px;
-            height: 18px;
-            margin-right: 10px;
-            cursor: pointer;
-            accent-color: var(--accent-color);
-        }
-        .checkbox-wrapper label {
-            display: inline;
-            margin: 0;
-            font-size: 0.95rem;
-            color: #e2e8f0;
-            cursor: pointer;
-        }
-
-        @media (max-width: 768px) {
-            .container { grid-template-columns: 1fr; }
-        }
+        @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }
     </style>
 </head>
 <body>
-
 <div class="container">
     <div class="card">
-        <h1>Imagen Generator</h1>
-        
+        <h3>设置</h3>
+        <div class="form-group"><label>API Key</label><input type="password" id="api_key"></div>
         <div class="form-group">
-            <label>API Key</label>
-            <input type="password" id="api_key" placeholder="sk-...">
-        </div>
-
-        <div class="form-group">
-            <label>模型名称</label>
+            <label>模型</label>
             <select id="model">
-                <option value="nano-banana">nano-banana</option>
-                <option value="nano-banana-pro">nano-banana-pro</option>
-                <option value="grok-imagine-1.0">grok-imagine-1.0</option>
-                <option value="gemini-2.5-flash-image">gemini-2.5-flash-image</option>
                 <option value="gemini-3-pro-image">gemini-3-pro-image</option>
-                <option value="gemini-3-pro-image-preview">gemini-3-pro-image-preview</option>
+                <option value="grok-imagine-1.0">grok-imagine-1.0</option>
+                <option value="nano-banana">nano-banana (单图)</option>
             </select>
         </div>
-
         <div class="form-group">
-            <label>画面比例</label>
+            <label>比例</label>
             <select id="ratio">
-                <option value="16:9 (1080p/4K)">16:9 (1080p/4K 宽屏)</option>
-                <option value="1:1 (正方形)">1:1 (正方形)</option>
-                <option value="9:16 (手机壁纸)">9:16 (手机壁纸)</option>
-                <option value="4:3 (标准照片)">4:3 (标准照片)</option>
-                <option value="3:4 (竖向照片)">3:4 (竖向照片)</option>
-                <option value="21:9 (电影感)">21:9 (电影感)</option>
-                <option value="2:3 (艺术照)">2:3 (艺术照)</option>
-            </select>
-        </div>
-
-        <div class="form-group">
-            <label>清晰度等级</label>
-            <select id="scale">
-                <option value="1k">1k (标准)</option>
-                <option value="2k">2k (高清)</option>
-                <option value="4k">4k (超清 Pro)</option>
+                <option value="1:1">1:1</option>
+                <option value="16:9">16:9</option>
+                <option value="9:16">9:16</option>
             </select>
         </div>
-
         <div class="form-group">
-            <label>输出格式</label>
-            <select id="format">
-                <option value="png">PNG</option>
-                <option value="jpg">JPG</option>
-            </select>
+            <label>清晰度</label>
+            <select id="scale"><option value="1k">1k</option><option value="2k">2k</option><option value="4k">4k</option></select>
         </div>
     </div>
 
     <div class="card">
+        <div class="form-group"><label>提示词</label><textarea id="prompt" rows="3"></textarea></div>
         <div class="form-group">
-            <label>提示词 (Prompt)</label>
-            <textarea id="prompt" rows="4" placeholder="描述你想要的画面..."></textarea>
-        </div>
-        
-        <div class="form-group">
-            <label>参考图 (图生图，可选)</label>
-            <div class="file-upload-wrapper" id="upload-box">
-                <span class="upload-placeholder">点击或拖拽上传图片 (支持 JPG/PNG)</span>
-                <input type="file" id="init_image_input" accept="image/jpeg, image/png">
-            </div>
-            <div class="preview-container" id="preview-container">
-                <img id="preview-img" alt="Preview">
-                <button class="clear-preview-btn" onclick="clearImagePreview()">×</button>
-            </div>
-        </div>
-        <div class="disclaimer-box">
-            <strong>⚠️ 免责声明 (Disclaimer)</strong>
-            本工具仅供个人学习与技术研究使用。严禁生成色情、暴力、政治敏感等违法内容。用户生成的任何内容纯属个人行为，法律后果由用户自行承担。
-        </div>
-
-        <div class="checkbox-wrapper">
-            <input type="checkbox" id="agree_chk" onchange="toggleSubmitButton()">
-            <label for="agree_chk">我已知晓并承诺合规使用</label>
+            <label>参考图 (可多选)</label>
+            <div class="upload-box">
+                <span style="color:#a0aec0">点击上传多张图片</span>
+                <input type="file" id="init_image_input" accept="image/*" multiple> </div>
+            <div id="preview-container"></div> <button id="clear-btn" style="display:none; margin-top:8px; background:#ef4444; padding:5px; font-size:12px">清空</button>
         </div>
         
-        <button onclick="generateImage()" id="gen-btn" disabled>🚫 请先勾选免责声明</button>
+        <button onclick="generateImage()" id="gen-btn">🚀 开始生成</button>
 
-        <div class="result-area" id="result-area">
+        <div class="result-area">
             <div class="loader" id="loader"></div>
-            <img id="result-img" alt="Generated Image" />
-            <a id="download-link" class="download-btn" href="#" download="image.png">下载图片</a>
-            <p id="status-text" style="color: #a0aec0; margin-top: 10px;">等待生成...</p>
+            <img id="result-img">
+            <p id="status-text" style="color:#a0aec0; font-size:14px">等待指令...</p>
         </div>
     </div>
 </div>
 
 <script>
-    let initImageBase64 = null;
+    let imagesBase64 = []; // 存储多图数组
 
-    // 处理图片上传
-    const fileInput = document.getElementById('init_image_input');
-    const previewContainer = document.getElementById('preview-container');
-    const previewImg = document.getElementById('preview-img');
-    const uploadBox = document.getElementById('upload-box');
-
-    fileInput.addEventListener('change', function(e) {
-        const file = e.target.files[0];
-        if (file) {
-            if (file.size > 10 * 1024 * 1024) { // 稍微放宽前端限制，后端会压缩
-                alert("图片太大，请上传小于 10MB 的图片");
-                this.value = '';
-                return;
-            }
-            
+    document.getElementById('init_image_input').addEventListener('change', async function(e) {
+        const files = Array.from(e.target.files);
+        const container = document.getElementById('preview-container');
+        for (const file of files) {
             const reader = new FileReader();
-            reader.onload = function(event) {
-                initImageBase64 = event.target.result;
-                previewImg.src = initImageBase64;
-                previewContainer.style.display = 'block';
-                uploadBox.style.display = 'none';
+            reader.onload = (ev) => {
+                imagesBase64.push(ev.target.result); //
+                const div = document.createElement('div');
+                div.className = 'thumb-box';
+                div.innerHTML = `<img src="${ev.target.result}">`;
+                container.appendChild(div);
             };
             reader.readAsDataURL(file);
         }
+        container.style.display = 'flex';
+        document.getElementById('clear-btn').style.display = 'block';
     });
 
-    function clearImagePreview() {
-        fileInput.value = '';
-        initImageBase64 = null;
-        previewImg.src = '';
-        previewContainer.style.display = 'none';
-        uploadBox.style.display = 'block';
-    }
-
-    function toggleSubmitButton() {
-        const checkbox = document.getElementById('agree_chk');
-        const btn = document.getElementById('gen-btn');
-        if (checkbox.checked) {
-            btn.disabled = false;
-            btn.innerText = "🚀 开始生成";
-        } else {
-            btn.disabled = true;
-            btn.innerText = "🚫 请先勾选免责声明";
-        }
-    }
+    document.getElementById('clear-btn').onclick = () => {
+        imagesBase64 = [];
+        document.getElementById('preview-container').innerHTML = '';
+        document.getElementById('preview-container').style.display = 'none';
+        document.getElementById('clear-btn').style.display = 'none';
+        document.getElementById('init_image_input').value = '';
+    };
 
     async function generateImage() {
-        const apiKey = document.getElementById('api_key').value;
-        const prompt = document.getElementById('prompt').value;
-        const checkbox = document.getElementById('agree_chk');
-        
-        if (!checkbox.checked) { alert("请先勾选免责声明！"); return; }
-        if (!apiKey) { alert("请输入 API Key"); return; }
-        if (!prompt) { alert("请输入提示词"); return; }
-
         const btn = document.getElementById('gen-btn');
         const loader = document.getElementById('loader');
         const img = document.getElementById('result-img');
-        const downloadBtn = document.getElementById('download-link');
-        const statusText = document.getElementById('status-text');
+        const status = document.getElementById('status-text');
 
         btn.disabled = true;
-        btn.innerText = "生成中...";
         loader.style.display = 'block';
         img.style.display = 'none';
-        downloadBtn.style.display = 'none';
-        statusText.innerText = "正在请求 API...";
+        status.innerText = "生成中...";
 
         const payload = {
-            api_key: apiKey,
+            api_key: document.getElementById('api_key').value,
             model: document.getElementById('model').value,
-            prompt: prompt,
+            prompt: document.getElementById('prompt').value,
             ratio: document.getElementById('ratio').value,
             scale: document.getElementById('scale').value,
-            format: document.getElementById('format').value,
-            init_image: initImageBase64 
+            format: 'png',
+            init_images: imagesBase64 // 发送数组
         };
 
         try {
-            const response = await fetch('/api/generate', {
+            const res = await fetch('/api/generate', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
             });
-
-            const data = await response.json();
-
+            const data = await res.json();
             if (data.status === 'success') {
-                img.src = `data:image/${payload.format === 'jpg' ? 'jpeg' : 'png'};base64,${data.image_base64}`;
+                img.src = "data:image/png;base64," + data.image_base64;
                 img.style.display = 'block';
-                downloadBtn.href = img.src;
-                downloadBtn.download = `generated_image.${payload.format}`;
-                downloadBtn.style.display = 'inline-block';
-                downloadBtn.innerText = "下载图片";
-                statusText.innerText = "";
+                status.innerText = "生成成功";
             } else {
-                statusText.innerText = "生成失败: " + data.message;
-                alert("错误: " + data.message);
+                alert("失败: " + data.message);
+                status.innerText = "生成失败";
             }
-        } catch (error) {
-            console.error(error);
-            statusText.innerText = "网络请求失败";
-            alert("网络请求失败，请检查控制台");
+        } catch (e) {
+            alert("网络错误");
         } finally {
-            if (document.getElementById('agree_chk').checked) {
-                btn.disabled = false;
-                btn.innerText = "🚀 开始生成";
-            } else {
-                btn.innerText = "🚫 请先勾选免责声明";
-            }
+            btn.disabled = false;
             loader.style.display = 'none';
         }
     }
 </script>
-
 </body>
 </html>