sync from abhijitramesh/webgpu-bench@9cdd64f37f

js/charts.js

@@ -427,13 +427,15 @@ export function renderMachineChart(results, machines) {
 
   const forQuant = passed.filter(r => r.variant === targetQuant);
   const byMachine = groupBy(forQuant, 'machineSlug');
-  const machineLabels = Object.keys(byMachine);
+  const machineSlugs = Object.keys(byMachine);
+  const nameBySlug = new Map(machines.map(m => [m.slug, m.userMachineName || m.cpus || m.slug]));
+  const machineLabels = machineSlugs.map(slug => nameBySlug.get(slug) || slug);
   const browsers = [...new Set(forQuant.map(r => r.browser))].sort();
 
   const datasets = browsers.map(browser => ({
     label: browser,
     backgroundColor: BROWSER_COLORS[browser] || '#888',
-    data: machineLabels.map(slug => {
+    data: machineSlugs.map(slug => {
       const items = byMachine[slug].filter(r => r.browser === browser);
       if (!items.length) return null;
       return items.reduce((s, r) => s + r.decode_tok_s, 0) / items.length;

js/dataset.js

@@ -82,6 +82,9 @@ async function fetchRunsBatch(datasetRepo, files) {
 
   const records = [];
   const machinesBySlug = new Map();
+  // Most-recent userReported.machineName per slug — the same machine can be
+  // submitted by multiple people who'd label it differently.
+  const userNameBySlug = new Map(); // slug → { name, ts }
 
   // Fetch in parallel — HF's CDN handles concurrent reads fine.
   const results = await Promise.allSettled(
@@ -106,13 +109,25 @@ async function fetchRunsBatch(datasetRepo, files) {
           // after the merge — leaving them as 0 here is a placeholder.
           resultCount: 0,
           passCount: 0,
+          userMachineName: null,
           llamaCppCommit: r.llamaCppCommit ?? null,
           llamaCppDescribe: r.llamaCppDescribe ?? null,
         });
       }
+      const userName = r.userReported?.machineName?.trim();
+      if (userName) {
+        const ts = r.timestamp || '';
+        const cur = userNameBySlug.get(slug);
+        if (!cur || ts > cur.ts) userNameBySlug.set(slug, { name: userName, ts });
+      }
     }
   }
 
+  for (const [slug, { name }] of userNameBySlug) {
+    const m = machinesBySlug.get(slug);
+    if (m) m.userMachineName = name;
+  }
+
   return { records, machines: [...machinesBySlug.values()], fileCount: files.length };
 }
 
@@ -169,6 +184,7 @@ function flattenForDashboard(r, slug) {
     llamaCppDescribe: r.llamaCppDescribe ?? null,
     dawnTag: r.dawnTag ?? null,
     submittedBy: r.submittedBy ?? null,
+    userMachineName: r.userReported?.machineName?.trim() || null,
     iterations: r.metrics?.iterations ?? null,
   };
 }

js/filters.js

@@ -12,7 +12,8 @@ export function initFilters(meta, onChangeCallback) {
   for (const m of meta.machines) {
     const opt = document.createElement('option');
     opt.value = m.slug;
-    opt.textContent = `${m.cpus} (${m.totalMemoryGB}GB)`;
+    const label = m.userMachineName || m.cpus;
+    opt.textContent = `${label} (${m.totalMemoryGB}GB)`;
     machineSelect.appendChild(opt);
   }
 

js/tables.js

@@ -296,13 +296,16 @@ export function renderMachineInfo(machines) {
   let html = '<div class="machine-grid">';
   for (const m of machines) {
     const failCount = m.resultCount - m.passCount;
+    const title = m.userMachineName || m.cpus;
+    const showHardwareRow = m.userMachineName && m.userMachineName !== m.cpus;
     html += `
       <div class="machine-card">
         <div class="machine-card-header">
           <svg class="machine-card-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
-          <h3>${escapeHtml(m.cpus)}</h3>
+          <h3>${escapeHtml(title)}</h3>
         </div>
         <div class="machine-card-specs">
+          ${showHardwareRow ? `<div class="spec-row"><span class="spec-label">Hardware</span><span class="spec-value">${escapeHtml(m.cpus)}</span></div>` : ''}
           <div class="spec-row"><span class="spec-label">Platform</span><span class="spec-value">${m.platform}</span></div>
           <div class="spec-row"><span class="spec-label">Arch</span><span class="spec-value">${m.arch}</span></div>
           <div class="spec-row"><span class="spec-label">RAM</span><span class="spec-value">${m.totalMemoryGB} GB</span></div>