feat(model-manager): generated-photo Gallery + device-routing landing

- Gallery view: grid of generated photos from ComfyUI's output/, full-size lightbox, and permanent delete (with confirm). Paginated ("Load more"). - Backend: GET /api/gallery, GET /gallery/file (path-guarded image serve), DELETE /api/gallery (path-guarded; clear error on permission denial). - Mount ./output read-write into model-manager so the gallery can delete. - Device-routing landing at /start: phones -> ComfyUIMini, desktops -> the Gallery; ?force=mobile|desktop overrides. Ports come from the new /api/ui-config (COMFYUI_PORT / COMFYUIMINI_PORT env). - Responsive tweaks so the gallery is usable if opened directly on a phone. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-07 15:41:46 -04:00
parent 0b606721dd
commit c9fa3fcab5
8 changed files with 388 additions and 1 deletions
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SparkyUI</title>
+  <link rel="stylesheet" href="/style.css" />
+  <style>
+    body { display: flex; align-items: center; justify-content: center; height: 100vh; }
+    .start { text-align: center; max-width: 420px; padding: 24px; }
+    .start .spark { font-size: 48px; }
+    .start h1 { margin: 10px 0 4px; }
+    .start p { color: var(--text-dim); }
+    .start .links { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
+    .start a.btn { text-decoration: none; }
+  </style>
+</head>
+<body>
+  <div class="start">
+    <div class="spark">⚡</div>
+    <h1>SparkyUI</h1>
+    <p id="msg">Detecting your device…</p>
+    <div class="links" id="links" style="display:none">
+      <a class="btn primary" id="lnkMobile" href="#">📱 Mobile UI (ComfyUIMini)</a>
+      <a class="btn" id="lnkDesktop" href="/">🖥 Desktop interface (Gallery)</a>
+    </div>
+  </div>
+
+  <script>
+    function isMobile() {
+      const ua = /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
+      const narrow = window.matchMedia("(max-width: 820px)").matches;
+      return ua || narrow;
+    }
+
+    (async function () {
+      let miniPort = "3000";
+      try {
+        const cfg = await (await fetch("/api/ui-config")).json();
+        miniPort = cfg.comfyuimini_port || miniPort;
+      } catch (e) { /* fall back to default port */ }
+
+      const mobileUrl = `${location.protocol}//${location.hostname}:${miniPort}`;
+      const desktopUrl = "/?view=gallery";
+
+      // Populate the manual links either way.
+      document.getElementById("lnkMobile").href = mobileUrl;
+      document.getElementById("lnkDesktop").href = desktopUrl;
+
+      // Honor an explicit override (?force=mobile|desktop) so users aren't trapped.
+      const force = new URLSearchParams(location.search).get("force");
+      if (force === "mobile") return void (location.href = mobileUrl);
+      if (force === "desktop") return void (location.href = desktopUrl);
+
+      if (isMobile()) {
+        location.replace(mobileUrl);
+      } else {
+        location.replace(desktopUrl);
+      }
+
+      // If redirect is blocked, show manual choices after a moment.
+      setTimeout(() => {
+        document.getElementById("msg").textContent = "Choose an interface:";
+        document.getElementById("links").style.display = "flex";
+      }, 1200);
+    })();
+  </script>
+</body>
+</html>