release: v0.2.37 — zero-argument startup, first-run wizard, real download progress
Startup no longer needs arguments: the config is created on first launch, a busy port is swapped for a free one, the console is open by default, and the browser lands on a setup wizard that downloads a ready-made .cmf model and wires it into routing (managed server + routing.default) when you press Finish. Download progress was reported from curl's own meter, which prints a full 0→100% bar for the -L redirect hop before the transfer starts — so every job showed 100% and then hung. Progress now comes from bytes on disk against the size from the HuggingFace tree (or a HEAD request). The UI and the gateway also disagreed about the output file name, so a finished download never marked its card as downloaded; the gateway now returns the exact stem and the UI sends it back verbatim for download, progress and delete. Featured models are read live from the infosave HF account in both the wizard and Import, and all 432 UI strings now exist in every one of the 7 languages.
This commit is contained in:
infosave2007
Vendored
+191
@@ -0,0 +1,191 @@
|
||||
// Ready-to-run .cmf models, read live from the infosave HuggingFace account via
|
||||
// /setup/featured — so a newly published model shows up without a code change.
|
||||
// Shared by the first-run wizard and the Import view: same cards, same download
|
||||
// / progress / delete behaviour in both places.
|
||||
import { h, mount, toast } from "../ui.js";
|
||||
import { t } from "../i18n.js";
|
||||
import { api } from "../api.js";
|
||||
|
||||
export async function loadFeatured() {
|
||||
try {
|
||||
const r = await api.setupFeatured();
|
||||
return r.models || [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function quantFromVariant(name) {
|
||||
const s = (name || "").toLowerCase();
|
||||
if (s.includes("q1t")) return "Q1T";
|
||||
if (s.includes("q2tp")) return "Q2TP";
|
||||
if (s.includes("q4tp")) return "Q4TP";
|
||||
if (s.includes("q4t")) return "Q4T";
|
||||
if (s.includes("q1")) return "Q1";
|
||||
if (s.includes("q4")) return "Q4";
|
||||
if (s.includes("q8")) return "Q8";
|
||||
return "";
|
||||
}
|
||||
|
||||
// Same thresholds as the backend's format_bytes, so card and job agree.
|
||||
export function fmtBytes(n) {
|
||||
if (!n && n !== 0) return "";
|
||||
if (n >= 1e9) return (n / 1e9).toFixed(1) + " GB";
|
||||
if (n >= 1e6) return Math.round(n / 1e6) + " MB";
|
||||
if (n >= 1e3) return Math.round(n / 1e3) + " KB";
|
||||
return n + " B";
|
||||
}
|
||||
|
||||
export function jobPct(j) {
|
||||
if (j.progress == null) return null;
|
||||
return Math.max(0, Math.min(100, Math.round(j.progress * 100)));
|
||||
}
|
||||
|
||||
/// "downloading · 42% · 1.4 / 3.2 GB" — whatever of it the job actually knows.
|
||||
/// A settled job shows its result, not the phase it stopped in.
|
||||
export function jobStatusText(j) {
|
||||
const parts = [];
|
||||
if (j.state === "running") {
|
||||
if (j.phase) parts.push(j.phase);
|
||||
const pct = jobPct(j);
|
||||
if (pct != null) parts.push(pct + "%");
|
||||
if (j.total_bytes) parts.push(`${fmtBytes(j.done_bytes || 0)} / ${fmtBytes(j.total_bytes)}`);
|
||||
} else if (j.state === "done" && j.size_bytes) {
|
||||
parts.push(fmtBytes(j.size_bytes));
|
||||
}
|
||||
return parts.join(" · ");
|
||||
}
|
||||
|
||||
export function jobBar(j) {
|
||||
const pct = jobPct(j);
|
||||
if (j.state === "done") return h("div", { class: "pbar" }, h("div", { class: "pbar-fill ok", style: "width:100%" }));
|
||||
if (j.state !== "running") return h("div", { class: "pbar" }, h("div", { class: "pbar-fill err", style: "width:100%" }));
|
||||
// known percentage → determinate fill; unknown (listing files) → animated slider
|
||||
return h("div", { class: "pbar" },
|
||||
pct != null
|
||||
? h("div", { class: "pbar-fill det", style: `width:${Math.max(pct, 1)}%` })
|
||||
: h("div", { class: "pbar-fill run" })
|
||||
);
|
||||
}
|
||||
|
||||
/// HF gives `desc` as a bare pipeline tag ("text-generation") for live entries and
|
||||
/// a real sentence for curated ones. A one-word tag belongs in the badge row, not
|
||||
/// on a line of its own under every card.
|
||||
function descBadge(desc) {
|
||||
return desc && !desc.includes(" ") ? h("span", { class: "badge" }, desc) : null;
|
||||
}
|
||||
function descLine(desc) {
|
||||
return desc && desc.includes(" ") ? h("div", { class: "muted small", style: "margin:6px 0" }, desc) : null;
|
||||
}
|
||||
|
||||
/// One model. `ctx` = { hosts: Map(jobId → element), onDownload(m, v), onDelete(m, v) }.
|
||||
/// Live progress lands in the per-variant host so a poll can repaint it in place,
|
||||
/// without re-rendering the grid under the user's cursor.
|
||||
export function featuredCard(m, ctx) {
|
||||
const badge = m.badge || "CMF";
|
||||
const label = m.label || m.id;
|
||||
const desc = m.desc || "";
|
||||
const variants = m.variants && m.variants.length ? m.variants : null;
|
||||
const size = m.size || (m.size_bytes ? fmtBytes(m.size_bytes) : "");
|
||||
const isDownloaded = !!m.downloaded;
|
||||
const progressHost = (v) => {
|
||||
const host = h("div", { class: "card-prog" });
|
||||
const jid = (v && v.job) || m.job;
|
||||
if (jid) ctx.hosts.set(jid, host);
|
||||
return host;
|
||||
};
|
||||
// multi-variant (e.g. DeepSeek with parts-q2tp / parts-q4tp) → separate buttons per variant
|
||||
if (variants && variants.length > 1) {
|
||||
return h("div", { class: "hf-card featured-card" + (isDownloaded ? " sel" : "") },
|
||||
h("div", { class: "hf-id" }, label, isDownloaded ? h("span", { class: "badge ok", style: "margin-left:6px" }, "✓") : null),
|
||||
h("div", { class: "hf-meta" },
|
||||
h("span", { class: "badge" }, badge),
|
||||
descBadge(desc),
|
||||
isDownloaded ? h("span", { class: "badge ok" }, "✓ " + t("onboarding.downloaded")) : null),
|
||||
descLine(desc),
|
||||
h("div", { class: "muted small" }, m.id),
|
||||
h("div", { style: "display:flex; flex-direction:column; gap:6px; margin-top:8px" },
|
||||
...variants.map((v) => {
|
||||
const q = quantFromVariant(v.name) || badge;
|
||||
const done = !!v.downloaded;
|
||||
const upd = !!v.update_available;
|
||||
const lab = done
|
||||
? (upd ? `↻ ${t("onboarding.update")} ${q} · ${v.size}` : `✓ ${q} · ${v.size}`)
|
||||
: `⬇ ${q} · ${v.size}`;
|
||||
const btn = h("button", {
|
||||
class: "btn sm " + (done && !upd ? "ghost" : "primary"),
|
||||
disabled: done && !upd ? true : null,
|
||||
onClick: () => ctx.onDownload(m, v),
|
||||
title: v.name + (done ? " — " + t("onboarding.downloaded") : ""),
|
||||
}, lab);
|
||||
const row = h("div", { style: "display:flex; gap:6px; align-items:center; flex-wrap:wrap" }, btn);
|
||||
if (done) {
|
||||
const del = h("button", { class: "btn sm ghost danger", title: t("onboarding.deleteFile") }, "🗑");
|
||||
del.addEventListener("click", () => ctx.onDelete(m, v));
|
||||
row.appendChild(del);
|
||||
}
|
||||
return h("div", {}, row, progressHost(v));
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
const v0 = variants && variants[0];
|
||||
const done0 = !!(v0 && v0.downloaded) || isDownloaded;
|
||||
const upd0 = !!(v0 && v0.update_available) || !!m.update_available;
|
||||
const q0 = quantFromVariant((v0 && v0.name) || "") || badge;
|
||||
const size0 = (v0 && v0.size) || size;
|
||||
const btn0 = h("button", {
|
||||
class: "btn sm " + (done0 && !upd0 ? "ghost" : "primary"),
|
||||
disabled: done0 && !upd0 ? true : null,
|
||||
onClick: () => ctx.onDownload(m, v0),
|
||||
title: done0 && !upd0 ? t("onboarding.downloaded") : ""
|
||||
}, done0
|
||||
? (upd0 ? `↻ ${t("onboarding.update")} ${q0} · ${size0}` : `✓ ${q0} · ${size0}`)
|
||||
: `⬇ ${q0}${size0 ? " · " + size0 : ""}`);
|
||||
const del0 = done0 ? h("button", { class: "btn sm ghost danger", title: t("onboarding.deleteFile") }, "🗑 " + t("import.delete")) : null;
|
||||
if (del0) del0.addEventListener("click", () => ctx.onDelete(m, v0));
|
||||
return h("div", { class: "hf-card featured-card" + (done0 ? " sel" : "") },
|
||||
h("div", { class: "hf-id" }, label, done0 ? h("span", { class: "badge ok", style: "margin-left:6px" }, "✓") : null),
|
||||
h("div", { class: "hf-meta" },
|
||||
h("span", { class: "badge" }, badge),
|
||||
size0 ? h("span", { class: "badge", style: "background:var(--bg); border-style:dashed" + (done0 ? "; opacity:.7" : "") }, (done0 ? "✓ " : "⬇ ") + size0) : null,
|
||||
descBadge(desc)
|
||||
),
|
||||
descLine(desc),
|
||||
h("div", { class: "muted small" }, m.id),
|
||||
h("div", { style: "display:flex; gap:6px; margin-top:8px; align-items:center; flex-wrap:wrap" }, btn0, del0),
|
||||
progressHost(v0)
|
||||
);
|
||||
}
|
||||
|
||||
/// Repaint the per-variant progress hosts from the current job list.
|
||||
export function paintFeaturedHosts(hosts, jobs, onCancel) {
|
||||
const byId = new Map(jobs.map((j) => [j.id, j]));
|
||||
for (const [id, host] of hosts) {
|
||||
const j = byId.get(id);
|
||||
if (!j || j.state !== "running") { mount(host); continue; }
|
||||
const cancel = h("button", { class: "btn sm ghost", style: "margin-left:auto", title: t("import.cancel") }, "✕");
|
||||
cancel.addEventListener("click", async () => {
|
||||
cancel.disabled = true;
|
||||
try { await onCancel(j); } catch (e) { toast(e.message, "err"); cancel.disabled = false; }
|
||||
});
|
||||
mount(host,
|
||||
jobBar(j),
|
||||
h("div", { style: "display:flex; align-items:center; gap:8px" },
|
||||
h("span", { class: "muted small" }, jobStatusText(j)),
|
||||
cancel
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Start the download for a featured variant. `local_name` is the stem the
|
||||
/// gateway itself derived, sent back verbatim so download / progress / delete
|
||||
/// can never disagree about which file this is.
|
||||
export async function startFeaturedDownload(m, v) {
|
||||
const fallbackBase = m.id.split("/").pop().toLowerCase().replace(/[^a-z0-9_-]/g, "-");
|
||||
const name = (v && v.local_name) || m.local_name || fallbackBase;
|
||||
const variant = v && v.name ? v.name : undefined;
|
||||
await api.startImport({ repo: m.id, quant: "Q1", name, variant });
|
||||
return variant;
|
||||
}
|
||||
Vendored
+74
-42
@@ -5,6 +5,13 @@
|
||||
import { h, mount, toast, opt } from "../ui.js";
|
||||
import { t } from "../i18n.js";
|
||||
import { api } from "../api.js";
|
||||
import {
|
||||
loadFeatured,
|
||||
featuredCard,
|
||||
paintFeaturedHosts,
|
||||
startFeaturedDownload,
|
||||
jobStatusText,
|
||||
} from "./featured.js";
|
||||
|
||||
const QUANTS = [
|
||||
["Q8_2F", "import.q.q8_2f"],
|
||||
@@ -20,12 +27,6 @@ const QUANTS = [
|
||||
["F32", "import.q.f32"],
|
||||
];
|
||||
|
||||
const FEATURED_REPOS = [
|
||||
{ id: "infosave/Bonsai-1.7Bcmf", label: "Bonsai 1.7B CMF", badge: "1.7B · Q1", quant: "Q1" },
|
||||
{ id: "infosave/Bonsai-8B_2bit_cmf", label: "Bonsai 8B 2-bit CMF", badge: "8B · Q1T", quant: "Q1T" },
|
||||
{ id: "infosave/Bonsai-27Bcmf", label: "Bonsai 27B CMF", badge: "27B · Q1", quant: "Q1" },
|
||||
];
|
||||
|
||||
|
||||
function field(label, control, hint) {
|
||||
return h("label", { class: "field" }, h("span", {}, label), control,
|
||||
@@ -53,6 +54,10 @@ export function renderImport() {
|
||||
let selected = null;
|
||||
let lastModels = []; // cache of the last search, so re-highlighting needs no refetch
|
||||
let jobsTimer = null;
|
||||
let featured = []; // ready-made .cmf models from the infosave HF account
|
||||
let featuredHosts = new Map(); // job id → live progress slot inside a featured card
|
||||
let lastJobs = [];
|
||||
let jobStates = new Map(); // job id → last seen state, to spot completions
|
||||
|
||||
const searchIn = h("input", {
|
||||
class: "hf-search",
|
||||
@@ -254,6 +259,12 @@ export function renderImport() {
|
||||
}
|
||||
// Load + render all jobs. Runs on mount (before `root` is attached — so no
|
||||
// isConnected guard here) and on each poll tick.
|
||||
async function cancelJob(j) {
|
||||
await api.cancelImport(j.id);
|
||||
toast(t("import.cancelling"), "warn");
|
||||
await refreshJobs();
|
||||
}
|
||||
|
||||
async function refreshJobs() {
|
||||
let jobs = [];
|
||||
try {
|
||||
@@ -262,7 +273,14 @@ export function renderImport() {
|
||||
return;
|
||||
}
|
||||
jobs = jobs.filter((j) => j.state !== "cancelled"); // hide user-cancelled jobs
|
||||
lastJobs = jobs;
|
||||
renderJobs(jobs);
|
||||
// A settled download changes what the featured cards offer (✓ + delete), so
|
||||
// re-read the list on that transition — not on every poll tick.
|
||||
const settled = jobs.some((j) => jobStates.get(j.id) === "running" && j.state !== "running");
|
||||
jobStates = new Map(jobs.map((j) => [j.id, j.state]));
|
||||
if (settled) await renderFeatured();
|
||||
else paintFeaturedHosts(featuredHosts, jobs, cancelJob);
|
||||
if (jobs.some((j) => j.state === "running")) ensurePolling();
|
||||
else stopPolling();
|
||||
}
|
||||
@@ -289,7 +307,7 @@ export function renderImport() {
|
||||
(running && pct != null ? " · " + pct + "%" : "") +
|
||||
(j.size_bytes ? " · " + fmtBytes(j.size_bytes) : "")
|
||||
);
|
||||
const phase = h("div", { class: "muted small" }, j.phase || "");
|
||||
const phase = h("div", { class: "muted small" }, jobStatusText(j));
|
||||
const logEl = h("pre", { class: "conv-log" }, (j.log || []).slice(-10).join("\n"));
|
||||
|
||||
const actions = [];
|
||||
@@ -367,46 +385,59 @@ export function renderImport() {
|
||||
);
|
||||
}
|
||||
|
||||
function featuredCard(item) {
|
||||
const card = h(
|
||||
"div",
|
||||
{ class: "hf-card featured-card" },
|
||||
h("div", { class: "row", style: "align-items:center; justify-content:space-between;" },
|
||||
h("div", {},
|
||||
h("div", { class: "hf-id" }, item.label),
|
||||
h("div", { class: "hf-meta" },
|
||||
h("span", { class: "badge" }, item.badge),
|
||||
h("span", { class: "muted" }, item.id)
|
||||
)
|
||||
),
|
||||
h("button", { class: "btn primary sm" }, "⬇ " + t("import.directDownload"))
|
||||
)
|
||||
);
|
||||
card.querySelector("button").addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await api.startImport({
|
||||
repo: item.id,
|
||||
quant: item.quant || "READY_CMF",
|
||||
name: item.id.split("/").pop().toLowerCase(),
|
||||
});
|
||||
toast(t("import.started"), "ok");
|
||||
refreshJobs();
|
||||
jobsHost.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
} catch (err) {
|
||||
toast(err.message, "err");
|
||||
}
|
||||
});
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── featured: the infosave account, read live so new releases just show up ──
|
||||
const featuredGrid = h("div", { class: "hf-grid" }, h("div", { class: "muted pad" }, t("import.searching")));
|
||||
const reloadBtn = h("button", { class: "btn ghost sm" }, "↻ " + t("common.refresh"));
|
||||
const featuredHost = h(
|
||||
"div",
|
||||
{ class: "card featured-section" },
|
||||
h("div", { class: "card-title" }, "⚡ " + t("import.featuredTitle")),
|
||||
h("div", { class: "hf-grid" }, ...FEATURED_REPOS.map(featuredCard))
|
||||
h("div", { class: "card-head", style: "display:flex; align-items:center; gap:10px" },
|
||||
h("div", { class: "card-title", style: "margin:0" }, "⚡ " + t("import.featuredTitle")),
|
||||
h("div", { style: "flex:1" }),
|
||||
reloadBtn),
|
||||
h("div", { class: "muted small", style: "margin:2px 0 10px" }, t("import.featuredSub")),
|
||||
featuredGrid
|
||||
);
|
||||
|
||||
async function startFeatured(m, v) {
|
||||
try {
|
||||
const variant = await startFeaturedDownload(m, v);
|
||||
toast(t("import.started") + (variant ? ` · ${variant}` : ""), "ok");
|
||||
await refreshJobs();
|
||||
jobsHost.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
} catch (e) { toast(e.message, "err"); }
|
||||
}
|
||||
|
||||
async function deleteFeatured(m, v) {
|
||||
const name = (v && v.local_name) || m.local_name || m.id;
|
||||
if (!window.confirm(t("onboarding.confirmDelete", { id: name }))) return;
|
||||
try {
|
||||
const r = await api.deleteSetupFile(m.id, v && v.name, (v && v.local_name) || m.local_name);
|
||||
toast(t("import.deleted"), "ok");
|
||||
if (r && r.unregistered && r.unregistered.length) {
|
||||
toast(t("onboarding.unregistered", { ids: r.unregistered.join(", ") }), "ok");
|
||||
}
|
||||
await renderFeatured();
|
||||
await refreshJobs();
|
||||
} catch (e) { toast(e.message, "err"); }
|
||||
}
|
||||
|
||||
async function renderFeatured(reload = true) {
|
||||
if (reload) featured = await loadFeatured();
|
||||
featuredHosts = new Map();
|
||||
const ctx = { hosts: featuredHosts, onDownload: startFeatured, onDelete: deleteFeatured };
|
||||
mount(featuredGrid, ...(featured.length
|
||||
? featured.map((m) => featuredCard(m, ctx))
|
||||
: [h("div", { class: "muted pad" }, t("import.noResults"))]));
|
||||
paintFeaturedHosts(featuredHosts, lastJobs, cancelJob);
|
||||
}
|
||||
reloadBtn.addEventListener("click", async () => {
|
||||
reloadBtn.disabled = true;
|
||||
mount(featuredGrid, h("div", { class: "muted pad" }, t("import.searching")));
|
||||
await renderFeatured();
|
||||
reloadBtn.disabled = false;
|
||||
});
|
||||
|
||||
const root = h(
|
||||
"div",
|
||||
{},
|
||||
@@ -419,6 +450,7 @@ export function renderImport() {
|
||||
formHost
|
||||
);
|
||||
doSearch(); // initial trending list (mounts into `results`)
|
||||
renderFeatured(); // ready-made .cmf models, fetched live
|
||||
refreshJobs(); // resume: show any running/recent conversions immediately
|
||||
return root;
|
||||
}
|
||||
|
||||
Vendored
+332
@@ -0,0 +1,332 @@
|
||||
// First-run onboarding wizard: language → featured .cmf models (infosave) → HF search+convert → done.
|
||||
// No manual TOML edits: every action goes through the admin API.
|
||||
import { h, mount, toast } from "../ui.js";
|
||||
import { t, getLang, setLang, LANGS } from "../i18n.js";
|
||||
import { api } from "../api.js";
|
||||
import {
|
||||
loadFeatured as fetchFeatured,
|
||||
featuredCard,
|
||||
paintFeaturedHosts,
|
||||
startFeaturedDownload,
|
||||
jobBar,
|
||||
jobStatusText,
|
||||
fmtBytes,
|
||||
} from "./featured.js";
|
||||
|
||||
let step = 0; // 0 lang, 1 featured, 2 hf convert, 3 done
|
||||
let featured = [];
|
||||
let featuredLoaded = false;
|
||||
|
||||
function langStep(onNext) {
|
||||
const cards = LANGS.map((l) =>
|
||||
h("button", {
|
||||
class: "onb-lang" + (getLang() === l.code ? " sel" : ""),
|
||||
onClick: () => {
|
||||
setLang(l.code);
|
||||
cards.forEach((c) => c.classList.toggle("sel", c.dataset.code === l.code));
|
||||
toast(l.flag + " " + l.label, "ok");
|
||||
},
|
||||
"data-code": l.code,
|
||||
title: l.label,
|
||||
"aria-label": l.label,
|
||||
}, h("span", { class: "flag" }, l.flag), h("b", {}, l.label))
|
||||
);
|
||||
return h("div", { class: "onb-step" },
|
||||
h("h2", {}, t("onboarding.welcome")),
|
||||
h("p", { class: "muted" }, t("onboarding.welcomeSub")),
|
||||
h("div", { class: "onb-langs" }, ...cards),
|
||||
h("div", { class: "actions" },
|
||||
h("button", { class: "btn primary", onClick: onNext }, t("onboarding.next") + " →")
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export function renderOnboarding() {
|
||||
const root = h("div", { class: "onb-wrap" });
|
||||
let jobsPoll = null;
|
||||
let jobs = [];
|
||||
let jobStates = new Map(); // job id → last seen state, to spot completions
|
||||
let hosts = new Map(); // job id → card progress host (rebuilt on every render)
|
||||
let jobsHost = h("div", {});
|
||||
|
||||
// Job rows: bar, live status, and the actions that finish or undo a download.
|
||||
function jobsMini(list) {
|
||||
if (!list.length) return h("div", { class: "muted small" }, t("onboarding.noJobs"));
|
||||
return h("div", {},
|
||||
...list.map((j) => {
|
||||
const act = [];
|
||||
if (j.state === "done") {
|
||||
const btn = h("button", { class: "btn primary sm" }, "✓ " + t("import.register"));
|
||||
btn.addEventListener("click", async () => {
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await api.registerImport(j.id);
|
||||
toast(t("import.registered", { id: r.model_id }), "ok");
|
||||
} catch (e) { toast(e.message, "err"); btn.disabled = false; }
|
||||
});
|
||||
act.push(btn);
|
||||
}
|
||||
if (j.state === "running") {
|
||||
const cancel = h("button", { class: "btn ghost sm" }, "✕ " + t("import.cancel"));
|
||||
cancel.addEventListener("click", async () => {
|
||||
cancel.disabled = true;
|
||||
try { await api.cancelImport(j.id); toast(t("import.cancelling"), "ok"); await refreshJobs(); }
|
||||
catch (e) { toast(e.message, "err"); cancel.disabled = false; }
|
||||
});
|
||||
act.push(cancel);
|
||||
} else {
|
||||
// done / error / cancelled — remove the .cmf from disk and redo the step
|
||||
const del = h("button", { class: "btn ghost sm danger", title: t("onboarding.deleteFile") }, "🗑 " + t("import.delete"));
|
||||
del.addEventListener("click", () => deleteJob(j));
|
||||
act.push(del);
|
||||
}
|
||||
const known = ["running", "done", "error", "cancelled"].includes(j.state);
|
||||
return h("div", { class: "job", style: "margin:8px 0" },
|
||||
h("div", { class: "job-head" },
|
||||
h("b", {}, j.name || j.repo || j.id),
|
||||
h("span", { class: "badge" + (j.state === "done" ? " ok" : j.state === "running" ? "" : " bad") }, known ? t("import.state." + j.state) : j.state)
|
||||
),
|
||||
jobBar(j),
|
||||
h("div", { class: "muted small" }, jobStatusText(j)),
|
||||
h("pre", { class: "conv-log", style: "max-height:80px" }, (j.log || []).slice(-6).join("\n")),
|
||||
act.length ? h("div", { class: "actions" }, ...act) : null
|
||||
);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Repaint only the live bits (card hosts + job list) — cheap enough for 1.5s.
|
||||
function paintJobs() {
|
||||
mount(jobsHost, jobs.length
|
||||
? h("div", { class: "card" }, h("div", { class: "card-title" }, t("import.jobs")), jobsMini(jobs))
|
||||
: h("div", {}));
|
||||
paintFeaturedHosts(hosts, jobs, async (j) => {
|
||||
await api.cancelImport(j.id);
|
||||
toast(t("import.cancelling"), "ok");
|
||||
await refreshJobs();
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshJobs() {
|
||||
try { jobs = (await api.listImports()).jobs || []; } catch { jobs = []; }
|
||||
// A job that just settled changes what the cards offer (✓ + delete), so the
|
||||
// featured list has to be re-read — but only on the transition, not per poll.
|
||||
const settled = jobs.some((j) => {
|
||||
const prev = jobStates.get(j.id);
|
||||
return prev === "running" && j.state !== "running";
|
||||
});
|
||||
jobStates = new Map(jobs.map((j) => [j.id, j.state]));
|
||||
if (settled) {
|
||||
await loadFeatured();
|
||||
render(); // rebuilds the cards (✓ + delete) and repaints the job rows
|
||||
} else {
|
||||
paintJobs();
|
||||
}
|
||||
if (jobs.some((j) => j.state === "running")) {
|
||||
if (!jobsPoll) jobsPoll = setInterval(refreshJobs, 1500);
|
||||
} else {
|
||||
if (jobsPoll) { clearInterval(jobsPoll); jobsPoll = null; }
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFeatured() {
|
||||
featured = await fetchFeatured();
|
||||
featuredLoaded = true;
|
||||
}
|
||||
|
||||
function topNav(prev, next, extra) {
|
||||
return h("div", { class: "actions", style: "margin-bottom:12px; position:sticky; top:0; background:var(--bg); z-index:2; padding:8px 0; border-bottom:1px solid var(--border-soft); backdrop-filter:blur(4px)" },
|
||||
h("button", { class: "btn ghost", onClick: prev }, "← " + t("onboarding.back")),
|
||||
extra ? extra : h("div", { style: "flex:1" }),
|
||||
h("button", { class: "btn primary", onClick: next }, t("onboarding.next") + " →")
|
||||
);
|
||||
}
|
||||
|
||||
async function startDownload(m, v) {
|
||||
try {
|
||||
const variant = await startFeaturedDownload(m, v);
|
||||
toast(t("import.started") + (variant ? ` · ${variant}` : ""), "ok");
|
||||
await refreshJobs();
|
||||
} catch (e) { toast(e.message, "err"); }
|
||||
}
|
||||
|
||||
async function handleDelete(m, v) {
|
||||
const name = (v && v.local_name) || m.local_name || m.id;
|
||||
if (!confirm(t("onboarding.confirmDelete", { id: name }))) return;
|
||||
try {
|
||||
const r = await api.deleteSetupFile(m.id, v && v.name, (v && v.local_name) || m.local_name);
|
||||
toast(t("import.deleted"), "ok");
|
||||
if (r && r.unregistered && r.unregistered.length) {
|
||||
toast(t("onboarding.unregistered", { ids: r.unregistered.join(", ") }), "ok");
|
||||
}
|
||||
await loadFeatured();
|
||||
render();
|
||||
await refreshJobs();
|
||||
} catch (e) { toast(e.message, "err"); }
|
||||
}
|
||||
|
||||
// Delete straight from a job row: the gateway knows that job's output path.
|
||||
async function deleteJob(j) {
|
||||
if (!confirm(t("onboarding.confirmDelete", { id: j.name || j.repo }))) return;
|
||||
try {
|
||||
await api.deleteImport(j.id);
|
||||
toast(t("import.deleted"), "ok");
|
||||
await loadFeatured();
|
||||
render();
|
||||
await refreshJobs();
|
||||
} catch (e) { toast(e.message, "err"); }
|
||||
}
|
||||
|
||||
function render() {
|
||||
const dots = [0, 1, 2, 3].map((i) => h("span", { class: "dot" + (i === step ? " on" : i < step ? " done" : "") }));
|
||||
const header = h("div", { class: "onb-header" },
|
||||
h("div", { class: "onb-dots" }, ...dots),
|
||||
h("div", { class: "onb-title" }, t("onboarding.title") + ` — ${step + 1}/4`)
|
||||
);
|
||||
|
||||
let body;
|
||||
const next = () => { step = Math.min(3, step + 1); render(); };
|
||||
const prev = () => { step = Math.max(0, step - 1); render(); };
|
||||
hosts = new Map(); // rebuilt by featuredCard below
|
||||
|
||||
if (step === 0) {
|
||||
const top = h("div", { class: "actions", style: "margin-bottom:12px; justify-content:flex-end" },
|
||||
h("button", { class: "btn primary", onClick: next }, t("onboarding.next") + " →")
|
||||
);
|
||||
body = h("div", {},
|
||||
top,
|
||||
langStep(next)
|
||||
);
|
||||
} else if (step === 1) {
|
||||
const top = topNav(prev, next, h("button", { class: "btn ghost", onClick: () => { step = 3; render(); } }, t("onboarding.skip")));
|
||||
const ctx = { hosts, onDownload: startDownload, onDelete: handleDelete };
|
||||
// the list is fetched from HuggingFace — say so instead of showing a blank grid
|
||||
const grid = featured.length
|
||||
? h("div", { class: "hf-grid" }, ...featured.map((m) => featuredCard(m, ctx)))
|
||||
: h("div", { class: "muted pad" }, featuredLoaded ? t("import.noResults") : t("import.searching"));
|
||||
body = h("div", { class: "onb-step" },
|
||||
top,
|
||||
h("h2", {}, "📦 " + t("onboarding.featuredTitle")),
|
||||
h("p", { class: "muted" }, t("onboarding.featuredSub")),
|
||||
grid,
|
||||
jobsHost,
|
||||
h("div", { class: "actions" },
|
||||
h("button", { class: "btn ghost", onClick: prev }, "← " + t("onboarding.back")),
|
||||
h("button", { class: "btn", onClick: async () => { await loadFeatured(); render(); await refreshJobs(); } }, t("common.refresh")),
|
||||
h("button", { class: "btn primary", onClick: next }, t("onboarding.next") + " →"),
|
||||
h("button", { class: "btn ghost", onClick: () => { step = 3; render(); } }, t("onboarding.skip"))
|
||||
)
|
||||
);
|
||||
} else if (step === 2) {
|
||||
const top2 = topNav(prev, next);
|
||||
// lightweight HF search inline
|
||||
const inp = h("input", { placeholder: t("import.searchPlaceholder"), style: "width:100%" });
|
||||
const res = h("div", { class: "hf-grid" });
|
||||
const quantSel = h("select", {},
|
||||
h("option", { value: "Q8_2F" }, "Q8_2F — " + t("import.q.q8_2f")),
|
||||
h("option", { value: "Q4_BLOCK" }, "Q4 — " + t("import.q.q4")),
|
||||
h("option", { value: "Q1T" }, "Q1T — " + t("import.q.q1t")),
|
||||
h("option", { value: "Q1" }, "Q1 — " + t("import.q.q1")),
|
||||
);
|
||||
let selected = null;
|
||||
let debounce = null;
|
||||
async function doSearch() {
|
||||
const q = inp.value.trim();
|
||||
mount(res, h("div", { class: "muted pad" }, t("import.searching")));
|
||||
try {
|
||||
const r = await api.hfSearch(q, 16);
|
||||
const models = r.models || [];
|
||||
if (!models.length) { mount(res, h("div", { class: "muted pad" }, t("import.noResults"))); return; }
|
||||
mount(res, ...models.map((m) => {
|
||||
const card = h("div", { class: "hf-card" + (selected && selected.id === m.id ? " sel" : "") },
|
||||
h("div", { class: "hf-id" }, m.id),
|
||||
h("div", { class: "hf-meta" }, h("span", { class: "badge" }, m.pipeline_tag || "model"), h("span", { class: "muted" }, "♥ " + (m.likes ?? 0)))
|
||||
);
|
||||
card.addEventListener("click", () => { selected = m; doSearch(); });
|
||||
return card;
|
||||
}));
|
||||
} catch (e) { mount(res, h("div", { class: "err" }, String(e.message))); }
|
||||
}
|
||||
inp.addEventListener("input", () => { clearTimeout(debounce); debounce = setTimeout(doSearch, 300); });
|
||||
const go = h("button", { class: "btn primary" }, "⬇ " + t("import.convert"));
|
||||
go.addEventListener("click", async () => {
|
||||
if (!selected) { toast(t("import.noResults"), "warn"); return; }
|
||||
go.disabled = true;
|
||||
try {
|
||||
await api.startImport({ repo: selected.id, quant: quantSel.value, name: selected.id.split("/").pop().toLowerCase() });
|
||||
toast(t("import.started"), "ok");
|
||||
await refreshJobs();
|
||||
} catch (e) { toast(e.message, "err"); }
|
||||
go.disabled = false;
|
||||
});
|
||||
// auto initial search
|
||||
setTimeout(doSearch, 100);
|
||||
body = h("div", { class: "onb-step" },
|
||||
top2,
|
||||
h("h2", {}, "🔍 " + t("onboarding.hfTitle")),
|
||||
h("p", { class: "muted" }, t("onboarding.hfSub")),
|
||||
h("div", { class: "card" }, inp, res),
|
||||
h("div", { class: "card", style: "margin-top:12px" },
|
||||
h("div", { class: "row" }, h("label", { class: "field" }, h("span", {}, t("import.quant")), quantSel)),
|
||||
h("div", { class: "actions" }, go)
|
||||
),
|
||||
jobsHost,
|
||||
h("div", { class: "actions" },
|
||||
h("button", { class: "btn ghost", onClick: prev }, "← " + t("onboarding.back")),
|
||||
h("button", { class: "btn primary", onClick: next }, t("onboarding.next") + " →")
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// done — finishing connects every completed download as a local model
|
||||
const ready = jobs.filter((j) => j.state === "done");
|
||||
const doneBtn = h("button", { class: "btn primary" }, t("onboarding.finish"));
|
||||
doneBtn.addEventListener("click", async () => {
|
||||
doneBtn.disabled = true;
|
||||
let r = null;
|
||||
try { r = await api.setupComplete(getLang(), true); } catch (e) { toast(e.message, "err"); }
|
||||
if (r && r.registered && r.registered.length) {
|
||||
toast(t("onboarding.registeredN", { n: r.registered.length, ids: r.registered.join(", ") }), "ok");
|
||||
if (!r.runtime_installed) toast(t("onboarding.runtimeMissing"), "warn");
|
||||
// let the toast be readable before the reload swaps the page
|
||||
await new Promise((res) => setTimeout(res, 900));
|
||||
}
|
||||
location.hash = "#/models";
|
||||
location.reload();
|
||||
});
|
||||
const skipBtn = h("button", { class: "btn ghost", onClick: async () => {
|
||||
try { await api.setupComplete(getLang(), false); } catch {}
|
||||
location.hash = "#/dashboard";
|
||||
} }, t("onboarding.skipSetup"));
|
||||
body = h("div", { class: "onb-step" },
|
||||
h("h2", {}, "✅ " + t("onboarding.doneTitle")),
|
||||
h("p", { class: "muted" }, t("onboarding.doneSub")),
|
||||
ready.length
|
||||
? h("div", { class: "card" },
|
||||
h("div", { class: "card-title" }, t("onboarding.willRegister")),
|
||||
...ready.map((j) => h("div", { class: "muted small" }, "• cmf-" + (j.name || j.repo) + (j.size_bytes ? ` · ${fmtBytes(j.size_bytes)}` : "")))
|
||||
)
|
||||
: h("div", { class: "muted small" }, t("onboarding.nothingToRegister")),
|
||||
jobsHost,
|
||||
h("div", { class: "callout" }, t("onboarding.doneHint")),
|
||||
h("div", { class: "actions" },
|
||||
h("button", { class: "btn ghost", onClick: prev }, "← " + t("onboarding.back")),
|
||||
skipBtn,
|
||||
doneBtn
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
mount(root, h("div", { class: "onb" }, header, body));
|
||||
paintJobs(); // fill the freshly built hosts with whatever we already know
|
||||
if (jobs.some((j) => j.state === "running") && !jobsPoll) {
|
||||
jobsPoll = setInterval(refreshJobs, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
loadFeatured().then(() => { render(); refreshJobs(); });
|
||||
render();
|
||||
// cleanup poll on detach
|
||||
const obs = new MutationObserver(() => { if (!root.isConnected && jobsPoll) { clearInterval(jobsPoll); jobsPoll = null; obs.disconnect(); } });
|
||||
obs.observe(document.body, { childList: true, subtree: true });
|
||||
return root;
|
||||
}
|
||||
Reference in New Issue
Block a user