Spaces:

NOT-OMEGA
/

KVInfer

Running

App Files Files Community

NOT-OMEGA commited on about 1 month ago

Commit

294736a

verified ·

1 Parent(s): aedc5e9

Update index.html

Browse files

Files changed (1) hide show

index.html +41 -95

index.html CHANGED Viewed

@@ -199,7 +199,6 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
 <body>
 <div class="app">
-<!-- ── Sidebar ── -->
 <aside class="sidebar">
   <div class="sb-head">
     <h2><span>KV</span>Infer</h2>
@@ -207,7 +206,6 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
   </div>
   <div class="sb-body">
-    <!-- Live stats -->
     <div class="card">
       <div class="card-title">
         <span class="dot idle" id="dot-s"></span>Live Performance
@@ -222,7 +220,6 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
         <span class="sval yellow" id="s-lat">—</span></div>
     </div>
-    <!-- Sparkline -->
     <div class="card">
       <div class="card-title">Throughput History (tok/s)</div>
       <canvas id="spark"></canvas>
@@ -234,7 +231,6 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
       </div>
     </div>
-    <!-- Session -->
     <div class="card">
       <div class="card-title">Session</div>
       <div class="srow"><span class="slabel">Turns</span>
@@ -251,14 +247,12 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
       </div>
     </div>
-    <!-- System prompt -->
     <div class="card">
       <div class="card-title">System Prompt</div>
       <textarea class="sysprompt" id="sysprompt" rows="3"
         >You are a helpful, concise, and friendly AI assistant.</textarea>
     </div>
-    <!-- Params -->
     <div class="card">
       <div class="card-title">Generation</div>
       <div style="display:flex;flex-direction:column;gap:10px;margin-top:2px">
@@ -283,7 +277,6 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
   </div>
 </aside>
-<!-- ── Chat ── -->
 <main class="chat">
   <header class="chat-hdr">
     <div class="badge">KVInfer · 152M</div>
@@ -324,7 +317,6 @@ canvas#spark { width: 100%; height: 48px; display: block; border-radius: var(--r
 </div>
-<!-- ── Benchmark modal ── -->
 <div id="bov">
   <div class="bmod">
     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
@@ -350,20 +342,17 @@ let totalToks  = 0;
 let tpsHist    = [];
 let peakTps    = 0;
 let engCache   = 0;
-// ─────────────────────────────────────────
-// Textarea auto-resize
-// ─────────────────────────────────────────
 const inp = document.getElementById('inp');
 inp.addEventListener('input', () => {
   inp.style.height = 'auto';
   inp.style.height = Math.min(inp.scrollHeight, 120) + 'px';
 });
 function handleKey(e) {
   if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); send(); }
 }
