Initial scaffold: image/ FastAPI app, models.yaml, docs
- image/ FastAPI app: /api/status, /api/swap, /api/swap/{id}/stream, /api/test-connection
- models.yaml: 5-model catalog (qwen3-vl, gemma4, qwen36, qwen3-235b-fp8, qwen25-72b)
- README, runbook, known-issues
- Dry-run swap verified against live Spark 1 (gemma4 currently loaded)
This commit is contained in:
Grant
@@ -0,0 +1,195 @@
|
||||
// spark-control front-end
|
||||
// - polls /api/status every 5s for current model + health
|
||||
// - lists models from /api/models as cards
|
||||
// - POST /api/swap to start a swap, then opens SSE /api/swap/{id}/stream
|
||||
|
||||
const state = {
|
||||
models: {},
|
||||
defaults: {},
|
||||
current_model_key: null,
|
||||
swap_job_id: null,
|
||||
swap_eventsource: null,
|
||||
configured: true,
|
||||
};
|
||||
|
||||
function el(sel) { return document.querySelector(sel); }
|
||||
function $(sel) { return document.querySelectorAll(sel); }
|
||||
|
||||
async function fetchJSON(url, opts) {
|
||||
const r = await fetch(url, opts);
|
||||
if (!r.ok) {
|
||||
const text = await r.text().catch(() => "");
|
||||
throw new Error(`${r.status} ${r.statusText}: ${text}`);
|
||||
}
|
||||
return r.json();
|
||||
}
|
||||
|
||||
function renderCards() {
|
||||
const root = el("#cards");
|
||||
root.innerHTML = "";
|
||||
const keys = Object.keys(state.models);
|
||||
for (const key of keys) {
|
||||
const m = state.models[key];
|
||||
const isActive = key === state.current_model_key;
|
||||
const isSwapping = !!state.swap_job_id;
|
||||
const card = document.createElement("div");
|
||||
card.className = "card" + (isActive ? " active" : "");
|
||||
card.innerHTML = `
|
||||
<div class="name">${m.display_name}</div>
|
||||
<div class="meta">
|
||||
<span class="tag mode-${m.mode}">${m.mode}</span>
|
||||
<span class="tag">${m.size_gb} GB</span>
|
||||
${(m.capabilities || []).map(c => `<span class="tag cap">${c}</span>`).join("")}
|
||||
</div>
|
||||
<div class="muted small" style="word-break:break-all">${m.repo}</div>
|
||||
<div class="spacer"></div>
|
||||
<button class="btn ${isActive ? "" : "primary"}" data-key="${key}" ${isActive || isSwapping ? "disabled" : ""}>
|
||||
${isActive ? "Current" : "Switch to this"}
|
||||
</button>
|
||||
`;
|
||||
root.appendChild(card);
|
||||
}
|
||||
for (const btn of $(".card .btn")) {
|
||||
btn.addEventListener("click", () => triggerSwap(btn.dataset.key));
|
||||
}
|
||||
}
|
||||
|
||||
function renderCurrent(status) {
|
||||
const c = el("#current");
|
||||
if (!status.configured) {
|
||||
c.innerHTML = `<span class="muted">not configured</span>`;
|
||||
return;
|
||||
}
|
||||
if (status.current_swap_job) {
|
||||
c.innerHTML = `<span class="muted">swap in progress</span>`;
|
||||
return;
|
||||
}
|
||||
const v = status.vllm || {};
|
||||
if (!v.ok) {
|
||||
c.innerHTML = `<span class="muted">vLLM unreachable</span>`;
|
||||
return;
|
||||
}
|
||||
const key = status.current_model_key;
|
||||
const m = key ? state.models[key] : null;
|
||||
const label = m ? m.display_name : (v.current_model || "(unknown)");
|
||||
c.innerHTML = `<strong>${label}</strong>`;
|
||||
}
|
||||
|
||||
function renderHealth(status) {
|
||||
function setDot(id, ok) {
|
||||
const item = el(id);
|
||||
if (!item) return;
|
||||
const dot = item.querySelector(".dot");
|
||||
dot.classList.remove("ok", "bad", "warn");
|
||||
if (ok === true) dot.classList.add("ok");
|
||||
else if (ok === false) dot.classList.add("bad");
|
||||
else dot.classList.add("warn");
|
||||
item.title = JSON.stringify(status[id.replace("#h-", "")] || {}, null, 2);
|
||||
}
|
||||
setDot("#h-vllm", status.vllm && status.vllm.ok);
|
||||
setDot("#h-parakeet", status.parakeet && status.parakeet.ok);
|
||||
setDot("#h-magpie", status.magpie && status.magpie.ok);
|
||||
el("#updated").textContent = `updated ${new Date().toLocaleTimeString()}`;
|
||||
}
|
||||
|
||||
function renderBanner(status) {
|
||||
el("#setup-banner").classList.toggle("hidden", !!status.configured);
|
||||
}
|
||||
|
||||
async function pollStatus() {
|
||||
try {
|
||||
const status = await fetchJSON("/api/status");
|
||||
state.current_model_key = status.current_model_key;
|
||||
state.configured = status.configured;
|
||||
renderBanner(status);
|
||||
renderCurrent(status);
|
||||
renderHealth(status);
|
||||
if (status.current_swap_job && status.current_swap_job !== state.swap_job_id) {
|
||||
attachToSwap(status.current_swap_job);
|
||||
} else if (!status.current_swap_job && state.swap_job_id && !state.swap_eventsource) {
|
||||
// someone else's swap finished; clear local
|
||||
state.swap_job_id = null;
|
||||
el("#swap-panel").classList.add("hidden");
|
||||
}
|
||||
renderCards();
|
||||
} catch (e) {
|
||||
console.error("status poll failed", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadModels() {
|
||||
const data = await fetchJSON("/api/models");
|
||||
state.defaults = data.defaults || {};
|
||||
state.models = data.models || {};
|
||||
}
|
||||
|
||||
async function triggerSwap(modelKey) {
|
||||
if (state.swap_job_id) return;
|
||||
try {
|
||||
const r = await fetchJSON("/api/swap", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ model_key: modelKey }),
|
||||
});
|
||||
attachToSwap(r.job_id);
|
||||
} catch (e) {
|
||||
alert("Failed to start swap: " + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function attachToSwap(jobId) {
|
||||
if (state.swap_eventsource) {
|
||||
state.swap_eventsource.close();
|
||||
state.swap_eventsource = null;
|
||||
}
|
||||
state.swap_job_id = jobId;
|
||||
el("#swap-panel").classList.remove("hidden");
|
||||
el("#swap-log").textContent = "";
|
||||
el("#swap-state").textContent = "starting";
|
||||
|
||||
const es = new EventSource(`/api/swap/${jobId}/stream`);
|
||||
state.swap_eventsource = es;
|
||||
|
||||
es.onmessage = (ev) => {
|
||||
try {
|
||||
const d = JSON.parse(ev.data);
|
||||
if (d.state) el("#swap-state").textContent = d.state;
|
||||
if (d.line) appendLog(d.line);
|
||||
} catch {}
|
||||
};
|
||||
es.addEventListener("done", (ev) => {
|
||||
try {
|
||||
const d = JSON.parse(ev.data);
|
||||
el("#swap-state").textContent = d.state + ` (rc=${d.returncode})`;
|
||||
} catch {}
|
||||
es.close();
|
||||
state.swap_eventsource = null;
|
||||
state.swap_job_id = null;
|
||||
setTimeout(() => {
|
||||
el("#swap-panel").classList.add("hidden");
|
||||
pollStatus();
|
||||
}, 4000);
|
||||
pollStatus();
|
||||
});
|
||||
es.onerror = () => {
|
||||
// SSE drops happen on tab background; reconnect on next poll
|
||||
es.close();
|
||||
state.swap_eventsource = null;
|
||||
};
|
||||
|
||||
renderCards();
|
||||
}
|
||||
|
||||
function appendLog(line) {
|
||||
const log = el("#swap-log");
|
||||
log.textContent += line + "\n";
|
||||
log.scrollTop = log.scrollHeight;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await loadModels();
|
||||
await pollStatus();
|
||||
setInterval(pollStatus, 5000);
|
||||
}
|
||||
|
||||
init();
|
||||
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>spark-control</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<span class="logo-dot"></span>
|
||||
<span>spark-control</span>
|
||||
</div>
|
||||
<div class="current" id="current">
|
||||
<span class="muted">connecting…</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="setup-banner" class="banner hidden">
|
||||
<strong>Configuration needed.</strong>
|
||||
<span>Run the <em>Configure Sparks</em> action in StartOS to set hostnames, then run <em>Test Connection</em>.</span>
|
||||
</section>
|
||||
|
||||
<section id="swap-panel" class="swap-panel hidden">
|
||||
<div class="swap-header">
|
||||
<span class="spinner"></span>
|
||||
<span id="swap-title">Swapping…</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="muted small" id="swap-state"></span>
|
||||
</div>
|
||||
<pre id="swap-log" class="log"></pre>
|
||||
</section>
|
||||
|
||||
<section id="cards" class="cards"></section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="health">
|
||||
<span class="health-item" id="h-vllm"><span class="dot"></span> vLLM</span>
|
||||
<span class="health-item" id="h-parakeet"><span class="dot"></span> Parakeet</span>
|
||||
<span class="health-item" id="h-magpie"><span class="dot"></span> Magpie</span>
|
||||
</div>
|
||||
<div class="muted small" id="updated"></div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
:root {
|
||||
--bg: #0a0a0d;
|
||||
--surface: #15151a;
|
||||
--surface-2: #1c1c22;
|
||||
--border: #25252c;
|
||||
--text: #e6e6ea;
|
||||
--muted: #7e7e8a;
|
||||
--accent: #4ade80;
|
||||
--warn: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--info: #60a5fa;
|
||||
--radius: 10px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
.small { font-size: 13px; }
|
||||
.hidden { display: none !important; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(10, 10, 13, 0.85);
|
||||
backdrop-filter: saturate(160%) blur(10px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
|
||||
.logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
|
||||
.current { flex: 1; text-align: right; font-size: 14px; }
|
||||
.current strong { color: var(--accent); }
|
||||
|
||||
main {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px 80px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warn);
|
||||
color: var(--warn);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.banner em { font-style: normal; background: rgba(245, 158, 11, 0.15); padding: 2px 6px; border-radius: 4px; }
|
||||
|
||||
.swap-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--info);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.swap-header { display: flex; align-items: center; gap: 10px; }
|
||||
.swap-header #swap-title { font-weight: 600; color: var(--info); }
|
||||
.spinner {
|
||||
width: 14px; height: 14px;
|
||||
border: 2px solid var(--info);
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.log {
|
||||
background: #08080b;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
margin: 10px 0 0;
|
||||
font: 12px/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
||||
color: #c7c7d1;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
.card.active {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px var(--accent) inset, 0 0 24px rgba(74, 222, 128, 0.08);
|
||||
}
|
||||
.card .name { font-weight: 600; font-size: 15px; }
|
||||
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
|
||||
.tag {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.tag.mode-cluster { color: var(--info); border-color: rgba(96, 165, 250, 0.4); }
|
||||
.tag.mode-solo { color: var(--accent); border-color: rgba(74, 222, 128, 0.4); }
|
||||
.tag.cap { color: var(--muted); }
|
||||
|
||||
.btn {
|
||||
appearance: none;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
|
||||
}
|
||||
.btn:hover:not(:disabled) { background: #24242c; border-color: #34343c; }
|
||||
.btn.primary { background: var(--accent); color: #052e16; border-color: var(--accent); }
|
||||
.btn.primary:hover:not(:disabled) { background: #6ee19a; }
|
||||
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.card.active .btn { background: rgba(74, 222, 128, 0.12); color: var(--accent); border-color: rgba(74, 222, 128, 0.4); }
|
||||
|
||||
.footer {
|
||||
margin-top: 28px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.health { display: flex; gap: 14px; flex-wrap: wrap; }
|
||||
.health-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
|
||||
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
|
||||
.dot.ok { background: var(--accent); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
|
||||
.dot.bad { background: var(--error); box-shadow: 0 0 8px rgba(239, 68, 68, 0.7); }
|
||||
.dot.warn { background: var(--warn); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar { padding: 10px 14px; }
|
||||
main { padding: 16px 14px 80px; }
|
||||
.cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
Reference in New Issue
Block a user