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>
This commit is contained in:
@@ -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");
|
||||
})();
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user