Highlight size category leaders in gold in the leaderboard

index.html

@@ -10,6 +10,8 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
   <style>
     :root {
+      --leader-gold: #d7bd83;
+      --leader-gold-hover: #f0dca8;
       --bg: #0a0a0b;
       --bg-alt: #111113;
       --surface: #141416;
@@ -1167,6 +1169,8 @@
 
   <style>
     /* index7.1 refinements */
+    #leaderboard-body .td-model > a.category-leader { color: var(--leader-gold); }
+    #leaderboard-body .td-model > a.category-leader:hover { color: var(--leader-gold-hover); }
     #highlight-leader-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
     #highlight-leader-grid .filter-leader-card {
       display: flex;
@@ -1191,8 +1195,8 @@
     }
     #highlight-leader-grid .filter-leader-card:focus-visible { outline: 2px solid var(--leader-org-color); outline-offset: 3px; }
     #highlight-leader-grid .filter-leader-kicker { color: #91919b; font-size: 10px; letter-spacing: .08em; }
-    #highlight-leader-grid .filter-leader-name { min-height: 44px; margin-top: 14px; font-size: 18px; font-weight: 500; letter-spacing: -.3px; }
-    #highlight-leader-grid .filter-leader-name:hover { color: var(--leader-org-color); }
+    #highlight-leader-grid .filter-leader-name { min-height: 44px; margin-top: 14px; color: var(--text); font-size: 18px; font-weight: 500; letter-spacing: -.3px; }
+    #highlight-leader-grid .filter-leader-name:hover { color: var(--text); }
     .highlight-leader-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: auto; padding-top: 14px; }
     .highlight-leader-score { text-align: right; }
     #highlight-leader-grid .filter-leader-score { margin-top: 0; font-size: 22px; }
@@ -1601,7 +1605,7 @@
     <!-- LEADERBOARD TABLE -->
     <section id="leaderboard" style="padding-top:40px;">
       <h2 class="section-title">Leaderboard</h2>
-      <p class="section-sub">Zero-shot evaluation. Higher is better for all columns. Click any header to sort.</p>
+      <p class="section-sub">Zero-shot evaluation. Higher is better for all columns. Gold names mark size category leaders. Click any header to sort.</p>
       <div class="leaderboard-filter-row">
         <div class="filter-group">
           <span class="filter-label">Model size</span>
@@ -2123,6 +2127,7 @@
   // ═══════════════════════════════════════════════════════════════
   
   const BENCHMARKS = ['arc', 'hellaswag', 'piqa', 'arcChall', 'arithmark3', 'arithmark2'];
+  const SIZE_FILTERS = ['all', '<250M', '<150M', '<100M', '<50M', '<10M', '<3M'];
   const METRICS = [
     { key: 'intelligenceIndex', label: 'Int Index', fullLabel: 'Intelligence Index' },
     { key: 'hellaswag', label: 'HellaSwag', fullLabel: 'HellaSwag' },
@@ -2254,17 +2259,45 @@
     return models.filter(m => !m.type);
   }
 