-// ─────────────────────────────────────────
-// UI helpers
-// ─────────────────────────────────────────
 function setBusy(v) {
   busy = v;
   document.getElementById('sbtn').disabled = v;
@@ -373,17 +362,21 @@ function setBusy(v) {
   });
   document.getElementById('hstatus').textContent = v ? 'Generating...' : 'Idle';
 }
 function scrollBot() {
   const el = document.getElementById('msgs');
   el.scrollTop = el.scrollHeight;
 }
 function hideWelcome() {
   const w = document.getElementById('welcome');
   if (w) w.remove();
 }
 function esc(s) {
   return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>');
 }
 function addUserMsg(text) {
   hideWelcome();
   const g = document.createElement('div');
@@ -392,22 +385,24 @@ function addUserMsg(text) {
   document.getElementById('msgs').appendChild(g);
   scrollBot();
 }
 function createAssistantSlot() {
   const g = document.createElement('div');
   g.className = 'mg asst';
   g.innerHTML = `
     <div class="mg-role"><div class="mlabel">Model</div></div>
     <div class="mg-body">
-      <div class="bubble" id="bubble"><span class="cursor2"></span></div>
-      <div class="bmeta" id="bmeta"></div>
     </div>`;
   document.getElementById('msgs').appendChild(g);
   scrollBot();
-  return document.getElementById('bubble');
 }
-// ─────────────────────────────────────────
-// FIX #5 — TTFT: use explicit null, not falsy check
-// ─────────────────────────────────────────
 async function send() {
   if (busy) return;
   const text = inp.value.trim();
@@ -415,11 +410,16 @@ async function send() {
   inp.value = ''; inp.style.height = 'auto';
   addUserMsg(text);
   setBusy(true);
-  const bubble = createAssistantSlot();
   let content   = '';
   let t0        = Date.now();
-  let firstTokT = null;   // ← FIX: explicit null, not undefined
   let tokCount  = 0;
   const payload = {
     message: text,
     session_id: sessId,
@@ -428,6 +428,7 @@ async function send() {
     temperature: parseFloat(document.getElementById('p-temp').value),
     top_k: parseInt(document.getElementById('p-topk').value),
   };
   try {
     const resp = await fetch(`${API}/chat`, {
       method: 'POST',
@@ -435,9 +436,11 @@ async function send() {
       body: JSON.stringify(payload),
     });
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
     const reader  = resp.body.getReader();
     const decoder = new TextDecoder();
     let buf = '';
     while (true) {
       const {done, value} = await reader.read();
       if (done) break;
@@ -452,11 +455,9 @@ async function send() {
         let chunk;
         try { chunk = JSON.parse(raw); } catch { continue; }
         const now = Date.now();
         if (chunk.type === 'token') {
-          // FIX #5 — correct null check
-          if (firstTokT === null) {
-            firstTokT = now;
-          }
           content += chunk.text;
           tokCount++;
           totalToks++;
@@ -470,11 +471,8 @@ async function send() {
           const ttft = firstTokT !== null ? (firstTokT - t0) : 0;
           const tps  = chunk.tps;
           const ms   = chunk.total_ms;
-          // Update meta line
-          document.getElementById('bmeta').innerHTML =
-            `<b>${tps}</b> tok/s · <b>TTFT</b> ${ttft}ms · ` +
-            `<b>${tokCount}</b> tokens · <b>${ms.toFixed(0)}ms</b> total`;
-          // Update sidebar stats
           document.getElementById('s-tps').textContent  = tps + ' tok/s';
           document.getElementById('s-lat').textContent  = ms.toFixed(0) + ' ms';
           tpsHist.push(tps);
@@ -483,7 +481,7 @@ async function send() {
           const avg = (tpsHist.reduce((a,b)=>a+b,0)/tpsHist.length).toFixed(1);
           document.getElementById('s-avg').textContent  = avg + ' tok/s';
           document.getElementById('s-peak').textContent = peakTps.toFixed(1) + ' tok/s';
-          // FIX #2 indicator — show how many tokens are cached in engine
           if (chunk.session_id) {
             fetch(`${API}/chat/history?session_id=${chunk.session_id}`)
               .then(r => r.json())
@@ -496,12 +494,16 @@ async function send() {
           document.getElementById('s-turns').textContent = turnCount;
           drawSpark();
         } else if (chunk.type === 'error') {
-          bubble.innerHTML = `<span style="color:var(--red)">Error: ${esc(chunk.message)}</span>`;
         }
       }
     }
   } catch (err) {
-    bubble.innerHTML = `<span style="color:var(--red)">Connection error: ${esc(err.message)}</span>`;
   } finally {
     const cur = bubble.querySelector('.cursor2');
     if (cur) cur.remove();
@@ -509,9 +511,7 @@ async function send() {
     scrollBot();
   }
 }
-// ─────────────────────────────────────────
-// Sparkline
-// ─────────────────────────────────────────
 function drawSpark() {
   const el  = document.getElementById('spark');
   const ctx = el.getContext('2d');
@@ -537,9 +537,7 @@ function drawSpark() {
   ctx.lineTo((d.length-1)*step,H); ctx.lineTo(0,H); ctx.closePath();
   ctx.fillStyle=grad; ctx.fill();
 }
-// ─────────────────────────────────────────
-// Clear chat
-// ─────────────────────────────────────────
 async function clearChat() {
   if (busy) return;
   await fetch(`${API}/chat/reset`, {
@@ -554,10 +552,7 @@ async function clearChat() {
       <h2>KVInfer Studio</h2>
       <p>152M · GPT-2 Decoder-Only · C++ AVX2 + OpenMP · Persistent session KV-cache.</p>
       <div class="spec-chips">
-        <span class="chip">152M params</span>
-        <span class="chip">AVX2 SIMD</span>
-        <span class="chip">OpenMP</span>
-        <span class="chip">KV Cache</span>
       </div>
     </div>`;
   ['s-turns','s-totok'].forEach(id => document.getElementById(id).textContent = '0');
@@ -565,56 +560,7 @@ async function clearChat() {
     id => document.getElementById(id).textContent = '—');
   drawSpark();
 }
-// ─────────────────────────────────────────
-// Benchmark modal
-// ─────────────────────────────────────────
-function openBench()  { document.getElementById('bov').classList.add('on'); }
-function closeBench() { document.getElementById('bov').classList.remove('on'); }
-async function runBench() {
-  const btn = document.getElementById('btnbench');
-  btn.disabled = true; btn.textContent = '⏳ Running...';
-  try {
-    const r = await fetch(`${API}/benchmark/run`);
-    if (!r.ok) throw new Error(`HTTP ${r.status}`);
-    const d = await r.json();
-    const rows = d.details.map(x => {
-      const cls = x.tokens_per_sec>20?'good':x.tokens_per_sec>10?'mid':'bad';
-      return `<tr>
-        <td>${x.prompt_preview}</td>
-        <td class="${cls}">${x.tokens_per_sec}</td>
-        <td>${x.ttft_ms}</td>
-        <td>${x.total_ms}</td>
-        <td>${x.tokens_out}</td></tr>`;
-    }).join('');
-    document.getElementById('bcontent').innerHTML = `
-      <div class="bench-summary">
-        <div class="bench-stat">
-          <div class="bval">${d.summary.avg_tps}</div>
-          <div class="blbl">Avg Throughput (tok/s)</div>
-        </div>
-        <div class="bench-stat">
-          <div class="bval">${d.summary.avg_ttft_ms}</div>
-          <div class="blbl">Avg TTFT (ms)</div>
-        </div>
-      </div>
-      <table class="btbl">
-        <thead><tr><th>Prompt</th><th>tok/s</th><th>TTFT</th><th>Total</th><th>Toks</th></tr></thead>
-        <tbody>${rows}</tbody>
-      </table>
-      <div style="margin-top:14px;display:flex;gap:8px">
-        <button class="btn btn-p btn-sm" onclick="runBench()">↺ Rerun</button>
-        <button class="btn btn-s btn-sm" onclick="closeBench()">Close</button>
-      </div>`;
-  } catch(e) {
-    document.getElementById('bcontent').innerHTML =
-      `<p style="color:var(--red);margin-bottom:12px">Error: ${e.message}</p>
-       <button class="btn btn-s btn-sm" onclick="runBench()">Retry</button>`;
-  }
-  btn.disabled = false;
-}
-// ─────────────────────────────────────────
-// Poll server metrics every 8s
-// ─────────────────────────────────────────
 async function pollMetrics() {
   try {
     const r = await fetch(`${API}/metrics`);
@@ -626,7 +572,7 @@ async function pollMetrics() {
   } catch {}
 }
 pollMetrics();
-setInterval(pollMetrics, 8000);
 </script>
 </body>
 </html>

 <body>
 <div class="app">
 <aside class="sidebar">
   <div class="sb-head">
     <h2><span>KV</span>Infer</h2>
   </div>
   <div class="sb-body">
     <div class="card">
       <div class="card-title">
         <span class="dot idle" id="dot-s"></span>Live Performance
         <span class="sval yellow" id="s-lat">—</span></div>
     </div>
     <div class="card">
       <div class="card-title">Throughput History (tok/s)</div>
       <canvas id="spark"></canvas>
       </div>
     </div>
     <div class="card">
       <div class="card-title">Session</div>
       <div class="srow"><span class="slabel">Turns</span>
       </div>
     </div>
     <div class="card">
       <div class="card-title">System Prompt</div>
       <textarea class="sysprompt" id="sysprompt" rows="3"
         >You are a helpful, concise, and friendly AI assistant.</textarea>
     </div>
     <div class="card">
       <div class="card-title">Generation</div>
       <div style="display:flex;flex-direction:column;gap:10px;margin-top:2px">
   </div>
 </aside>
 <main class="chat">
   <header class="chat-hdr">
     <div class="badge">KVInfer · 152M</div>
 </div>
 <div id="bov">
   <div class="bmod">
     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
 let tpsHist    = [];
 let peakTps    = 0;
 let engCache   = 0;
 const inp = document.getElementById('inp');
 inp.addEventListener('input', () => {
   inp.style.height = 'auto';
   inp.style.height = Math.min(inp.scrollHeight, 120) + 'px';
 });
 function handleKey(e) {
   if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); send(); }
 }
 function setBusy(v) {
   busy = v;
   document.getElementById('sbtn').disabled = v;
   });
   document.getElementById('hstatus').textContent = v ? 'Generating...' : 'Idle';
 }
 function scrollBot() {
   const el = document.getElementById('msgs');
   el.scrollTop = el.scrollHeight;
 }
 function hideWelcome() {
   const w = document.getElementById('welcome');
   if (w) w.remove();
 }
 function esc(s) {
   return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>');
 }
 function addUserMsg(text) {
   hideWelcome();
   const g = document.createElement('div');
   document.getElementById('msgs').appendChild(g);
   scrollBot();
 }
+// ⚠️ FIX: Dynamic IDs added back! No more overlapping text.
 function createAssistantSlot() {
   const g = document.createElement('div');
   g.className = 'mg asst';
+  const bid = 'bubble_' + Date.now();
+  const mid = 'meta_' + Date.now();
   g.innerHTML = `
     <div class="mg-role"><div class="mlabel">Model</div></div>
     <div class="mg-body">
+      <div class="bubble" id="${bid}"><span class="cursor2"></span></div>
+      <div class="bmeta" id="${mid}"></div>
     </div>`;
   document.getElementById('msgs').appendChild(g);
   scrollBot();
+  return { bubble: document.getElementById(bid), meta: document.getElementById(mid) };
 }
 async function send() {
   if (busy) return;
   const text = inp.value.trim();
   inp.value = ''; inp.style.height = 'auto';
   addUserMsg(text);
   setBusy(true);
+  const slot = createAssistantSlot();
+  const bubble = slot.bubble;
+  const meta = slot.meta;
   let content   = '';
   let t0        = Date.now();
+  let firstTokT = null;
   let tokCount  = 0;
   const payload = {
     message: text,
     session_id: sessId,
     temperature: parseFloat(document.getElementById('p-temp').value),
     top_k: parseInt(document.getElementById('p-topk').value),
   };
   try {
     const resp = await fetch(`${API}/chat`, {
       method: 'POST',
       body: JSON.stringify(payload),
     });
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
     const reader  = resp.body.getReader();
     const decoder = new TextDecoder();
     let buf = '';
     while (true) {
       const {done, value} = await reader.read();
       if (done) break;
         let chunk;
         try { chunk = JSON.parse(raw); } catch { continue; }
         const now = Date.now();
         if (chunk.type === 'token') {
+          if (firstTokT === null) firstTokT = now;
           content += chunk.text;
           tokCount++;
           totalToks++;
           const ttft = firstTokT !== null ? (firstTokT - t0) : 0;
           const tps  = chunk.tps;
           const ms   = chunk.total_ms;
+          meta.innerHTML = `<b>${tps}</b> tok/s · <b>TTFT</b> ${ttft}ms · <b>${tokCount}</b> tokens · <b>${ms.toFixed(0)}ms</b> total`;
           document.getElementById('s-tps').textContent  = tps + ' tok/s';
           document.getElementById('s-lat').textContent  = ms.toFixed(0) + ' ms';
           tpsHist.push(tps);
           const avg = (tpsHist.reduce((a,b)=>a+b,0)/tpsHist.length).toFixed(1);
           document.getElementById('s-avg').textContent  = avg + ' tok/s';
           document.getElementById('s-peak').textContent = peakTps.toFixed(1) + ' tok/s';
           if (chunk.session_id) {
             fetch(`${API}/chat/history?session_id=${chunk.session_id}`)
               .then(r => r.json())
           document.getElementById('s-turns').textContent = turnCount;
           drawSpark();
         } else if (chunk.type === 'error') {
+          bubble.innerHTML += `<br><br><span style="color:var(--red)">Error: ${esc(chunk.message)}</span>`;
         }
       }
     }
   } catch (err) {
+    if (tokCount === 0) {
+        bubble.innerHTML = `<span style="color:var(--red)">Connection error: ${esc(err.message)}</span>`;
+    } else {
+        meta.innerHTML += ` <span style="color:var(--amber)">[Stream Interrupted]</span>`;
+    }
   } finally {
     const cur = bubble.querySelector('.cursor2');
     if (cur) cur.remove();
     scrollBot();
   }
 }
 function drawSpark() {
   const el  = document.getElementById('spark');
   const ctx = el.getContext('2d');
   ctx.lineTo((d.length-1)*step,H); ctx.lineTo(0,H); ctx.closePath();
   ctx.fillStyle=grad; ctx.fill();
 }
 async function clearChat() {
   if (busy) return;
   await fetch(`${API}/chat/reset`, {
       <h2>KVInfer Studio</h2>
       <p>152M · GPT-2 Decoder-Only · C++ AVX2 + OpenMP · Persistent session KV-cache.</p>
       <div class="spec-chips">
+        <span class="chip">152M params</span><span class="chip">AVX2 SIMD</span><span class="chip">OpenMP</span><span class="chip">KV Cache</span>
       </div>
     </div>`;
   ['s-turns','s-totok'].forEach(id => document.getElementById(id).textContent = '0');
     id => document.getElementById(id).textContent = '—');
   drawSpark();
 }
 async function pollMetrics() {
   try {
     const r = await fetch(`${API}/metrics`);
   } catch {}
 }
 pollMetrics();
+setInterval(pollMetrics, 5000);
 </script>
 </body>
 </html>