Spaces:

Logankunfall
/

chutes

Sleeping

App Files Files Community

bibibi12345 commited on Oct 19, 2025

Commit

354cde7

1 Parent(s): 7f5e77e

fixed hunyuan size. fixed saving. fixed image preview size. added large preview.

Browse files

Files changed (2) hide show

public/index.html +198 -12
server.js +78 -71

public/index.html CHANGED Viewed

@@ -339,9 +339,9 @@
     .card img {
       width: 100%;
       display: block;
-      aspect-ratio: 1;
-      object-fit: cover;
     }
     .card .meta {
@@ -627,6 +627,44 @@
         width: 100%;
       }
     }
   </style>
 </head>
 <body>
@@ -923,6 +961,12 @@
     const img = document.createElement('img');
     img.src = dataUrl;
     img.alt = params.prompt || 'image';
     const meta = document.createElement('div');
     meta.className = 'meta';
@@ -955,10 +999,19 @@
       <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: 8px; font-size: 12px; line-height: 1.3; word-break: break-all;">${params.prompt}</div>
-      <div class="row">
-        <button class="secondary" onclick="downloadImageMobile('${filename}', '${dataUrl}')">下载</button>
-      </div>
     `;
     meta.appendChild(metaHeader);
     meta.appendChild(metaContent);
@@ -980,6 +1033,115 @@
     }
   }
   // 拖拽功能
   let dragState = {
     isDragging: false,
@@ -1172,6 +1334,9 @@
   async function saveToChosenFolder(filename, dataUrl) {
     if (!state.folderHandle) return false;
     try {
       const fileHandle = await state.folderHandle.getFileHandle(filename, { create: true });
       const writable = await fileHandle.createWritable();
       await writable.write(dataURLtoBlob(dataUrl));
@@ -1200,9 +1365,18 @@
         return;
       }
       const handle = await window.showDirectoryPicker();
       state.folderHandle = handle;
-      qs('#folderStatus').textContent = '已选择';
-      qs('#folderStatusMobile').textContent = '已选择';
     } catch(e) {
       qs('#folderStatus').textContent = '未选择';
       qs('#folderStatusMobile').textContent = '未选择';
@@ -1347,8 +1521,16 @@
           const fname = `image_${Date.now()}_${Math.random().toString(16).slice(2)}.jpg`;
           updateCardWithImage(placeholder, dataUrl, p, fname);
           if (state.folderHandle) {
-            await saveToChosenFolder(fname, dataUrl);
           }
           if (state.sound) {
@@ -1458,10 +1640,14 @@
     // 键盘事件
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && !state.sidebarOpen) generate();
-      if (e.key === 'Escape' && state.sidebarOpen) closeSidebar();
-    });
-    // 响应式检测
     window.addEventListener('resize', checkMobile);
     checkMobile();

     .card img {
       width: 100%;
+      height: auto;
       display: block;
+      object-fit: contain;
     }
     .card .meta {
         width: 100%;
       }
     }
+  /* Image Viewer (Lightbox) */
+  .image-viewer-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+  .image-viewer-overlay.show { display: flex; }
+  .image-viewer-content {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+  .image-viewer-content img {
+    max-width: 90vw;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    box-shadow: var(--shadow-lg);
+    border-radius: 8px;
+  }
+  .image-viewer-close {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 10px;
+    cursor: pointer;
+    min-height: auto;
+  }
   </style>
 </head>
 <body>
     const img = document.createElement('img');
     img.src = dataUrl;
     img.alt = params.prompt || 'image';
+    img.style.cursor = 'zoom-in';
+    img.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openImageViewer(dataUrl, params);
+    });
     const meta = document.createElement('div');
     meta.className = 'meta';
       <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: 8px; font-size: 12px; line-height: 1.3; word-break: break-all;">${params.prompt}</div>
     `;
+    const row = document.createElement('div');
+    row.className = 'row';
+    const dlBtn = document.createElement('button');
+    dlBtn.className = 'secondary';
+    dlBtn.textContent = '下载';
+    dlBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      downloadImageMobile(filename, dataUrl);
+    });
+    row.appendChild(dlBtn);
+    metaContent.appendChild(row);
     meta.appendChild(metaHeader);
     meta.appendChild(metaContent);
     }
   }
