Update script.js

script.js

@@ -296,10 +296,14 @@
       .map((m, i) => {
         const rank = i + 1;
         const avg = avgScore(m, benches);
-        return `<div class="m-card">
+        const open = state.expanded === m.id;
+        return `<div class="m-card${open ? " open" : ""}" data-id="${esc(m.id)}">
           <div class="m-card-top">
-            <span class="rank rank-${rank <= 3 ? rank : "n"}">#${rank}</span>
-            ${m.url ? `<a href="${esc(m.url)}" target="_blank" rel="noopener">${esc(m.name)}</a>` : `<span>${esc(m.name)}</span>`}
+            <span style="display:flex;align-items:center;gap:9px;min-width:0;">
+              <span class="rank rank-${rank <= 3 ? rank : "n"}">#${rank}</span>
+              ${m.url ? `<a href="${esc(m.url)}" target="_blank" rel="noopener" onclick="event.stopPropagation()">${esc(m.name)}</a>` : `<span>${esc(m.name)}</span>`}
+            </span>
+            <span class="expand-hint">▶</span>
           </div>
           <div class="m-card-meta">${orgTag(m.org)}<span class="params">${fmtParams(m.params_b)}</span></div>
           <div class="m-scores">
@@ -308,9 +312,18 @@
               const v = runScore(m, b.id);
               return `<div class="m-score"><div class="k">${esc(shortLabel(b))}</div><div class="v">${fmtScore(v) ?? "—"}</div></div>`;
             }).join("")}
-          </div></div>`;
+          </div>
+          ${open ? `<div class="m-card-detail">${capabilityHtml(m, benches)}</div>` : ""}
+        </div>`;
       })
       .join("");
+
+    document.querySelectorAll("#model-cards .m-card").forEach((card) =>
+      card.addEventListener("click", () => {
+        state.expanded = state.expanded === card.dataset.id ? null : card.dataset.id;
+        render();
+      })
+    );
   }
 
   // ---------------------------------------------------------------------
@@ -326,6 +339,25 @@
     return run && numeric(run.score) ? run.score : null;
   }
 
