Upload 21 files

backend/server.py

@@ -1,38 +1,25 @@
 from __future__ import annotations
 
-import threading
-import time
-import webbrowser
-
+import os
 import uvicorn
 
 from .app import app
 from .config import load_config
 
 
-def _open_browser_later(url: str, delay: float = 1.5):
-    def _opener():
-        time.sleep(delay)
-        try:
-            webbrowser.open(url)
-        except Exception:
-            pass
-
-    t = threading.Thread(target=_opener, daemon=True)
-    t.start()
-
-
 if __name__ == "__main__":
     cfg = load_config()
-    # HF 环境使用 0.0.0.0，默认端口 7860
-    port = int(cfg.port or 7860)
+    # HF 环境固定使用端口 7860
+    port = 7860
     host = "0.0.0.0"
     
-    print(f"[New NAI HF] 服务运行于 http://{host}:{port}")
-    print(f"[New NAI HF] HF Space 通过公共 URL 访问")
-    
-    # HF 环境不自动打开浏览器
-    # _open_browser_later(url)
+    # 检测是否在 HF Space 环境
+    space_id = os.environ.get("SPACE_ID", "")
+    if space_id:
+        print(f"[New NAI HF] 正在 HF Space 中运行: {space_id}")
+        print(f"[New NAI HF] 请通过 HF Space 公共 URL 访问")
+    else:
+        print(f"[New NAI HF] 服务已启动，端口: {port}")
     
-    # 使用 0.0.0.0 监听以便 HF Space 外部访问
+    # 使用 0.0.0.0 监听以便外部访问
     uvicorn.run(app, host=host, port=port, reload=False)

frontend/assets/app.js

@@ -194,6 +194,71 @@
     },
   };
 