+// Image Viewer (Lightbox)
+function ensureImageViewer() {
+  let overlay = document.getElementById('imageViewer');
+  if (!overlay) {
+    overlay = document.createElement('div');
+    overlay.id = 'imageViewer';
+    overlay.className = 'image-viewer-overlay';
+    const content = document.createElement('div');
+    content.className = 'image-viewer-content';
+    const img = document.createElement('img');
+    img.alt = 'preview';
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'image-viewer-close';
+    closeBtn.textContent = '关闭';
+    closeBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      closeImageViewer();
+    });
+    // click outside content area closes viewer
+    overlay.addEventListener('click', function(e) {
+      if (e.target === overlay) {
+        closeImageViewer();
+      }
+    });
+    content.appendChild(img);
+    content.appendChild(closeBtn);
+    overlay.appendChild(content);
+    document.body.appendChild(overlay);
+  }
+  return overlay;
+}
+function openImageViewer(dataUrl, params) {
+  const overlay = ensureImageViewer();
+  const img = overlay.querySelector('.image-viewer-content img');
+  img.src = dataUrl;
+  img.alt = (params && params.prompt) ? params.prompt : 'image';
+  overlay.classList.add('show');
+}
+function closeImageViewer() {
+  const overlay = document.getElementById('imageViewer');
+  if (overlay) {
+    overlay.classList.remove('show');
+    const img = overlay.querySelector('.image-viewer-content img');
+    if (img) img.src = '';
+  }
+}
+function isViewerOpen() {
+  const overlay = document.getElementById('imageViewer');
+  return !!(overlay && overlay.classList.contains('show'));
+}
+  // Image Viewer (Lightbox)
+  function ensureImageViewer() {
+    let overlay = document.getElementById('imageViewer');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.id = 'imageViewer';
+      overlay.className = 'image-viewer-overlay';
+      const content = document.createElement('div');
+      content.className = 'image-viewer-content';
+      const img = document.createElement('img');
+      img.alt = 'preview';
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'image-viewer-close';
+      closeBtn.textContent = '关闭';
+      closeBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeImageViewer();
+      });
+      // click outside content area closes viewer
+      overlay.addEventListener('click', function(e) {
+        if (e.target === overlay) {
+          closeImageViewer();
+        }
+      });
+      content.appendChild(img);
+      content.appendChild(closeBtn);
+      overlay.appendChild(content);
+      document.body.appendChild(overlay);
+    }
+    return overlay;
+  }
+  function openImageViewer(dataUrl, params) {
+    const overlay = ensureImageViewer();
+    const img = overlay.querySelector('.image-viewer-content img');
+    img.src = dataUrl;
+    img.alt = (params && params.prompt) ? params.prompt : 'image';
+    overlay.classList.add('show');
+  }
+  function closeImageViewer() {
+    const overlay = document.getElementById('imageViewer');
+    if (overlay) {
+      overlay.classList.remove('show');
+      const img = overlay.querySelector('.image-viewer-content img');
+      if (img) img.src = '';
+    }
+  }
+  function isViewerOpen() {
+    const overlay = document.getElementById('imageViewer');
+    return !!(overlay && overlay.classList.contains('show'));
+  }
   // 拖拽功能
   let dragState = {
     isDragging: false,
   async function saveToChosenFolder(filename, dataUrl) {
     if (!state.folderHandle) return false;
     try {
+      // 如果无写入权限，避免在非用户激活上下文触发授权提示
+      const perm = await state.folderHandle.queryPermission({ mode: 'readwrite' });
+      if (perm !== 'granted') return false;
       const fileHandle = await state.folderHandle.getFileHandle(filename, { create: true });
       const writable = await fileHandle.createWritable();
       await writable.write(dataURLtoBlob(dataUrl));
         return;
       }
       const handle = await window.showDirectoryPicker();
+      // 在用户点击的上下文中请求写入权限
+      let perm = 'prompt';
+      if ('queryPermission' in handle && 'requestPermission' in handle) {
+        perm = await handle.queryPermission({ mode: 'readwrite' });
+        if (perm !== 'granted') {
+          perm = await handle.requestPermission({ mode: 'readwrite' });
+        }
+      }
       state.folderHandle = handle;
+      const ok = perm === 'granted';
+      qs('#folderStatus').textContent = ok ? '已选择（可写）' : '已选择（只读）';
+      qs('#folderStatusMobile').textContent = ok ? '已选择（可写）' : '已选择（只读）';
     } catch(e) {
       qs('#folderStatus').textContent = '未选择';
       qs('#folderStatusMobile').textContent = '未选择';
           const fname = `image_${Date.now()}_${Math.random().toString(16).slice(2)}.jpg`;
           updateCardWithImage(placeholder, dataUrl, p, fname);
+          let saved = false;
           if (state.folderHandle) {
+            try {
+              saved = await saveToChosenFolder(fname, dataUrl);
+            } catch(e) {
+              saved = false;
+            }
+          }
+          if (!saved) {
+            downloadImageMobile(fname, dataUrl);
           }
           if (state.sound) {
     // 键盘事件
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && !state.sidebarOpen) generate();
+      if (e.key === 'Escape') {
+        if (isViewerOpen()) {
+          closeImageViewer();
+        } else if (state.sidebarOpen) {
+          closeSidebar();
+        }
+      }
+    });// 响应式检测
     window.addEventListener('resize', checkMobile);
     checkMobile();

