Upload 21 files

frontend/assets/app.js

@@ -331,6 +331,47 @@
     return Math.max(1, Math.min(8, isNaN(n) ? def : n));
   }
 
+  // 展开/收起图片信息
+  function setupImageInfoToggle() {
+    document.addEventListener('click', (e) => {
+      if (e.target.classList.contains('image-info-toggle')) {
+        const targetId = e.target.getAttribute('data-target');
+        const content = document.getElementById(targetId);
+        if (content) {
+          const isExpanded = content.classList.contains('expanded');
+          if (isExpanded) {
+            content.classList.remove('expanded');
+            e.target.textContent = '展开 ▼';
+          } else {
+            content.classList.add('expanded');
+            e.target.textContent = '收起 ▲';
+          }
+        }
+      }
+    });
+  }
+  
+  // 显示图片信息
+  function displayImageInfo(tabPrefix, data, prompt, negative) {
+    const infoEl = document.getElementById(`${tabPrefix}-info`);
+    const modelEl = document.getElementById(`${tabPrefix}-model`);
+    const resolutionEl = document.getElementById(`${tabPrefix}-resolution`);
+    const promptEl = document.getElementById(`${tabPrefix}-prompt-text`);
+    const negativeEl = document.getElementById(`${tabPrefix}-negative-text`);
+    
+    if (infoEl && modelEl && resolutionEl && promptEl && negativeEl) {
+      // 获取配置中的模型
+      const model = byId('cfg-model')?.value || 'nai-diffusion-3';
+      
+      // 显示信息
+      infoEl.style.display = 'block';
+      modelEl.textContent = model;
+      resolutionEl.textContent = `${data.width || 768} × ${data.height || 768}`;
+      promptEl.textContent = prompt || '无';
+      negativeEl.textContent = negative || '无';
+    }
+  }
+
   // T2I
   async function handleT2I() {
     const payloadBase = {
@@ -393,6 +434,15 @@
       }
       const paths = oks.map(o => o.saved_path || "").filter(Boolean).join(" | ");
       if (byId("t2i-saved")) byId("t2i-saved").value = paths;
+      
+      // 显示第一张图片的信息
+      if (oks.length > 0) {
+        displayImageInfo('t2i', {
+          width: payloadBase.width,
+          height: payloadBase.height
+        }, payloadBase.prompt, payloadBase.negative);
+      }
+      
       toast(`生成成功 ${oks.length} 张`, "success");
     } catch (err) {
       toast(String(err.message || err), "error");
@@ -473,6 +523,15 @@
       }
       const paths = oks.map(o => o.saved_path || "").filter(Boolean).join(" | ");
       if (byId("i2i-saved")) byId("i2i-saved").value = paths;
+      
+      // 显示第一张图片的信息
+      if (oks.length > 0) {
+        displayImageInfo('i2i', {
+          width: payloadBase.width || 768,
+          height: payloadBase.height || 768
+        }, payloadBase.positive, payloadBase.negative);
+      }
+      
       toast(`生成成功 ${oks.length} 张`, "success");
     } catch (err) {
       toast(String(err.message || err), "error");
@@ -557,6 +616,15 @@
       }
       const paths = oks.map(o => o.saved_path || "").filter(Boolean).join(" | ");
       if (byId("inpaint-saved")) byId("inpaint-saved").value = paths;
