Update index.html

index.html

@@ -592,16 +592,123 @@ async function runBench() {
   btn.disabled = true;
   btn.textContent = "Running Benchmark...";
   
-  // Placeholder text - yahan aapka main loop aayega jo 5 prompts ko test karega
-  bcontent.innerHTML += `<p style="color: var(--amber); margin-top: 10px;">Benchmark started! (Note: Actual API loop logic needs to be added here)</p>`;
-  
-  // Simulate delay
-  setTimeout(() => {
-    btn.textContent = "▶ Run Benchmark";
-    btn.disabled = false;
-  }, 2000);
-}
+  const prompts = [
+    "What is the capital of France?",
+    "Write a short poem about coding.",
+    "Explain quantum computing in simple terms.",
+    "What are the benefits of exercise?",
+    "Translate 'Hello world' to Spanish."
+  ];
+
+  let resultsHTML = `
+    <table class="btbl" style="margin-top: 15px;">
+      <thead>
+        <tr>
+          <th>Prompt</th>
+          <th>Tokens</th>
+          <th>TTFT (ms)</th>
+          <th>TPS (tok/s)</th>
+        </tr>
+      </thead>
+      <tbody id="bench-tbody">
+      </tbody>
+    </table>
+  `;
+  bcontent.innerHTML = resultsHTML;
+  const tbody = document.getElementById('bench-tbody');
+
+  let totalTps = 0;
+  let totalTtft = 0;
+
+  for (let i = 0; i < prompts.length; i++) {
+    let pText = prompts[i];
+    let tr = document.createElement('tr');
+    tr.innerHTML = `<td>Prompt ${i+1}</td><td colspan="3" style="color:var(--amber)">Testing...</td>`;
+    tbody.appendChild(tr);
+
+    let t0 = Date.now();
+    let firstTokT = null;
+    let tokCount = 0;
+    let finalTps = 0;
+
+    try {
+      const payload = {
+        message: pText,
+        session_id: crypto.randomUUID(), 
+        system_prompt: "You are a helpful assistant.",
+        max_new_tokens: 50, 
+        temperature: 0.1,
+        top_k: 40
+      };
+
+      const resp = await fetch(`${API}/chat`, {
+        method: 'POST',
+        headers: {'Content-Type':'application/json'},
+        body: JSON.stringify(payload),
+      });
+
+      const reader = resp.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = '';
+
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, {stream:true});
+        let nl;
+        while ((nl = buf.indexOf('\n')) !== -1) {
+          const line = buf.slice(0, nl).trim();
+          buf = buf.slice(nl+1);
+          if (!line.startsWith('data:')) continue;
+          const raw = line.slice(5).trim();
+          if (raw === '[DONE]') break;
+          let chunk;
+          try { chunk = JSON.parse(raw); } catch { continue; }
+
+          if (chunk.type === 'token') {
+            if (firstTokT === null) firstTokT = Date.now();
+            tokCount++;
+          } else if (chunk.type === 'done') {
+            finalTps = chunk.tps;
+          }
+        }
+      }
+
+      let ttft = firstTokT !== null ? (firstTokT - t0) : 0;
+      totalTps += finalTps;
+      totalTtft += ttft;
+
+      tr.innerHTML = `
+        <td>Prompt ${i+1}</td>
+        <td>${tokCount}</td>
+        <td class="${ttft < 800 ? 'good' : 'mid'}">${ttft}</td>
+        <td class="good">${finalTps}</td>
+      `;
+    } catch (e) {
+      tr.innerHTML = `<td>Prompt ${i+1}</td><td colspan="3" class="bad">Failed</td>`;
+    }
+  }
+
+  let avgTps = (totalTps / prompts.length).toFixed(1);
+  let avgTtft = (totalTtft / prompts.length).toFixed(0);
 
+  let summaryHTML = `
+    <div class="bench-summary" style="margin-top: 15px;">
+      <div class="bench-stat">
+        <div class="bval">${avgTps}</div>
+        <div class="blbl">Avg Tok/s</div>
+      </div>
+      <div class="bench-stat">
+        <div class="bval">${avgTtft}ms</div>
+        <div class="blbl">Avg TTFT</div>
+      </div>
+    </div>
+  `;
+  bcontent.insertAdjacentHTML('afterbegin', summaryHTML);
+
+  btn.textContent = "▶ Run Benchmark Again";
+  btn.disabled = false;
+}
 </script>
 </body>
 </html>