Upload 10 files

public/index.html

@@ -416,6 +416,79 @@
       visibility: visible;
     }
     
+    /* Mobile Generate Button */
+    .mobile-generate-btn {
+      position: fixed;
+      left: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 50;
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+      color: white;
+      border: none;
+      border-radius: 50%;
+      width: 60px;
+      height: 60px;
+      font-size: 24px;
+      cursor: pointer;
+      box-shadow: var(--shadow-lg);
+      transition: all 0.3s ease;
+      display: none;
+    }
+    
+    .mobile-generate-btn:hover {
+      transform: translateY(-50%) scale(1.1);
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+    }
+    
+    .mobile-generate-btn:active {
+      transform: translateY(-50%) scale(0.95);
+    }
+
+    /* Card Meta Expandable */
+    .card .meta {
+      padding: 16px;
+      border-top: 1px solid var(--border);
+      font-size: 13px;
+      color: var(--muted);
+      line-height: 1.5;
+    }
+    
+    .card .meta-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+    
+    .card .meta-toggle {
+      background: none;
+      border: none;
+      color: var(--accent);
+      cursor: pointer;
+      font-size: 12px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+      min-height: auto;
+    }
+    
+    .card .meta-toggle:hover {
+      background: var(--border);
+      transform: none;
+      box-shadow: none;
+    }
+    
+    .card .meta-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+    }
+    
+    .card .meta-content.expanded {
+      max-height: 200px;
+    }
+
     /* Mobile Responsive Styles */
     @media (max-width: 768px) {
       header {
@@ -459,27 +532,26 @@
         order: 2;
       }
       
+      .mobile-generate-btn {
+        display: block;
+      }
+      
       main {
         grid-template-columns: 1fr;
         gap: 12px;
         padding: 12px;
+        padding-left: 100px;
         min-height: auto;
       }
       
-      .panel {
-        padding: 16px;
-        border-radius: 12px;
-      }
-      
-      .form-grid {
-        grid-template-columns: 1fr;
-        gap: 8px;
+      /* Hide desktop panel on mobile */
+      #desktopPanel {
+        display: none;
       }
       
-      .row {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 8px;
+      .panel.results {
+        padding: 16px;
+        border-radius: 12px;
       }
       
       .gallery {
@@ -604,6 +676,9 @@
   </div>
 </div>
 
+<!-- Mobile Generate Button -->
+<button class="mobile-generate-btn" id="mobileGenerateBtn">✨</button>
+
 <main>
   <section class="panel" id="desktopPanel">
     <div class="group">
@@ -795,21 +870,89 @@
     const img = document.createElement('img');
     img.src = dataUrl;
     img.alt = params.prompt || 'image';
+    
     const meta = document.createElement('div');
     meta.className = 'meta';
-    meta.innerHTML = `
-      <div style="font-weight: 600; margin-bottom: 4px;">${params.model}</div>
+    
+    const metaHeader = document.createElement('div');
+    metaHeader.className = 'meta-header';
+    metaHeader.innerHTML = `
+      <div style="font-weight: 600;">${params.model}</div>
+      <button class="meta-toggle" onclick="toggleCardMeta(this)">详情</button>
+    `;
+    
+    const metaContent = document.createElement('div');
+    metaContent.className = 'meta-content';
+    metaContent.innerHTML = `
       <div style="margin-bottom: 4px;">尺寸: ${params.width}x${params.height}</div>
       <div style="margin-bottom: 4px;">步数: ${params.num_inference_steps} | 引导: ${params.guidance_scale}</div>
-      <div style="margin-bottom: 6px; font-size: 12px; line-height: 1.3;">${params.prompt}</div>
+      <div style="margin-bottom: 8px; font-size: 12px; line-height: 1.3; word-break: break-all;">${params.prompt}</div>
       <div class="row">
-        <button class="secondary" onclick="downloadImage('${filename}', '${dataUrl}')">下载</button>
+        <button class="secondary" onclick="downloadImageMobile('${filename}', '${dataUrl}')">下载</button>
       </div>
     `;
+    
+    meta.appendChild(metaHeader);
+    meta.appendChild(metaContent);
     wrap.appendChild(img);
     wrap.appendChild(meta);
   }
 
+  // 切换卡片详情显示
+  function toggleCardMeta(button) {
+    const metaContent = button.parentElement.nextElementSibling;
+    const isExpanded = metaContent.classList.contains('expanded');
+    
+    if (isExpanded) {
+      metaContent.classList.remove('expanded');
+      button.textContent = '详情';
+    } else {
+      metaContent.classList.add('expanded');
+      button.textContent = '收起';
+    }
+  }
+
+  // 移动端优化的下���函数
+  function downloadImageMobile(filename, dataUrl) {
+    // 检测是否为移动端
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    
+    if (isMobile) {
+      // 移动端直接触发下载
+      const a = document.createElement('a');
+      a.href = dataUrl;
+      a.download = filename;
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      
+      // 显示提示
+      const toast = document.createElement('div');
+      toast.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: var(--accent);
+        color: white;
+        padding: 12px 20px;
+        border-radius: 8px;
+        z-index: 1000;
+        font-size: 14px;
+      `;
+      toast.textContent = '图片已开始下载';
+      document.body.appendChild(toast);
+      
+      setTimeout(() => {
+        document.body.removeChild(toast);
+      }, 2000);
+    } else {
+      // 桌面端使用原有逻辑
+      downloadImage(filename, dataUrl);
+    }
+  }
+
   function removeCard(wrap) {
     try { wrap.remove(); } catch(e) {}
   }
@@ -921,7 +1064,9 @@
       return;
     }
     
-    const countRaw = Number(qs('#batchCount').value || 1);
+    const isMobile = window.innerWidth <= 768;
+    const batchElement = qs(isMobile ? '#batchCountMobile' : '#batchCount');
+    const countRaw = Number(batchElement.value || 1);
     const count = Math.max(1, Math.min(10, Number.isFinite(countRaw) ? Math.trunc(countRaw) : 1));
     
     const headers = {
@@ -1040,6 +1185,11 @@
       closeSidebar();
     });
     
+    // 移动端浮动生成按钮
+    qs('#mobileGenerateBtn').addEventListener('click', () => {
+      generate();
+    });
+    
     // 通用事件绑定
     qs('#downloadAll').addEventListener('click', () => {
       qsa('#gallery img').forEach((img, i) => {