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>

README.md

@@ -235,6 +235,8 @@ SparkyUI includes a **StabilityMatrix-style Model Manager** - a lightweight Fast
 **Access:** `http://<your-dgx-ip>:8189`
 
 **Features:**
+- **Gallery** - browse generated photos from ComfyUI's `output/` in a large desktop grid,
+  click for a full-size lightbox view, and **permanently delete** photos (with confirm).
 - **Browse CivitAI** - search the CivitAI catalog in a thumbnail grid (filter by type,
   sort, period, NSFW toggle) and **click a model to download it** - no URL pasting needed.
   Multi-version models get a version picker on the card.
@@ -253,6 +255,12 @@ SparkyUI includes a **StabilityMatrix-style Model Manager** - a lightweight Fast
   by type (`checkpoints/`, `loras/`, `vae/`, `controlnet/`, `upscale_models/`, …) - these are
   created automatically on first start
 - ComfyUI mounts the same `models/` folder read-only, so new downloads appear in its loaders
+- Mounts the shared `output/` folder read-write for the Gallery's delete feature
+
+**Device-aware entry point:** open `http://<host>:8189/start` and it detects your device -
+**phones** are sent to the mobile UI (ComfyUIMini), **desktops** land on the Model Manager's
+Gallery. Append `?force=mobile` or `?force=desktop` to override. Bookmark `/start` as your
+single SparkyUI link.
 
 **Build only the Model Manager** (if the rest is already built):
 ```bash

docker-compose.yml

@@ -148,11 +148,17 @@ services:
     environment:
       MODELS_DIR: /models
       DATA_DIR: /data
+      OUTPUT_DIR: /output
+      # Ports used by the device-routing landing page (/start)
+      COMFYUI_PORT: "${COMFYUI_PORT:-8188}"
+      COMFYUIMINI_PORT: "${COMFYUIMINI_PORT:-3000}"
 
     volumes:
       # Shared models dir - read-WRITE here so downloads land on the host.
       # ComfyUI mounts the same host folder read-only and picks up new files.
       - ${COMFYUI_HOST_PATH:-.}/models:/models
+      # Generated images - read-WRITE so the gallery can delete photos.
+      - ${SPARKYUI_DATA_PATH:-.}/output:/output
       # Persistent SQLite DB (sources, API keys, download history)
       - ${SPARKYUI_DATA_PATH:-.}/sparkyui-data:/data
 

model-manager/app/config.py

@@ -10,8 +10,18 @@ MODELS_DIR = Path(os.environ.get("MODELS_DIR", "/models")).resolve()
 # Persistent data dir for the SQLite database.
 DATA_DIR = Path(os.environ.get("DATA_DIR", "/data")).resolve()
 
+# Generated images directory (ComfyUI output), mounted read-write for the gallery.
+OUTPUT_DIR = Path(os.environ.get("OUTPUT_DIR", "/output")).resolve()
+
 DB_PATH = DATA_DIR / "manager.db"
 
+# Ports of the sibling services, used by the device-routing landing page.
+COMFYUI_PORT = os.environ.get("COMFYUI_PORT", "8188")
+COMFYUIMINI_PORT = os.environ.get("COMFYUIMINI_PORT", "3000")
+
+# Image file types shown in the gallery.
+IMAGE_EXTS = {".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp"}
+
 # StabilityMatrix-style model types mapped to ComfyUI's standard `models/` subfolders.
 # `key` is the stable id used by the API/UI; `folder` is the on-disk subdirectory.
 MODEL_TYPES: list[dict[str, str]] = [
@@ -51,3 +61,16 @@ def ensure_dirs() -> None:
     MODELS_DIR.mkdir(parents=True, exist_ok=True)
     for t in MODEL_TYPES:
         (MODELS_DIR / t["folder"]).mkdir(parents=True, exist_ok=True)
+
+
+def safe_output_path(rel_path: str) -> Path:
+    """Resolve a gallery-relative path to an absolute one under OUTPUT_DIR.
+
+    Raises ValueError on any attempt to escape the output directory.
+    """
+    # Normalize and strip leading separators so it's treated as relative.
+    rel = rel_path.replace("\\", "/").lstrip("/")
+    target = (OUTPUT_DIR / rel).resolve()
+    if target != OUTPUT_DIR and not str(target).startswith(str(OUTPUT_DIR) + os.sep):
+        raise ValueError("Path is outside the output directory")
+    return target

model-manager/app/main.py

@@ -13,11 +13,16 @@ from pydantic import BaseModel
 
 from . import db, downloader, registries
 from .config import (
+    COMFYUI_PORT,
+    COMFYUIMINI_PORT,
+    IMAGE_EXTS,
     KEY_BY_FOLDER,
     MODEL_TYPES,
     MODELS_DIR,
+    OUTPUT_DIR,
     TYPE_BY_KEY,
     ensure_dirs,
+    safe_output_path,
 )
 
 STATIC_DIR = Path(__file__).parent / "static"
@@ -214,6 +219,78 @@ def delete_download(download_id: int) -> dict:
     return {"removed": download_id}
 
 
+# ---- gallery (generated photos) -------------------------------------------
+
+@app.get("/api/gallery")
+def list_gallery(limit: int = 60, offset: int = 0) -> dict:
+    """List generated images under OUTPUT_DIR, newest first, paginated."""
+    files: list[dict] = []
+    if OUTPUT_DIR.is_dir():
+        for path in OUTPUT_DIR.rglob("*"):
+            if not path.is_file() or path.suffix.lower() not in IMAGE_EXTS:
+                continue
+            rel = path.relative_to(OUTPUT_DIR).as_posix()
+            stat = path.stat()
+            files.append({
+                "path": rel,
+                "name": path.name,
+                "subfolder": path.parent.relative_to(OUTPUT_DIR).as_posix()
+                if path.parent != OUTPUT_DIR else "",
+                "size": stat.st_size,
+                "mtime": stat.st_mtime,
+            })
+    files.sort(key=lambda f: f["mtime"], reverse=True)
+    total = len(files)
+    page = files[offset:offset + max(1, min(limit, 500))]
+    return {"items": page, "total": total,
+            "offset": offset, "returned": len(page)}
+
+
+@app.get("/gallery/file")
+def gallery_file(path: str):
+    try:
+        target = safe_output_path(path)
+    except ValueError:
+        raise HTTPException(400, "Invalid path")
+    if not target.is_file() or target.suffix.lower() not in IMAGE_EXTS:
+        raise HTTPException(404, "Image not found")
+    return FileResponse(target)
+
+
+class DeletePhotoIn(BaseModel):
+    path: str
+
+
+@app.delete("/api/gallery")
+def delete_photo(body: DeletePhotoIn) -> dict:
+    try:
+        target = safe_output_path(body.path)
+    except ValueError:
+        raise HTTPException(400, "Invalid path")
+    if not target.is_file():
+        raise HTTPException(404, "Image not found")
+    try:
+        target.unlink()
+    except PermissionError:
+        raise HTTPException(
+            403,
+            "Permission denied (file is in a folder owned by another user). "
+            "Run ComfyUI as the same UID, or remove it from a host shell.")
+    return {"deleted": body.path}
+
+
+# ---- device routing / ui config -------------------------------------------
+
+@app.get("/api/ui-config")
+def ui_config() -> dict:
+    return {"comfyui_port": COMFYUI_PORT, "comfyuimini_port": COMFYUIMINI_PORT}
+
+
+@app.get("/start")
+def start() -> FileResponse:
+    return FileResponse(STATIC_DIR / "start.html")
+
+
 # ---- static UI ------------------------------------------------------------
 
 @app.get("/")

model-manager/app/static/app.js

@@ -38,6 +38,7 @@ function showView(name) {
   $$(".nav-item").forEach((b) => b.classList.toggle("active", b.dataset.view === name));
   $$(".view").forEach((v) => v.classList.toggle("active", v.id === `view-${name}`));
   if (name === "installed") loadModels();
+  if (name === "gallery") loadGallery(true);
   if (name === "browse" && !browseState.loaded) runSearch(true);
   if (name === "download") { loadDownloads(); startDownloadsPolling(); }
   else stopDownloadsPolling();
@@ -244,6 +245,113 @@ function stopDownloadsPolling() {
   if (downloadsTimer) { clearInterval(downloadsTimer); downloadsTimer = null; }
 }
 
+// ---- gallery (generated photos) -------------------------------------------
+
+const galleryState = { offset: 0, limit: 60, total: 0 };
+
+async function loadGallery(reset) {
+  const grid = $("#galleryGrid");
+  const moreBtn = $("#galleryMore");
+  if (reset) {
+    galleryState.offset = 0;
+    grid.innerHTML = `<p class="empty">Loading…</p>`;
+  } else {
+    moreBtn.textContent = "Loading…";
+  }
+  try {
+    const data = await api(
+      `/api/gallery?limit=${galleryState.limit}&offset=${galleryState.offset}`);
+    if (reset) grid.innerHTML = "";
+    if (!data.items.length && reset) {
+      grid.innerHTML = `<p class="empty">No generated photos yet.</p>`;
+    } else {
+      for (const p of data.items) grid.appendChild(renderPhotoCard(p));
+    }
+    galleryState.total = data.total;
+    galleryState.offset += data.returned;
+    const hasMore = galleryState.offset < galleryState.total;
+    moreBtn.style.display = hasMore ? "" : "none";
+    moreBtn.textContent = "Load more";
+  } catch (err) {
+    if (reset) grid.innerHTML = `<p class="empty">Error: ${err.message}</p>`;
+    moreBtn.textContent = "Load more";
+  }
+}
+
+function photoUrl(p) {
+  return `/gallery/file?path=${encodeURIComponent(p.path)}`;
+}
+
+function renderPhotoCard(p) {
+  const card = document.createElement("div");
+  card.className = "photo-card";
+
+  const img = document.createElement("img");
+  img.loading = "lazy";
+  img.src = photoUrl(p);
+  img.alt = p.name;
+
+  const del = document.createElement("button");
+  del.className = "p-del";
+  del.title = "Delete";
+  del.textContent = "🗑";
+  del.addEventListener("click", (e) => { e.stopPropagation(); deletePhoto(p, card); });
+
+  const meta = document.createElement("div");
+  meta.className = "p-meta";
+  meta.textContent = `${p.name} · ${fmtBytes(p.size)}`;
+
+  card.append(img, del, meta);
+  card.addEventListener("click", () => openLightbox(p, card));
+  return card;
+}
+
+async function deletePhoto(p, card) {
+  if (!confirm(`Permanently delete ${p.name}?`)) return;
+  try {
+    await api("/api/gallery", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: p.path }),
+    });
+    if (card) card.remove();
+    galleryState.total = Math.max(0, galleryState.total - 1);
+    galleryState.offset = Math.max(0, galleryState.offset - 1);
+    closeLightbox();
+    toast($("#galleryToast"), "Deleted", false);
+    if (!$("#galleryGrid").children.length) loadGallery(true);
+  } catch (err) {
+    toast($("#galleryToast"), err.message, true);
+  }
+}
+
+// lightbox
+let lbCurrent = null;
+function openLightbox(p, card) {
+  lbCurrent = { p, card };
+  $("#lbImage").src = photoUrl(p);
+  $("#lbName").textContent = p.path;
+  $("#lbOpen").href = photoUrl(p);
+  $("#lightbox").hidden = false;
+}
+function closeLightbox() {
+  $("#lightbox").hidden = true;
+  $("#lbImage").src = "";
+  lbCurrent = null;
+}
+$("#lbClose").addEventListener("click", closeLightbox);
+$("#lightbox").addEventListener("click", (e) => {
+  if (e.target.id === "lightbox") closeLightbox();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !$("#lightbox").hidden) closeLightbox();
+});
+$("#lbDelete").addEventListener("click", () => {
+  if (lbCurrent) deletePhoto(lbCurrent.p, lbCurrent.card);
+});
+$("#refreshGallery").addEventListener("click", () => loadGallery(true));
+$("#galleryMore").addEventListener("click", () => loadGallery(false));
+
 // ---- browse civitai -------------------------------------------------------
 
 const browseState = { loaded: false, page: null, cursor: null, busy: false };
@@ -445,5 +553,7 @@ $("#saveSettings").addEventListener("click", async () => {
 
 (async function init() {
   await loadModelTypes();
-  showView("installed");
+  const wanted = new URLSearchParams(location.search).get("view");
+  const valid = ["installed", "gallery", "browse", "download", "settings"];
+  showView(valid.includes(wanted) ? wanted : "installed");
 })();

model-manager/app/static/index.html

@@ -20,6 +20,9 @@
         <button class="nav-item active" data-view="installed">
           <span class="nav-ico">▦</span> Installed Models
         </button>
+        <button class="nav-item" data-view="gallery">
+          <span class="nav-ico">🖼</span> Gallery
+        </button>
         <button class="nav-item" data-view="browse">
           <span class="nav-ico">🔍</span> Browse CivitAI
         </button>
@@ -48,6 +51,23 @@
         </div>
       </section>
 
+      <!-- Gallery (generated photos) -->
+      <section class="view" id="view-gallery">
+        <header class="view-head">
+          <h1>Gallery</h1>
+          <div class="head-actions">
+            <span class="form-msg" id="galleryToast"></span>
+            <button class="btn" id="refreshGallery">Refresh</button>
+          </div>
+        </header>
+        <div id="galleryGrid" class="gallery-grid">
+          <p class="empty">Loading…</p>
+        </div>
+        <div class="browse-more">
+          <button class="btn" id="galleryMore" style="display:none">Load more</button>
+        </div>
+      </section>
+
       <!-- Browse CivitAI -->
       <section class="view" id="view-browse">
         <header class="view-head">
@@ -160,6 +180,20 @@
       </section>
     </main>
   </div>
+
+  <!-- Lightbox for full-size photo viewing -->
+  <div id="lightbox" class="lightbox" hidden>
+    <button class="lb-close" id="lbClose" title="Close">✕</button>
+    <img id="lbImage" alt="" />
+    <div class="lb-bar">
+      <span id="lbName" class="lb-name"></span>
+      <span class="lb-actions">
+        <a id="lbOpen" class="btn" target="_blank" rel="noopener">Open original</a>
+        <button class="btn danger" id="lbDelete">Delete</button>
+      </span>
+    </div>
+  </div>
+
   <script src="/app.js"></script>
 </body>
 </html>

model-manager/app/static/start.html

@@ -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>

model-manager/app/static/style.css

@@ -132,6 +132,66 @@ code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size:
 .model-card .card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
 .empty { color: var(--text-dim); }
 
+/* ---- gallery (generated photos) ---- */
+.gallery-grid {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.photo-card {
+  position: relative; background: var(--bg-2);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1;
+}
+.photo-card img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+  transition: transform .2s;
+}
+.photo-card:hover img { transform: scale(1.04); }
+.photo-card .p-del {
+  position: absolute; top: 6px; right: 6px;
+  background: rgba(12,16,32,.7); color: #fff; border: none;
+  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
+  font-size: 14px; opacity: 0; transition: opacity .15s;
+}
+.photo-card:hover .p-del { opacity: 1; }
+.photo-card .p-del:hover { background: var(--red); }
+.photo-card .p-meta {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: linear-gradient(transparent, rgba(12,16,32,.85));
+  color: var(--text); font-size: 11px; padding: 16px 8px 6px;
+  opacity: 0; transition: opacity .15s; word-break: break-all;
+}
+.photo-card:hover .p-meta { opacity: 1; }
+
+/* Single column on phones (the device-routing landing normally sends phones to
+   ComfyUIMini, but keep the gallery usable if opened directly on mobile). */
+@media (max-width: 720px) {
+  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+  .sidebar { width: 64px; }
+  .brand-title, .brand-sub, .nav-item { font-size: 0; }
+  .nav-ico { font-size: 18px; }
+}
+
+/* ---- lightbox ---- */
+.lightbox {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(8,10,16,.92);
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 28px;
+}
+.lightbox[hidden] { display: none; }
+.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; object-fit: contain; }
+.lb-close {
+  position: absolute; top: 18px; right: 22px;
+  background: transparent; color: #fff; border: none; font-size: 26px; cursor: pointer;
+}
+.lb-bar {
+  display: flex; align-items: center; gap: 16px; margin-top: 16px;
+  max-width: 92vw;
+}
+.lb-name { color: var(--text-dim); font-size: 13px; word-break: break-all; }
+.lb-actions { display: flex; gap: 10px; margin-left: auto; }
+
 /* ---- browse civitai ---- */
 .browse-controls {
   display: flex; flex-wrap: wrap; gap: 10px; align-items: center;