feat(model-manager): add CivitAI browse view + fix civitai.red / 401
- New "Browse CivitAI" view: thumbnail grid with search, type/sort/period filters and NSFW toggle; click a model card to download it (per-card version picker for multi-version models). Cursor + page based "Load more". - Backend: /api/civitai/search and /api/civitai/download endpoints; new civitai_search() catalog helper. - Fix 401 on paste: recognize the civitai.red mirror (and any civitai.* host), normalize API calls to civitai.com, and always resolve the model-version so type + filename are auto-detected for every CivitAI URL. 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 === "browse" && !browseState.loaded) runSearch(true);
|
||||
if (name === "download") { loadDownloads(); startDownloadsPolling(); }
|
||||
else stopDownloadsPolling();
|
||||
if (name === "settings") loadSettings();
|
||||
@@ -243,6 +244,162 @@ function stopDownloadsPolling() {
|
||||
if (downloadsTimer) { clearInterval(downloadsTimer); downloadsTimer = null; }
|
||||
}
|
||||
|
||||
// ---- browse civitai -------------------------------------------------------
|
||||
|
||||
const browseState = { loaded: false, page: null, cursor: null, busy: false };
|
||||
|
||||
function browseParams() {
|
||||
const p = new URLSearchParams();
|
||||
const q = $("#bSearch").value.trim();
|
||||
if (q) p.set("query", q);
|
||||
if ($("#bType").value) p.set("types", $("#bType").value);
|
||||
p.set("sort", $("#bSort").value);
|
||||
p.set("period", $("#bPeriod").value);
|
||||
p.set("nsfw", $("#bNsfw").checked ? "true" : "false");
|
||||
return p;
|
||||
}
|
||||
|
||||
async function runSearch(reset) {
|
||||
if (browseState.busy) return;
|
||||
browseState.busy = true;
|
||||
browseState.loaded = true;
|
||||
const grid = $("#browseGrid");
|
||||
const moreBtn = $("#bMore");
|
||||
const p = browseParams();
|
||||
|
||||
if (reset) {
|
||||
browseState.page = null;
|
||||
browseState.cursor = null;
|
||||
grid.innerHTML = `<p class="empty">Searching…</p>`;
|
||||
} else {
|
||||
if (browseState.cursor) p.set("cursor", browseState.cursor);
|
||||
else if (browseState.page) p.set("page", browseState.page);
|
||||
moreBtn.textContent = "Loading…";
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await api(`/api/civitai/search?${p.toString()}`);
|
||||
if (reset) grid.innerHTML = "";
|
||||
if (!data.items.length && reset) {
|
||||
grid.innerHTML = `<p class="empty">No models found.</p>`;
|
||||
} else {
|
||||
for (const m of data.items) grid.appendChild(renderBrowseCard(m));
|
||||
}
|
||||
// Set up "load more": prefer cursor, fall back to next page.
|
||||
browseState.cursor = data.nextCursor || null;
|
||||
browseState.page = data.nextPage || null;
|
||||
const hasMore = Boolean(browseState.cursor || browseState.page);
|
||||
moreBtn.style.display = hasMore ? "" : "none";
|
||||
moreBtn.textContent = "Load more";
|
||||
} catch (err) {
|
||||
if (reset) grid.innerHTML = `<p class="empty">Error: ${err.message}</p>`;
|
||||
else toast($("#browseToast"), err.message, true);
|
||||
moreBtn.textContent = "Load more";
|
||||
} finally {
|
||||
browseState.busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
function renderBrowseCard(m) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "browse-card";
|
||||
|
||||
const thumb = document.createElement("div");
|
||||
thumb.className = "thumb";
|
||||
if (m.thumbnail && m.thumbnail_type === "image") {
|
||||
thumb.style.backgroundImage = `url("${m.thumbnail}")`;
|
||||
}
|
||||
if (m.type) {
|
||||
const tag = document.createElement("span");
|
||||
tag.className = "type-tag";
|
||||
tag.textContent = m.type;
|
||||
thumb.appendChild(tag);
|
||||
}
|
||||
if (m.nsfw) {
|
||||
const n = document.createElement("span");
|
||||
n.className = "nsfw-tag";
|
||||
n.textContent = "NSFW";
|
||||
thumb.appendChild(n);
|
||||
}
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "body";
|
||||
const name = document.createElement("div");
|
||||
name.className = "b-name";
|
||||
name.textContent = m.name || "(untitled)";
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "b-meta";
|
||||
meta.textContent = `${m.creator || "?"} · ${fmtNum(m.downloads)} downloads`;
|
||||
|
||||
const foot = document.createElement("div");
|
||||
foot.className = "b-foot";
|
||||
|
||||
// Version selector when there's more than one.
|
||||
let versionSel = null;
|
||||
if (m.versions && m.versions.length > 1) {
|
||||
versionSel = document.createElement("select");
|
||||
for (const v of m.versions) {
|
||||
const o = document.createElement("option");
|
||||
o.value = v.id;
|
||||
o.textContent = v.name || `v${v.id}`;
|
||||
versionSel.appendChild(o);
|
||||
}
|
||||
foot.appendChild(versionSel);
|
||||
}
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "btn primary";
|
||||
btn.textContent = "Download";
|
||||
btn.addEventListener("click", () => {
|
||||
const vid = versionSel ? Number(versionSel.value) : m.primary_version_id;
|
||||
downloadVersion(vid, btn);
|
||||
});
|
||||
foot.appendChild(btn);
|
||||
|
||||
body.append(name, meta, foot);
|
||||
card.append(thumb, body);
|
||||
return card;
|
||||
}
|
||||
|
||||
async function downloadVersion(versionId, btn) {
|
||||
if (!versionId) { toast($("#browseToast"), "No version available", true); return; }
|
||||
btn.disabled = true;
|
||||
const original = btn.textContent;
|
||||
btn.textContent = "Queued ✓";
|
||||
try {
|
||||
await api("/api/civitai/download", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ version_id: versionId }),
|
||||
});
|
||||
toast($("#browseToast"), "Download started — see Add / Download", false);
|
||||
setTimeout(() => { btn.disabled = false; btn.textContent = original; }, 2500);
|
||||
} catch (err) {
|
||||
toast($("#browseToast"), err.message, true);
|
||||
btn.disabled = false;
|
||||
btn.textContent = original;
|
||||
}
|
||||
}
|
||||
|
||||
function fmtNum(n) {
|
||||
if (n == null) return "?";
|
||||
if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
|
||||
if (n >= 1e3) return (n / 1e3).toFixed(1) + "k";
|
||||
return String(n);
|
||||
}
|
||||
|
||||
let toastTimer = null;
|
||||
function toast(el, msg, isErr) {
|
||||
el.textContent = msg;
|
||||
el.className = `form-msg ${isErr ? "err" : "ok"}`;
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => { el.textContent = ""; }, 4000);
|
||||
}
|
||||
|
||||
$("#bGo").addEventListener("click", () => runSearch(true));
|
||||
$("#bSearch").addEventListener("keydown", (e) => { if (e.key === "Enter") runSearch(true); });
|
||||
$("#bMore").addEventListener("click", () => runSearch(false));
|
||||
|
||||
// ---- settings -------------------------------------------------------------
|
||||
|
||||
async function loadSettings() {
|
||||
|
||||
@@ -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="browse">
|
||||
<span class="nav-ico">🔍</span> Browse CivitAI
|
||||
</button>
|
||||
<button class="nav-item" data-view="download">
|
||||
<span class="nav-ico">↓</span> Add / Download
|
||||
</button>
|
||||
@@ -45,6 +48,53 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Browse CivitAI -->
|
||||
<section class="view" id="view-browse">
|
||||
<header class="view-head">
|
||||
<h1>Browse CivitAI</h1>
|
||||
<div class="head-actions">
|
||||
<span class="form-msg" id="browseToast"></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="browse-controls">
|
||||
<input type="search" id="bSearch" placeholder="Search models…" />
|
||||
<select id="bType">
|
||||
<option value="">All types</option>
|
||||
<option value="Checkpoint">Checkpoint</option>
|
||||
<option value="LORA">LoRA</option>
|
||||
<option value="LoCon">LyCORIS</option>
|
||||
<option value="TextualInversion">Embedding</option>
|
||||
<option value="Controlnet">ControlNet</option>
|
||||
<option value="VAE">VAE</option>
|
||||
<option value="Upscaler">Upscaler</option>
|
||||
<option value="Hypernetwork">Hypernetwork</option>
|
||||
<option value="Poses">Poses</option>
|
||||
</select>
|
||||
<select id="bSort">
|
||||
<option>Most Downloaded</option>
|
||||
<option>Highest Rated</option>
|
||||
<option>Newest</option>
|
||||
</select>
|
||||
<select id="bPeriod">
|
||||
<option>AllTime</option>
|
||||
<option>Year</option>
|
||||
<option>Month</option>
|
||||
<option>Week</option>
|
||||
<option>Day</option>
|
||||
</select>
|
||||
<label class="check"><input type="checkbox" id="bNsfw" /> NSFW</label>
|
||||
<button class="btn primary" id="bGo">Search</button>
|
||||
</div>
|
||||
|
||||
<div id="browseGrid" class="browse-grid">
|
||||
<p class="empty">Search the CivitAI catalog, then click <b>Download</b> on a model.</p>
|
||||
</div>
|
||||
<div class="browse-more">
|
||||
<button class="btn" id="bMore" style="display:none">Load more</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Add / Download -->
|
||||
<section class="view" id="view-download">
|
||||
<header class="view-head"><h1>Add / Download Model</h1></header>
|
||||
|
||||
@@ -132,6 +132,48 @@ 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); }
|
||||
|
||||
/* ---- browse civitai ---- */
|
||||
.browse-controls {
|
||||
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.browse-controls input[type=search] { width: 280px; flex: 1; min-width: 200px; }
|
||||
.browse-controls select { width: auto; }
|
||||
.check { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); white-space: nowrap; }
|
||||
.check input { width: auto; }
|
||||
|
||||
.browse-grid {
|
||||
display: grid; gap: 14px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||
}
|
||||
.browse-card {
|
||||
background: var(--bg-2); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.browse-card .thumb {
|
||||
aspect-ratio: 3 / 4; background: var(--bg-3) center/cover no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
.browse-card .thumb .type-tag {
|
||||
position: absolute; top: 8px; left: 8px;
|
||||
background: rgba(12,16,32,.78); color: var(--text);
|
||||
font-size: 11px; padding: 2px 8px; border-radius: 8px;
|
||||
}
|
||||
.browse-card .thumb .nsfw-tag {
|
||||
position: absolute; top: 8px; right: 8px;
|
||||
background: rgba(239,93,107,.85); color: #fff;
|
||||
font-size: 10px; padding: 2px 7px; border-radius: 8px; font-weight: 600;
|
||||
}
|
||||
.browse-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
|
||||
.browse-card .b-name { font-weight: 600; font-size: 13px; line-height: 1.25;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.browse-card .b-meta { color: var(--text-dim); font-size: 11px; }
|
||||
.browse-card .b-foot { margin-top: auto; display: flex; gap: 6px; align-items: center; }
|
||||
.browse-card select { font-size: 12px; padding: 5px 6px; }
|
||||
.browse-card .btn { padding: 6px 12px; font-size: 12px; flex: 1; }
|
||||
.browse-more { display: flex; justify-content: center; margin: 22px 0; }
|
||||
|
||||
/* ---- downloads ---- */
|
||||
.downloads-container { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
|
||||
.dl-row {
|
||||
|
||||
Reference in New Issue
Block a user