feat: add interactive granular benchmark details to UI and update MTP summary data format

2026-05-17 11:03:23 +01:00
parent 2a4cb50b52
commit 71abff5a0d
7 changed files with 1588 additions and 227 deletions
@@ -49,6 +49,7 @@ function renderTable(runs, tbody) {
    
    rows.forEach(row => {
        const tr = document.createElement("tr");
+        tr.className = "main-row";

        // Model
        const tdModel = document.createElement("td");
@@ -87,7 +88,22 @@ function renderTable(runs, tbody) {
        tr.appendChild(makeMetricCell(mtp3Speed));
        tr.appendChild(makeSpeedupCell(baseSpeed, mtp3Speed));

+        // Details row
+        const detailsTr = document.createElement("tr");
+        detailsTr.className = "details-row hidden";
+        const detailsTd = document.createElement("td");
+        detailsTd.colSpan = 8;
+        
+        detailsTd.innerHTML = makeDetailsHTML(row);
+        detailsTr.appendChild(detailsTd);
+
+        tr.addEventListener("click", () => {
+            tr.classList.toggle("expanded");
+            detailsTr.classList.toggle("hidden");
+        });
+
        tbody.appendChild(tr);
+        tbody.appendChild(detailsTr);
    });
 }

@@ -126,3 +142,99 @@ function makeSpeedupCell(base, mtp) {
    }
    return td;
 }
+
+function makeDetailsHTML(row) {
+    if (!row.baseline || !row.baseline.results || row.baseline.results.length === 0) {
+        return `<div class="granular-wrap"><p style="font-size: 13px; color: var(--muted); margin: 0;">Granular data not available for this run. Re-run benchmarks to capture prompt-level metrics.</p></div>`;
+    }
+    
+    const tasks = new Map();
+    const modes = [
+        { key: "base", data: row.baseline },
+        { key: "mtp2", data: row.mtp2 },
+        { key: "mtp3", data: row.mtp3 }
+    ];
+    
+    modes.forEach(mode => {
+        if (!mode.data || !mode.data.results) return;
+        mode.data.results.forEach(res => {
+            if (!tasks.has(res.name)) {
+                tasks.set(res.name, { name: res.name });
+            }
+            const t = tasks.get(res.name);
+            t[`${mode.key}_prefill`] = res.prompt_per_second;
+            t[`${mode.key}_toks`] = res.predicted_per_second;
+            t[`${mode.key}_acc`] = res.accept_rate;
+        });
+    });
+    
+    let html = `
+    <div class="granular-wrap">
+        <table class="granular-table">
+            <thead>
+                <tr>
+                    <th>Prompt Task</th>
+                    <th class="num" title="Prefill (Prompt Processing) tok/s (Baseline)">Prefill (Base)</th>
+                    <th class="num" title="Prefill tok/s (MTP-2)">Prefill (MTP-2)</th>
+                    <th class="num" title="Prefill tok/s (MTP-3)">Prefill (MTP-3)</th>
+                    <th class="num" title="Baseline Gen tok/s">Base Gen</th>
+                    <th class="num" title="MTP-2 Gen tok/s">MTP-2 Gen</th>
+                    <th class="num" title="MTP-2 Accept Rate">Acc%</th>
+                    <th class="num" title="MTP-3 Gen tok/s">MTP-3 Gen</th>
+                    <th class="num" title="MTP-3 Accept Rate">Acc%</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+    
+    tasks.forEach(t => {
+        const p_base_val = t.base_prefill;
+        const p_mtp2_val = t.mtp2_prefill;
+        const p_mtp3_val = t.mtp3_prefill;
+
+        const p_base = p_base_val ? p_base_val.toFixed(1) : "—";
+        let p_mtp2 = p_mtp2_val ? p_mtp2_val.toFixed(1) : "—";
+        let p_mtp3 = p_mtp3_val ? p_mtp3_val.toFixed(1) : "—";
+
+        if (p_base_val && p_mtp2_val) {
+            const pct = ((p_mtp2_val - p_base_val) / p_base_val) * 100;
+            const color = pct >= 0 ? '#16a34a' : '#dc2626';
+            const sign = pct > 0 ? '+' : '';
+            p_mtp2 += ` <span style="font-size: 10px; color: ${color}; margin-left: 4px;">${sign}${pct.toFixed(1)}%</span>`;
+        }
+
+        if (p_base_val && p_mtp3_val) {
+            const pct = ((p_mtp3_val - p_base_val) / p_base_val) * 100;
+            const color = pct >= 0 ? '#16a34a' : '#dc2626';
+            const sign = pct > 0 ? '+' : '';
+            p_mtp3 += ` <span style="font-size: 10px; color: ${color}; margin-left: 4px;">${sign}${pct.toFixed(1)}%</span>`;
+        }
+
+        const g_base = t.base_toks ? t.base_toks.toFixed(1) : "—";
+        const g_mtp2 = t.mtp2_toks ? t.mtp2_toks.toFixed(1) : "—";
+        const a_mtp2 = t.mtp2_acc !== null && t.mtp2_acc !== undefined ? (t.mtp2_acc * 100).toFixed(1) + "%" : "—";
+        const g_mtp3 = t.mtp3_toks ? t.mtp3_toks.toFixed(1) : "—";
+        const a_mtp3 = t.mtp3_acc !== null && t.mtp3_acc !== undefined ? (t.mtp3_acc * 100).toFixed(1) + "%" : "—";
+        
+        html += `
+                <tr>
+                    <td>${t.name}</td>
+                    <td class="num">${p_base}</td>
+                    <td class="num">${p_mtp2}</td>
+                    <td class="num">${p_mtp3}</td>
+                    <td class="num">${g_base}</td>
+                    <td class="num">${g_mtp2}</td>
+                    <td class="num" style="color: var(--muted);">${a_mtp2}</td>
+                    <td class="num">${g_mtp3}</td>
+                    <td class="num" style="color: var(--muted);">${a_mtp3}</td>
+                </tr>
+        `;
+    });
+    
+    html += `
+            </tbody>
+        </table>
+    </div>`;
+    
+    return html;
+}