Files
spark-control/image/app/static/index.html
T
Grant c0aebfc98b Add friendly swap UI: timer + phase indicator + progress bar + collapsible logs
- Elapsed timer (mm:ss) in top-right of swap panel
- Phase display: Stopping / Starting / Loading weights (N/M shards) / Compiling / Warming up / Ready
- Progress bar with smooth fill mapped from phase
- Raw vLLM logs hidden behind <details> 'Show technical logs'
- Detection from log content (safetensors %, torch.compile, Application startup, Ray cluster join)
- Backfill from /api/swap/{id} on reattach (mid-swap reload works)
2026-05-12 10:11:14 -05:00

62 lines
2.0 KiB
HTML

<!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">Swap in progress</span>
<span class="spacer"></span>
<span class="timer" id="swap-elapsed">0:00</span>
</div>
<div class="phase-row">
<div class="phase" id="swap-phase">Starting…</div>
<div class="phase-detail muted small" id="swap-phase-detail"></div>
</div>
<div class="phase-track">
<div class="phase-fill" id="swap-phase-fill"></div>
</div>
<details id="swap-log-details">
<summary class="muted small">Show technical logs</summary>
<pre id="swap-log" class="log"></pre>
</details>
</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>