-function getFilteredModels(models = MODELS) {
+function getFilteredModels(models = MODELS, filter = activeFilter) {
   let arr = getModelEntries(models);
-  if (activeFilter === '<3M')       arr = arr.filter(m => m.params && m.params < 3000000);
-  else if (activeFilter === '<10M') arr = arr.filter(m => m.params && m.params < 10000000);
-  else if (activeFilter === '<50M') arr = arr.filter(m => m.params && m.params < 50000000);
-  else if (activeFilter === '<100M') arr = arr.filter(m => m.params && m.params < 100000000);
-  else if (activeFilter === '<150M') arr = arr.filter(m => m.params && m.params < 150000000);
-  else if (activeFilter === '<250M') arr = arr.filter(m => m.params && m.params < 250000000);
+  if (filter === '<3M')       arr = arr.filter(m => m.params && m.params < 3000000);
+  else if (filter === '<10M') arr = arr.filter(m => m.params && m.params < 10000000);
+  else if (filter === '<50M') arr = arr.filter(m => m.params && m.params < 50000000);
+  else if (filter === '<100M') arr = arr.filter(m => m.params && m.params < 100000000);
+  else if (filter === '<150M') arr = arr.filter(m => m.params && m.params < 150000000);
+  else if (filter === '<250M') arr = arr.filter(m => m.params && m.params < 250000000);
   return arr;
 }
 
+  function getSizeLeader(filter) {
+    let leader = null;
+    let bestScore = -Infinity;
+    for (const model of getFilteredModels(MODELS, filter)) {
+      const score = getIntelligenceIndex(model);
+      if (Number.isFinite(score) && score > bestScore) {
+        leader = model;
+        bestScore = score;
+      }
+    }
+    return leader;
+  }
+
+  function getCategoryLeaders() {
+    const leaders = new Map();
+    for (const filter of SIZE_FILTERS) {
+      const leader = getSizeLeader(filter);
+      if (!leader) continue;
+      if (!leaders.has(leader.name)) leaders.set(leader.name, []);
+      leaders.get(leader.name).push(filter === 'all' ? 'All sizes' : filter);
+    }
+    return leaders;
+  }
+
+  function getCategoryLeaderTitle(categories) {
+    return categories ? `Category leader: ${categories.join(', ')}`.replace(/</g, '&lt;') : '';
+  }
+
   function getLeaderboardModels(models = getFilteredModels()) {
     const normalizeSearchText = value => String(value || '')
       .normalize('NFKD')
@@ -2439,7 +2472,7 @@ function getFilteredModels(models = MODELS) {
 
   function renderFilters() {
     const bar = document.getElementById('filter-bar');
-    const filters = ['all', '<250M', '<150M', '<100M', '<50M', '<10M', '<3M'];
+    const filters = SIZE_FILTERS;
     bar.innerHTML = filters.map(f => `
       <button class="filter-btn ${activeFilter === f ? 'active' : ''}" onclick="setFilter('${f}')">${f === 'all' ? 'All' : f}</button>
     `).join('');
@@ -2568,6 +2601,7 @@ function getFilteredModels(models = MODELS) {
     const allModels = getLeaderboardModels();
     const fitMap = getModelFitMap(allModels);
     const sorted = getSortedModels(allModels, fitMap);
+    const categoryLeaders = getCategoryLeaders();
 
     if (!sorted.length) {
       tbody.innerHTML = '<tr><td colspan="13" class="td-model" style="padding:24px;color:var(--text-secondary);">No models match this search.</td></tr>';
@@ -2620,7 +2654,7 @@ function getFilteredModels(models = MODELS) {
         <tr>
           <td class="td-compare"><button class="compare-toggle ${inCompare ? 'active' : ''}" onclick="toggleCompare('${encodeURIComponent(m.name)}')" title="${inCompare ? 'Remove from comparison' : 'Add to comparison'}" aria-pressed="${inCompare}">${inCompare ? '−' : '+'}</button></td>
           <td class="td-rank">${rank}</td>
-          <td class="td-model"><a href="${m.links.card}" target="_blank">${m.name}</a>${cutoffTag}<span class="model-org"><a href="${org.url}" target="_blank">${org.name}</a> &middot; ${m.paramsDisplay}</span></td>
+          <td class="td-model"><a class="${categoryLeaders.has(m.name) ? 'category-leader' : ''}" title="${getCategoryLeaderTitle(categoryLeaders.get(m.name))}" href="${m.links.card}" target="_blank">${m.name}</a>${cutoffTag}<span class="model-org"><a href="${org.url}" target="_blank">${org.name}</a> &middot; ${m.paramsDisplay}</span></td>
           <td class="td-params">${m.paramsDisplay}</td>
           <td class="td-score">${intelligenceIndex !== null ? `<span class="${Math.abs(intelligenceIndex - best.intelligenceIndex) < 0.001 ? 'best' : ''}" style="${scoreColor(intelligenceIndex, Math.min(0, mins.intelligenceIndex), best.intelligenceIndex)}">${intelligenceIndex.toFixed(2)}</span>` : '<span class="td-score na">&mdash;</span>'}</td>
           <td class="td-score">${fmtCell(m.hellaswag, 'hellaswag')}</td>
@@ -3319,9 +3353,8 @@ function getFilteredModels(models = MODELS) {
   
 <script>
 (function () {
-  const sizeFilters = ['all', '<250M', '<150M', '<100M', '<50M', '<10M', '<3M'];
+  const sizeFilters = SIZE_FILTERS;
   const sizeLabels = { all: 'All sizes', '<250M': 'Under 250M', '<150M': 'Under 150M', '<100M': 'Under 100M', '<50M': 'Under 50M', '<10M': 'Under 10M', '<3M': 'Under 3M' };
-  const limits = { '<250M': 250000000, '<150M': 150000000, '<100M': 100000000, '<50M': 50000000, '<10M': 10000000, '<3M': 3000000 };
 
   function escapeHtml(value) {
     return String(value).replace(/[&<>"']/g, function (char) {
@@ -3330,12 +3363,14 @@ function getFilteredModels(models = MODELS) {
   }
 
   function modelsFor(filter) {
-    return getModelEntries(MODELS).filter(function (model) {
-      return filter === 'all' || (model.params && model.params < limits[filter]);
-    });
+    return getFilteredModels(MODELS, filter);
   }
 
   function winner(filter, metric) {
+    if (metric === 'intelligenceIndex') {
+      const model = getSizeLeader(filter);
+      return model ? { model, score: getIntelligenceIndex(model) } : null;
+    }
     return modelsFor(filter)
       .map(function (model) { return { model: model, score: getMetricValue(model, metric) }; })
       .filter(function (entry) { return Number.isFinite(entry.score); })