+  // ===== 自定义背景功能 =====
+  const STORAGE_KEY_BG = 'nai_custom_background';
+  
+  function applyCustomBackground(imageDataUrl) {
+    if (imageDataUrl) {
+      document.body.style.backgroundImage = `url('${imageDataUrl}')`;
+      localStorage.setItem(STORAGE_KEY_BG, imageDataUrl);
+    }
+  }
+  
+  function resetBackground() {
+    document.body.style.backgroundImage = '';
+    localStorage.removeItem(STORAGE_KEY_BG);
+    // 让CSS的默认背景生效
+    toast("已重置为默认背景", "success");
+  }
+  
+  function loadCustomBackground() {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY_BG);
+      if (saved) {
+        document.body.style.backgroundImage = `url('${saved}')`;
+      }
+    } catch {}
+  }
+  
+  function setupCustomBackground() {
+    const bgInput = byId("cfg-custom-bg");
+    const resetBtn = byId("btn-reset-bg");
+    
+    if (bgInput) {
+      bgInput.addEventListener("change", async (e) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        
+        // 检查文件大小（限制5MB）
+        if (file.size > 5 * 1024 * 1024) {
+          toast("图片文件过大，请选择小于5MB的图片", "error");
+          return;
+        }
+        
+        try {
+          const reader = new FileReader();
+          reader.onload = (ev) => {
+            const dataUrl = ev.target?.result;
+            if (dataUrl) {
+              applyCustomBackground(dataUrl);
+              toast("背景已更新", "success");
+            }
+          };
+          reader.onerror = () => {
+            toast("读取图片失败", "error");
+          };
+          reader.readAsDataURL(file);
+        } catch (err) {
+          toast("设置背景失败", "error");
+        }
+      });
+    }
+    
+    if (resetBtn) {
+      resetBtn.addEventListener("click", resetBackground);
+    }
+  }
+
   // Config
   async function loadConfig() {
     try {
@@ -211,9 +276,6 @@
       byId("cfg-uc-preset").value = cfg.uc_preset ?? "";
       byId("cfg-quality-toggle").checked = !!cfg.quality_toggle;
       byId("cfg-legacy-uc").checked = !!cfg.legacy_uc;
-      byId("cfg-port").value = cfg.port ?? 7860;
-      byId("cfg-save-output").checked = !!cfg.save_output;
-      if (byId("cfg-output-dir")) byId("cfg-output-dir").value = cfg.output_dir ?? "";
 
       // 提示音配置
       soundEnabled = !!cfg.sound_enabled;
@@ -221,7 +283,7 @@
       if (byId("sound-player")) byId("sound-player").src = soundUrl;
       (typeof updateSoundToggle === "function") && updateSoundToggle();
 
-      // 隐藏下方“配置已读取”提示
+      // 隐藏下方"配置已读取"提示
       byId("cfg-message").textContent = "";
     } catch (err) {
       byId("cfg-message").textContent = "读取失败：" + err.message;
@@ -235,7 +297,8 @@
     return v;
   }
 
-  async function saveConfig() {
+  // HF版本：配置自动保存到服务器（无需手动点击保存按钮）
+  async function autoSaveConfig() {
     const payload = {
       key: nullIfEmpty(byId("cfg-key").value),
       model: nullIfEmpty(byId("cfg-model").value),
@@ -247,31 +310,48 @@
       uc_preset: byId("cfg-uc-preset").value ? Number(byId("cfg-uc-preset").value) : null,
       quality_toggle: byId("cfg-quality-toggle").checked,
       legacy_uc: byId("cfg-legacy-uc").checked,
-      port: byId("cfg-port").value ? Number(byId("cfg-port").value) : null,
-      save_output: byId("cfg-save-output").checked,
-      output_dir: nullIfEmpty(byId("cfg-output-dir")?.value),
       sound_enabled: !!soundEnabled,
       sound_url: nullIfEmpty(soundUrl),
     };
 
     try {
-      loading.show();
       const res = await fetch("/api/config", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(payload),
       });
-      if (!res.ok) throw new Error(await res.text());
-      await res.json();
-      byId("cfg-message").textContent = "保存成功";
-      toast("配置已保存", "success");
+      // 静默保存，不显示提示
     } catch (err) {
-      byId("cfg-message").textContent = "保存失败：" + err.message;
-      toast("保存配置失败", "error");
-    } finally {
-      loading.hide();
+      // 忽略错误
     }
   }
+  
+  // 配置字段变化时自动保存（防抖）
+  let configSaveTimer = null;
+  function setupAutoSaveConfig() {
+    const configFields = [
+      "cfg-key", "cfg-model", "cfg-sampler", "cfg-steps", "cfg-scale",
+      "cfg-cfg-rescale", "cfg-noise-schedule", "cfg-uc-preset",
+      "cfg-quality-toggle", "cfg-legacy-uc"
+    ];
+    
+    configFields.forEach(id => {
+      const el = byId(id);
+      if (el) {
+        el.addEventListener("change", () => {
+          if (configSaveTimer) clearTimeout(configSaveTimer);
+          configSaveTimer = setTimeout(autoSaveConfig, 500);
+        });
+        // 对于���本输入，也监听input事件
+        if (el.tagName === "INPUT" && (el.type === "text" || el.type === "password" || el.type === "number")) {
+          el.addEventListener("input", () => {
+            if (configSaveTimer) clearTimeout(configSaveTimer);
+            configSaveTimer = setTimeout(autoSaveConfig, 1000);
+          });
+        }
+      }
+    });
+  }
 
   // File -> Base64 (strip data URL prefix)
   function fileToBase64(file) {
@@ -797,100 +877,27 @@
   }
 
   // Bindings
-  // 为每个 Tab 注入“数量”输入（默认 1，可调至 8）
+  // 为每个 Tab 注入"数量"输入（默认 1，可调至 8）
   ensureCountField("tab-t2i", "t2i-count");
   ensureCountField("tab-i2i", "i2i-count");
   ensureCountField("tab-inpaint", "inpaint-count");
 
-  byId("btn-save-config").addEventListener("click", saveConfig);
-  const selOutBtn = byId("btn-select-output-dir");
-  if (selOutBtn) {
-    selOutBtn.addEventListener("click", async () => {
-      // 移动端检测：手机无法弹出服务器上的目录选择器
-      if (isMobileDevice()) {
-        toast("手机端请直接在输入框中填写目录路径", "info");
-        return;
-      }
-      
-      try {
-        loading.show();
-        const res = await fetch("/api/select-output-dir");
-        if (!res.ok) {
-          const body = await res.json().catch(() => ({}));
-          // 区分HF环境和本地环境
-          const isHF = res.status === 501;
-          if (isHF) {
-            toast("请直接在输入框中手动填写保存目录路径", "info");
-          } else {
-            toast(body?.detail || "选择失败，请手动在输入框填入保存目录", "error");
-          }
-          return;
-        }
-        const body = await res.json();
-        const p = String(body?.path || "");
-        if (p) {
-          const input = byId("cfg-output-dir");
-          if (input) input.value = p;
-          toast("已选择保存目录", "success");
-        } else {
-          toast("未选择任何目录", "info");
-        }
-      } catch (e) {
-        toast(String(e?.message || e), "error");
-      } finally {
-        loading.hide();
-      }
-    });
-  }
-  const openOutBtn = byId("btn-open-output-dir");
-  if (openOutBtn) {
-    openOutBtn.addEventListener("click", async () => {
-      // 移动端检测：手机无法打开服务器上的目录
-      if (isMobileDevice()) {
-        toast("手机端无法打开服务器目录，请在电脑上操作", "info");
-        return;
-      }
-      
-      try {
-        loading.show();
-        const p = byId("cfg-output-dir")?.value || "";
-        if (!p) {
-          toast("请先填写保存目录路径", "error");
-          return;
-        }
-        const res = await fetch("/api/open-dir", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ path: p }),
-        });
-        if (!res.ok) {
-          const body = await res.json().catch(() => ({}));
-          const isHF = res.status === 501;
-          if (isHF) {
-            toast("HF 环境不支持打开系统目录", "info");
-          } else {
-            throw new Error(body?.detail || "打开目录失败");
-          }
-          return;
-        }
-        toast("已打开保存目录", "success");
-      } catch (e) {
-        toast(String(e?.message || e), "error");
-      } finally {
-        loading.hide();
-      }
-    });
-  }
-  
   byId("btn-t2i").addEventListener("click", handleT2I);
   byId("btn-i2i").addEventListener("click", handleI2I);
   byId("btn-inpaint").addEventListener("click", handleInpaint);
   
   // 设置图片信息展开/收起功能
   setupImageInfoToggle();