server.js CHANGED Viewed

@@ -62,11 +62,17 @@ app.use(helmet.contentSecurityPolicy({
   useDefaults: true,
   directives: {
     "default-src": ["'self'"],
     "script-src": ["'self'", "'unsafe-inline'"],
     "style-src": ["'self'", "'unsafe-inline'"],
     "img-src": ["'self'", "data:", "blob:"],
-    "font-src": ["'self'", "data:"],
-    "connect-src": ["'self'", "https://image.chutes.ai"],
     "media-src": ["'self'", "data:", "blob:"],
     "frame-ancestors": ["'self'", "https://huggingface.co", "https://*.huggingface.co"]
   }
@@ -369,12 +375,10 @@ app.post('/api/generate', async (req, res) => {
     // Minimal payload (some models reject extended fields). Include size/steps/seed for hunyuan-image-3 compatibility
     const variantCMinimal = {
       model: targetModel,
-      input_args: {
-        prompt: flat.prompt,
-        size: `${flat.width}x${flat.height}`,
-        steps: flat.num_inference_steps,
-        ...(flat.seed !== null ? { seed: flat.seed } : {})
-      }
     };
     // duplicate removed
@@ -457,78 +461,81 @@ app.post('/api/generate', async (req, res) => {
         result = await tryCall(variantCMinimal, 'minimal', generateUrl);
       } catch (e0) { /* continue */ }
     }
-    try {
-      result = await tryCall(variantA, 'nested', generateUrl);
-    } catch (e1) {
       try {
-        result = await tryCall(variantB, 'flat', generateUrl);
-      } catch (e2) {
-                // Auto fallback to another model when capacity/infrastructure errors (disabled when NO_FALLBACK=true)
-                const capacityCodes = ['UPSTREAM_CAPACITY_EXHAUSTED','UPSTREAM_NO_INSTANCES','UPSTREAM_INFRASTRUCTURE','UPSTREAM_BAD_GATEWAY'];
-                if (AUTO_FALLBACK && !NO_FALLBACK && capacityCodes.includes(e2.code || '') ) {
-          // choose fallback model (prefer free and different from current)
-          function chooseFallback(currentId, list) {
-            const key = (currentId || '').toLowerCase();
-            const free = list.filter(m => m.free && (m.id || m.name || '').toLowerCase() !== key);
-            if (free.length) return (free[0].upstream_id || free[0].id || free[0].name);
-            const any = list.find(m => (m.id || m.name || '').toLowerCase() !== key);
-            if (any) return (any.upstream_id || any.id || any.name);
-            return null;
-          }
-          const fallbackModel = chooseFallback(targetModel, localList);
-          if (fallbackModel && fallbackModel !== targetModel) {
-            const fbA = { ...variantA, model: fallbackModel };
-            const fbB = { ...variantB, model: fallbackModel };
-            // Choose URL for fallback model
-            const fbCfg = getModelConfig(localList, fallbackModel);
-            const fbUrl = (fbCfg && fbCfg.upstream_url) ? fbCfg.upstream_url : GENERATE_API_URL;
-            try {
-              result = await tryCall(fbA, 'nested-fallback', fbUrl);
-            } catch (e3) {
               try {
-                result = await tryCall(fbB, 'flat-fallback', fbUrl);
-              } catch (e4) {
-                const status = e4.status || 502;
-                return res.status(status).json({
-                  ok: false,
-                  error: e4.hint || e4.message || 'Upstream error',
-                  code: e4.code || 'UPSTREAM_ERROR',
-                  upstream_model: targetModel,
-                  fallback_model: fallbackModel
-                });
               }
             }
-            // success with fallback
-            return res.json({
-              ok: true,
-              image: `data:${result.contentType};base64,${result.imageBase64}`,
-              contentType: result.contentType,
-              meta: {
-                model: flat.model,
-                upstream_model: targetModel,
-                fallback_used: true,
-                fallback_model: fallbackModel,
-                width: flat.width,
-                height: flat.height,
-                guidance_scale: flat.guidance_scale,
-                num_inference_steps: flat.num_inference_steps,
-                seed: flat.seed
-              },
-              tried: result.tried
-            });
           }
         }
-        const status = e2.status || 502;
-        return res.status(status).json({
-          ok: false,
-          error: e2.hint || e2.message || 'Upstream error',
-          code: e2.code || 'UPSTREAM_ERROR',
-          upstream_model: targetModel
-        });
       }
     }
     return res.json({
       ok: true,
       image: `data:${result.contentType};base64,${result.imageBase64}`,

   useDefaults: true,
   directives: {
     "default-src": ["'self'"],
+    // Allow SPA inline scripts but forbid inline event attributes per CSP3
     "script-src": ["'self'", "'unsafe-inline'"],
+    "script-src-attr": ["'none'"],
+    // Permit external stylesheet from Baomitu CDN via style-src-elem
     "style-src": ["'self'", "'unsafe-inline'"],
+    "style-src-elem": ["'self'", "'unsafe-inline'", "https://lib.baomitu.com"],
     "img-src": ["'self'", "data:", "blob:"],
+    // Allow Baomitu icon fonts
+    "font-src": ["'self'", "data:", "https://lib.baomitu.com"],
+    // Allow CSS sourcemap requests to Baomitu CDN
+    "connect-src": ["'self'", "https://image.chutes.ai", "https://lib.baomitu.com"],
     "media-src": ["'self'", "data:", "blob:"],
     "frame-ancestors": ["'self'", "https://huggingface.co", "https://*.huggingface.co"]
   }
     // Minimal payload (some models reject extended fields). Include size/steps/seed for hunyuan-image-3 compatibility
     const variantCMinimal = {
       model: targetModel,
+      prompt: flat.prompt,
+      size: `${flat.width}x${flat.height}`,
+      steps: flat.num_inference_steps,
+      ...(flat.seed !== null ? { seed: flat.seed } : {})
     };
     // duplicate removed
         result = await tryCall(variantCMinimal, 'minimal', generateUrl);
       } catch (e0) { /* continue */ }
     }
+    else {
       try {
+        result = await tryCall(variantA, 'nested', generateUrl);
+      } catch (e1) {
+        try {
+          result = await tryCall(variantB, 'flat', generateUrl);
+        } catch (e2) {
+                  // Auto fallback to another model when capacity/infrastructure errors (disabled when NO_FALLBACK=true)
+                  const capacityCodes = ['UPSTREAM_CAPACITY_EXHAUSTED','UPSTREAM_NO_INSTANCES','UPSTREAM_INFRASTRUCTURE','UPSTREAM_BAD_GATEWAY'];
+                  if (AUTO_FALLBACK && !NO_FALLBACK && capacityCodes.includes(e2.code || '') ) {
+            // choose fallback model (prefer free and different from current)
+            function chooseFallback(currentId, list) {
+              const key = (currentId || '').toLowerCase();
+              const free = list.filter(m => m.free && (m.id || m.name || '').toLowerCase() !== key);
+              if (free.length) return (free[0].upstream_id || free[0].id || free[0].name);
+              const any = list.find(m => (m.id || m.name || '').toLowerCase() !== key);
+              if (any) return (any.upstream_id || any.id || any.name);
+              return null;
+            }
+            const fallbackModel = chooseFallback(targetModel, localList);
+            if (fallbackModel && fallbackModel !== targetModel) {
+              const fbA = { ...variantA, model: fallbackModel };
+              const fbB = { ...variantB, model: fallbackModel };
+              // Choose URL for fallback model
+              const fbCfg = getModelConfig(localList, fallbackModel);
+              const fbUrl = (fbCfg && fbCfg.upstream_url) ? fbCfg.upstream_url : GENERATE_API_URL;
               try {
+                result = await tryCall(fbA, 'nested-fallback', fbUrl);
+              } catch (e3) {
+                try {
+                  result = await tryCall(fbB, 'flat-fallback', fbUrl);
+                } catch (e4) {
+                  const status = e4.status || 502;
+                  return res.status(status).json({
+                    ok: false,
+                    error: e4.hint || e4.message || 'Upstream error',
+                    code: e4.code || 'UPSTREAM_ERROR',
+                    upstream_model: targetModel,
+                    fallback_model: fallbackModel
+                  });
+                }
               }
+              // success with fallback
+              return res.json({
+                ok: true,
+                image: `data:${result.contentType};base64,${result.imageBase64}`,
+                contentType: result.contentType,
+                meta: {
+                  model: flat.model,
+                  upstream_model: targetModel,
+                  fallback_used: true,
+                  fallback_model: fallbackModel,
+                  width: flat.width,
+                  height: flat.height,
+                  guidance_scale: flat.guidance_scale,
+                  num_inference_steps: flat.num_inference_steps,
+                  seed: flat.seed
+                },
+                tried: result.tried
+              });
             }
           }
+          const status = e2.status || 502;
+          return res.status(status).json({
+            ok: false,
+            error: e2.hint || e2.message || 'Upstream error',
+            code: e2.code || 'UPSTREAM_ERROR',
+            upstream_model: targetModel
+          });
         }
       }
     }
     return res.json({
       ok: true,
       image: `data:${result.contentType};base64,${result.imageBase64}`,