(() => {
"use strict";
// ---------------------------------------------------------------------
// State
// ---------------------------------------------------------------------
const state = {
data: null,
gen: null, // "7-2026" | "6-2026" | "all"; default = data.latest_generation
search: "",
sort: "avg-desc",
expanded: null, // "modelId" whose detail row is open
};
const $ = (sel) => document.querySelector(sel);
// ---------------------------------------------------------------------
// Data helpers
// ---------------------------------------------------------------------
const numeric = (v) => typeof v === "number" && isFinite(v);
// Category score resolution. `score` (v2 uniform key) wins; the legacy
// metric-name keys keep 6-2026 entries rendering unchanged.
const catVal = (c) =>
[c.score, c.hybrid_score, c.exact_match, c.soft_score_norm, c.acc_norm, c.soft_score]
.find(numeric);
function benchesFor(gen) {
const all = state.data.benchmarks.filter((b) => !b.unavailable);
const list = gen === "all" ? all : all.filter((b) => (b.generation || "6-2026") === gen);
return list.slice().sort((a, b) => (a.tier - b.tier) || String(a.generation).localeCompare(String(b.generation)));
}
function runScore(model, benchId) {
const run = model.runs && model.runs[benchId];
return run && numeric(run.score) ? run.score : null;
}
function avgScore(model, benches) {
const vals = benches.map((b) => runScore(model, b.id)).filter(numeric);
return vals.length ? vals.reduce((s, v) => s + v, 0) / vals.length : null;
}
function visibleModels(benches) {
let models = state.data.models.filter((m) =>
benches.some((b) => runScore(m, b.id) !== null)
);
if (state.search) {
const q = state.search.toLowerCase();
models = models.filter(
(m) => (m.name || "").toLowerCase().includes(q) || (m.org || "").toLowerCase().includes(q)
);
}
const key = state.sort;
models.sort((a, b) => {
if (key === "name-asc") return (a.name || "").localeCompare(b.name || "");
if (key.startsWith("params")) {
const pa = numeric(a.params_b) ? a.params_b : Infinity;
const pb = numeric(b.params_b) ? b.params_b : Infinity;
return key === "params-asc" ? pa - pb : (pb === Infinity ? -1 : pb) - (pa === Infinity ? -1 : pa);
}
const aa = avgScore(a, benches), ab = avgScore(b, benches);
const va = aa === null ? -1 : aa, vb = ab === null ? -1 : ab;
return key === "avg-asc" ? va - vb : vb - va;
});
return models;
}
// ---------------------------------------------------------------------
// Presentation helpers
// ---------------------------------------------------------------------
const esc = (s) =>
String(s).replace(/[&<>"']/g, (ch) =>
({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[ch]));
function cssRgb(varName) {
return getComputedStyle(document.documentElement).getPropertyValue(varName)
.split(",").map((x) => parseFloat(x));
}
// Gamma-curved color ramp: most cells stay near the base text color; only
// genuinely strong scores go vividly green.
function scoreColor(value, min, max) {
const base = cssRgb("--score-base"), best = cssRgb("--score-best");
if (!numeric(value) || max <= min) return null;
const p = Math.pow((value - min) / (max - min), 2.5);
const mix = base.map((b, i) => Math.round(b + (best[i] - b) * p));
return `rgb(${mix.join(",")})`;
}
function orgColor(org) {
let h = 0;
for (const ch of String(org || "?")) h = (h * 31 + ch.charCodeAt(0)) % 360;
return `hsl(${h}, 55%, 55%)`;
}
const fmtScore = (v) => (numeric(v) ? v.toFixed(3) : null);
// params_b is always in billions. Format at whichever scale keeps 2-3
// significant figures, matching the reference site (40.1M, 919k, 23.7k...).
function fmtParams(p) {
if (!numeric(p)) return "—";
const abs = Math.abs(p);
if (abs >= 1) return `${p.toFixed(p >= 100 ? 0 : 1)}B`;
if (abs >= 0.001) return `${(p * 1000).toFixed((p * 1000) >= 100 ? 0 : 1)}M`;
if (abs >= 0.000001) return `${(p * 1e6).toFixed((p * 1e6) >= 100 ? 0 : 1)}k`;
return `${Math.round(p * 1e9)}`;
}
function shortLabel(bench) {
return bench.label.replace(" (6-2026)", "");
}
// ---------------------------------------------------------------------
// Capability radar (replaces the old per-tier category-bar tables)
// ---------------------------------------------------------------------
// One shape per model: average category score across whichever benches are
// currently in view. Much faster to read than a stack of sliders per tier.
function categoryAverages(model, benches) {
const sums = {}, counts = {};
for (const b of benches) {
const run = model.runs && model.runs[b.id];
if (!run || !run.categories) continue;
for (const [cat, c] of Object.entries(run.categories)) {
const v = catVal(c);
if (!numeric(v)) continue;
sums[cat] = (sums[cat] || 0) + v;
counts[cat] = (counts[cat] || 0) + 1;
}
}
const cats = state.data.categories || Object.keys(sums);
return cats
.filter((c) => counts[c])
.map((c) => ({ cat: c, value: sums[c] / counts[c] }));
}
function radarSvg(points, size = 220) {
const n = points.length;
if (n < 3) {
return `Not enough category data for this view.
`;
}
const cx = size / 2, cy = size / 2, r = size / 2 - 30;
const angle = (i) => (Math.PI * 2 * i) / n - Math.PI / 2;
const pt = (i, frac) => [cx + Math.cos(angle(i)) * r * frac, cy + Math.sin(angle(i)) * r * frac];
// background rings at 25/50/75/100%
const rings = [0.25, 0.5, 0.75, 1].map((frac) => {
const path = points.map((_, i) => pt(i, frac).join(",")).join(" ");
return ``;
}).join("");
// spokes
const spokes = points.map((_, i) => {
const [x, y] = pt(i, 1);
return ``;
}).join("");
// data polygon
const dataPath = points.map((p, i) => pt(i, Math.max(0.03, p.value)).join(",")).join(" ");
// labels
const labels = points.map((p, i) => {
const [x, y] = pt(i, 1.18);
const anchor = Math.cos(angle(i)) > 0.15 ? "start" : Math.cos(angle(i)) < -0.15 ? "end" : "middle";
const short = p.cat.replace(/-/g, " ");
return `${esc(short)}`;
}).join("");
return ``;
}
function capabilityHtml(model, benches) {
const points = categoryAverages(model, benches);
const svg = radarSvg(points);
// compact per-tier headline strip alongside the shape
const tierRows = benches.map((b) => {
const run = model.runs && model.runs[b.id];
const v = run && numeric(run.score) ? run.score : null;
return `
${esc(shortLabel(b))}
${v !== null ? v.toFixed(3) : "—"}
`;
}).join("");
return `
${svg}
${tierRows || "No tier scores yet."}
`;
}
// ---------------------------------------------------------------------
// Rendering — text-QA leaderboard
// ---------------------------------------------------------------------
function renderStats(models, benches) {
const latest = state.data.latest_generation;
const genLabel = state.gen === "all" ? "all generations" : state.gen;
let bestModel = null, bestAvg = null;
for (const m of models) {
const a = avgScore(m, benches);
if (a !== null && (bestAvg === null || a > bestAvg)) { bestAvg = a; bestModel = m; }
}
$("#stat-row").innerHTML = `
Benchmarks
${benches.length}
Best avg
${bestAvg !== null ? bestAvg.toFixed(3) : "—"}
${bestModel ? esc(bestModel.name) : "no runs yet"}
Updated
${esc(latest)}
${esc(state.data.updated)}
| # | Model | Org | Params | Avg |
${benches.map((b) => `${esc(shortLabel(b))} | `).join("")}
|
`;
// column ranges for the color ramp + best-value highlight
const ranges = benches.map((b) => {
const vals = models.map((m) => runScore(m, b.id)).filter(numeric);
return { min: Math.min(...vals), max: Math.max(...vals), best: vals.length ? Math.max(...vals) : null };
});
const avgs = models.map((m) => avgScore(m, benches)).filter(numeric);
const avgRange = { min: Math.min(...avgs), max: Math.max(...avgs), best: avgs.length ? Math.max(...avgs) : null };
const rows = [];
models.forEach((m, i) => {
const rank = i + 1;
const avg = avgScore(m, benches);
const open = state.expanded === m.id;
const avgColor = scoreColor(avg, avgRange.min, avgRange.max);
rows.push(`
| #${rank} |
${m.url ? `${esc(m.name)}` : esc(m.name)} |
${orgTag(m.org)} |
${fmtParams(m.params_b)} |
${fmtScore(avg) ?? '—'} |
${benches.map((b, j) => {
const v = runScore(m, b.id);
const color = scoreColor(v, ranges[j].min, ranges[j].max);
const best = numeric(v) && v === ranges[j].best;
return `
${fmtScore(v) ?? 'TBD'} | `;
}).join("")}
▶ |
`);
if (open) {
rows.push(`| ${capabilityHtml(m, benches)} |
`);
}
});
body.innerHTML = rows.join("");
document.querySelectorAll("#lb-body tr.model-row").forEach((tr) =>
tr.addEventListener("click", () => {
state.expanded = state.expanded === tr.dataset.id ? null : tr.dataset.id;
render();
})
);
}
function renderCards(models, benches) {
$("#model-cards").innerHTML = models
.map((m, i) => {
const rank = i + 1;
const avg = avgScore(m, benches);
const open = state.expanded === m.id;
return `
${orgTag(m.org)}${fmtParams(m.params_b)}
Avg
${fmtScore(avg) ?? "—"}
${benches.map((b) => {
const v = runScore(m, b.id);
return `
${esc(shortLabel(b))}
${fmtScore(v) ?? "—"}
`;
}).join("")}
${open ? `
${capabilityHtml(m, benches)}
` : ""}
`;
})
.join("");
document.querySelectorAll("#model-cards .m-card").forEach((card) =>
card.addEventListener("click", () => {
state.expanded = state.expanded === card.dataset.id ? null : card.dataset.id;
render();
})
);
}
// ---------------------------------------------------------------------
// Rendering — text-to-image mini leaderboard (independent track)
// ---------------------------------------------------------------------
function t2iBenches() {
return (state.data.t2i_benchmarks || []).filter((b) => !b.unavailable);
}
function t2iRunValue(model, benchId) {
const run = model.runs && model.runs[benchId];
return run && numeric(run.score) ? run.score : null;
}
// FID: show at full reported precision (no artificial rounding — 4.8724
// stays 4.8724, 39.54 stays 39.54). CLIP: stored 0-1, display as a percent
// to one decimal, matching the reference site's "28.0%" formatting.
function fmtT2iValue(benchId, v) {
if (!numeric(v)) return null;
if (benchId === "t2i-clip-coco") return `${(v * 100).toFixed(1)}%`;
// strip trailing zeros beyond what was actually reported, cap at 4dp
return String(Math.round(v * 10000) / 10000);
}
// 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();
const models = (state.data.t2i_models || []).filter((m) =>
benches.some((b) => t2iRunValue(m, b.id) !== null)
);
if (!benches.length) {
section.hidden = true;
return;
}
section.hidden = false;
const head = $("#t2i-head");
head.innerHTML = `
| # | Model | Org | Params |
Score |
Res. |
${benches.map((b) => `${esc(b.label)}${b.lower_is_better ? " ↓" : ""} | `).join("")}
Released |
`;
if (!models.length) {
$("#t2i-body").innerHTML = "";
$("#t2i-cards").innerHTML = "";
$("#t2i-empty").hidden = false;
return;
}
$("#t2i-empty").hidden = true;
// ranges computed once, over the full visible set, before sorting
const ranges = benches.map((b) => {
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 };
});
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 = benches.map((b) => m.runs && m.runs[b.id] && m.runs[b.id].notes).find(Boolean);
return `
#${rank} |
${m.url ? `${esc(m.name)}` : esc(m.name)}${flagNote ? ' ⚠' : ""} |
${orgTag(m.org)} |
${fmtParams(m.params_b)} |
${numeric(score) ? score.toFixed(1) : '—'} |
${esc(m.resolution || "—")} |
${benches.map((b, j) => {
const v = t2iRunValue(m, b.id);
const best = numeric(v) && v === ranges[j].best;
return `${fmtT2iValue(b.id, v) ?? 'TBD'} | `;
}).join("")}
${esc(m.release_date || "—")} |
`;
}).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 `
#${rank}
${m.url ? `${esc(m.name)}` : `${esc(m.name)}`}
${flagNote ? ' ⚠' : ""}
▶
${orgTag(m.org)}
${fmtParams(m.params_b)}
${esc(m.resolution || "—")}
${esc(m.release_date || "—")}
Score
${numeric(score) ? score.toFixed(1) : "—"}
${benches.map((b, j) => {
const v = t2iRunValue(m, b.id);
const best = numeric(v) && v === ranges[j].best;
return `
${esc(b.label)}
${fmtT2iValue(b.id, v) ?? "—"}
`;
}).join("")}
${open ? `
${flagNote ? `
${esc(flagNote)}
` : `
No additional notes.
`}
` : ""}
`;
}).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();
})
);
}
// ---------------------------------------------------------------------
// Boot / orchestration
// ---------------------------------------------------------------------
function render() {
const benches = benchesFor(state.gen);
const models = visibleModels(benches);
renderChips();
renderStats(models, benches);
const empty = models.length === 0;
$("#empty-state").hidden = !empty;
$("#lb").style.display = empty ? "none" : "";
$("#model-cards").style.visibility = empty ? "hidden" : "";
if (!empty) {
renderTable(models, benches);
renderCards(models, benches);
}
renderT2i();
}
async function boot() {
const resp = await fetch("models.json");
state.data = await resp.json();
state.gen = state.data.latest_generation || "all";
$("#model-search").addEventListener("input", (e) => {
state.search = e.target.value.trim();
render();
});
$("#sort-select").addEventListener("change", (e) => {
state.sort = e.target.value;
render();
});
$("#show-legacy").addEventListener("click", () => {
state.gen = "6-2026";
render();
});
const scheme = window.matchMedia("(prefers-color-scheme: light)");
(scheme.addEventListener || scheme.addListener).call(scheme, "change", render);
render();
}
boot().catch((err) => {
$("#lb-body").innerHTML = `| Failed to load models.json: ${esc(err.message)} |
`;
});
})();