sync from abhijitramesh/webgpu-bench@0e0f399c06

js/app.js

@@ -1,4 +1,4 @@
-import { loadData, filterResults, selectBestResults } from './data.js';
+import { loadData, filterResults, selectBestResults, expandCpuRows } from './data.js';
 import { initFilters, populateQuantOptions, getFilters, resetFilters } from './filters.js';
 import { renderDecodeChart, renderPrefillChart, renderSizeChart, renderMachineChart, renderCpuGpuChart, renderSpeedupChart } from './charts.js';
 import { renderResultsTable, renderErrorTable, renderMachineInfo, renderCpuGpuTable } from './tables.js';
@@ -148,7 +148,8 @@ function renderCpuGpuSection(filtered, metric) {
   const chartsGrid = document.querySelector('#performance-section .charts-grid:nth-of-type(2)');
   const table = document.getElementById('cpu-gpu-table');
   const passed = filtered.filter(r => r.status === 'done');
-  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
+  // Same expansion the chart/table renderers do — see expandCpuRows().
+  const cpuResults = expandCpuRows(passed);
   const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
 
   if (!chartsGrid || !table) {

js/charts.js

@@ -1,4 +1,5 @@
 import { BROWSER_COLORS, quantSortKey, groupBy, formatTokS } from './utils.js';
+import { expandCpuRows } from './data.js';
 
 // Global Chart.js theme — uses the site's font tokens and a calm tooltip
 // silhouette. Colors are pulled from CSS variables at render time so the
@@ -255,9 +256,10 @@ export function renderCpuGpuChart(results, metric = 'decode_tok_s') {
   const canvas = document.getElementById(canvasId);
   if (!canvas) return;
 
-  const passed = results.filter(r => r.status === 'done' && r[metric] != null);
-  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
-  const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
+  const passed = results.filter(r => r.status === 'done');
+  // expandCpuRows folds in cpu_baseline_* from browser-flow GPU records.
+  const cpuResults = expandCpuRows(passed).filter(r => r[metric] != null);
+  const gpuResults = passed.filter(r => r.nGpuLayers !== 0 && r[metric] != null);
 
   if (cpuResults.length === 0 || gpuResults.length === 0) {
     showEmptyState(canvas, cpuResults.length === 0 ? 'No CPU baseline data in current filter' : 'No GPU data in current filter');
@@ -311,9 +313,9 @@ export function renderSpeedupChart(results, metric = 'decode_tok_s') {
   const canvas = document.getElementById(canvasId);
   if (!canvas) return;
 
-  const passed = results.filter(r => r.status === 'done' && r[metric] != null);
-  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
-  const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
+  const passed = results.filter(r => r.status === 'done');
+  const cpuResults = expandCpuRows(passed).filter(r => r[metric] != null);
+  const gpuResults = passed.filter(r => r.nGpuLayers !== 0 && r[metric] != null);
 
   if (cpuResults.length === 0 || gpuResults.length === 0) {
     showEmptyState(canvas, cpuResults.length === 0 ? 'No CPU baseline data in current filter' : 'No GPU data in current filter');

js/data.js

@@ -155,6 +155,29 @@ export function selectBestResults(records) {
   return [...bestByCell.values()];
 }
 
+/* Synthesize "CPU only" rows for the CPU-vs-GPU views.
+   Two record sources contribute:
+     1) Real CPU runs (nGpuLayers === 0) — produced by the CLI runner which
+        alternates CPU and GPU passes.
+     2) The cpu_baseline_* fields on every browser-flow record — the in-page
+        bench measures one CPU pass per variant alongside the GPU iterations
+        and stamps the result on the same record. We turn each of those into
+        a synthetic CPU row so the comparison view sees both data shapes.
+*/
+export function expandCpuRows(results) {
+  const real = results.filter(r => r.nGpuLayers === 0);
+  const synthetic = results
+    .filter(r => r.nGpuLayers !== 0
+      && (r.cpu_baseline_decode_tok_s != null || r.cpu_baseline_prefill_tok_s != null))
+    .map(r => ({
+      ...r,
+      decode_tok_s: r.cpu_baseline_decode_tok_s,
+      prefill_tok_s: r.cpu_baseline_prefill_tok_s,
+      nGpuLayers: 0,
+    }));
+  return [...real, ...synthetic];
+}
+
 export function filterResults(results, filters) {
   return results.filter(r => {
     if (filters.machine && filters.machine !== 'all' && r.machineSlug !== filters.machine) return false;

js/tables.js

@@ -1,4 +1,5 @@
 import { formatTokS, formatMs, categorizeError, groupBy, quantSortKey } from './utils.js';
+import { expandCpuRows } from './data.js';
 
 let lastResults = [];
 let sortState = { key: null, dir: 'asc' };
@@ -302,7 +303,10 @@ export function renderCpuGpuTable(results) {
   ];
 
   const passed = results.filter(r => r.status === 'done');
-  const cpuResults = passed.filter(r => r.nGpuLayers === 0);
+  // CPU side aggregates standalone CPU runs (nGpuLayers === 0) plus
+  // synthetic rows derived from the cpu_baseline_* fields on browser-flow
+  // GPU records. See expandCpuRows() in data.js.
+  const cpuResults = expandCpuRows(passed);
   const gpuResults = passed.filter(r => r.nGpuLayers !== 0);
 
   if (cpuResults.length === 0 || gpuResults.length === 0) {