Update index.html

index.html

@@ -66,7 +66,6 @@
   .org { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
   .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
   .num { font-variant-numeric: tabular-nums; }
-  .best { color: var(--sage-ink); font-weight: 600; background: var(--sage-soft); }
   .muted { color: var(--muted); }
   .links a { color: var(--clay); text-decoration: none; font-size: 13px; margin-right: 12px; }
   .links a:hover { text-decoration: underline; }
@@ -174,17 +173,18 @@
         <tbody id="boardBody"></tbody>
       </table>
     </div>
-    <div class="legend">EM = exact grid match. fmt = output parses as a grid. Overall = mean across MARC-1/2/3. pass@n &gt; EM means the model has latent rule inference it doesn't always land. Highlighted cells mark the best value in the current view.</div>
+    <div class="legend">EM = exact grid match. fmt = output parses as a grid. Overall = mean across MARC-1/2/3. pass@n &gt; EM means the model has latent rule inference it doesn't always land. Cell color scales from clay (low) to sage (high).</div>
   </section>
 
   <!-- TIER TABS (MARC-1, MARC-2, MARC-3) -->
   <section id="view-tier" hidden>
-    
+
     <div class="info-box">
-      <b>Understanding the graphs:</b> Small models often fall back on statistical guessing rather than solving the rule. 
+      <b>Understanding the graphs:</b> Small models often fall back on statistical guessing rather than solving the rule.
       <ul>
         <li>The <b style="color:#e05e5e;">Red dashed line</b> is the mathematical random-guessing baseline.</li>
         <li>The <b style="color:#e0b25c;">Yellow dashed line</b> is <b>2× the random baseline</b>. Scoring below this generally means the model is just guessing, or worse, copying the input.</li>
+        <li>The <b style="color:#8fb395;">Green dashed line</b> is the <b>average human</b> score for that family and tier.</li>
       </ul>
     </div>
 
@@ -410,6 +410,7 @@ const DEMO_DATA = { models: [
 const esc = s => String(s ?? "").replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
 const fmtPct = v => v == null ? "—" : (v * 100).toFixed(1) + "%";
 const fmtNum = v => Number.isInteger(v) ? String(v) : (+v).toFixed(3).replace(/\.?0+$/,"");
+const isHuman = m => /human/i.test(m?.name || "");
 
 function parseParams(s) {
   if (!s) return NaN;
@@ -461,6 +462,15 @@ function getFamily(name) {
   return match ? match[1] : base;
 }
 
+// Red (low) -> green (high) heat color, shared by every table
+function heatColor(v) {
+  if (v == null) return "transparent";
+  const t = Math.max(0, Math.min(1, v));
+  const lo = [74, 48, 38], hi = [45, 58, 47];
+  const mix = lo.map((c, i) => Math.round(c + (hi[i] - c) * t));
+  return `rgb(${mix[0]},${mix[1]},${mix[2]})`;
+}
+
 // ─── Sort ───────────────────────────────────────────────────────────────────
 function buildSortOptions() {
   const sel = document.getElementById("sortSel");
@@ -500,7 +510,7 @@ function buildOrgChips(elId, customOrg, onPick) {
   document.getElementById(elId).innerHTML =
     chip("all","All",models.length) +
     Object.keys(counts).sort().map(k => chip(k,k,counts[k])).join("");
-  
+
   document.getElementById(elId).onclick = e => {
     const c = e.target.closest(".chip"); if (!c) return;
     onPick(c.dataset.org);
@@ -509,21 +519,11 @@ function buildOrgChips(elId, customOrg, onPick) {
 
 function renderTable(isTierTab, tierId = null) {
   const key = isTierTab ? "marc"+tierId : sortKeyForTab();
-  const filterOrg = isTierTab ? org : org; 
-  
+
   const list = models
-    .filter(m => (filterOrg === "all" || m.org === filterOrg) && (size === "all" || sizeOf(m.params) === size))
+    .filter(m => (org === "all" || m.org === org) && (size === "all" || sizeOf(m.params) === size))
     .sort(SORTS[key]);
 
-  const bestOverall = list.map(overallEm).filter(v => v != null);
-  const bestTier = k => list.map(m => tierValue(m,k,"em")).filter(v => v != null);
-  const bestFmt = list.map(overallFmt).filter(v => v != null);
-  const bO = bestOverall.length ? Math.max(...bestOverall) : null;
-  const b1 = bestTier("1").length ? Math.max(...bestTier("1")) : null;
-  const b2 = bestTier("2").length ? Math.max(...bestTier("2")) : null;
-  const b3 = bestTier("3").length ? Math.max(...bestTier("3")) : null;
-  const bF = bestFmt.length ? Math.max(...bestFmt) : null;
-
   const countId = isTierTab ? "tierCount" : "count";
   const headId = isTierTab ? "tierHead" : "boardHead";
   const bodyId = isTierTab ? "tierBody" : "boardBody";
@@ -542,6 +542,9 @@ function renderTable(isTierTab, tierId = null) {
       <th>Links</th>
     </tr>`;
 
+  // Heatmap cell: same red -> green gradient as the Families tab
+  const cell = v => `<td class="r num hm-cell" ${v != null ? `style="background:${heatColor(v)};color:var(--ink)"` : ""}>${v != null ? fmtPct(v) : '<span class="muted">—</span>'}</td>`;
+
   document.getElementById(bodyId).innerHTML = list.length ? list.map((m,i) => {
     const c = orgColor[m.org] || "#888";
     const ov = overallEm(m), t1 = tierValue(m,"1","em"), t2 = tierValue(m,"2","em"), t3 = tierValue(m,"3","em"), f = overallFmt(m);
@@ -549,18 +552,17 @@ function renderTable(isTierTab, tierId = null) {
     if (m.links?.card) links.push(`<a href="${esc(m.links.card)}" target="_blank" rel="noopener">Card</a>`);
     if (m.links?.demo) links.push(`<a href="${esc(m.links.demo)}" target="_blank" rel="noopener">Demo</a>`);
     const mode = m.chat ? `<span class="mode chat">chat</span>` : `<span class="mode base">base</span>`;
-    const cell = (v, best) => `<td class="r num ${v != null && v === best ? "best" : ""}">${v != null ? fmtPct(v) : '<span class="muted">—</span>'}</td>`;
     return `<tr>
       <td class="rank">${i+1}</td>
       <td class="name">${esc(m.name)}</td>
       <td><span class="org"><span class="dot" style="background:${c}"></span>${esc(m.org)}</span></td>
       <td class="num">${esc(m.params)}</td>
       <td>${mode}</td>
-      ${cell(ov, bO)}
-      ${cell(t1, b1)}
-      ${cell(t2, b2)}
-      ${cell(t3, b3)}
-      <td class="r num ${f != null && f === bF ? "best" : ""}">${f != null ? fmtPct(f) : '<span class="muted">—</span>'}</td>
+      ${cell(ov)}
+      ${cell(t1)}
+      ${cell(t2)}
+      ${cell(t3)}
+      ${cell(f)}
       <td class="links">${links.join("") || '<span class="muted">—</span>'}</td>
     </tr>`;
   }).join("") : `<tr><td colspan="11" class="empty">No models match these filters</td></tr>`;
@@ -576,7 +578,7 @@ const baselinePlugin = {
     if (!options || options.random === undefined) return;
     const { ctx, chartArea: { top, bottom, left, right }, scales: { y } } = chart;
     ctx.save();
-    
+
     // Red line: 1x Random
     if (options.random > 0) {
       const y1 = y.getPixelForValue(options.random);
@@ -590,7 +592,7 @@ const baselinePlugin = {
         ctx.stroke();
       }
     }
-    
+
     // Yellow line: 2x Random
     if (options.random > 0) {
       const y2 = y.getPixelForValue(options.random * 2);
@@ -604,6 +606,25 @@ const baselinePlugin = {
         ctx.stroke();
       }
     }
+
+    // Green line: average human
+    if (options.human != null) {
+      const yh = y.getPixelForValue(options.human);
+      if (yh >= top && yh <= bottom) {
+        ctx.beginPath();
+        ctx.setLineDash([6, 4]);
+        ctx.lineWidth = 1.5;
+        ctx.strokeStyle = '#8fb395'; // sage green
+        ctx.moveTo(left, yh);
+        ctx.lineTo(right, yh);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = '#8fb395';
+        ctx.font = '11px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.fillText('Human ' + options.human.toFixed(0) + '%', right - 4, yh - 4);
+      }
+    }
     ctx.restore();
   }
 };
@@ -612,19 +633,21 @@ Chart.register(baselinePlugin);
 function renderTierCharts(tierId) {
   tierChartInstances.forEach(c => c.destroy());
   tierChartInstances = [];
-  
+
   const t = String(tierId);
+  const human = models.find(isHuman);
 
   FAMILY_KEYS.forEach(fam => {
     // Group by family
     const groups = {};
     models.forEach(m => {
+      if (isHuman(m)) return; // human is drawn as a dashed line instead
       const groupName = getFamily(m.name);
       if (!groups[groupName]) groups[groupName] = [];
-      
+
       const p = parseParams(m.params);
       const emVal = m.families?.[fam]?.[t]?.em;
-      
+
       if (!isNaN(p) && emVal != null) {
         groups[groupName].push({ x: p, y: emVal * 100, name: m.name, org: m.org });
       }
@@ -649,6 +672,8 @@ function renderTierCharts(tierId) {
     Chart.defaults.color = "#a29686";
     Chart.defaults.font.family = '"Avenir Next", "Segoe UI", system-ui, sans-serif';
 
+    const humanEm = human?.families?.[fam]?.[t]?.em;
+
     const inst = new Chart(document.getElementById(`tierChart-${fam}`), {
       type: "scatter",
       data: { datasets },
@@ -657,7 +682,10 @@ function renderTierCharts(tierId) {
         layout: { padding: { top: 10, right: 10 } },
         plugins: {
           legend: { display: false },
-          baselines: { random: RANDOM_BASELINES[t][fam] },
+          baselines: {
+            random: RANDOM_BASELINES[t][fam],
+            human: humanEm != null ? humanEm * 100 : null
+          },
           tooltip: { callbacks: { label: c => `${c.raw.name}: ${c.parsed.y.toFixed(1)}%` } }
         },
         scales: {
@@ -675,20 +703,12 @@ function renderTierCharts(tierId) {
         }
       }
     });
-    
+
     tierChartInstances.push(inst);
   });
 }
 
 // ─── Families Heatmap ───────────────────────────────────────────────────────
-function heatColor(v) {
-  if (v == null) return "transparent";
-  const t = Math.max(0, Math.min(1, v));
-  const lo = [74, 48, 38], hi = [45, 58, 47];
-  const mix = lo.map((c, i) => Math.round(c + (hi[i] - c) * t));
-  return `rgb(${mix[0]},${mix[1]},${mix[2]})`;
-}
-
 function renderFamilies() {
   const tierSel = document.getElementById("famTierSel").value;
   const sorted = [...models].sort((a,b) => (familyAvgEm(b, tierSel).avg ?? -1) - (familyAvgEm(a, tierSel).avg ?? -1));
@@ -789,12 +809,12 @@ function renderCharts() {
 function setTab(t) {
   currentTab = t;
   document.querySelectorAll(".tab").forEach(b => b.classList.toggle("on", b.dataset.tab === t));
-  
+
   let viewId = "view-" + t;
   if (t === "marc1" || t === "marc2" || t === "marc3") {
     viewId = "view-tier";
   }
-  
+
   document.querySelectorAll('[id^="view-"]').forEach(s => s.hidden = s.id !== viewId);
 
   if (t === "families") {
@@ -803,7 +823,8 @@ function setTab(t) {
     renderCharts();
   } else if (t === "marc1" || t === "marc2" || t === "marc3") {
     const tierId = t.replace("marc", "");
-    buildOrgChips("tierOrgChips", org, (newOrg) => { org = newOrg; renderTable(true, tierId); buildOrgChips("tierOrgChips", org, (o)=>{org=o;renderTable(true,tierId);}); });
+    const pick = o => { org = o; buildOrgChips("tierOrgChips", org, pick); renderTable(true, tierId); };
+    buildOrgChips("tierOrgChips", org, pick);
     renderTierCharts(tierId);
     renderTable(true, tierId);
   } else {
@@ -813,8 +834,6 @@ function setTab(t) {
 document.querySelectorAll(".tab").forEach(b => b.addEventListener("click", () => setTab(b.dataset.tab)));
 
 // ─── Filters ────────────────────────────────────────────────────────────────
-buildOrgChips("orgChips", org, (newOrg) => { org = newOrg; buildOrgChips("orgChips", org, (o)=>{org=o;renderTable(false);}); renderTable(false); });
-
 document.getElementById("sizeSel").addEventListener("change", e => { size = e.target.value; renderTable(false); });
 document.getElementById("sortSel").addEventListener("change", e => { sortKey = e.target.value; renderTable(false); });
 document.getElementById("famTierSel").addEventListener("change", () => renderFamilies());
@@ -864,10 +883,11 @@ async function init() {
   }
   const orgs = [...new Set(models.map(m => m.org))].sort();
   orgs.forEach((o, i) => orgColor[o] = PALETTE[i % PALETTE.length]);
-  
+
   buildSortOptions();
-  buildOrgChips("orgChips", org, (newOrg) => { org = newOrg; buildOrgChips("orgChips", org, (o)=>{org=o;renderTable(false);}); renderTable(false); });
-  
+  const pickOverall = o => { org = o; buildOrgChips("orgChips", org, pickOverall); renderTable(false); };
+  buildOrgChips("orgChips", org, pickOverall);
+
   setTab("overall");
 }
 init();