+      
+      // 显示第一张图片的信息
+      if (oks.length > 0) {
+        displayImageInfo('inpaint', {
+          width: payloadBase.width || 768,
+          height: payloadBase.height || 768
+        }, payloadBase.positive, payloadBase.negative);
+      }
+      
       toast(`生成成功 ${oks.length} 张`, "success");
     } catch (err) {
       toast(String(err.message || err), "error");
@@ -641,6 +709,9 @@
   byId("btn-t2i").addEventListener("click", handleT2I);
   byId("btn-i2i").addEventListener("click", handleI2I);
   byId("btn-inpaint").addEventListener("click", handleInpaint);
+  
+  // 设置图片信息展开/收起功能
+  setupImageInfoToggle();
  
   // Init
   loadConfig();

frontend/assets/style.css

@@ -597,60 +597,69 @@ select {
     display: none;
   }
   
-  /* 顶部导航栏简化 */
+  /* 顶部导航栏简化 - 更小更紧凑 */
   .app-header {
-    padding: 12px 16px;
+    padding: 4px 10px;
     flex-direction: row;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
+    min-height: 32px;
   }
   
   .brand {
-    font-size: 18px;
+    font-size: 11px;
     flex: 1;
+    font-weight: 600;
+    letter-spacing: 0.3px;
   }
 
-  /* 主容器调整 */
+  /* 主容器调整 - 减小padding，内容向上靠 */
   main {
-    padding: 130px 12px 20px;
+    padding: 36px 8px 10px;
     max-width: 100%;
   }
 
-  /* 卡片优化 */
+  /* 卡片优化 - 减小padding */
   .card {
-    padding: 16px 12px;
-    border-radius: 16px;
+    padding: 10px 8px;
+    border-radius: var(--radius);
   }
 
-  /* 表单网格优化 - 移动端单列 */
+  /* 表单网格优化 - 移动端两列（除了全宽） */
   .form-grid {
-    grid-template-columns: 1fr !important;
-    gap: 16px;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 8px;
+  }
+  
+  /* 全宽元素（正负面提示词）保持单列 */
+  .form-grid label.full {
+    grid-column: 1 / -1;
   }
 
-  /* 触控友好的输入框 */
+  /* 触控友好的输入框 - 更紧凑 */
   input[type="text"],
   input[type="password"],
   input[type="number"],
   input[type="color"],
-  textarea,
   select {
-    padding: 14px 16px;
-    font-size: 16px;
-    border-radius: 12px;
-    min-height: 48px;
+    padding: 8px 10px;
+    font-size: 14px;
+    border-radius: var(--radius);
+    min-height: 36px;
   }
   
   textarea {
-    min-height: 100px;
+    padding: 8px 10px;
+    font-size: 14px;
+    min-height: 70px;
   }
 
-  /* 按钮优化 */
+  /* 按钮优化 - 更紧凑 */
   button {
-    padding: 14px 20px;
-    font-size: 16px;
-    min-height: 48px;
-    border-radius: 12px;
+    padding: 10px 16px;
+    font-size: 14px;
+    min-height: 40px;
+    border-radius: var(--radius);
   }
 
   /* 开关优化 */
@@ -716,60 +725,145 @@ select {
     padding-bottom: 90px;
   }
 
-  /* 结果展示优化 */
+  /* 结果展示优化 - 更大空间 */
   .result {
     margin-top: 16px;
-    gap: 16px;
+    gap: 12px;
   }
   
   .result img {
-    border-radius: 16px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    border-radius: var(--radius);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+    max-width: 100%;
+    height: auto;
+    min-height: 300px;
+    object-fit: contain;
   }
 
-  /* 保存路径显示优化 */
-  .saved-path {
-    grid-template-columns: 1fr;
-    gap: 8px;
+  /* 图片信息区域 */
+  .image-info {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px;
+    font-size: 13px;
+    line-height: 1.6;
   }
   
-  .saved-path label {
-    font-size: 13px;
+  .image-info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--border);
+  }
+  
+  .image-info-title {
+    font-weight: 700;
+    font-size: 14px;
+    color: var(--text);
+  }
+  
+  .image-info-toggle {
+    appearance: none;
+    background: var(--card);
+    border: 1px solid var(--border);
+    color: var(--text);
+    cursor: pointer;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+  }
+  
+  .image-info-toggle:active {
+    transform: scale(0.95);
+  }
+  
+  .image-info-content {
+    display: none;
+    margin-top: 8px;
+  }
+  
+  .image-info-content.expanded {
+    display: block;
+    animation: slideDown 0.2s ease;
+  }
+  
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
   
-  .saved-path input {
+  .image-info-row {
+    margin-bottom: 10px;
+    word-break: break-word;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .image-info-row:last-child {
+    margin-bottom: 0;
+  }
+  
+  .image-info-label {
+    color: var(--muted);
+    font-weight: 700;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .image-info-value {
+    color: var(--text);
     font-size: 13px;
-    padding: 10px 12px;
+    line-height: 1.5;
+    padding-left: 8px;
   }
 
-  /* Toast 优化 */
+  /* 隐藏保存路径 */
+  .saved-path {
+    display: none;
+  }
+
+  /* Toast 优化 - 顶部不占位 */
   .toast {
-    bottom: 90px;
+    top: 45px;
     max-width: calc(100% - 32px);
-    padding: 12px 16px;
-    font-size: 15px;
+    padding: 10px 12px;
+    font-size: 13px;
   }
 
-  /* 标题优化 */
+  /* 标题优化 - 更小 */
   h2 {
-    font-size: 20px;
-    margin: 0 0 16px;
+    font-size: 15px;
+    margin: 0 0 10px;
+    font-weight: 700;
   }
 
-  /* 标签字体优化 */
+  /* 标签字体优化 - 更小 */
   label {
-    font-size: 15px;
+    font-size: 12px;
   }
   
   label > span {
     font-weight: 600;
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
 
   /* 信息提示优化 */
   .message {
-    font-size: 14px;
-    margin-top: 12px;
+    font-size: 12px;
+    margin-top: 8px;
   }
 
   /* 滚动条隐藏（更流畅的移动体验） */

frontend/index.html

@@ -217,6 +217,30 @@
         </div>
         <div class="result">
           <img id="t2i-img" alt="生成结果" />
+          <div class="image-info" id="t2i-info" style="display:none;">
+            <div class="image-info-header">
+              <span class="image-info-title">图片信息</span>
+              <button class="image-info-toggle" data-target="t2i-info-content">展开 ▼</button>
+            </div>
+            <div class="image-info-content" id="t2i-info-content">
+              <div class="image-info-row">
+                <span class="image-info-label">模型</span>
+                <span class="image-info-value" id="t2i-model"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">分辨率</span>
+                <span class="image-info-value" id="t2i-resolution"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">正面提示词</span>
+                <span class="image-info-value" id="t2i-prompt-text"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">负面提示词</span>
+                <span class="image-info-value" id="t2i-negative-text"></span>
+              </div>
+            </div>
+          </div>
           <div class="saved-path">
             <label>保存路径</label>
             <input id="t2i-saved" type="text" readonly />
@@ -311,6 +335,30 @@
         </div>
         <div class="result">
           <img id="i2i-img" alt="生成结果" />
+          <div class="image-info" id="i2i-info" style="display:none;">
+            <div class="image-info-header">
+              <span class="image-info-title">图片信息</span>
+              <button class="image-info-toggle" data-target="i2i-info-content">展开 ▼</button>
+            </div>
+            <div class="image-info-content" id="i2i-info-content">
+              <div class="image-info-row">
+                <span class="image-info-label">模型</span>
+                <span class="image-info-value" id="i2i-model"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">分辨率</span>
+                <span class="image-info-value" id="i2i-resolution"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">正面提示词</span>
+                <span class="image-info-value" id="i2i-prompt-text"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">负面提示词</span>
+                <span class="image-info-value" id="i2i-negative-text"></span>
+              </div>
+            </div>
+          </div>
           <div class="saved-path">
             <label>保存路径</label>
             <input id="i2i-saved" type="text" readonly />
@@ -413,6 +461,30 @@
         </div>
         <div class="result">
           <img id="inpaint-img" alt="生成结果" />
+          <div class="image-info" id="inpaint-info" style="display:none;">
+            <div class="image-info-header">
+              <span class="image-info-title">图片信息</span>
+              <button class="image-info-toggle" data-target="inpaint-info-content">展开 ▼</button>
+            </div>
+            <div class="image-info-content" id="inpaint-info-content">
+              <div class="image-info-row">
+                <span class="image-info-label">模型</span>
+                <span class="image-info-value" id="inpaint-model"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">分辨率</span>
+                <span class="image-info-value" id="inpaint-resolution"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">正面提示词</span>
+                <span class="image-info-value" id="inpaint-prompt-text"></span>
+              </div>
+              <div class="image-info-row">
+                <span class="image-info-label">负面提示词</span>
+                <span class="image-info-value" id="inpaint-negative-text"></span>
+              </div>
+            </div>
+          </div>
           <div class="saved-path">
             <label>保存路径</label>
             <input id="inpaint-saved" type="text" readonly />