sync from abhijitramesh/webgpu-bench@ef7e64472d

build/asyncify/build-info.json

@@ -2,5 +2,5 @@
   "llamaCppCommit": "f22c8021d213567942a3d0134692e70f02f28f3a",
   "llamaCppDescribe": "b8981-3-gf22c8021d",
   "dawnTag": "v20260317.182325",
-  "builtAt": "2026-05-11T23:04:49Z"
+  "builtAt": "2026-05-11T23:13:42Z"
 }

build/jspi/build-info.json

@@ -2,5 +2,5 @@
   "llamaCppCommit": "f22c8021d213567942a3d0134692e70f02f28f3a",
   "llamaCppDescribe": "b8981-3-gf22c8021d",
   "dawnTag": "v20260317.182325",
-  "builtAt": "2026-05-11T23:00:38Z"
+  "builtAt": "2026-05-11T23:10:21Z"
 }

js/app.js

@@ -224,7 +224,7 @@ function renderHeroMeta(data) {
 /* Tween numeric content from 0 to a target. CSS-only via @property would
    need server-side @property registration to work in older Safari; keep
    this 12-line JS tween for predictability. */
-export function animateCount(el, target, { decimals = 0, duration = 600 } = {}) {
+function animateCount(el, target, { decimals = 0, duration = 600 } = {}) {
   if (!el) return;
   const start = parseFloat(el.dataset.value || '0') || 0;
   const end = Number(target) || 0;

js/charts.js

@@ -1,4 +1,4 @@
-import { BROWSER_COLORS, quantSortKey, groupBy, formatTokS } from './utils.js';
+import { BROWSER_COLORS, quantSortKey, groupBy, formatTokS, avgBy } from './utils.js';
 import { expandCpuRows } from './data.js';
 
 // Global Chart.js theme — uses the site's font tokens and a calm tooltip
@@ -78,14 +78,10 @@ export function renderDecodeChart(results) {
 
   const passed = results.filter(r => r.status === 'done' && r.decode_tok_s != null);
   if (passed.length === 0) {
-    canvas.parentElement.querySelector('.chart-empty')?.remove();
-    const msg = document.createElement('div');
-    msg.className = 'chart-empty';
-    msg.textContent = 'No data';
-    canvas.parentElement.appendChild(msg);
+    showEmptyState(canvas);
     return;
   }
-  canvas.parentElement.querySelector('.chart-empty')?.remove();
+  clearEmptyState(canvas);
 
   const byBrowser = groupBy(passed, 'browser');
   const allQuants = [...new Set(passed.map(r => r.variant))].sort((a, b) => quantSortKey(a) - quantSortKey(b));
@@ -95,12 +91,7 @@ export function renderDecodeChart(results) {
     return {
       label: browser,
       backgroundColor: BROWSER_COLORS[browser] || '#888',
-      data: allQuants.map(q => {
-        const group = byQuant[q];
-        if (!group) return null;
-        const vals = group.map(r => r.decode_tok_s).filter(v => v != null);
-        return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
-      }),
+      data: allQuants.map(q => avgBy(byQuant[q] || [], 'decode_tok_s')),
     };
   });
 
@@ -130,14 +121,10 @@ export function renderPrefillChart(results) {
 
   const passed = results.filter(r => r.status === 'done' && r.prefill_tok_s != null);
   if (passed.length === 0) {
-    canvas.parentElement.querySelector('.chart-empty')?.remove();
-    const msg = document.createElement('div');
-    msg.className = 'chart-empty';
-    msg.textContent = 'No data';
-    canvas.parentElement.appendChild(msg);
+    showEmptyState(canvas);
     return;
   }
-  canvas.parentElement.querySelector('.chart-empty')?.remove();
+  clearEmptyState(canvas);
 
   const byBrowser = groupBy(passed, 'browser');
   const allQuants = [...new Set(passed.map(r => r.variant))].sort((a, b) => quantSortKey(a) - quantSortKey(b));
@@ -147,12 +134,7 @@ export function renderPrefillChart(results) {
     return {
       label: browser,
       backgroundColor: BROWSER_COLORS[browser] || '#888',
-      data: allQuants.map(q => {
-        const group = byQuant[q];
-        if (!group) return null;
-        const vals = group.map(r => r.prefill_tok_s).filter(v => v != null);
-        return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
-      }),
+      data: allQuants.map(q => avgBy(byQuant[q] || [], 'prefill_tok_s')),
     };
   });
 
@@ -182,14 +164,10 @@ export function renderSizeChart(results) {
 
   const passed = results.filter(r => r.status === 'done' && r.decode_tok_s != null && r.sizeMB);
   if (passed.length === 0) {
-    canvas.parentElement.querySelector('.chart-empty')?.remove();
-    const msg = document.createElement('div');
-    msg.className = 'chart-empty';
-    msg.textContent = 'No data';
-    canvas.parentElement.appendChild(msg);
+    showEmptyState(canvas);
     return;
   }
-  canvas.parentElement.querySelector('.chart-empty')?.remove();
+  clearEmptyState(canvas);
 
   const byBrowser = groupBy(passed, 'browser');
 
@@ -245,11 +223,6 @@ const METRIC_LABELS = {
   prefill_tok_s: 'Prefill tok/s',
 };
 
-function avgBy(items, field) {
-  const vals = items.map(r => r[field]).filter(v => v != null);
-  return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
-}
-
 // CPU is pinned to d=0 by the runner, so apples-to-apples means reading
 // GPU's d=0 number. The CPU side keeps its bare metric (CPU records are
 // depth-pinned to 0 either way); GPU reads `<metric>_d0`. Plain-Run

js/dataset.js

@@ -31,7 +31,7 @@ const MAX_FETCH = 1000;
    look newer than `sinceISO` (with a clock-skew buffer applied). On any
    network/CORS/parse failure, returns an empty array — the dashboard then
    silently falls back to the static combined.json baseline. */
-export async function listRecentRunFiles(datasetRepo, sinceISO) {
+async function listRecentRunFiles(datasetRepo, sinceISO) {
   if (!datasetRepo) return [];
   // Cache-bust the listing — HF's CDN can serve a stale tree response, and
   // we specifically care about reading-our-own-write after a submit.
@@ -64,19 +64,12 @@ async function fetchRunFile(datasetRepo, filePath) {
   return resp.json();
 }
 
-/* List the dataset tree and download every file in `runs/`. Pure-live
-   variant of fetchRecentRuns — no cutoff, returns the entire dataset.
-   Caller is responsible for rate-limiting/caching. */
+/* List the dataset tree and download every file in `runs/`. Caller is
+   responsible for rate-limiting/caching. */
 export async function fetchAllRuns(datasetRepo) {
   return fetchRunsBatch(datasetRepo, await listRecentRunFiles(datasetRepo, null));
 }
 
-/* List the dataset tree and download every file that's newer than the
-   baseline's generatedAt. Kept for callers that still want a delta view. */
-export async function fetchRecentRuns(datasetRepo, sinceISO) {
-  return fetchRunsBatch(datasetRepo, await listRecentRunFiles(datasetRepo, sinceISO));
-}
-
 async function fetchRunsBatch(datasetRepo, files) {
   if (files.length === 0) return { records: [], machines: [], fileCount: 0 };
 

js/tables.js

@@ -1,4 +1,4 @@
-import { formatTokS, formatMs, categorizeError, groupBy, quantSortKey } from './utils.js';
+import { formatTokS, formatMs, categorizeError, groupBy, quantSortKey, avgBy } from './utils.js';
 import { expandCpuRows } from './data.js';
 
 let lastResults = [];
@@ -373,11 +373,6 @@ export function renderCpuGpuTable(results) {
     return;
   }
 
-  function avg(items, field) {
-    const vals = items.map(r => r[field]).filter(v => v != null);
-    return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
-  }
-
   const gpuBrowsers = [...new Set(gpuResults.map(r => r.browser))].sort();
 
   const cpuByModelVariant = groupBy(cpuResults, r => `${r.model}::${r.variant}`);
@@ -437,7 +432,7 @@ export function renderCpuGpuTable(results) {
 
     // CPU columns
     for (const m of METRICS) {
-      const val = avg(cpuItems, m.cpuField);
+      const val = avgBy(cpuItems, m.cpuField);
       html += `<td><span class="mono">${formatTokS(val)}</span></td>`;
     }
 
@@ -445,8 +440,8 @@ export function renderCpuGpuTable(results) {
     for (const b of gpuBrowsers) {
       const gpuItems = gpuByBrowser[b] || [];
       for (const m of METRICS) {
-        const cpuVal = avg(cpuItems, m.cpuField);
-        const gpuVal = avg(gpuItems, m.gpuField);
+        const cpuVal = avgBy(cpuItems, m.cpuField);
+        const gpuVal = avgBy(gpuItems, m.gpuField);
         const speedup = cpuVal && gpuVal ? gpuVal / cpuVal : null;
         const cls = speedup == null ? '' : speedup >= 3 ? 'text-success' : speedup >= 1.5 ? '' : speedup >= 1 ? 'text-muted' : 'text-error';
         html += `<td><span class="mono">${formatTokS(gpuVal)}</span></td>`;

js/utils.js

@@ -52,3 +52,8 @@ export function groupBy(arr, keyFn) {
   }
   return map;
 }
+
+export function avgBy(items, field) {
+  const vals = items.map(r => r[field]).filter(v => v != null);
+  return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+}