+  
+  // 设置自定义背景功能
+  setupCustomBackground();
+  
+  // 设置配置自动保存
+  setupAutoSaveConfig();
  
-  // Init - 加载配置和恢复上次的生成参数
+  // Init - 加载配置、恢复上次的生成参数、加载自定义背景
   loadConfig();
+  loadCustomBackground();
   restoreT2IParams();
   restoreI2IParams();
   restoreInpaintParams();

frontend/assets/style.css

@@ -470,6 +470,37 @@ input[type="file"] {
   border: 1px solid var(--border);
 }
 
+/* 自定义背景上传组件 */
+.background-upload-wrapper {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.background-upload-wrapper input[type="file"] {
+  flex: 1;
+  min-width: 200px;
+}
+
+.background-upload-wrapper button {
+  flex-shrink: 0;
+  padding: 10px 16px;
+  font-size: 14px;
+}
+
+/* HF 环境提示信息 */
+.hf-notice {
+  color: var(--muted);
+  font-size: 13px;
+  margin-top: 12px;
+  padding: 10px 14px;
+  background: var(--card);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  text-align: center;
+}
+
 /* ===== 主题变量与覆盖 ===== */
 /* 深色为默认 */
 :root,

frontend/index.html

@@ -108,25 +108,17 @@
             <input id="cfg-legacy-uc" type="checkbox" />
             <span>兼容旧版 UC</span>
           </label>
-          <label>
-            <span>服务端口</span>
-            <input id="cfg-port" type="number" min="1" step="1" placeholder="默认 9180" />
-          </label>
-          <label class="switch">
-            <input id="cfg-save-output" type="checkbox" />
-            <span>保存到输出目录</span>
-          </label>
+          <!-- 自定义背景 -->
           <label class="full">
-            <span>保存目录</span>
-            <input id="cfg-output-dir" type="text" placeholder="例如：D:\Pictures\NAI 输出（留空=默认 output）" />
+            <span>自定义背景图片</span>
+            <div class="background-upload-wrapper">
+              <input id="cfg-custom-bg" type="file" accept="image/*" />
+              <button id="btn-reset-bg" type="button">重置背景</button>
+            </div>
           </label>
         </div>
-        <div class="actions">
-          <button id="btn-select-output-dir">选择保存目录</button>
-          <button id="btn-open-output-dir">打开保存目录</button>
-          <button id="btn-save-config" class="primary">保存配置</button>
-        </div>
         <p id="cfg-message" class="message"></p>
+        <p class="hf-notice">注：HF 云端环境无需保存配置，设置会自动应用</p>
       </div>
     </section>