Upload index.html

index.html

@@ -304,6 +304,8 @@ tbody tr { transition: background var(--transition); }
 }
 .org-tag .org-dot { width: 6px; height: 6px; border-radius: 50%; }
 .cell-metric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 75px; }
+.info-icon { cursor: help; opacity: 0.5; font-size: 0.85em; vertical-align: middle; }
+.info-icon:hover { opacity: 1; }
 .metric-val { font-weight: 600; font-size: 0.84rem; }
 .metric-na { color: var(--text-muted); font-style: italic; font-weight: 400; font-size: 0.78rem; }
 .best { color: var(--green); font-weight: 700; }
@@ -698,6 +700,18 @@ footer a:hover { text-decoration: underline; }
       </div>
     </div>
   </div>
+  <div class="info-banner anim d2">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+    <div>
+      <strong>What is Efficiency ⚡?</strong>
+      Efficiency&nbsp;=&nbsp;<code>Overall Score &divide; log&zwj;&hairsp;10(Params)</code>.
+      It measures how much benchmark performance a model delivers per parameter.
+      Small models that punch above their weight deserve just as much recognition as large ones —
+      this puts them on equal footing.       <strong>We added this for fairness, not to boost any
+      specific ranking.</strong> Glint Research holds #1 in efficiency but is #5 in overall score.
+      Switch to <em>Overall Score</em> to rank by raw performance.
+    </div>
+  </div>
   <div class="section anim d3" id="table-section">
     <div class="section-head">
       <h2>Detailed Results</h2>
@@ -706,6 +720,7 @@ footer a:hover { text-decoration: underline; }
         <div class="sort-control">
           <span>Sort</span>
           <select id="sort-select" aria-label="Sort leaderboard by">
+            <option value="efficiency">Efficiency ⚡</option>
             <option value="score">Overall Score</option>
             <option value="wiki">WikiText-2 PPL</option>
             <option value="blimp">BLiMP</option>
@@ -726,6 +741,7 @@ footer a:hover { text-decoration: underline; }
               <th>Model</th>
               <th>Org</th>
               <th>Params</th>
+              <th class="cell-metric">Eff. ⚡</th>
               <th class="cell-metric">WikiText-2 ↓</th>
               <th class="cell-metric">BLiMP ↑</th>
               <th class="cell-metric">ARC-Easy ↑</th>
@@ -779,7 +795,7 @@ footer a:hover { text-decoration: underline; }
     <div class="chart-grid">
       <div class="chart-card full">
         <h3>Parameters vs Leaderboard Score</h3>
-        <p class="chart-sub">Score = mean of BLiMP, ARC-Easy, and normalized WikiText-2 (missing benchmarks = 0; WikiText-2 capped at 500 PPL) · High efficiency zone (≥1σ above trend) · Top 3 marked</p>
+        <p class="chart-sub">Scatter of each model's overall score vs its parameter count. The <strong>Efficiency ⚡</strong> column ranks models by <code>score &divide; log&zwj;&hairsp;10(params)</code>, rewarding strong benchmark performance with fewer parameters. Points above the dashed threshold line are &ge;1&sigma; more efficient than the trend. Top 3 marked.</p>
         <canvas id="efficiencyChart" style="max-height:400px"></canvas>
         <div class="eff-note">
           <span><span class="line-sample" style="border-top:2px dashed rgba(255,200,0,0.4)"></span> Avg trend</span>
@@ -1330,6 +1346,14 @@ function getScore(m) {
   return (blimpScore + arcScore + wikiVal) / 3;
 }
 
+function getEfficiencyScore(m) {
+  const score = getScore(m);
+  if (score < 0) return -1;
+  const p = parseParams(m.params);
+  if (isNaN(p) || p <= 0) return -1;
+  return score / Math.log10(p + 1);
+}
+
 function orgTint(orgKey, alpha) {
   const c = colorMap[orgKey];
   const r = parseInt(c.slice(1, 3), 16);
@@ -1374,7 +1398,7 @@ function renderStats() {
 /* ─── Filters ─── */
 
 let activeFilter = 'all';
-let activeSort = 'score';
+let activeSort = 'efficiency';
 
 const sortComparators = {
   score: (a, b) => getScore(b) - getScore(a),
@@ -1393,6 +1417,7 @@ const sortComparators = {
     if (b.arc == null) return -1;
     return b.arc - a.arc;
   },
+  efficiency: (a, b) => getEfficiencyScore(b) - getEfficiencyScore(a),
   params: (a, b) => parseParams(a.params) - parseParams(b.params),
   date: (a, b) => {
     if (!a.releaseDate) return 1;
@@ -1500,9 +1525,11 @@ function renderTable() {
   const blimps = models.filter(m => m.blimp).map(m => m.blimp);
   const arcs = models.filter(m => m.arc).map(m => m.arc);
   const wikis = models.filter(m => m.wiki).map(m => m.wiki);
+  const effs = models.filter(m => getEfficiencyScore(m) >= 0).map(m => getEfficiencyScore(m));
   const bMin = Math.min(...blimps), bMax = Math.max(...blimps);
   const aMin = Math.min(...arcs), aMax = Math.max(...arcs);
   const wMin = Math.min(...wikis), wMax = Math.max(...wikis);
+  const eMin = Math.min(...effs), eMax = Math.max(...effs);
 
   tbody.innerHTML = filtered.map((m, idx) => {
     const oc = colorMap[m.org];
@@ -1519,6 +1546,11 @@ function renderTable() {
       </td>
       <td><span class="org-tag" style="background:${orgBg};color:${oc}"><span class="org-dot" style="background:${oc}"></span>${orgNameMap[m.org]}</span></td>
       <td>${m.params}</td>
+      <td class="cell-metric" style="${getColor(getEfficiencyScore(m), eMin, eMax, false)}">
+        ${getEfficiencyScore(m) >= 0
+          ? `<span class="metric-val${getEfficiencyScore(m) >= eMax ? ' best' : ''}">${getEfficiencyScore(m).toFixed(2)}</span>`
+          : '<span class="metric-na">TBD</span>'}
+      </td>
       <td class="cell-metric ${m.wiki === null ? '' : ''}" style="${getColor(m.wiki, wMin, wMax, true, true)}">
         ${m.wiki !== null
           ? `<span class="metric-val${isBestWiki ? ' best' : ''}">${m.wiki}</span>`