HTML 77.2%
TypeScript 10.5%
Python 9.6%
JavaScript 2.5%
1import type { Metadata } from 'next';2import Link from 'next/link';3import { Heatmap } from '@/components/charts';4import { ComparabilityLegend } from '@/components/entity/model-blocks';5import { MatrixFilterRail } from '@/components/benchmarks/filter-rails';6import { TerminalLayout } from '@/components/layout/terminal';7import { TrustBadge } from '@/components/models/badges';8import { fmtScoreUnit, trustShort } from '@/components/models/shared';9import { Container, Note } from '@/components/ui/section';10import { EmptyState, Unavailable } from '@/components/ui/unavailable';11import { apiD1, safe } from '@/lib/api';12import { cn } from '@/lib/cn';13import { fmtInt, num } from '@/lib/format';14import { routes, SITE_NAME, SITE_URL } from '@/lib/site';1516export const metadata: Metadata = {17 title: 'Benchmark matrix — models × benchmarks, best comparable current score',18 description: 'Heatmap of canonical models against benchmarks: each cell is the best current score inside the comparability group, coloured by rank within the column. Pick benchmarks, filter by organization or family and release year, restrict to comparable rows.',19 alternates: { canonical: '/benchmarks/matrix' },20 openGraph: { title: `Benchmark matrix | ${SITE_NAME}`, url: `${SITE_URL}/benchmarks/matrix`, type: 'website' },21};22export const revalidate = 600;2324type SP = Record<string, string | undefined>;25const LIMITS = [30, 60, 100];2627export default async function MatrixPage({ searchParams }: { searchParams: Promise<SP> }) {28 const sp = await searchParams;29 const benchmarks = (sp.benchmarks ?? '').split(',').map((s) => s.trim()).filter(Boolean);30 const org = sp.org?.trim() || undefined;31 const family = sp.family?.trim() || undefined;32 const comparableOnly = sp.comparable_only === '1';33 const minCells = Math.min(12, Math.max(1, Number(sp.min_cells) || 3));34 const limit = LIMITS.includes(Number(sp.limit)) ? Number(sp.limit) : 60;35 const yearFrom = /^\d{4}$/.test(sp.year_from ?? '') ? Number(sp.year_from) : undefined;36 const yearTo = /^\d{4}$/.test(sp.year_to ?? '') ? Number(sp.year_to) : undefined;37 const [matrix, list] = await Promise.all([safe(apiD1.matrix({ benchmarks: benchmarks.length ? benchmarks.join(',') : undefined, org, family, comparable_only: comparableOnly ? 1 : undefined, min_cells: minCells, limit })), safe(apiD1.benchmarks())]);38 const withResults = (list?.items ?? []).filter((b) => (num(b.result_count) ?? 0) > 0).sort((x, y) => (num(y.result_count) ?? 0) - (num(x.result_count) ?? 0));39 // Release-year range filters rows in the page (the API has no date filter on the matrix; cells carry no dates).40 const rows = (matrix?.rows ?? []).filter((r) => {41 const y = r.model.release_date ? Number(r.model.release_date.slice(0, 4)) : null;42 if (yearFrom !== undefined && (y === null || y < yearFrom)) return false;43 if (yearTo !== undefined && (y === null || y > yearTo)) return false;44 return true;45 });46 const cols = matrix?.columns ?? [];47 const colById = new Map(cols.map((c) => [c.id, c]));48 const colIds = cols.map((c) => c.id);49 // Colour by within-column rank: 1 = best rank in the column, 0 = last among the models that have a cell.50 const colRanks = new Map<string, number[]>();51 for (const c of cols) colRanks.set(c.id, rows.map((r) => r.cells[c.id]?.rank).filter((x): x is number => typeof x === 'number').sort((a, b) => a - b));52 const cellFn = (rowKey: string, colKey: string) => {53 const r = rows.find((x) => x.model.id === rowKey);54 const c = r?.cells[colKey];55 const col = colById.get(colKey);56 if (!r || !c || !col) return { value: null, title: r && col ? `${r.model.name} · ${col.name}: no current result in this group` : undefined };57 const ranks = colRanks.get(colKey) ?? [];58 const pos = ranks.indexOf(c.rank);59 const value = ranks.length > 1 ? 1 - pos / (ranks.length - 1) : 1;60 const unit = typeof list?.items.find((b) => b.id === colKey)?.unit === 'string' ? (list?.items.find((b) => b.id === colKey)?.unit as string) : null;61 return {62 value,63 label: fmtScoreUnit(c.score, unit),64 href: `${routes.benchmark(col.slug)}?metric=${encodeURIComponent(col.metric)}&config_key=${encodeURIComponent(c.config_key)}`,65 title: `${r.model.name} · ${col.name}: ${fmtScoreUnit(c.score, unit)} · rank ${c.rank} of ${col.n_models} · ${trustShort(c.trust_level)} · ${c.comparability}`,66 };67 };68 const filterCount = [benchmarks.length ? '1' : undefined, org, family, comparableOnly ? '1' : undefined, yearFrom, yearTo].filter(Boolean).length;69 const trustLevels = [...new Set(rows.flatMap((r) => Object.values(r.cells).map((c) => c?.trust_level).filter(Boolean)))] as string[];70 const partially = rows.reduce((n, r) => n + Object.values(r.cells).filter((c) => c && c.comparability !== 'comparable').length, 0);71 const cellsN = rows.reduce((n, r) => n + r.n_cells, 0);72 const ld = { '@context': 'https://schema.org', '@type': 'Dataset', name: 'Benchmark matrix', url: `${SITE_URL}/benchmarks/matrix`, description: metadata.description };7374 const filters = <MatrixFilterRail benchmarks={withResults.map((b) => ({ slug: b.slug, name: b.name, models: num(b.model_count) ?? 0 }))} picked={benchmarks} org={org} family={family} yearFrom={sp.year_from} yearTo={sp.year_to} comparableOnly={comparableOnly} minCells={minCells} limit={limit} limits={LIMITS} />;75 const inspector = (76 <div className="space-y-5 text-sm" data-matrix-legend>77 <dl className="kv [&>div]:grid-cols-[7rem_minmax(0,1fr)] [&>div]:py-1">78 <div>79 <dt>Rows</dt>80 <dd className="tnum text-ink">81 {fmtInt(rows.length)} <span className="text-ink-3">of {fmtInt(matrix?.total_rows ?? 0)} eligible</span>82 </dd>83 </div>84 <div>85 <dt>Columns</dt>86 <dd className="tnum text-ink">{fmtInt(cols.length)}</dd>87 </div>88 <div>89 <dt>Cells</dt>90 <dd className="tnum text-ink">91 {fmtInt(cellsN)} {partially ? <span className="text-ink-3">· {fmtInt(partially)} partially comparable</span> : null}92 </dd>93 </div>94 </dl>95 <div>96 <p className="eyebrow mb-1">Colour</p>97 <p className="text-xs text-ink-2">Within-column rank of the model's best comparable current score: darkest = best rank in that column. Colours never compare across columns; the number in the cell is the score itself.</p>98 <div className="mt-2 flex h-2 overflow-hidden rounded-sm" aria-hidden>99 {[0.1, 0.3, 0.5, 0.7, 0.9].map((k) => (100 <span key={k} className="flex-1" style={{ background: `color-mix(in srgb, var(--type-benchmark) ${Math.round(8 + k * 72)}%, var(--surface))` }} />101 ))}102 </div>103 <p className="mt-0.5 flex justify-between text-[10px] text-ink-3">104 <span>last</span>105 <span>best</span>106 </p>107 </div>108 {trustLevels.length > 0 && (109 <div>110 <p className="eyebrow mb-1">Trust levels present</p>111 <p className="flex flex-wrap gap-1">112 {trustLevels.map((t) => (113 <TrustBadge key={t} level={t} />114 ))}115 </p>116 </div>117 )}118 <div>119 <p className="eyebrow mb-1">Comparability</p>120 <ComparabilityLegend />121 </div>122 {matrix?.methodology && <Note>{matrix.methodology}</Note>}123 <Note>124 `mean_rank` orders the rows; it is a sort key, not a score. <Link href="/methodology#benchmarks" className="link">Methodology →</Link>125 </Note>126 </div>127 );128129 return (130 <>131 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />132 <Container wide>133 <header className="flex flex-col gap-3 pb-4 pt-6 md:flex-row md:items-end md:justify-between md:pt-8">134 <div className="min-w-0">135 <p className="eyebrow">136 <Link href={routes.benchmarks()} className="hover:text-ink">137 Benchmarks138 </Link>{' '}139 / Matrix140 </p>141 <h1 className="display mt-1 text-[26px] md:text-[34px]">Benchmark matrix</h1>142 <p className="mt-2 max-w-2xl text-sm text-ink-2">Canonical models × benchmarks. Each cell is the best current score in the benchmark's comparability group; hover for score, rank, trust and comparability, click to open the leaderboard.</p>143 </div>144 {matrix && (145 <p className="tnum text-sm text-ink-2">146 <span className="font-semibold text-ink">{fmtInt(rows.length)}</span> models × <span className="font-semibold text-ink">{fmtInt(cols.length)}</span> benchmarks147 </p>148 )}149 </header>150 </Container>151 <TerminalLayout filters={filters} filterCount={filterCount} inspector={inspector} inspectorTitle="Legend" storageKey="aia-matrix-inspector">152 <div className="pb-16">153 {!matrix ? (154 <Unavailable what="Benchmark matrix" />155 ) : rows.length === 0 || cols.length === 0 ? (156 <EmptyState title="No model has enough comparable cells for this selection">Lower “min cells”, widen the release range or pick other benchmarks.</EmptyState>157 ) : (158 <>159 <Heatmap160 rows={rows.map((r) => ({ key: r.model.id, label: r.model.name, href: `/models/${encodeURIComponent(r.model.slug)}`, sub: [r.model.organization, r.model.release_date ? r.model.release_date.slice(0, 4) : null].filter(Boolean).join(' · ') }))}161 cols={cols.map((c) => ({ key: c.id, label: c.name.length > 22 ? `${c.name.slice(0, 21)}…` : c.name, href: routes.benchmark(c.slug), sub: `${c.metric} · ${fmtInt(c.n_models)} models` }))}162 cell={cellFn}163 min={0}164 max={1}165 color="var(--type-benchmark)"166 caption="Benchmark matrix: models × benchmarks, best comparable current score, coloured by within-column rank"167 rowHeader="Model"168 className="max-h-[75dvh] overflow-auto scrollbar-thin"169 />170 <Note className={cn('mt-3')}>171 Rows are the models with at least {fmtInt(matrix.min_cells)} cells{comparableOnly ? ' (comparable rows only)' : ''}, ordered by mean rank; {yearFrom || yearTo ? `release-year filter applied in the page (${yearFrom ?? '…'} – ${yearTo ?? '…'}); ` : ''}columns are {benchmarks.length ? 'the picked benchmarks' : 'the 12 benchmarks with the most current results'}. Empty = no current result in the group, never interpolated.172 </Note>173 </>174 )}175 </div>176 </TerminalLayout>177 </>178 );179}180