Bonsai-demo: multi-GPU llama.cpp server with live dashboard and metrics

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+bin/*.so.* filter=lfs diff=lfs merge=lfs -text
+bin/llama-* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,26 @@
+FROM nvidia/cuda:12.8.0-runtime-ubuntu22.04
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        curl ca-certificates git libgomp1 nginx openssl python3 \
+    && rm -rf /var/lib/apt/lists/* \
+    && chown -R 1000:1000 /var/lib/nginx /var/log/nginx /run
+
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user PATH="/home/user/.local/bin:/app/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user bin/ /app/bin/
+
+ENV LD_LIBRARY_PATH=/app/bin
+
+COPY --chown=user entrypoint.sh /app/entrypoint.sh
+COPY --chown=user nginx.conf /app/nginx.conf
+COPY --chown=user dashboard.html /app/dashboard.html
+COPY --chown=user metrics_pusher.py /app/metrics_pusher.py
+RUN chmod +x /app/entrypoint.sh
+
+EXPOSE 7860
+
+CMD ["/app/entrypoint.sh"]

README.md

@@ -1,10 +1,26 @@
 ---
-title: Website Demo
-emoji: 📊
+title: Bonsai Demo
+emoji: 🌿
 colorFrom: green
-colorTo: green
-sdk: static
+colorTo: blue
+sdk: docker
+app_port: 7860
+suggested_hardware: l40sx1
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Bonsai Demo
+
+Interactive demo for [Bonsai](https://huggingface.co/collections/prism-ml/bonsai), end-to-end 1-bit language models by [Prism ML](https://prismml.com).
+
+> **This demo will be available for a limited time (approximately 1–2 weeks).** Enjoy it while it lasts!
+
+## Privacy
+
+- **We do not log any messages.** Chat content is never stored on the server.
+- This demo uses the built-in llama-server UI, which saves your conversation history **in your browser's local storage only**. Clearing your browser cache will erase it.
+- That said, **please do not submit sensitive, private, or confidential information** in your messages.
+
+## Fair Use
+
+We've allocated multiple GPUs to keep this demo responsive, but resources are shared across all users. Under heavy load you may experience slower responses or brief queuing. Please be mindful of usage and avoid sending large bursts of automated requests so everyone can enjoy the demo.

bin/libggml-base.so

@@ -0,0 +1 @@
+libggml-base.so.0

bin/libggml-base.so.0

@@ -0,0 +1 @@
+libggml-base.so.0.9.7

bin/libggml-base.so.0.9.7

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:34c567f790d8f6b6ce63ae446431d737e382d10bbb7f634e79855749d75c79a6
+size 787520

bin/libggml-cpu.so

@@ -0,0 +1 @@
+libggml-cpu.so.0

bin/libggml-cpu.so.0

@@ -0,0 +1 @@
+libggml-cpu.so.0.9.7

bin/libggml-cpu.so.0.9.7

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57b6c7bf5e9424bc52df6fc8f5503b22f029df912fee65f342b441d5032fb8e3
+size 1107144

bin/libggml-cuda.so

@@ -0,0 +1 @@
+libggml-cuda.so.0

bin/libggml-cuda.so.0

@@ -0,0 +1 @@
+libggml-cuda.so.0.9.7

bin/libggml-cuda.so.0.9.7

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f9274ff637e09a5beb5d2ec55a475790bbd22ea3b6095b975ab4bbc18001ccd9
+size 55252864

bin/libggml.so

@@ -0,0 +1 @@
+libggml.so.0

bin/libggml.so.0

@@ -0,0 +1 @@
+libggml.so.0.9.7

bin/libggml.so.0.9.7

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cebe9400f91bbea8c0c1663d8a7582299835bd1d040dcd4a326ac067b4adddd9
+size 55184

bin/libllama.so

@@ -0,0 +1 @@
+libllama.so.0

bin/libllama.so.0

@@ -0,0 +1 @@
+libllama.so.0.0.8190

bin/libllama.so.0.0.8190

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2303b49c572d5b7b36123046cad7469d8b3caf8778834b37dc6df546fb341588
+size 3203944

bin/libmtmd.so

@@ -0,0 +1 @@
+libmtmd.so.0

bin/libmtmd.so.0

@@ -0,0 +1 @@
+libmtmd.so.0.0.8190

bin/libmtmd.so.0.0.8190

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ff0f675a01f13961e6f545ef414ae6cc50fcfa65379aa9ca1032437cd16194a3
+size 943272

bin/llama-bench

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:52825c5cbf617cd86db04a143188bee3d666e789168a897ced04001882afe2aa
+size 592680

bin/llama-cli

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c09f893698bf498dc872b950635bcae961de90ce67dadc83c62d34c9812ead0
+size 5665432

bin/llama-completion

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1b126040b118cb1bf0c041e2951e78a00aa2c619c414cc380b361c59c1d5980d
+size 4642520

bin/llama-perplexity

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:445b36510eaa53b9ee1ee641a5672b0dd7642be921a2a043f7ebd639b084dd64
+size 4680640

bin/llama-quantize

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6114cda3bf733678f49dab714d689b53f8505889ccae88650003d7a86a90f783
+size 442464

bin/llama-server

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b33f7d0abc362fdd49175df2b66741b4784c737f348cba5175220c6c871246dd
+size 7354688

dashboard.html

@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Bonsai-demo — Dashboard</title>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg: #0d0f14;
+    --surface: #161920;
+    --border: #252830;
+    --text: #e2e4ea;
+    --muted: #6b7280;
+    --green: #22c55e;
+    --blue: #3b82f6;
+    --orange: #f97316;
+    --purple: #a855f7;
+    --red: #ef4444;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 13px;
+    min-height: 100vh;
+    padding: 20px 24px;
+  }
+
+  /* ── header ── */
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+  header h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.05em; }
+  .header-right { display: flex; align-items: center; gap: 20px; }
+  #status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
+  #dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: background 0.3s; }
+  #dot.live  { background: var(--green); box-shadow: 0 0 6px var(--green); }
+  #dot.error { background: var(--red); }
+  .analytics-ts { font-size: 11px; color: var(--muted); }
+  .analytics-ts span { color: var(--text); }
+
+  /* ── server bar ── */
+  .url-bar { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
+  .url-bar label { color: var(--muted); font-size: 11px; white-space: nowrap; }
+  .url-bar input {
+    flex: 1; background: var(--surface); border: 1px solid var(--border);
+    border-radius: 6px; color: var(--text); font-family: inherit;
+    font-size: 12px; padding: 6px 10px; outline: none;
+  }
+  .url-bar input:focus { border-color: var(--blue); }
+  .url-bar button {
+    background: var(--blue); border: none; border-radius: 6px; color: #fff;
+    cursor: pointer; font-family: inherit; font-size: 12px; padding: 6px 14px;
+  }
+
+  /* ── section labels ── */
+  .section-label {
+    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--muted); margin-bottom: 10px; margin-top: 20px;
+  }
+  .section-label:first-of-type { margin-top: 0; }
+
+  /* ── stat grids ── */
+  .stats-live {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+  .stats-hist {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+  @media (max-width: 900px) {
+    .stats-live { grid-template-columns: repeat(2, 1fr); }
+    .stats-hist { grid-template-columns: repeat(3, 1fr); }
+  }
+  .stat {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 8px; padding: 14px 16px;
+  }
+  .stat-label { font-size: 10px; letter-spacing: 0.07em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
+  .stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
+  .stat-unit  { font-size: 10px; color: var(--muted); margin-top: 4px; }
+
+  /* ── charts ── */
+  .charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
+  @media (max-width: 900px) { .charts-2 { grid-template-columns: 1fr; } }
+  .chart-card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 8px; padding: 16px;
+  }
+  .chart-card h2 {
+    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
+    color: var(--muted); margin-bottom: 12px;
+  }
+  .chart-card canvas { max-height: 160px; }
+
+  /* ── GPU ── */
+  .gpu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
+  .gpu-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
+  .gpu-name { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
+  .gpu-index { color: var(--muted); font-weight: 400; }
+  .gpu-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+  .gpu-label { width: 70px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
+  .bar-track { flex: 1; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
+  .bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
+  .gpu-val { width: 60px; text-align: right; font-size: 11px; color: var(--text); flex-shrink: 0; }
+  .gpu-meta { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); flex-wrap: wrap; }
+  .gpu-meta-item { font-size: 11px; color: var(--muted); }
+  .gpu-meta-item span { color: var(--text); }
+</style>
+</head>
+<body>
+
+<header>
+  <h1>🌿 Bonsai-demo · Dashboard</h1>
+  <div class="header-right">
+    <div class="analytics-ts">requests updated <span id="u-updated">—</span></div>
+    <div id="status">
+      <div id="dot"></div>
+      <span id="status-text">connecting…</span>
+    </div>
+  </div>
+</header>
+
+<div class="url-bar">
+  <label>SERVER</label>
+  <input id="server-url" type="text" value="" placeholder="(same origin — leave blank for deployed, or http://host:port for local)">
+  <button onclick="reconnect()">Connect</button>
+</div>
+
+<!-- ── Live ── -->
+<div class="section-label">Live</div>
+<div class="stats-live" style="grid-template-columns: repeat(6, 1fr);">
+  <div class="stat">
+    <div class="stat-label">Active</div>
+    <div class="stat-value" id="v-active" style="color:var(--orange)">—</div>
+    <div class="stat-unit">requests processing</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Queued</div>
+    <div class="stat-value" id="v-queued" style="color:var(--purple)">—</div>
+    <div class="stat-unit">requests waiting</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Avg Latency</div>
+    <div class="stat-value" id="v-latency-avg" style="color:var(--text)">—</div>
+    <div class="stat-unit">ms · last 5 min</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">p90 Latency</div>
+    <div class="stat-value" id="v-latency-p90" style="color:var(--text)">—</div>
+    <div class="stat-unit">ms · last 5 min</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Gen Speed</div>
+    <div class="stat-value" id="v-gen" style="color:var(--green)">—</div>
+    <div class="stat-unit">tok / s · avg</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Prompt Speed</div>
+    <div class="stat-value" id="v-prompt" style="color:var(--blue)">—</div>
+    <div class="stat-unit">tok / s · avg</div>
+  </div>
+</div>
+
+<div class="charts-2">
+  <div class="chart-card">
+    <h2>Concurrency — active &amp; queued slots</h2>
+    <canvas id="chart-slots"></canvas>
+  </div>
+  <div class="chart-card">
+    <h2>Generation — tok / s (current)</h2>
+    <canvas id="chart-gen"></canvas>
+  </div>
+  <div class="chart-card">
+    <h2>Prompt processing — tok / s (current)</h2>
+    <canvas id="chart-prompt"></canvas>
+  </div>
+</div>
+
+<!-- ── Historical ── -->
+<div class="section-label">Historical</div>
+<div class="stats-hist">
+  <div class="stat">
+    <div class="stat-label">Requests — 24h</div>
+    <div class="stat-value" id="u-req-1d" style="color:var(--blue)">—</div>
+    <div class="stat-unit">chat completions</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Requests — 7d</div>
+    <div class="stat-value" id="u-req-7d" style="color:var(--blue)">—</div>
+    <div class="stat-unit">chat completions</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Requests — Total</div>
+    <div class="stat-value" id="u-req-total" style="color:var(--text)">—</div>
+    <div class="stat-unit">since last restart</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Tokens Generated</div>
+    <div class="stat-value" id="v-total-tok" style="color:var(--text)">—</div>
+    <div class="stat-unit">cumulative</div>
+  </div>
+  <div class="stat">
+    <div class="stat-label">Decodes</div>
+    <div class="stat-value" id="v-decodes" style="color:var(--text)">—</div>
+    <div class="stat-unit">llama_decode() calls</div>
+  </div>
+</div>
+
+<div class="charts-2">
+  <div class="chart-card">
+    <h2>Requests per hour — last 24h</h2>
+    <canvas id="chart-req-hour"></canvas>
+  </div>
+  <div class="chart-card">
+    <h2>Tokens generated (cumulative)</h2>
+    <canvas id="chart-tokens"></canvas>
+  </div>
+</div>
+
+<!-- ── GPU ── -->
+<div class="section-label">GPU Health</div>
+<div id="gpu-panel"><div style="color:var(--muted);font-size:12px;">loading…</div></div>
+
+<script>
+const MAX_POINTS = 120;
+let serverUrl = '', timer = null;
+
+// ── chart defaults ──────────────────────────────────────────────
+const chartDefaults = {
+  responsive: true, animation: false,
+  plugins: { legend: { labels: { color: '#6b7280', font: { size: 11 } } } },
+  scales: {
+    x: { ticks: { color: '#6b7280', maxTicksLimit: 6, font: { size: 10 } }, grid: { color: '#1e2028' } },
+    y: { ticks: { color: '#6b7280', font: { size: 10 } }, grid: { color: '#1e2028' }, beginAtZero: true },
+  },
+};
+const BAR_DEFAULTS = {
+  responsive: true, animation: false,
+  plugins: { legend: { display: false } },
+  scales: {
+    x: { ticks: { color: '#6b7280', font: { size: 10 }, maxRotation: 45 }, grid: { color: '#1e2028' } },
+    y: { ticks: { color: '#6b7280', font: { size: 10 } }, grid: { color: '#1e2028' }, beginAtZero: true },
+  },
+};
+
+function mkLine(id, datasets) {
+  return new Chart(document.getElementById(id), {
+    type: 'line', data: { labels: [], datasets },
+    options: JSON.parse(JSON.stringify(chartDefaults)),
+  });
+}
+
+const charts = {
+  slots: mkLine('chart-slots', [
+    { label: 'Active', data: [], borderColor: '#f97316', backgroundColor: '#f9731628', fill: true, tension: 0.3, pointRadius: 0, borderWidth: 2 },
+    { label: 'Queued', data: [], borderColor: '#a855f7', backgroundColor: '#a855f720', fill: true, tension: 0.3, pointRadius: 0, borderWidth: 2 },
+  ]),
+  gen: mkLine('chart-gen', [
+    { label: 'Gen tok/s', data: [], borderColor: '#22c55e', backgroundColor: '#22c55e18', fill: true, tension: 0.3, pointRadius: 0, borderWidth: 2 },
+  ]),
+  prompt: mkLine('chart-prompt', [
+    { label: 'Prompt tok/s', data: [], borderColor: '#3b82f6', backgroundColor: '#3b82f618', fill: true, tension: 0.3, pointRadius: 0, borderWidth: 2 },
+  ]),
+  tokens: mkLine('chart-tokens', [
+    { label: 'Tokens', data: [], borderColor: '#e2e4ea', backgroundColor: '#e2e4ea10', fill: true, tension: 0.3, pointRadius: 0, borderWidth: 2 },
+  ]),
+};
+const aC = {
+  reqHour: new Chart(document.getElementById('chart-req-hour'), {
+    type: 'bar',
+    data: { labels: [], datasets: [{ data: [], backgroundColor: '#3b82f660', borderColor: '#3b82f6', borderWidth: 1 }] },
+    options: JSON.parse(JSON.stringify(BAR_DEFAULTS)),
+  }),
+};
+
+// ── helpers ─────────────────────────────────────────────────────
+function parseMetrics(text) {
+  const m = {};
+  for (const line of text.split('\n')) {
+    if (line.startsWith('#') || !line.trim()) continue;
+    const match = line.match(/^([^\s{]+)(?:\{[^}]*\})?\s+([\d.eE+\-]+)/);
+    if (match) m[match[1]] = parseFloat(match[2]);
+  }
+  return m;
+}
+function fmt(v, dec = 1) {
+  if (v === undefined || isNaN(v)) return '—';
+  return v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(dec);
+}
+function push(chart, label, ...values) {
+  chart.data.labels.push(label);
+  values.forEach((v, i) => chart.data.datasets[i].data.push(v));
+  if (chart.data.labels.length > MAX_POINTS) {
+    chart.data.labels.shift();
+    chart.data.datasets.forEach(d => d.data.shift());
+  }
+  chart.update('none');
+}
+
+// ── live metrics tick ────────────────────────────────────────────
+async function tick() {
+  const dot = document.getElementById('dot');
+  const statusText = document.getElementById('status-text');
+  const ts = new Date().toLocaleTimeString();
+  try {
+    const res = await fetch(serverUrl + '/metrics-2e215f981f3f?t=' + Date.now());
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const m = parseMetrics(await res.text());
+
+    dot.className = 'live';
+    statusText.textContent = 'live · ' + ts;
+
+    // stat cards: lifetime averages (always meaningful, never stuck at 0)
+    const genAvg    = m['llamacpp:predicted_tokens_seconds'] ?? 0;
+    const promptAvg = m['llamacpp:prompt_tokens_seconds']    ?? 0;
+    const active    = m['llamacpp:requests_processing'] || 0;
+    const queued    = m['llamacpp:requests_deferred']   || 0;
+
+    document.getElementById('v-active').textContent    = fmt(active, 0);
+    document.getElementById('v-queued').textContent    = fmt(queued, 0);
+    document.getElementById('v-gen').textContent       = fmt(genAvg);
+    document.getElementById('v-prompt').textContent    = fmt(promptAvg);
+    document.getElementById('v-total-tok').textContent = fmt(m['llamacpp:tokens_predicted_total'], 0);
+    document.getElementById('v-decodes').textContent   = fmt(m['llamacpp:n_decode_total'], 0);
+
+    // charts: delta-based current rates (go to 0 when idle)
+    const genRate    = m['bonsai:gen_rate_current']    || 0;
+    const promptRate = m['bonsai:prompt_rate_current'] || 0;
+
+    push(charts.slots,  ts, active, queued);
+    push(charts.gen,    ts, genRate);
+    push(charts.prompt, ts, promptRate);
+    push(charts.tokens, ts, m['llamacpp:tokens_predicted_total'] || 0);
+  } catch (e) {
+    dot.className = 'error';
+    statusText.textContent = 'error · ' + e.message;
+  }
+}
+
+function reconnect() {
+  serverUrl = document.getElementById('server-url').value.replace(/\/$/, '');
+  if (timer) clearInterval(timer);
+  tick();
+  timer = setInterval(tick, 2000);
+}
+reconnect();
+
+// ── GPU ─────────────────────────────────────────────────────────
+function utilColor(pct) { return pct >= 90 ? '#ef4444' : pct >= 60 ? '#f97316' : '#22c55e'; }
+
+function renderGPU(gpus) {
+  const panel = document.getElementById('gpu-panel');
+  if (!gpus || !gpus.length) {
+    panel.innerHTML = '<div style="color:var(--muted);font-size:12px;">No GPU data.</div>';
+    return;
+  }
+  panel.innerHTML = '<div class="gpu-grid">' + gpus.map(g => {
+    const utilPct  = g.util_gpu.toFixed(0);
+    const memPct   = (g.mem_used_mib / g.mem_total_mib * 100).toFixed(0);
+    const memUsedGB = (g.mem_used_mib / 1024).toFixed(1);
+    const memTotGB  = (g.mem_total_mib / 1024).toFixed(0);
+    const powerPct  = g.power_limit_w > 0 ? (g.power_w / g.power_limit_w * 100).toFixed(0) : 0;
+    return `<div class="gpu-card">
+      <div class="gpu-name"><span class="gpu-index">GPU ${g.index} &nbsp;·&nbsp;</span>${g.name}</div>
+      <div class="gpu-row"><div class="gpu-label">Compute</div><div class="bar-track"><div class="bar-fill" style="width:${utilPct}%;background:${utilColor(g.util_gpu)}"></div></div><div class="gpu-val">${utilPct}%</div></div>
+      <div class="gpu-row"><div class="gpu-label">VRAM</div><div class="bar-track"><div class="bar-fill" style="width:${memPct}%;background:${utilColor(+memPct)}"></div></div><div class="gpu-val">${memUsedGB} / ${memTotGB} GB</div></div>
+      <div class="gpu-row"><div class="gpu-label">Power</div><div class="bar-track"><div class="bar-fill" style="width:${powerPct}%;background:#3b82f6"></div></div><div class="gpu-val">${g.power_w.toFixed(0)} W</div></div>
+      <div class="gpu-meta">
+        <div class="gpu-meta-item">Temp <span>${g.temp_c.toFixed(0)}°C</span></div>
+        <div class="gpu-meta-item">SM clock <span>${g.clock_sm_mhz.toFixed(0)} MHz</span></div>
+        <div class="gpu-meta-item">Mem util <span>${g.util_mem.toFixed(0)}%</span></div>
+      </div></div>`;
+  }).join('') + '</div>';
+}
+
+async function fetchGPU() {
+  try { const r = await fetch(serverUrl + '/gpu-2e215f981f3f?t=' + Date.now()); if (r.ok) renderGPU((await r.json()).gpus); } catch (_) {}
+}
+fetchGPU(); setInterval(fetchGPU, 5000);
+
+// ── analytics ───────────────────────────────────────────────────
+async function fetchAnalytics() {
+  try {
+    const r = await fetch(serverUrl + '/analytics-2e215f981f3f?t=' + Date.now()); if (!r.ok) return;
+    const d = await r.json();
+    document.getElementById('u-req-1d').textContent    = d.summary_24h?.requests    ?? '—';
+    document.getElementById('u-req-7d').textContent    = d.summary_7d?.requests     ?? '—';
+    document.getElementById('u-req-total').textContent = d.summary_total?.requests  ?? '—';
+    document.getElementById('u-updated').textContent   = d.updated_at ? new Date(d.updated_at).toLocaleTimeString() : '—';
+    const lat = d.latency_5m || {};
+    document.getElementById('v-latency-avg').textContent = lat.sample_count > 0 ? fmt(lat.avg_ms, 0) : '—';
+    document.getElementById('v-latency-p90').textContent = lat.sample_count > 0 ? fmt(lat.p90_ms, 0) : '—';
+    const hours = d.requests_by_hour || [];
+    aC.reqHour.data.labels              = hours.map(h => h.hour.slice(11, 16));
+    aC.reqHour.data.datasets[0].data    = hours.map(h => h.requests);
+    aC.reqHour.update('none');
+  } catch (_) {}
+}
+fetchAnalytics(); setInterval(fetchAnalytics, 10000);
+</script>
+</body>
+</html>

entrypoint.sh

@@ -0,0 +1,112 @@
+#!/bin/bash
+set -e
+
+echo "Starting Bonsai-demo entrypoint..."
+
+# ── Validate required secrets ─────────────────────────────────────────────────
+if [ -z "$MODEL_REPO" ] || [ -z "$MODEL_FILE" ]; then
+    echo ""
+    echo "ERROR: MODEL_REPO and MODEL_FILE secrets must be set."
+    echo "  Go to Space Settings → Repository Secrets and add:"
+    echo "    MODEL_REPO = prism-ml/Bonsai-8B-gguf"
+    echo "    MODEL_FILE = Bonsai-8B.gguf"
+    echo ""
+    exit 1
+fi
+
+MODEL_DIR="/app/models"
+mkdir -p "$MODEL_DIR"
+
+download_model() {
+    local repo file path retries=5
+    repo=$(echo "$1" | tr -d '[:space:]')
+    file=$(echo "$2" | tr -d '[:space:]')
+    path="$MODEL_DIR/$file"
+    local url="https://huggingface.co/$repo/resolve/main/$file"
+    for attempt in $(seq 1 $retries); do
+        echo "Downloading (attempt $attempt/$retries): $url"
+        rm -f "$path"
+        if curl -fL --retry 3 --retry-delay 5 -C - -o "$path" "$url" 2>&1; then
+            echo "Downloaded: $(ls -lh "$path")"
+            return 0
+        fi
+        echo "Download failed, retrying in 10s..."
+        sleep 10
+    done
+    echo "ERROR: Failed to download $url after $retries attempts"
+    exit 1
+}
+
+# Primary model (required)
+MODEL_REPO=$(echo "$MODEL_REPO" | tr -d '[:space:]')
+MODEL_FILE=$(echo "$MODEL_FILE" | tr -d '[:space:]')
+download_model "$MODEL_REPO" "$MODEL_FILE"
+
+# Additional models (optional)
+MODELS_MAX=1
+for suffix in B C; do
+    repo_var="MODEL_REPO_${suffix}"
+    file_var="MODEL_FILE_${suffix}"
+    repo=$(echo "${!repo_var:-}" | tr -d '[:space:]')
+    file=$(echo "${!file_var:-}" | tr -d '[:space:]')
+    if [ -n "$repo" ] && [ -n "$file" ]; then
+        download_model "$repo" "$file"
+        MODELS_MAX=$((MODELS_MAX + 1))
+    fi
+done
+
+# ── Dashboard auth ────────────────────────────────────────────────────────────
+if [ -n "$DASHBOARD_KEY" ]; then
+    HASH=$(openssl passwd -apr1 "$DASHBOARD_KEY")
+    echo "admin:$HASH" > /tmp/.htpasswd
+    echo "Dashboard auth: enabled (user=admin)"
+else
+    echo "WARNING: DASHBOARD_KEY not set, /dash-2e215f981f3f is unprotected"
+    printf 'admin:$apr1$open$open\n' > /tmp/.htpasswd
+fi
+
+# ── nginx temp dirs ───────────────────────────────────────────────────────────
+mkdir -p /tmp/nginx-{client-body,proxy,fastcgi,uwsgi,scgi}
+
+# ── Detect GPUs and start one llama-server per GPU ───────────────────────────
+GPU_COUNT=$(nvidia-smi -L 2>/dev/null | wc -l || echo 1)
+echo "GPUs detected: $GPU_COUNT"
+
+BACKENDS=""
+for i in $(seq 0 $((GPU_COUNT - 1))); do
+    PORT=$((7861 + i))
+    echo "Starting llama-server on GPU $i → port $PORT"
+    CUDA_VISIBLE_DEVICES=$i /app/bin/llama-server \
+        -m "$MODEL_DIR/$MODEL_FILE" \
+        --host 127.0.0.1 \
+        --port "$PORT" \
+        -ngl 99 \
+        -fa on \
+        -np 4 \
+        -c 262144 \
+        --metrics \
+        --temp 0.5 --top-p 0.85 --top-k 20 --min-p 0 \
+        --reasoning-budget 0 --reasoning-format none \
+        --chat-template-kwargs '{"enable_thinking": false}' \
+        --log-disable &
+    BACKENDS="$BACKENDS    server 127.0.0.1:$PORT;\n"
+done
+
+printf "upstream llama_backends {\n    least_conn;\n${BACKENDS}}\n" > /tmp/nginx-upstream.conf
+
+# ── Write stub files so /gpu and /analytics never 404 before first tick ──────
+echo '{"ts":null,"gpus":[]}' > /tmp/gpu-stats.json
+echo '# waiting for first metrics scrape...' > /tmp/llama-metrics.txt
+echo '{"updated_at":null,"summary_24h":{"requests":0,"unique_users":0},"summary_7d":{"requests":0,"unique_users":0},"summary_total":{"requests":0,"unique_users":0},"requests_by_hour":[],"requests_by_day":[],"top_users":[]}' > /tmp/analytics.json
+
+# ── Start metrics pusher ──────────────────────────────────────────────────────
+python3 /app/metrics_pusher.py &
+
+echo ""
+echo "=== Bonsai-demo ==="
+echo "  Models: $(ls "$MODEL_DIR"/*.gguf | xargs -n1 basename | tr '\n' ', ' | sed 's/,$//')"
+echo "  GPUs:   $GPU_COUNT"
+echo "  Port:   7860 (nginx → llama-server)"
+echo ""
+
+exec nginx -c /app/nginx.conf

index.html

@@ -1,19 +0,0 @@
-<!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>

metrics_pusher.py

@@ -0,0 +1,269 @@
+#!/usr/bin/env python3
+"""
+Scrapes /metrics + nvidia-smi every METRICS_INTERVAL seconds.
+Appends one JSON line per snapshot to /tmp/metrics-YYYY-MM-DD.jsonl.
+Pushes daily file to HF Dataset repo every METRICS_PUSH_INTERVAL seconds.
+Also writes /tmp/gpu-stats.json for the live dashboard GPU panel.
+"""
+import base64, json, os, subprocess, threading, time, urllib.request, urllib.error
+from datetime import datetime, timezone, timedelta
+from pathlib import Path
+
+BASE_PORT          = 7861
+LOG_DIR            = Path("/tmp")
+GPU_STATS_FILE     = Path("/tmp/gpu-stats.json")
+LLAMA_METRICS_FILE = Path("/tmp/llama-metrics.txt")
+GPU_INTERVAL_SECS  = int(os.environ.get("GPU_INTERVAL", "10"))
+SNAPSHOT_SECS      = int(os.environ.get("METRICS_INTERVAL", "3"))
+NGINX_LOG          = Path("/tmp/nginx-access.log")
+ANALYTICS_FILE     = Path("/tmp/analytics.json")
+PUSH_SECS          = int(os.environ.get("METRICS_PUSH_INTERVAL", "600"))
+METRICS_REPO       = os.environ.get("METRICS_REPO", "")
+HF_TOKEN           = os.environ.get("HF_TOKEN", "")
+
+def now_utc(): return datetime.now(timezone.utc)
+
+def detect_backends():
+    backends = []
+    for i in range(16):
+        url = f"http://127.0.0.1:{BASE_PORT + i}"
+        try:
+            urllib.request.urlopen(f"{url}/health", timeout=1).close()
+            backends.append(url)
+        except Exception:
+            break
+    return backends or [f"http://127.0.0.1:{BASE_PORT}"]
+
+def parse_prometheus(text):
+    values = {}
+    for line in text.splitlines():
+        if line.startswith("#") or not line.strip(): continue
+        parts = line.split()
+        if len(parts) < 2: continue
+        name = parts[0].split("{")[0].replace("llamacpp:", "")
+        try: values[name] = float(parts[1])
+        except ValueError: pass
+    return values
+
+_prev_tokens = {"predicted": 0.0, "prompt": 0.0, "ts": 0.0}
+
+def scrape(backends):
+    GAUGES_AVG = {"prompt_tokens_seconds", "predicted_tokens_seconds", "kv_cache_usage_ratio"}
+    GAUGES_SUM = {"requests_processing", "requests_deferred"}
+    combined = {}
+    raw_texts = []
+    for url in backends:
+        try:
+            with urllib.request.urlopen(f"{url}/metrics", timeout=5) as r:
+                text = r.read().decode()
+                raw_texts.append(text)
+                for k, v in parse_prometheus(text).items():
+                    combined.setdefault(k, []).append(v)
+        except Exception as e:
+            print(f"[metrics] scrape error {url}: {e}")
+    if not combined: return None
+
+    result = {k: sum(v)/len(v) if k in GAUGES_AVG else sum(v) for k, v in combined.items()}
+    result["backend_count"] = len(backends)
+
+    # Compute delta-based current rates (go to 0 when idle)
+    now = time.time()
+    elapsed = now - _prev_tokens["ts"] if _prev_tokens["ts"] else SNAPSHOT_SECS
+    if elapsed > 0 and _prev_tokens["ts"]:
+        cur_pred  = result.get("tokens_predicted_total", 0)
+        cur_prmpt = result.get("prompt_tokens_total", 0)
+        result["gen_rate_current"]    = max(0, cur_pred  - _prev_tokens["predicted"]) / elapsed
+        result["prompt_rate_current"] = max(0, cur_prmpt - _prev_tokens["prompt"])    / elapsed
+    else:
+        result["gen_rate_current"]    = 0.0
+        result["prompt_rate_current"] = 0.0
+
+    _prev_tokens["predicted"] = result.get("tokens_predicted_total", 0)
+    _prev_tokens["prompt"]    = result.get("prompt_tokens_total", 0)
+    _prev_tokens["ts"]        = now
+
+    # Write aggregated metrics as Prometheus text for the dashboard
+    active = result.get("requests_processing", 0)
+    per_slot = result["gen_rate_current"] / max(active, 1) if active else 0.0
+    lines = []
+    for k, v in result.items():
+        if k in ("backend_count", "gen_rate_current", "prompt_rate_current"):
+            continue
+        lines.append(f"llamacpp:{k} {v}")
+    lines.append(f"bonsai:gen_rate_current {result['gen_rate_current']:.3f}")
+    lines.append(f"bonsai:prompt_rate_current {result['prompt_rate_current']:.3f}")
+    lines.append(f"bonsai:gen_rate_per_slot {per_slot:.3f}")
+    lines.append(f"bonsai:backend_count {result['backend_count']}")
+    LLAMA_METRICS_FILE.write_text("\n".join(lines) + "\n")
+
+    return result
+
+def scrape_gpus():
+    try:
+        out = subprocess.check_output([
+            "nvidia-smi",
+            "--query-gpu=index,name,utilization.gpu,utilization.memory,"
+                        "memory.used,memory.total,temperature.gpu,power.draw,power.limit,clocks.sm",
+            "--format=csv,noheader,nounits",
+        ], timeout=5, stderr=subprocess.DEVNULL).decode()
+        gpus = []
+        for line in out.strip().splitlines():
+            p = [x.strip() for x in line.split(",")]
+            if len(p) < 10: continue
+            try:
+                gpus.append({"index": int(p[0]), "name": p[1],
+                    "util_gpu": float(p[2]), "util_mem": float(p[3]),
+                    "mem_used_mib": float(p[4]), "mem_total_mib": float(p[5]),
+                    "temp_c": float(p[6]), "power_w": float(p[7]),
+                    "power_limit_w": float(p[8]), "clock_sm_mhz": float(p[9])})
+            except (ValueError, IndexError): pass
+        return gpus
+    except Exception: return []
+
+def compute_analytics():
+    """Parse nginx access log and write analytics.json with request counts + avg latency."""
+    try:
+        if not NGINX_LOG.exists():
+            return
+        now = datetime.now(timezone.utc)
+        cutoff_24h = now.replace(minute=0, second=0, microsecond=0) - timedelta(hours=24)
+        cutoff_7d  = now.replace(hour=0, minute=0, second=0, microsecond=0) - timedelta(days=7)
+        cutoff_5m  = now - timedelta(minutes=5)
+
+        by_hour = {}
+        by_day  = {}
+        total   = 0
+        latencies_5m = []
+
+        for line in NGINX_LOG.read_text(errors='replace').splitlines():
+            parts = line.split('|')
+            if len(parts) < 6: continue
+            ts_str, method, uri, status = parts[0], parts[1], parts[2], parts[3]
+            req_time = parts[5]  # nginx $request_time in seconds
+            if method != 'POST' or not uri.startswith('/v1/'): continue
+            if not status.startswith('2'): continue
+            try:
+                ts = datetime.fromisoformat(ts_str)
+                if ts.tzinfo is None:
+                    ts = ts.replace(tzinfo=timezone.utc)
+            except Exception:
+                continue
+            total += 1
+            hour_key = ts.strftime('%Y-%m-%dT%H')
+            day_key  = ts.strftime('%Y-%m-%d')
+            by_hour[hour_key] = by_hour.get(hour_key, 0) + 1
+            by_day[day_key]   = by_day.get(day_key, 0) + 1
+            if ts >= cutoff_5m:
+                try:
+                    latencies_5m.append(float(req_time) * 1000)
+                except ValueError:
+                    pass
+
+        hours_24 = sorted(k for k in by_hour if k >= cutoff_24h.strftime('%Y-%m-%dT%H'))
+        days_7   = sorted(k for k in by_day  if k >= cutoff_7d.strftime('%Y-%m-%d'))
+
+        req_24h = sum(by_hour[h] for h in hours_24)
+        req_7d  = sum(by_day[d]  for d in days_7)
+
+        avg_latency_ms = sum(latencies_5m) / len(latencies_5m) if latencies_5m else 0
+        p50_latency_ms = sorted(latencies_5m)[len(latencies_5m)//2] if latencies_5m else 0
+        p90_latency_ms = sorted(latencies_5m)[int(len(latencies_5m)*0.9)] if latencies_5m else 0
+
+        analytics = {
+            "updated_at": now.isoformat(),
+            "summary_24h":   {"requests": req_24h, "unique_users": 0},
+            "summary_7d":    {"requests": req_7d,  "unique_users": 0},
+            "summary_total": {"requests": total,   "unique_users": 0},
+            "requests_by_hour": [{"hour": h + ":00", "requests": by_hour[h]} for h in hours_24],
+            "requests_by_day":  [{"day": d, "requests": by_day[d]}  for d in days_7],
+            "top_users": [],
+            "latency_5m": {
+                "avg_ms": round(avg_latency_ms),
+                "p50_ms": round(p50_latency_ms),
+                "p90_ms": round(p90_latency_ms),
+                "sample_count": len(latencies_5m),
+            },
+        }
+        ANALYTICS_FILE.write_text(json.dumps(analytics))
+    except Exception as e:
+        print(f"[analytics] error: {e}")
+
+def hf_push(local_path):
+    if not METRICS_REPO or not HF_TOKEN: return
+    dest = f"metrics/{local_path.name}"
+    content = base64.b64encode(local_path.read_bytes()).decode()
+    payload = json.dumps({"commit_message": f"update {local_path.name}",
+        "files": [{"path": dest, "encoding": "base64", "content": content}]}).encode()
+    req = urllib.request.Request(
+        f"https://huggingface.co/api/datasets/{METRICS_REPO}/commit/main",
+        data=payload, method="POST",
+        headers={"Authorization": f"Bearer {HF_TOKEN}", "Content-Type": "application/json"})
+    try:
+        with urllib.request.urlopen(req, timeout=30) as r:
+            print(f"[metrics] pushed {local_path.name} → {METRICS_REPO}/{dest} ({r.status})")
+    except Exception as e:
+        print(f"[metrics] push failed: {e}")
+
+def gpu_loop():
+    """Fast loop: update gpu-stats.json every GPU_INTERVAL_SECS seconds."""
+    print(f"[gpu] polling every {GPU_INTERVAL_SECS}s")
+    while True:
+        gpus = scrape_gpus()
+        if gpus:
+            ts = now_utc().isoformat()
+            GPU_STATS_FILE.write_text(json.dumps({"ts": ts, "gpus": gpus}))
+        time.sleep(GPU_INTERVAL_SECS)
+
+def wait_for_backends():
+    """Block until at least one llama-server is healthy (retries every 5s)."""
+    print("[metrics] waiting for llama-server to be ready...")
+    while True:
+        for i in range(16):
+            url = f"http://127.0.0.1:{BASE_PORT + i}"
+            try:
+                with urllib.request.urlopen(f"{url}/health", timeout=2) as r:
+                    if r.status == 200:
+                        print(f"[metrics] backend ready: {url}")
+                        return
+            except Exception:
+                pass
+        time.sleep(5)
+
+def metrics_loop():
+    """Slow loop: scrape llama metrics, append JSONL, push to HF every SNAPSHOT_SECS seconds."""
+    print(f"[metrics] snapshot={SNAPSHOT_SECS}s  push={PUSH_SECS}s  repo={METRICS_REPO or '(local only)'}")
+    wait_for_backends()
+    last_push, backends, first_push_done = 0.0, [], False
+    while True:
+        if not backends:
+            backends = detect_backends()
+            print(f"[metrics] backends: {backends}")
+        ts   = now_utc()
+        data = scrape(backends)
+        compute_analytics()
+        if data is None:
+            print(f"[metrics] scrape returned no data — will retry next tick")
+            backends = []  # force re-detect next iteration
+        else:
+            gpus = json.loads(GPU_STATS_FILE.read_text()).get("gpus", []) if GPU_STATS_FILE.exists() else []
+            gpu_s = {f"gpu{g['index']}_util": g["util_gpu"] for g in gpus}
+            gpu_s.update({f"gpu{g['index']}_mem_used_mib": g["mem_used_mib"] for g in gpus})
+            row  = {"ts": ts.isoformat(), **data, **gpu_s}
+            day  = ts.strftime("%Y-%m-%d")
+            path = LOG_DIR / f"metrics-{day}.jsonl"
+            with open(path, "a") as f: f.write(json.dumps(row) + "\n")
+            gpu_str = "  ".join(f"GPU{g['index']} {g['util_gpu']:.0f}% {g['mem_used_mib']/1024:.1f}GB {g['temp_c']:.0f}°C" for g in gpus)
+            print(f"[metrics] {ts.strftime('%H:%M:%S')}  gen={data.get('predicted_tokens_seconds',0):.0f} tok/s  active={data.get('requests_processing',0):.0f}  {gpu_str}")
+            if not first_push_done or time.time() - last_push >= PUSH_SECS:
+                hf_push(path)
+                last_push = time.time()
+                first_push_done = True
+        time.sleep(SNAPSHOT_SECS)
+
+def main():
+    t = threading.Thread(target=gpu_loop, daemon=True)
+    t.start()
+    metrics_loop()
+
+if __name__ == "__main__":
+    main()

nginx.conf

@@ -0,0 +1,86 @@
+daemon off;
+pid /tmp/nginx.pid;
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    client_body_temp_path  /tmp/nginx-client-body;
+    proxy_temp_path        /tmp/nginx-proxy;
+    fastcgi_temp_path      /tmp/nginx-fastcgi;
+    uwsgi_temp_path        /tmp/nginx-uwsgi;
+    scgi_temp_path         /tmp/nginx-scgi;
+
+    # Generated at startup by entrypoint.sh
+    include /tmp/nginx-upstream.conf;
+
+    # No usernames, no chat content — only method, path, status, size, timing
+    log_format bonsai '$time_iso8601|$request_method|$uri|$status|$body_bytes_sent|$request_time';
+    access_log /tmp/nginx-access.log bonsai;
+    error_log  /tmp/nginx-error.log warn;
+
+    server {
+        listen 7860;
+
+        # ── Private: dashboard UI ────────────────────────────────
+        location = /dash-2e215f981f3f {
+            auth_basic           "Bonsai Internal";
+            auth_basic_user_file /tmp/.htpasswd;
+            alias                /app/dashboard.html;
+            default_type         text/html;
+            add_header           Cache-Control "no-store";
+        }
+
+        # ── Private: raw Prometheus metrics (served from file written by metrics_pusher) ──
+        location = /metrics-2e215f981f3f {
+            auth_basic           "Bonsai Internal";
+            auth_basic_user_file /tmp/.htpasswd;
+            alias                /tmp/llama-metrics.txt;
+            add_header           Content-Type "text/plain; charset=utf-8";
+            add_header           Cache-Control "no-store";
+        }
+
+        # ── Private: live GPU stats ───────────────────────────────
+        location = /gpu-2e215f981f3f {
+            auth_basic           "Bonsai Internal";
+            auth_basic_user_file /tmp/.htpasswd;
+            alias                /tmp/gpu-stats.json;
+            add_header Content-Type "application/json";
+            add_header Cache-Control "no-store";
+        }
+
+        # ── Private: pre-computed analytics JSON ─────────────────
+        location = /analytics-2e215f981f3f {
+            auth_basic           "Bonsai Internal";
+            auth_basic_user_file /tmp/.htpasswd;
+            alias                /tmp/analytics.json;
+            add_header Content-Type "application/json";
+            add_header Cache-Control "no-store";
+        }
+
+        # ── Public: load-balanced across all GPU backends ────────
+        location / {
+            proxy_pass            http://llama_backends;
+            proxy_http_version    1.1;
+            proxy_set_header      Host $host;
+            proxy_set_header      X-Real-IP $remote_addr;
+            proxy_set_header      Connection "";
+            # Strip identity headers before they reach llama-server
+            proxy_set_header      X-HF-User "";
+            proxy_set_header      Authorization "";
+
+            # SSE / streaming completions
+            proxy_buffering       off;
+            proxy_cache           off;
+            proxy_read_timeout    600s;
+            proxy_send_timeout    600s;
+            client_max_body_size  10m;
+            chunked_transfer_encoding on;
+        }
+    }
+}

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}