refactor inference throughput visualization more

app/src/content/embeds/inference-throughput-compare.html

@@ -697,7 +697,11 @@
       el.className = 'dataset-item';
       el.innerHTML = '<span class="ds-check">\u23f3</span><span class="ds-name">' + ds.name + '</span><span class="ds-time">-</span><span class="ds-size">(' + formatNumInt(ds.tokens) + ' toks)</span><div class="ds-tip">' + ds.desc + '</div>';
       datasetBarsEl.appendChild(el);
-      return el;
+      return {
+        root: el,
+        check: el.querySelector('.ds-check'),
+        time: el.querySelector('.ds-time'),
+      };
     });
 
     function resizeCanvas() {
@@ -733,7 +737,11 @@
       spawnAccum = 0;
       hwDirty = true;
       dsDone = DATASETS.map(() => false);
-      dsEls.forEach(el => { el.classList.remove('done'); el.querySelector('.ds-check').textContent = '\u23f3'; el.querySelector('.ds-time').textContent = '-'; });
+      dsEls.forEach((dsEl) => {
+        dsEl.root.classList.remove('done');
+        dsEl.check.textContent = '\u23f3';
+        dsEl.time.textContent = '-';
+      });
     }
 
     gpuSlider.addEventListener('input', () => { reset(); });
@@ -1084,11 +1092,11 @@
         const remaining = DATASETS[i].tokens - totalTokens;
         if (remaining <= 0) {
           dsDone[i] = true;
-          dsEls[i].classList.add('done');
-          dsEls[i].querySelector('.ds-check').textContent = '\u2705';
-          dsEls[i].querySelector('.ds-time').textContent = 'done';
+          dsEls[i].root.classList.add('done');
+          dsEls[i].check.textContent = '\u2705';
+          dsEls[i].time.textContent = 'done';
         } else {
-          dsEls[i].querySelector('.ds-time').textContent = formatDuration(remaining / tps);
+          dsEls[i].time.textContent = formatDuration(remaining / tps);
         }
       }
     }
@@ -1096,25 +1104,44 @@
     return { frame, updateMetrics, reset, getTps };
   }
 
-  const instA = createInstance('cA', 'modelA', 'datasetBarsA', {
-    booksRate: $('booksRateA'),
-    tpsInline: $('tpsInlineA'),
-    totalTokensNum: $('totalTokensNumA'),
-    totalItemNum: $('totalItemNumA'),
-    totalItemUnit: $('totalItemUnitA'),
-  });
-
-  const instances = [instA];
-  let instB = null;
+  const instanceConfigs = [
+    { key: 'A', canvasRole: 'cA', modelRole: 'modelA', datasetBarsRole: 'datasetBarsA' },
+  ];
   if (isCompareMode) {
-    instB = createInstance('cB', 'modelB', 'datasetBarsB', {
-      booksRate: $('booksRateB'),
-      tpsInline: $('tpsInlineB'),
-      totalTokensNum: $('totalTokensNumB'),
-      totalItemNum: $('totalItemNumB'),
-      totalItemUnit: $('totalItemUnitB'),
+    instanceConfigs.push({ key: 'B', canvasRole: 'cB', modelRole: 'modelB', datasetBarsRole: 'datasetBarsB' });
+  }
+
+  const instancesByKey = {};
+  const instances = instanceConfigs.map((cfg) => {
+    const instance = createInstance(cfg.canvasRole, cfg.modelRole, cfg.datasetBarsRole, {
+      booksRate: $('booksRate' + cfg.key),
+      tpsInline: $('tpsInline' + cfg.key),
+      totalTokensNum: $('totalTokensNum' + cfg.key),
+      totalItemNum: $('totalItemNum' + cfg.key),
+      totalItemUnit: $('totalItemUnit' + cfg.key),
     });
-    instances.push(instB);
+    instancesByKey[cfg.key] = instance;
+    return instance;
+  });
+
+  const instA = instancesByKey.A;
+  const instB = instancesByKey.B || null;
+
+  function updateSpeedupBadge(tpsA, tpsB) {
+    if (tpsA === tpsB) {
+      speedupRatioEl.textContent = 'Same throughput';
+      speedupRatioEl.className = 'ratio';
+      return;
+    }
+    if (tpsA > tpsB) {
+      const ratio = tpsA / tpsB;
+      speedupRatioEl.textContent = 'Model A is ' + ratio.toFixed(1) + '\u00d7 faster';
+      speedupRatioEl.className = 'ratio a-faster';
+      return;
+    }
+    const ratio = tpsB / tpsA;
+    speedupRatioEl.textContent = 'Model B is ' + ratio.toFixed(1) + '\u00d7 faster';
+    speedupRatioEl.className = 'ratio b-faster';
   }
 
   let lastTime = performance.now(), lastMetricUpdate = 0;
@@ -1133,21 +1160,7 @@
 
       if (instB) {
         instB.updateMetrics(now);
-
-        const tpsA = instA.getTps();
-        const tpsB = instB.getTps();
-        if (tpsA === tpsB) {
-          speedupRatioEl.textContent = 'Same throughput';
-          speedupRatioEl.className = 'ratio';
-        } else if (tpsA > tpsB) {
-          const ratio = tpsA / tpsB;
-          speedupRatioEl.textContent = 'Model A is ' + ratio.toFixed(1) + '\u00d7 faster';
-          speedupRatioEl.className = 'ratio a-faster';
-        } else {
-          const ratio = tpsB / tpsA;
-          speedupRatioEl.textContent = 'Model B is ' + ratio.toFixed(1) + '\u00d7 faster';
-          speedupRatioEl.className = 'ratio b-faster';
-        }
+        updateSpeedupBadge(instA.getTps(), instB.getTps());
       }
     }