+  // Composite score: each benchmark is min-max normalized across the visible
+  // set (inverted for lower_is_better), then averaged and scaled to 0-100.
+  // This mirrors the reference leaderboard's own "Overall Score" so ranking
+  // reflects both benchmarks together instead of just the first column.
+  function t2iComposite(model, benches, ranges) {
+    const parts = [];
+    benches.forEach((b, j) => {
+      const v = t2iRunValue(model, b.id);
+      if (!numeric(v)) return;
+      const { min, max } = ranges[j];
+      if (max === min) return;
+      let p = (v - min) / (max - min);
+      if (b.lower_is_better) p = 1 - p;
+      parts.push(p);
+    });
+    if (!parts.length) return null;
+    return (parts.reduce((s, v) => s + v, 0) / parts.length) * 100;
+  }
+
   function renderT2i() {
     const section = $("#t2i-section");
     const benches = t2iBenches();
@@ -341,39 +373,50 @@
 
     const head = $("#t2i-head");
     head.innerHTML = `<tr>
-      <th>#</th><th>Model</th><th>Org</th><th class="num">Params</th><th>Res.</th>
+      <th>#</th><th>Model</th><th>Org</th><th class="num">Params</th>
+      <th class="num" title="Normalized blend of all benchmarks below (0-100, higher is better)">Score</th>
+      <th>Res.</th>
       ${benches.map((b) => `<th class="num" title="${esc(b.description || "")}">${esc(b.label)}${b.lower_is_better ? " ↓" : ""}</th>`).join("")}
       <th>Released</th></tr>`;
 
     if (!models.length) {
       $("#t2i-body").innerHTML = "";
+      $("#t2i-cards").innerHTML = "";
       $("#t2i-empty").hidden = false;
       return;
     }
     $("#t2i-empty").hidden = true;
 
-    // sort ascending on the primary bench when lower_is_better, else descending
-    const primary = benches[0];
-    const sorted = models.slice().sort((a, b) => {
-      const va = t2iRunValue(a, primary.id), vb = t2iRunValue(b, primary.id);
-      const aa = va === null ? Infinity : va, bb = vb === null ? Infinity : vb;
-      return primary.lower_is_better ? aa - bb : bb - aa;
-    });
-
+    // ranges computed once, over the full visible set, before sorting
     const ranges = benches.map((b) => {
-      const vals = sorted.map((m) => t2iRunValue(m, b.id)).filter(numeric);
+      const vals = models.map((m) => t2iRunValue(m, b.id)).filter(numeric);
       const best = vals.length ? (b.lower_is_better ? Math.min(...vals) : Math.max(...vals)) : null;
       return { min: Math.min(...vals), max: Math.max(...vals), best };
     });
 
-    $("#t2i-body").innerHTML = sorted.map((m, i) => {
+    const withScore = models.map((m) => ({ m, score: t2iComposite(m, benches, ranges) }));
+    // sort by composite score desc; ties broken by the first (primary) bench
+    withScore.sort((a, b) => {
+      const sa = a.score === null ? -1 : a.score, sb = b.score === null ? -1 : b.score;
+      if (sb !== sa) return sb - sa;
+      const primary = benches[0];
+      const va = t2iRunValue(a.m, primary.id), vb = t2iRunValue(b.m, primary.id);
+      const aa = va === null ? Infinity : va, bb = vb === null ? Infinity : vb;
+      return primary.lower_is_better ? aa - bb : bb - aa;
+    });
+
+    const scores = withScore.map((x) => x.score).filter(numeric);
+    const scoreBest = scores.length ? Math.max(...scores) : null;
+
+    $("#t2i-body").innerHTML = withScore.map(({ m, score }, i) => {
       const rank = i + 1;
-      const flagNote = m.runs && m.runs[primary.id] && m.runs[primary.id].notes;
+      const flagNote = benches.map((b) => m.runs && m.runs[b.id] && m.runs[b.id].notes).find(Boolean);
       return `<tr${flagNote ? ` title="${esc(flagNote)}"` : ""}>
         <td class="rank rank-${rank <= 3 ? rank : "n"}">#${rank}</td>
         <td class="model-cell">${m.url ? `<a href="${esc(m.url)}" target="_blank" rel="noopener">${esc(m.name)}</a>` : esc(m.name)}${flagNote ? ' <span class="flag-dot" title="' + esc(flagNote) + '">⚠</span>' : ""}</td>
         <td>${orgTag(m.org)}</td>
         <td class="num">${fmtParams(m.params_b)}</td>
+        <td class="num score composite${numeric(score) && score === scoreBest ? " best" : ""}">${numeric(score) ? score.toFixed(1) : '<span class="na">—</span>'}</td>
         <td class="res">${esc(m.resolution || "—")}</td>
         ${benches.map((b, j) => {
           const v = t2iRunValue(m, b.id);
@@ -384,6 +427,46 @@
         <td class="res">${esc(m.release_date || "—")}</td>
       </tr>`;
     }).join("");
+
+    // mobile cards, tappable like the main table's mobile cards
+    $("#t2i-cards").innerHTML = withScore.map(({ m, score }, i) => {
+      const rank = i + 1;
+      const flagNote = benches.map((b) => m.runs && m.runs[b.id] && m.runs[b.id].notes).find(Boolean);
+      const open = state.expanded === `t2i:${m.id}`;
+      return `<div class="t2i-m-card${open ? " open" : ""}" data-id="${esc(m.id)}">
+        <div class="m-card-top t2i-m-card-top">
+          <span style="display:flex;align-items:center;gap:9px;min-width:0;">
+            <span class="rank rank-${rank <= 3 ? rank : "n"}">#${rank}</span>
+            ${m.url ? `<a href="${esc(m.url)}" target="_blank" rel="noopener" onclick="event.stopPropagation()">${esc(m.name)}</a>` : `<span>${esc(m.name)}</span>`}
+            ${flagNote ? ' <span class="flag-dot" title="' + esc(flagNote) + '">⚠</span>' : ""}
+          </span>
+          <span class="expand-hint">▶</span>
+        </div>
+        <div class="t2i-m-card-meta">${orgTag(m.org)}
+          <span class="params">${fmtParams(m.params_b)}</span>
+          <span class="res">${esc(m.resolution || "—")}</span>
+          <span class="date">${esc(m.release_date || "—")}</span>
+        </div>
+        <div class="t2i-m-scores">
+          <div class="t2i-m-score composite"><div class="k">Score</div><div class="v${numeric(score) && score === scoreBest ? " best" : ""}">${numeric(score) ? score.toFixed(1) : "—"}</div></div>
+          ${benches.map((b, j) => {
+            const v = t2iRunValue(m, b.id);
+            const best = numeric(v) && v === ranges[j].best;
+            const decimals = b.id === "t2i-clip-coco" ? 4 : 2;
+            return `<div class="t2i-m-score"><div class="k">${esc(b.label)}</div><div class="v${best ? " best" : ""}">${numeric(v) ? v.toFixed(decimals) : "—"}</div></div>`;
+          }).join("")}
+        </div>
+        ${open ? `<div class="t2i-m-card-detail">${flagNote ? `<p style="font-size:0.78rem;color:var(--muted);line-height:1.5;">${esc(flagNote)}</p>` : `<p style="font-size:0.78rem;color:var(--muted-2);font-style:italic;">No additional notes.</p>`}</div>` : ""}
+      </div>`;
+    }).join("");
+
+    document.querySelectorAll("#t2i-cards .t2i-m-card").forEach((card) =>
+      card.addEventListener("click", () => {
+        const key = `t2i:${card.dataset.id}`;
+        state.expanded = state.expanded === key ? null : key;
+        renderT2i();
+      })
+    );
   }
 
   // ---------------------------------------------------------------------