TBNilles
c9fa3fcab5
- 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>
70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<!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>
|