Upload index.html with huggingface_hub

index.html

@@ -1,19 +1,89 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>GoLLeM-v5 — Live Training Dashboard</title>
+<style>
+  :root{--bg:#0e1116;--card:#171c24;--edge:#232a35;--fg:#e6e9ee;--dim:#8a94a3;--live:#2ecc71;--done:#5b6faf;--accent:#e0b050}
+  *{box-sizing:border-box;margin:0;padding:0}
+  body{background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;padding:22px;max-width:1100px;margin:0 auto}
+  h1{font-size:22px;font-weight:650;letter-spacing:.2px}
+  .sub{color:var(--dim);font-size:13px;margin:4px 0 20px}
+  .grid{display:flex;flex-direction:column;gap:12px}
+  .card{background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:14px 16px}
+  .row1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+  .model{font-size:15px;font-weight:600}
+  .pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.4px}
+  .pill.live{background:rgba(46,204,113,.16);color:var(--live)}
+  .pill.done{background:rgba(91,111,175,.20);color:#aeb9e6}
+  .pill.pending{background:rgba(138,148,163,.18);color:var(--dim)}
+  .params{font-size:12px;color:var(--dim);border:1px solid var(--edge);padding:1px 7px;border-radius:6px}
+  .bar{height:8px;background:#0b0e13;border-radius:6px;overflow:hidden;margin:10px 0 8px}
+  .bar > i{display:block;height:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);border-radius:6px;transition:width .6s}
+  .bar.done > i{background:linear-gradient(90deg,#5b6faf,#4a5a95)}
+  .meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
+  .meta b{color:var(--fg);font-weight:600}
+  .metrics{margin-top:8px;font-size:12.5px;color:var(--accent)}
+  .desc{margin-top:5px;font-size:12px;color:var(--dim)}
+  .charts{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
+  .charts img{width:100%;border:1px solid var(--edge);border-radius:8px;background:#fff}
+  .foot{margin-top:18px;color:var(--dim);font-size:12px}
+  a{color:#7fb0ff}
+  @media(max-width:720px){.charts{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+  <h1>GoLLeM-v5 &mdash; Live Training Dashboard</h1>
+  <div class="sub">Tiny-LM efficiency track (Glint leaderboard). Auto-refreshes every 20s &middot; <span id="ts">&hellip;</span></div>
+  <div class="grid" id="runs"></div>
+  <div class="charts">
+    <img alt="scaling / token-scan" src="https://huggingface.co/SlayerLab/gollem-v5-ckpts/resolve/main/progress_v5.png">
+    <img alt="board overlay" src="https://huggingface.co/SlayerLab/gollem-v5-ckpts/resolve/main/board_overlay_v5.png">
+  </div>
+  <div class="foot">
+    Source: <a href="https://huggingface.co/SlayerLab/gollem-v5-ckpts">SlayerLab/gollem-v5-ckpts</a> (model, method, checkpoints) &middot;
+    <a href="https://huggingface.co/datasets/SlayerLab/minimal-en-corpus-5b">corpus</a>.
+    Feed updates ~60s behind the pods.
+  </div>
+<script>
+const FEED = "https://huggingface.co/datasets/SlayerLab/gollem-ui-mirror/resolve/main/runs.json";
+function esc(s){return String(s==null?"":s).replace(/[&<>]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));}
+function card(r){
+  const pct = (r.total && r.step!=null) ? Math.min(100, Math.round(r.step/r.total*100)) : 0;
+  const st = (r.status||"").toLowerCase();
+  const pill = `<span class="pill ${st}">${st==="live"?"LIVE":st==="done"?"DONE":"PENDING"}</span>`;
+  const step = r.step!=null ? Number(r.step).toLocaleString("en-US") : "—";
+  const total = r.total!=null ? Number(r.total).toLocaleString("en-US") : "—";
+  const loss = r.loss!=null ? Number(r.loss).toFixed(3) : "—";
+  const metrics = r.metrics ? `<div class="metrics">${esc(r.metrics)}</div>` : "";
+  return `<div class="card">
+    <div class="row1"><span class="model">${esc(r.model||r.id)}</span>
+      <span class="params">${esc(r.params||"")}</span>${pill}
+      <span style="flex:1"></span><span class="meta"><b>${pct}%</b></span></div>
+    <div class="bar ${st==="done"?"done":""}"><i style="width:${pct}%"></i></div>
+    <div class="meta">
+      <span>step <b>${step}</b> / ${total}</span>
+      <span>loss <b>${loss}</b></span>
+      <span>tok/s <b>${esc(r.tokps||"—")}</b></span>
+      <span>ETA <b>${esc(r.eta||"—")}</b></span>
+      <span>pod <b>${esc(r.pod||"—")}</b></span>
+    </div>
+    <div class="desc">${esc(r.corpus||"")} &middot; ${esc(r.purpose||"")}</div>
+    ${metrics}
+  </div>`;
+}
+async function tick(){
+  try{
+    const res = await fetch(FEED + "?t=" + Date.now(), {cache:"no-store"});
+    const runs = await res.json();
+    document.getElementById("runs").innerHTML = runs.map(card).join("");
+    document.getElementById("ts").textContent = "updated " + new Date().toLocaleTimeString();
+  }catch(e){
+    document.getElementById("ts").textContent = "feed unavailable, retrying…";
+  }
+}
+tick(); setInterval(tick, 20000);
+</script>
+</body>
 </html>