refactor: 完整重构，支持 MiniMax 全部文生图参数

- 新增 image-01 / image-01-live 双模型切换
- image-01-live 支持画风类型 + 权重
- 支持生成数量 (n=1-9)、随机种子、自定义分辨率
- 支持自动优化 prompt、AI 水印开关
- 支持 URL / Base64 双输出格式
- 任务 ID + 成功/失败计数显示
- 错误码友好提示（限流/余额/敏感内容等）
- Node.js 22 内置 fetch 替代 node-fetch

app.js

@@ -1,18 +1,12 @@
 'use strict';
 
-// ============================================================
-// Config
-// ============================================================
-
 const express = require('express');
-const fetch   = require('node-fetch');
 const path    = require('path');
 const fs      = require('fs');
 
 const PORT   = 8195;
 const HOST   = '0.0.0.0';
 
-// Config file stored alongside app.js
 const CONFIG_FILE = path.join(__dirname, 'config.json');
 
 function loadConfig() {
@@ -27,22 +21,15 @@ function saveConfig(cfg) {
   fs.writeFileSync(CONFIG_FILE, JSON.stringify(cfg, null, 2));
 }
 
-// ============================================================
-// App
-// ============================================================
-
 const app = express();
 app.use(express.json());
 app.use(express.static(__dirname));
 
-// --- Settings ---
+// ── Config ──────────────────────────────────────────────────────
 
 app.get('/api/config', (req, res) => {
   const cfg = loadConfig();
-  res.json({
+  res.json({ hasApiKey: !!cfg.apiKey, baseUrl: cfg.baseUrl || 'https://api.minimaxi.com' });
-    hasApiKey: !!cfg.apiKey,
-    baseUrl:   cfg.baseUrl || 'https://api.minimax.io',
-  });
 });
 
 app.post('/api/config', (req, res) => {
@@ -50,37 +37,62 @@ app.post('/api/config', (req, res) => {
   if (typeof apiKey !== 'string' || typeof baseUrl !== 'string') {
     return res.status(400).json({ error: '参数格式错误' });
   }
-  const cfg = { apiKey: apiKey.trim(), baseUrl: baseUrl.trim() || 'https://api.minimax.io' };
+  const cfg = { apiKey: apiKey.trim(), baseUrl: baseUrl.trim() || 'https://api.minimaxi.com' };
   saveConfig(cfg);
   res.json({ ok: true });
 });
 
-// --- Image generation ---
+// ── Image Generation ─────────────────────────────────────────────
 
 app.post('/api/generate', async (req, res) => {
-  const { prompt, aspect_ratio, model } = req.body;
+  const {
+    model, prompt, style, aspect_ratio,
+    width, height, response_format, seed,
+    n, prompt_optimizer, aigc_watermark,
+  } = req.body;
 
+  // Validation
   if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
-    return res.status(400).json({ error: '请输入图片描述内容' });
+    return res.status(400).json({ error: '请输入图片描述' });
+  }
+  if (model !== 'image-01' && model !== 'image-01-live') {
+    return res.status(400).json({ error: 'model 参数无效' });
   }
 
   const cfg = loadConfig();
   if (!cfg.apiKey) {
-    return res.status(400).json({ error: '未配置 API Key，请先在设置中填写 MiniMax API Key。' });
+    return res.status(400).json({ error: '未配置 API Key，请先在设置中填写。' });
   }
 
-  const baseUrl  = cfg.baseUrl || 'https://api.minimax.io';
+  // Build payload — only include optional fields that are set
-  const endpoint = `${baseUrl}/v1/image_generation`;
-
   const payload = {
-    model:         model || 'image-01',
+    model,
     prompt: prompt.trim(),
-    aspect_ratio:  aspect_ratio || '1:1',
+    response_format: response_format || 'url',
-    response_format: 'base64',
   };
 
+  if (aspect_ratio)    payload.aspect_ratio    = aspect_ratio;
+  if (width && height) { payload.width = width; payload.height = height; }
+  if (seed)            payload.seed           = seed;
+  if (n)               payload.n               = Math.min(Math.max(Number(n), 1), 9);
+  if (prompt_optimizer) payload.prompt_optimizer = true;
+  if (aigc_watermark)  payload.aigc_watermark = true;
+
+  // style only for image-01-live
+  if (model === 'image-01-live' && style) {
+    const { style_type, style_weight } = style;
+    if (style_type) {
+      payload.style = { style_type };
+      if (style_weight != null) payload.style.style_weight = style_weight;
+    }
+  }
+
+  const baseUrl  = cfg.baseUrl || 'https://api.minimaxi.com';
+  const endpoint = `${baseUrl}/v1/image_generation`;
+
+  let response;
   try {
-    const response = await fetch(endpoint, {
+    response = await fetch(endpoint, {
       method: 'POST',
       headers: {
         'Authorization':  `Bearer ${cfg.apiKey}`,
@@ -88,28 +100,72 @@ app.post('/api/generate', async (req, res) => {
       },
       body: JSON.stringify(payload),
     });
+  } catch (err) {
+    console.error('[generate] network error:', err.message);
+    return res.status(502).json({ error: '无法连接 MiniMax API：' + err.message });
+  }
 
   const data = await response.json();
 
   if (!response.ok) {
-      const msg = data.error?.message || data.error || `HTTP ${response.status}`;
+    const code    = data.base_resp?.status_code;
-      return res.status(response.status).json({ error: msg });
+    const msg     = data.base_resp?.status_msg || data.error || `HTTP ${response.status}`;
+    const friendly = friendlyError(code, msg);
+    return res.status(response.status).json({ error: friendly });
   }
 
-    // Return base64 images
+  // Return images + task id + metadata
-    const images = data.data?.image_base64 || [];
+  res.json({
-    res.json({ images });
+    images:       data.data?.image_urls || data.data?.image_base64 || [],
+    id:           data.id,
+    success_count: data.metadata?.success_count ?? (Array.isArray(data.data?.image_urls || data.data?.image_base64) ? 1 : 0),
+    failed_count:  data.metadata?.failed_count ?? 0,
+  });
+});
+
+// ── Task Status (future-proofing) ───────────────────────────────
+
+app.get('/api/task/:id', async (req, res) => {
+  const cfg = loadConfig();
+  if (!cfg.apiKey) {
+    return res.status(400).json({ error: '未配置 API Key。' });
+  }
+  const baseUrl = cfg.baseUrl || 'https://api.minimaxi.com';
+  try {
+    const response = await fetch(`${baseUrl}/v1/image_generation/${req.params.id}`, {
+      headers: { 'Authorization': `Bearer ${cfg.apiKey}` },
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      return res.status(response.status).json({ error: data.base_resp?.status_msg || '请求失败' });
+    }
+    res.json(data);
   } catch (err) {
-    console.error('[generate] error:', err.message);
+    res.status(502).json({ error: err.message });
-    res.status(500).json({ error: '无法连接 MiniMax API：' + err.message });
   }
 });
 
-// --- Serve index.html at root ---
+// ── SPA fallback ───────────────────────────────────────────────
+
 app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, 'index.html'));
 });
 
 app.listen(PORT, HOST, () => {
-  console.log(`Image Generator running at http://${HOST === '0.0.0.0' ? '10.0.10.110' : HOST}:${PORT}`);
+  console.log(`图片生成器运行于 http://${HOST === '0.0.0.0' ? '10.0.10.110' : HOST}:${PORT}`);
 });
+
+// ── Helpers ─────────────────────────────────────────────────────
+
+function friendlyError(code, msg) {
+  const map = {
+    1002: '触发限流，请稍后再试',
+    1004: '账号鉴权失败，请检查 API Key 是否正确',
+    1008: '账号余额不足',
+    1026: '图片描述涉及敏感内容，请修改后重试',
+    2013: '参数异常，请检查输入是否合规',
+    2049: '无效的 API Key',
+  };
+  if (code && map[code]) return map[code];
+  return msg;
+}

index.html

@@ -34,14 +34,28 @@
     <span>未配置 API Key，请先在 <button class="link-btn" id="alertSettingsBtn">设置</button> 中填写。</span>
   </div>
 
-  <!-- Main form -->
   <main>
+
+    <!-- Model selector -->
+    <div class="model-tabs">
+      <button class="model-tab active" data-model="image-01">
+        <span class="tab-name">image-01</span>
+        <span class="tab-desc">标准模型</span>
+      </button>
+      <button class="model-tab" data-model="image-01-live">
+        <span class="tab-name">image-01-live</span>
+        <span class="tab-desc">支持画风</span>
+      </button>
+    </div>
+
     <form id="generateForm">
+
+      <!-- Prompt -->
       <div class="prompt-row">
         <textarea
           id="promptInput"
           placeholder="描述你想要生成的图片..."
-          rows="3"
+          rows="4"
           maxlength="1500"
           autofocus
         ></textarea>
@@ -50,21 +64,100 @@
         </div>
       </div>
 
-      <div class="controls">
+      <!-- Options -->
-        <div class="control-group">
+      <div class="options-grid">
-          <label for="aspectRatio">Aspect Ratio</label>
+
+        <!-- Left column -->
+        <div class="options-col">
+
+          <!-- Aspect ratio -->
+          <div class="opt-group">
+            <label class="opt-label">比例</label>
             <select id="aspectRatio">
-            <option value="1:1">1:1 — 正方形 (1024×1024)</option>
+              <option value="1:1">1:1 — 正方形</option>
-            <option value="16:9" selected>16:9 — 宽屏 (1280×720)</option>
+              <option value="16:9" selected>16:9 — 宽屏</option>
-            <option value="4:3">4:3 — 标准 (1152×864)</option>
+              <option value="4:3">4:3 — 标准</option>
-            <option value="3:2">3:2 — 照片 (1248×832)</option>
+              <option value="3:2">3:2 — 照片</option>
-            <option value="2:3">2:3 — 竖图 (832×1248)</option>
+              <option value="2:3">2:3 — 竖图</option>
-            <option value="3:4">3:4 — 竖图 (864×1152)</option>
+              <option value="3:4">3:4 — 竖图</option>
-            <option value="9:16">9:16 — 竖屏 (720×1280)</option>
+              <option value="9:16">9:16 — 竖屏</option>
-            <option value="21:9">21:9 — 超宽 (1344×576)</option>
+              <option value="21:9">21:9 — 超宽（仅 image-01）</option>
             </select>
           </div>
 
+          <!-- Response format -->
+          <div class="opt-group">
+            <label class="opt-label">输出格式</label>
+            <select id="responseFormat">
+              <option value="url">URL（24小时有效）</option>
+              <option value="base64">Base64（直接保存）</option>
+            </select>
+          </div>
+
+          <!-- Count -->
+          <div class="opt-group">
+            <label class="opt-label">生成数量 <span class="opt-hint">（1-9张）</span></label>
+            <div class="stepper">
+              <button type="button" class="stepper-btn" id="nMinus">−</button>
+              <input type="number" id="nInput" value="1" min="1" max="9" readonly />
+              <button type="button" class="stepper-btn" id="nPlus">+</button>
+            </div>
+          </div>
+
+          <!-- Seed -->
+          <div class="opt-group">
+            <label class="opt-label">随机种子 <span class="opt-hint">（留空则随机）</span></label>
+            <input type="number" id="seedInput" placeholder="输入整数用于复现" min="0" step="1" />
+          </div>
+
+        </div>
+
+        <!-- Right column -->
+
+        <div class="options-col">
+
+          <!-- image-01: custom dimensions -->
+          <div class="opt-group dimension-group" id="dimensionGroup">
+            <label class="opt-label">自定义分辨率 <span class="opt-hint">（512-2048，必须是8的倍数）</span></label>
+            <div class="dim-row">
+              <input type="number" id="widthInput" placeholder="宽度" min="512" max="2048" step="8" />
+              <span class="dim-x">×</span>
+              <input type="number" id="heightInput" placeholder="高度" min="512" max="2048" step="8" />
+            </div>
+            <p class="opt-note">同时设置宽高时优先于比例</p>
+          </div>
+
+          <!-- image-01-live: style -->
+          <div class="opt-group style-group" id="styleGroup" style="display:none">
+            <label class="opt-label">画风类型</label>
+            <select id="styleType">
+              <option value="漫画">漫画</option>
+              <option value="元气">元气</option>
+              <option value="中世纪">中世纪</option>
+              <option value="水彩">水彩</option>
+            </select>
+            <label class="opt-label" style="margin-top:10px">画风权重 <span class="opt-hint" id="weightHint">0.8</span></label>
+            <input type="range" id="styleWeight" min="1" max="10" value="8" step="1" class="weight-slider" />
+          </div>
+
+          <!-- Toggles -->
+          <div class="toggle-group">
+            <label class="toggle-row">
+              <input type="checkbox" id="promptOptimizer" />
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+              <span class="toggle-label">自动优化 Prompt</span>
+            </label>
+            <label class="toggle-row">
+              <input type="checkbox" id="watermark" />
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+              <span class="toggle-label">添加 AI 水印</span>
+            </label>
+          </div>
+
+        </div>
+      </div><!-- /options-grid -->
+
+      <!-- Generate -->
       <button type="submit" class="generate-btn" id="generateBtn">
         <svg class="btn-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"/>
@@ -74,40 +167,19 @@
           <circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-dashoffset="20"/>
         </svg>
       </button>
-      </div>
+
     </form>
 
-    <!-- Error message -->
+    <!-- Error -->
     <div class="error-msg" id="errorMsg" style="display:none"></div>
 
-    <!-- Generated image(s) -->
+    <!-- Results -->
-    <div class="result-area" id="resultArea" style="display:none">
+    <div id="resultArea" style="display:none">
-      <div class="result-header">
+      <div class="result-meta" id="resultMeta"></div>
-        <span id="resultLabel">生成结果</span>
+      <div class="image-grid" id="imageGrid"></div>
-        <div class="result-actions">
-          <button class="action-btn" id="downloadBtn" title="Download">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-              <polyline points="7,10 12,15 17,10"/>
-              <line x1="12" y1="15" x2="12" y2="3"/>
-            </svg>
-            下载
-          </button>
-          <button class="action-btn" id="copyBtn" title="复制 Base64">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-            </svg>
-            复制
-          </button>
     </div>
-      </div>
-      <div class="image-wrap" id="imageWrap">
-        <img id="resultImg" src="" alt="Generated image" />
-      </div>
-    </div>
-  </main>
 
+  </main>
 </div>
 
 <!-- Settings Modal -->
@@ -128,12 +200,11 @@
           <input type="password" id="apiKeyInput" placeholder="eyJhbGciOiJIUzI1NiIsInR..." />
           <button class="icon-btn" id="toggleKey" type="button" title="显示/隐藏">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
-              <circle cx="12" cy="12" r="3"/>
             </svg>
           </button>
         </div>
-        <p class="field-hint">请从 <a href="https://platform.minimaxi.com/" target="_blank" rel="noopener">platform.minimaxi.com</a> 获取 API Key</p>
+        <p class="field-hint">请从 <a href="https://platform.minimaxi.com/user-center/basic-information/interface-key" target="_blank" rel="noopener">platform.minimaxi.com</a> 获取</p>
       </div>
       <div class="field">
         <label for="baseUrlInput">API 地址</label>
@@ -143,7 +214,7 @@
     </div>
     <div class="modal-footer">
       <button class="btn-secondary" id="cancelSettings">取消</button>
-      <button class="btn-primary" id="saveSettings">保存</button>
+      <button class="btn-primary" id="saveSettingsBtn">保存</button>
     </div>
   </div>
 </div>
@@ -151,48 +222,95 @@
 <script>
 'use strict';
 
-// ============================================================
+// ── State ──────────────────────────────────────────────────────
-// DOM refs
-// ============================================================
 
-const promptInput   = document.getElementById('promptInput');
+let currentModel   = 'image-01';
-const charCount    = document.getElementById('charCount');
+let currentImages  = [];   // [{url, base64}]
-const aspectRatio  = document.getElementById('aspectRatio');
+let loading        = false;
-const generateForm = document.getElementById('generateForm');
+
-const generateBtn  = document.getElementById('generateBtn');
+// ── DOM refs ───────────────────────────────────────────────────
+
+const $ = id => document.getElementById(id);
+
+const promptInput    = $('promptInput');
+const charCount      = $('charCount');
+const generateForm   = $('generateForm');
+const generateBtn    = $('generateBtn');
 const btnIcon        = generateBtn.querySelector('.btn-icon');
 const btnText        = generateBtn.querySelector('.btn-text');
 const spinner        = generateBtn.querySelector('.spinner');
-const errorMsg     = document.getElementById('errorMsg');
+const errorMsg       = $('errorMsg');
-const resultArea   = document.getElementById('resultArea');
+const resultArea     = $('resultArea');
-const resultLabel  = document.getElementById('resultLabel');
+const resultMeta     = $('resultMeta');
-const resultImg    = document.getElementById('resultImg');
+const imageGrid      = $('imageGrid');
-const imageWrap    = document.getElementById('imageWrap');
+const apiKeyAlert    = $('apiKeyAlert');
-const downloadBtn  = document.getElementById('downloadBtn');
+const alertSettings  = $('alertSettingsBtn');
-const copyBtn      = document.getElementById('copyBtn');
+const aspectRatio    = $('aspectRatio');
+const responseFormat = $('responseFormat');
+const nInput         = $('nInput');
+const nMinus         = $('nMinus');
+const nPlus          = $('nPlus');
+const seedInput      = $('seedInput');
+const widthInput     = $('widthInput');
+const heightInput    = $('heightInput');
+const styleGroup     = $('styleGroup');
+const styleType      = $('styleType');
+const styleWeight    = $('styleWeight');
+const weightHint     = $('weightHint');
+const promptOptimizer= $('promptOptimizer');
+const watermark      = $('watermark');
+const settingsModal  = $('settingsModal');
+const openSettings   = $('openSettings');
+const closeSettings  = $('closeSettings');
+const cancelSettings = $('cancelSettings');
+const saveSettingsBtn= $('saveSettingsBtn');
+const apiKeyInput    = $('apiKeyInput');
+const toggleKey      = $('toggleKey');
+const baseUrlInput   = $('baseUrlInput');
 
-const apiKeyAlert    = document.getElementById('apiKeyAlert');
+// ── Model tabs ─────────────────────────────────────────────────
-const alertSettings  = document.getElementById('alertSettingsBtn');
 
-const settingsModal  = document.getElementById('settingsModal');
+document.querySelectorAll('.model-tab').forEach(tab => {
-const openSettings   = document.getElementById('openSettings');
+  tab.addEventListener('click', () => {
-const closeSettings  = document.getElementById('closeSettings');
+    const model = tab.dataset.model;
-const cancelSettings = document.getElementById('cancelSettings');
+    setModel(model);
-const saveSettingsBtn= document.getElementById('saveSettings');
+  });
-const apiKeyInput    = document.getElementById('apiKeyInput');
+});
-const toggleKey      = document.getElementById('toggleKey');
-const baseUrlInput   = document.getElementById('baseUrlInput');
 
-// ============================================================
+function setModel(model) {
-// State
+  currentModel = model;
-// ============================================================
+  document.querySelectorAll('.model-tab').forEach(t =>
+    t.classList.toggle('active', t.dataset.model === model)
+  );
 
-let currentBase64 = '';
+  const isLive = model === 'image-01-live';
-let loading = false;
+  styleGroup.style.display = isLive ? '' : 'none';
 
-// ============================================================
+  // 21:9 only for image-01
-// Helpers
+  const opt21_9 = aspectRatio.querySelector('option[value="21:9"]');
-// ============================================================
+  if (opt21_9) opt21_9.disabled = isLive;
+  if (isLive && aspectRatio.value === '21:9') aspectRatio.value = '16:9';
+}
+
+// ── Stepper (n) ────────────────────────────────────────────────
+
+nMinus.addEventListener('click', () => {
+  const v = parseInt(nInput.value) - 1;
+  if (v >= 1) nInput.value = v;
+});
+
+nPlus.addEventListener('click', () => {
+  const v = parseInt(nInput.value) + 1;
+  if (v <= 9) nInput.value = v;
+});
+
+// ── Weight slider ──────────────────────────────────────────────
+
+styleWeight.addEventListener('input', () => {
+  weightHint.textContent = (styleWeight.value / 10).toFixed(1);
+});
+
+// ── Helpers ────────────────────────────────────────────────────
 
 function setLoading(on) {
   loading = on;
@@ -206,20 +324,13 @@ function setLoading(on) {
 function showError(msg) {
   errorMsg.textContent = msg;
   errorMsg.style.display = 'flex';
+  errorMsg.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
 
 function clearError() {
   errorMsg.style.display = 'none';
 }
 
-function showResult(base64Data) {
-  currentBase64 = base64Data;
-  resultImg.src = 'data:image/jpeg;base64,' + base64Data;
-  resultArea.style.display = 'block';
-  imageWrap.classList.add('pop-in');
-  setTimeout(() => imageWrap.classList.remove('pop-in'), 600);
-}
-
 async function api(path, opts = {}) {
   const res = await fetch(path, opts);
   const json = await res.json();
@@ -227,55 +338,149 @@ async function api(path, opts = {}) {
   return json;
 }
 
-// ============================================================
+function buildPayload() {
-// Init: load config
+  const n = parseInt(nInput.value);
-// ============================================================
+  const seed = seedInput.value ? parseInt(seedInput.value) : undefined;
+  const width  = widthInput.value  ? parseInt(widthInput.value)  : undefined;
+  const height = heightInput.value ? parseInt(heightInput.value) : undefined;
+
+  const payload = {
+    model:          currentModel,
+    prompt:         promptInput.value.trim(),
+    aspect_ratio:   aspectRatio.value,
+    response_format: responseFormat.value,
+    n:              n,
+  };
+
+  if (seed)              payload.seed              = seed;
+  if (width && height)  { payload.width  = width; payload.height = height; }
+  if (promptOptimizer.checked) payload.prompt_optimizer = true;
+  if (watermark.checked)      payload.aigc_watermark  = true;
+
+  if (currentModel === 'image-01-live') {
+    payload.style = {
+      style_type:   styleType.value,
+      style_weight: parseFloat((styleWeight.value / 10).toFixed(1)),
+    };
+  }
+
+  return payload;
+}
+
+function renderResults(images, id, successCount, failedCount) {
+  currentImages = images;
+  imageGrid.innerHTML = '';
+
+  if (id) {
+    resultMeta.innerHTML = `
+      <span>任务 ID：<code>${id}</code></span>
+      ${successCount != null ? `<span>成功 ${successCount} 张${failedCount ? `，失败 ${failedCount} 张` : ''}</span>` : ''}
+    `;
+    resultMeta.style.display = 'flex';
+  } else {
+    resultMeta.style.display = 'none';
+  }
+
+  const fmt = responseFormat.value;
+
+  images.forEach((src, i) => {
+    const card = document.createElement('div');
+    card.className = 'image-card';
+
+    const img = document.createElement('img');
+    img.src = fmt === 'url' ? src : `data:image/jpeg;base64,${src}`;
+    img.alt = `生成结果 ${i + 1}`;
+    img.loading = 'lazy';
+
+    const actions = document.createElement('div');
+    actions.className = 'image-actions';
+
+    const downloadBtn = document.createElement('button');
+    downloadBtn.className = 'action-btn';
+    downloadBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>下载`;
+    downloadBtn.addEventListener('click', () => downloadImage(src, fmt, i));
+
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'action-btn';
+    copyBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>复制`;
+    copyBtn.addEventListener('click', () => copySrc(src, fmt, copyBtn));
+
+    actions.appendChild(downloadBtn);
+    actions.appendChild(copyBtn);
+    card.appendChild(img);
+    card.appendChild(actions);
+    imageGrid.appendChild(card);
+  });
+
+  resultArea.style.display = 'block';
+  resultArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+function downloadImage(src, fmt, index) {
+  const a = document.createElement('a');
+  if (fmt === 'url') {
+    a.href = src;
+  } else {
+    a.href = `data:image/jpeg;base64,${src}`;
+  }
+  a.download = `生成-${Date.now()}-${index + 1}.jpg`;
+  a.target = '_blank';
+  a.click();
+}
+
+async function copySrc(src, fmt, btn) {
+  try {
+    if (fmt === 'url') {
+      await navigator.clipboard.writeText(src);
+    } else {
+      await navigator.clipboard.writeText(src);
+    }
+    const orig = btn.innerHTML;
+    btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"/></svg>已复制`;
+    setTimeout(() => { btn.innerHTML = orig; }, 1500);
+  } catch {
+    showError('复制失败');
+  }
+}
+
+// ── Init ────────────────────────────────────────────────────────
 
 async function init() {
   try {
     const cfg = await api('/api/config');
-    if (!cfg.hasApiKey) {
+    if (!cfg.hasApiKey) apiKeyAlert.style.display = 'flex';
-      apiKeyAlert.style.display = 'flex';
-    }
     baseUrlInput.value = cfg.baseUrl || 'https://api.minimaxi.com';
-  } catch (e) {
+  } catch { /* non-fatal */ }
-    // non-fatal
-  }
 }
 
-// ============================================================
+// ── Generate ────────────────────────────────────────────────────
-// Generate
-// ============================================================
 
 generateForm.addEventListener('submit', async (e) => {
   e.preventDefault();
   if (loading) return;
 
   const prompt = promptInput.value.trim();
-  if (!prompt) {
+  if (!prompt) { showError('请输入图片描述'); return; }
-    showError('请输入描述内容。');
-    return;
-  }
 
   clearError();
   resultArea.style.display = 'none';
   setLoading(true);
 
   try {
+    const payload = buildPayload();
     const data = await api('/api/generate', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
+      body: JSON.stringify(payload),
-        prompt: prompt,
-        aspect_ratio: aspectRatio.value,
-      }),
     });
 
-    if (!data.images || data.images.length === 0) {
+    const images = data.images || [];
-      throw new Error('未返回任何图片。');
+    if (images.length === 0) {
+      throw new Error('未返回任何图片');
     }
 
-    showResult(data.images[0]);
+    renderResults(images, data.id, data.success_count, data.failed_count);
+
   } catch (err) {
     showError(err.message);
   } finally {
@@ -283,40 +488,13 @@ generateForm.addEventListener('submit', async (e) => {
   }
 });
 
-// ============================================================
+// ── Prompt char count ──────────────────────────────────────────
-// Prompt char count
-// ============================================================
 
 promptInput.addEventListener('input', () => {
   charCount.textContent = `${promptInput.value.length} / 1500`;
 });
 
-// ============================================================
+// ── Settings modal ──────────────────────────────────────────────
-// Download
-// ============================================================
-
-downloadBtn.addEventListener('click', () => {
-  if (!currentBase64) return;
-  const a = document.createElement('a');
-  a.href = 'data:image/jpeg;base64,' + currentBase64;
-  a.download = 'generated-' + Date.now() + '.jpg';
-  a.click();
-});
-
-copyBtn.addEventListener('click', async () => {
-  if (!currentBase64) return;
-  try {
-    await navigator.clipboard.writeText(currentBase64);
-    copyBtn.textContent = '已复制！';
-    setTimeout(() => { copyBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> 复制`; }, 1500);
-  } catch {
-    showError('复制失败。');
-  }
-});
-
-// ============================================================
-// Settings modal
-// ============================================================
 
 function openModal() {
   settingsModal.classList.add('open');
@@ -332,39 +510,32 @@ openSettings.addEventListener('click', openModal);
 alertSettings.addEventListener('click', openModal);
 closeSettings.addEventListener('click', closeModal);
 cancelSettings.addEventListener('click', closeModal);
-
+settingsModal.addEventListener('click', e => { if (e.target === settingsModal) closeModal(); });
-settingsModal.addEventListener('click', (e) => {
-  if (e.target === settingsModal) closeModal();
-});
 
 toggleKey.addEventListener('click', () => {
-  const isPw = apiKeyInput.type === 'password';
+  apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
-  apiKeyInput.type = isPw ? 'text' : 'password';
 });
 
 saveSettingsBtn.addEventListener('click', async () => {
   clearError();
   const apiKey  = apiKeyInput.value.trim();
-  const baseUrl = baseUrlInput.value.trim() || 'https://api.minimax.io';
+  const baseUrl = baseUrlInput.value.trim() || 'https://api.minimaxi.com';
-
   try {
     await api('/api/config', {
       method:  'POST',
       headers: { 'Content-Type': 'application/json' },
       body:    JSON.stringify({ apiKey, baseUrl }),
     });
-    if (apiKey) {
+    if (apiKey) apiKeyAlert.style.display = 'none';
-      apiKeyAlert.style.display = 'none';
-    }
     closeModal();
   } catch (err) {
     showError(err.message);
   }
 });
 
-// ============================================================
+// ── Start ──────────────────────────────────────────────────────
-// Init
-// ============================================================
 
 init();
 </script>
+</body>
+</html>

style.css

@@ -1,12 +1,6 @@
-/* ============================================================
+/* ── Reset & Variables ──────────────────────────────────────── */
-   Reset & Base
-   ============================================================ */
 
-*, *::before, *::after {
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
 
 :root {
   --bg:       #0f0f13;
@@ -38,26 +32,22 @@ button { cursor: pointer; font-family: inherit; }
 a { color: var(--accent2); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
-/* ============================================================
+/* ── Layout ──────────────────────────────────────────────────── */
-   Layout
-   ============================================================ */
 
 #app {
-  max-width: 640px;
+  max-width: 860px;
   margin: 0 auto;
-  padding: 0 20px 60px;
+  padding: 0 24px 80px;
   min-height: 100vh;
 }
 
-/* ============================================================
+/* ── Header ──────────────────────────────────────────────────── */
-   Header
-   ============================================================ */
 
 header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 22px 0 28px;
+  padding: 22px 0 24px;
 }
 
 .logo {
@@ -69,15 +59,9 @@ header {
   color: var(--text);
   letter-spacing: -0.3px;
 }
+.logo svg { color: var(--accent2); }
 
-.logo svg {
+/* ── Alert ───────────────────────────────────────────────────── */
-  color: var(--accent2);
-  flex-shrink: 0;
-}
-
-/* ============================================================
-   Alert banner
-   ============================================================ */
 
 .alert-banner {
   display: flex;
@@ -92,7 +76,6 @@ header {
   margin-bottom: 20px;
   animation: fadeSlideIn 0.4s var(--ease);
 }
-
 .alert-banner svg { color: var(--accent2); flex-shrink: 0; }
 
 .link-btn {
@@ -105,9 +88,53 @@ header {
   cursor: pointer;
 }
 
-/* ============================================================
+/* ── Model Tabs ──────────────────────────────────────────────── */
-   Form
+
-   ============================================================ */
+.model-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.model-tab {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius2);
+  padding: 10px 14px;
+  color: var(--text2);
+  transition: all 0.2s;
+}
+
+.model-tab:hover {
+  border-color: rgba(124,106,245,0.3);
+  color: var(--text);
+}
+
+.model-tab.active {
+  background: rgba(124,106,245,0.12);
+  border-color: rgba(124,106,245,0.5);
+  color: var(--text);
+}
+
+.tab-name {
+  font-size: 13px;
+  font-weight: 600;
+  font-family: 'Courier New', monospace;
+}
+
+.tab-desc {
+  font-size: 11px;
+  color: var(--text3);
+}
+
+.model-tab.active .tab-desc { color: var(--accent2); }
+
+/* ── Prompt ──────────────────────────────────────────────────── */
 
 .prompt-row {
   position: relative;
@@ -115,11 +142,9 @@ header {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: border-color 0.2s;
+  margin-bottom: 16px;
 }
-
+.prompt-row:focus-within { border-color: rgba(124,106,245,0.4); }
-.prompt-row:focus-within {
-  border-color: rgba(124, 106, 245, 0.4);
-}
 
 textarea {
   width: 100%;
@@ -130,11 +155,11 @@ textarea {
   font-family: inherit;
   font-size: 15px;
   line-height: 1.6;
-  padding: 14px 16px 10px;
+  padding: 14px 16px 8px;
-  resize: none;
+  resize: vertical;
   border-radius: var(--radius);
+  min-height: 100px;
 }
-
 textarea::placeholder { color: var(--text3); }
 
 .prompt-footer {
@@ -142,117 +167,252 @@ textarea::placeholder { color: var(--text3); }
   justify-content: flex-end;
   padding: 0 14px 10px;
 }
+.char-count { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
 
-.char-count {
+/* ── Options Grid ────────────────────────────────────────────── */
-  font-size: 11px;
+
-  color: var(--text3);
+.options-grid {
-  font-variant-numeric: tabular-nums;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
 }
 
-/* ============================================================
+.options-col {
-   Controls row
-   ============================================================ */
-
-.controls {
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
   gap: 12px;
-  margin-top: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
 }
 
-.control-group {
+.opt-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  flex: 1;
 }
 
-.control-group label {
+.opt-label {
   font-size: 12px;
-  color: var(--text2);
   font-weight: 500;
-  padding-left: 2px;
+  color: var(--text2);
 }
 
+.opt-hint {
+  font-weight: 400;
+  color: var(--text3);
+  font-size: 11px;
+}
+
+.opt-note {
+  font-size: 11px;
+  color: var(--text3);
+  font-style: italic;
+}
+
+/* ── Select ─────────────────────────────────────────────────── */
+
 select {
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius2);
   color: var(--text);
   font-family: inherit;
   font-size: 14px;
-  padding: 9px 12px;
+  padding: 8px 30px 8px 10px;
   outline: none;
   cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a9a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: right 10px center;
+  background-position: right 8px center;
-  padding-right: 30px;
   transition: border-color 0.2s;
+  width: 100%;
 }
-
 select:focus { border-color: rgba(124,106,245,0.4); }
 
-/* ============================================================
+/* ── Number / Text inputs ────────────────────────────────────── */
-   Generate button
+
-   ============================================================ */
+input[type="number"],
+input[type="text"] {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius2);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 14px;
+  padding: 8px 10px;
+  outline: none;
+  width: 100%;
+  transition: border-color 0.2s;
+}
+input:focus { border-color: rgba(124,106,245,0.4); }
+input::placeholder { color: var(--text3); }
+
+/* Hide number spinners */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
+input[type="number"] { -moz-appearance: textfield; }
+
+/* ── Stepper ─────────────────────────────────────────────────── */
+
+.stepper {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+}
+
+.stepper-btn {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  color: var(--text2);
+  width: 36px;
+  height: 36px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
+  border-radius: var(--radius2);
+}
+.stepper-btn:first-child { border-radius: var(--radius2) 0 0 var(--radius2); }
+.stepper-btn:last-child  { border-radius: 0 var(--radius2) var(--radius2) 0; }
+.stepper-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+
+.stepper input {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  text-align: center;
+  width: 52px;
+  flex-shrink: 0;
+  -moz-appearance: textfield;
+}
+
+/* ── Dimension row ───────────────────────────────────────────── */
+
+.dim-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dim-row input { flex: 1; }
+.dim-x { color: var(--text3); font-size: 14px; flex-shrink: 0; }
+
+/* ── Weight slider ───────────────────────────────────────────── */
+
+.weight-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--surface2);
+  border-radius: 2px;
+  outline: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.weight-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+.weight-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
+
+/* ── Toggle switches ─────────────────────────────────────────── */
+
+.toggle-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.toggle-row input { display: none; }
+
+.toggle-track {
+  width: 36px;
+  height: 20px;
+  background: var(--surface2);
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.2s;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+}
+
+.toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text3);
+  transition: transform 0.2s, background 0.2s;
+}
+
+.toggle-row input:checked + .toggle-track {
+  background: rgba(124,106,245,0.3);
+  border-color: rgba(124,106,245,0.5);
+}
+.toggle-row input:checked + .toggle-track .toggle-thumb {
+  transform: translateX(16px);
+  background: var(--accent);
+}
+
+.toggle-label { font-size: 13px; color: var(--text2); }
+
+/* ── Generate Button ─────────────────────────────────────────── */
 
 .generate-btn {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: var(--radius2);
-  padding: 10px 20px;
+  padding: 12px 24px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
-  height: 42px;
+  width: 100%;
+  height: 48px;
   transition: background 0.2s, transform 0.15s var(--ease), opacity 0.2s;
-  position: relative;
+  margin-bottom: 16px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.generate-btn:hover:not(:disabled) {
-  background: var(--accent2);
-  transform: translateY(-1px);
-}
-
-.generate-btn:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.generate-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.generate-btn .spinner {
-  display: none;
-  animation: spin 0.9s linear infinite;
 }
+.generate-btn:hover:not(:disabled) { background: var(--accent2); transform: translateY(-1px); }
+.generate-btn:active:not(:disabled) { transform: translateY(0); }
+.generate-btn:disabled { opacity: 0.65; cursor: not-allowed; }
 
+.generate-btn .spinner { display: none; animation: spin 0.9s linear infinite; }
 .generate-btn.loading .btn-icon,
-.generate-btn.loading .btn-text {
+.generate-btn.loading .btn-text { display: none; }
-  display: none;
+.generate-btn.loading .spinner { display: inline; }
-}
 
-.generate-btn.loading .spinner {
+/* ── Error ────────────────────────────────────────────────────── */
-  display: inline;
-}
-
-/* ============================================================
-   Error
-   ============================================================ */
 
 .error-msg {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-top: 14px;
+  margin-bottom: 16px;
   padding: 10px 14px;
   background: rgba(245,108,108,0.1);
   border: 1px solid rgba(245,108,108,0.2);
@@ -262,79 +422,82 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
   animation: fadeSlideIn 0.3s var(--ease);
 }
 
-/* ============================================================
+/* ── Result Meta ──────────────────────────────────────────────── */
-   Result area
-   ============================================================ */
 
-.result-area {
+.result-meta {
-  margin-top: 28px;
-  animation: fadeSlideIn 0.5s var(--ease);
-}
-
-.result-header {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 16px;
-  margin-bottom: 12px;
+  padding: 10px 14px;
-}
+  background: var(--surface);
-
+  border: 1px solid var(--border);
-#resultLabel {
+  border-radius: var(--radius2);
   font-size: 12px;
-  font-weight: 600;
   color: var(--text2);
-  text-transform: uppercase;
+  margin-bottom: 14px;
-  letter-spacing: 0.8px;
 }
 
-.result-actions {
+.result-meta code {
+  font-family: 'Courier New', monospace;
+  color: var(--accent2);
+  font-size: 11px;
+}
+
+/* ── Image Grid ──────────────────────────────────────────────── */
+
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.image-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  animation: fadeSlideIn 0.4s var(--ease);
+}
+
+.image-card img {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 180px;
+  object-fit: cover;
+  background: var(--surface2);
+}
+
+.image-actions {
   display: flex;
   gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--border);
 }
 
 .action-btn {
+  flex: 1;
   display: flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
-  background: var(--surface);
+  gap: 5px;
+  background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: var(--radius2);
   color: var(--text2);
   font-size: 12px;
-  padding: 6px 12px;
+  padding: 6px 10px;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  cursor: pointer;
+  font-family: inherit;
 }
-
 .action-btn:hover {
-  background: var(--surface2);
+  background: rgba(124,106,245,0.12);
   color: var(--text);
-  border-color: rgba(255,255,255,0.12);
+  border-color: rgba(124,106,245,0.3);
 }
 
-.image-wrap {
+/* ── Icon button ─────────────────────────────────────────────── */
-  border-radius: var(--radius);
-  overflow: hidden;
-  background: var(--surface);
-  border: 1px solid var(--border);
-}
-
-.image-wrap img {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-@keyframes popIn {
-  0%   { opacity: 0; transform: scale(0.96); }
-  100% { opacity: 1; transform: scale(1); }
-}
-
-.pop-in {
-  animation: popIn 0.4s var(--ease);
-}
-
-/* ============================================================
-   Icon button
-   ============================================================ */
 
 .icon-btn {
   display: flex;
@@ -349,15 +512,9 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
   transition: background 0.15s, color 0.15s;
   flex-shrink: 0;
 }
+.icon-btn:hover { background: var(--surface); color: var(--text); }
 
-.icon-btn:hover {
+/* ── Modal ───────────────────────────────────────────────────── */
-  background: var(--surface);
-  color: var(--text);
-}
-
-/* ============================================================
-   Modal
-   ============================================================ */
 
 .modal-overlay {
   position: fixed;
@@ -373,11 +530,7 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
   transition: opacity 0.25s;
   z-index: 100;
 }
-
+.modal-overlay.open { opacity: 1; pointer-events: all; }
-.modal-overlay.open {
-  opacity: 1;
-  pointer-events: all;
-}
 
 .modal {
   background: var(--surface);
@@ -388,10 +541,7 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
   transform: translateY(12px) scale(0.97);
   transition: transform 0.3s var(--ease);
 }
-
+.modal-overlay.open .modal { transform: translateY(0) scale(1); }
-.modal-overlay.open .modal {
-  transform: translateY(0) scale(1);
-}
 
 .modal-header {
   display: flex;
@@ -399,12 +549,7 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
   justify-content: space-between;
   padding: 18px 20px 0;
 }
-
+.modal-header h2 { font-size: 16px; font-weight: 600; }
-.modal-header h2 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-}
 
 .modal-body {
   padding: 18px 20px;
@@ -413,47 +558,13 @@ select:focus { border-color: rgba(124, 106, 245, 0.4); }
   gap: 18px;
 }
 
-.field {
+.field { display: flex; flex-direction: column; gap: 7px; }
-  display: flex;
+.field label { font-size: 13px; font-weight: 500; color: var(--text2); }
-  flex-direction: column;
-  gap: 7px;
-}
 
-.field label {
+.input-row { display: flex; gap: 8px; }
-  font-size: 13px;
+.input-row input { flex: 1; }
-  font-weight: 500;
-  color: var(--text2);
-}
 
-.input-row {
+.field-hint { font-size: 11px; color: var(--text3); }
-  display: flex;
-  gap: 8px;
-}
-
-.input-row input {
-  flex: 1;
-}
-
-input[type="text"],
-input[type="password"] {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius2);
-  color: var(--text);
-  font-family: inherit;
-  font-size: 14px;
-  padding: 9px 12px;
-  outline: none;
-  width: 100%;
-  transition: border-color 0.2s;
-}
-
-input:focus { border-color: rgba(124, 106, 245, 0.4); }
-
-.field-hint {
-  font-size: 11px;
-  color: var(--text3);
-}
 
 .modal-footer {
   display: flex;
@@ -470,13 +581,10 @@ input:focus { border-color: rgba(124, 106, 245, 0.4); }
   font-family: inherit;
   font-size: 14px;
   padding: 8px 18px;
+  cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
-
+.btn-secondary:hover { background: rgba(255,255,255,0.06); color: var(--text); }
-.btn-secondary:hover {
-  background: rgba(255,255,255,0.06);
-  color: var(--text);
-}
 
 .btn-primary {
   background: var(--accent);
@@ -487,32 +595,24 @@ input:focus { border-color: rgba(124, 106, 245, 0.4); }
   font-size: 14px;
   font-weight: 600;
   padding: 8px 18px;
+  cursor: pointer;
   transition: background 0.15s;
 }
-
 .btn-primary:hover { background: var(--accent2); }
 
-/* ============================================================
+/* ── Animations ──────────────────────────────────────────────── */
-   Animations
-   ============================================================ */
 
 @keyframes fadeSlideIn {
-  from { opacity: 0; transform: translateY(6px); }
+  from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes spin {
+@keyframes spin { to { transform: rotate(360deg); } }
-  to { transform: rotate(360deg); }
-}
 
-/* ============================================================
+/* ── Responsive ──────────────────────────────────────────────── */
-   Responsive
-   ============================================================ */
 
-@media (max-width: 480px) {
+@media (max-width: 600px) {
-  .controls { flex-direction: column; }
+  #app { padding: 0 16px 60px; }
-  .control-group { width: 100%; }
+  .options-grid { grid-template-columns: 1fr; }
-  .generate-btn { width: 100%; justify-content: center; }
+  .image-grid { grid-template-columns: 1fr; }
-  .result-actions { gap: 6px; }
-  .action-btn { padding: 6px 10px; }
 }