Upload index.html

static/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nano Banana Generator</title>
     <style>
-        /* ... (保持原有样式不变) ... */
         :root {
             --bg-color: #0b0f19;
             --card-color: #1a1f2e;
@@ -54,7 +53,7 @@
             outline: none;
             border-color: var(--accent-color);
         }
-
+        
         /* --- 新增样式：图生图上传预览 --- */
         .file-upload-wrapper {
             position: relative;
@@ -77,7 +76,7 @@
         .upload-placeholder { color: #a0aec0; pointer-events: none; }
         
         .preview-container {
-            display: none; /* 默认隐藏 */
+            display: none;
             margin-top: 10px;
             position: relative;
             width: fit-content;
@@ -105,7 +104,7 @@
             padding: 0;
         }
         /* --------------------------------- */
-        
+
         button {
             width: 100%;
             padding: 12px;
@@ -300,10 +299,9 @@
 </div>
 
 <script>
-    // 全局变量存储初始图片的 Base64 数据
     let initImageBase64 = null;
 
-    // --- 新增 JS：处理图片上传和预览 ---
+    // 处理图片上传
     const fileInput = document.getElementById('init_image_input');
     const previewContainer = document.getElementById('preview-container');
     const previewImg = document.getElementById('preview-img');
@@ -312,38 +310,32 @@
     fileInput.addEventListener('change', function(e) {
         const file = e.target.files[0];
         if (file) {
-            // 检查文件大小，限制为 4MB (大多数 API 的限制)
-            if (file.size > 4 * 1024 * 1024) {
-                alert("图片太大，请上传小于 4MB 的图片");
-                this.value = ''; // 清空选择
+            if (file.size > 10 * 1024 * 1024) { // 稍微放宽前端限制，后端会压缩
+                alert("图片太大，请上传小于 10MB 的图片");
+                this.value = '';
                 return;
             }
             
             const reader = new FileReader();
             reader.onload = function(event) {
-                // 存储完整的 Data URL (包含 data:image/png;base64, 前缀)
                 initImageBase64 = event.target.result;
-                // 显示预览
                 previewImg.src = initImageBase64;
                 previewContainer.style.display = 'block';
-                uploadBox.style.display = 'none'; // 隐藏上传框
+                uploadBox.style.display = 'none';
             };
             reader.readAsDataURL(file);
         }
     });
 
-    // --- 新增 JS：清除预览图片 ---
     function clearImagePreview() {
-        fileInput.value = ''; // 清空 input
-        initImageBase64 = null; // 清空变量
+        fileInput.value = '';
+        initImageBase64 = null;
         previewImg.src = '';
-        previewContainer.style.display = 'none'; // 隐藏预览
-        uploadBox.style.display = 'block'; // 显示上传框
+        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) {
@@ -356,7 +348,6 @@
     }
 
     async function generateImage() {
-        // ... (前面部分保持不变)
         const apiKey = document.getElementById('api_key').value;
         const prompt = document.getElementById('prompt').value;
         const checkbox = document.getElementById('agree_chk');
@@ -385,12 +376,10 @@
             ratio: document.getElementById('ratio').value,
             scale: document.getElementById('scale').value,
             format: document.getElementById('format').value,
-            // --- 新增：如果有初始图片，加入 payload ---
             init_image: initImageBase64 
         };
 
         try {
-            // ... (API 请求部分保持不变)
             const response = await fetch('/api/generate', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -416,7 +405,6 @@
             statusText.innerText = "网络请求失败";
             alert("网络请求失败，请检查控制台");
         } finally {
-            // ... (清理工作保持不变)
             if (document.getElementById('agree_chk').checked) {
                 btn.disabled = false;
                 btn.innerText = "🚀 开始生成";