Lumbridge Bench
This commit is contained in:
Karti Tripathi
@@ -0,0 +1,219 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ScopeTrace } from "@/components/ScopeTrace";
|
||||
import { fmtParams, getRun, getRuns, limitOf, type QualityResult } from "@/lib/results";
|
||||
|
||||
export const dynamic = "force-static";
|
||||
|
||||
export function generateStaticParams() {
|
||||
return getRuns().map((r) => ({ id: r.run_id.slice(0, 8) }));
|
||||
}
|
||||
|
||||
const TIER_TONE = {
|
||||
signal: { text: "text-signal", border: "border-signal-dim", chip: "bg-signal-dim/30" },
|
||||
reference: { text: "text-reference", border: "border-reference-dim", chip: "bg-reference-dim/30" },
|
||||
example: { text: "text-dim", border: "border-rule", chip: "bg-rule" },
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Per-sample outcome grid.
|
||||
*
|
||||
* This is the reason the result schema stores samples and not just aggregates:
|
||||
* an aggregate says a checkpoint got worse, this says which samples broke.
|
||||
*/
|
||||
function SampleGrid({ q }: { q: QualityResult }) {
|
||||
if (!q.samples.length) return null;
|
||||
return (
|
||||
<div className="mt-5">
|
||||
<div className="label mb-3">
|
||||
per-sample outcomes · {q.samples.filter((s) => s.passed).length}/{q.samples.length} passed
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-[3px]">
|
||||
{q.samples.map((s) => (
|
||||
<span
|
||||
key={s.sample_id}
|
||||
title={`${s.sample_id} — ${s.passed ? "pass" : "fail"}`}
|
||||
className={`h-3 w-3 ${s.passed ? "bg-pass/70" : "bg-fail/80"}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function RunPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const run = getRun(id);
|
||||
if (!run) notFound();
|
||||
|
||||
const limit = limitOf(run);
|
||||
const perf = run.perf?.points ?? [];
|
||||
const flags = Object.entries(run.target.serving.flags ?? {});
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-6xl px-6 py-14">
|
||||
<Link href="/" className="label transition-colors hover:text-signal">
|
||||
← board
|
||||
</Link>
|
||||
|
||||
<header className="rise mt-6 mb-10">
|
||||
<h1 className="font-display text-4xl leading-tight sm:text-5xl">
|
||||
{run.target.display_name}
|
||||
</h1>
|
||||
<p className="mt-3 font-mono text-xs text-dim">{run.target_id}</p>
|
||||
<div className="mt-6 flex flex-wrap gap-x-6 gap-y-2 text-[11px] text-dimmer">
|
||||
<span>{run.host.hardware}</span>
|
||||
<span>{fmtParams(run.target)}</span>
|
||||
<span>{run.target.quant?.toUpperCase()}</span>
|
||||
<span>ctx {run.target.serving.max_model_len?.toLocaleString()}</span>
|
||||
<span>measured {run.timestamp.slice(0, 16).replace("T", " ")}Z</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{limit && (
|
||||
<div className="mb-10 border-l-2 border-signal bg-signal-dim/10 px-4 py-3 text-xs text-dim">
|
||||
<span className="text-signal">Capped run.</span> Reference tasks were
|
||||
limited to {limit} samples. Not comparable to a full-dataset score.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-10 lg:grid-cols-[1.15fr_1fr]">
|
||||
<section>
|
||||
<h2 className="font-display mb-5 text-2xl">Quality</h2>
|
||||
<div className="space-y-4">
|
||||
{run.quality.length === 0 && (
|
||||
<p className="text-xs text-dimmer">
|
||||
Perf-only run — no quality tasks were executed.
|
||||
</p>
|
||||
)}
|
||||
{run.quality.map((q) => {
|
||||
const tone = TIER_TONE[q.tier] ?? TIER_TONE.example;
|
||||
const acc = q.metrics?.accuracy;
|
||||
return (
|
||||
<div key={q.task} className={`panel border-l-2 ${tone.border} p-5`}>
|
||||
<div className="flex items-baseline justify-between gap-4">
|
||||
<div>
|
||||
<span className="text-sm text-ink">{q.task}</span>
|
||||
<span className={`ml-3 px-2 py-0.5 text-[10px] uppercase tracking-widest ${tone.chip} ${tone.text}`}>
|
||||
{q.tier}
|
||||
</span>
|
||||
</div>
|
||||
<span className={`readout font-display text-3xl ${tone.text}`}>
|
||||
{q.error ? "ERR" : acc != null ? acc.toFixed(3) : "—"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{q.error ? (
|
||||
<p className="mt-3 font-mono text-[11px] leading-relaxed text-fail">
|
||||
{q.error.slice(0, 240)}
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-dimmer">
|
||||
<span>{q.n_samples} samples</span>
|
||||
{q.duration_s && <span>{Math.round(q.duration_s)}s</span>}
|
||||
{Object.entries(q.metrics)
|
||||
.filter(([k]) => !k.startsWith("_") && k !== "accuracy")
|
||||
.slice(0, 4)
|
||||
.map(([k, val]) => (
|
||||
<span key={k}>
|
||||
{k} <span className="text-dim">{val.toFixed(3)}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<SampleGrid q={q} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-display mb-5 text-2xl">Serving performance</h2>
|
||||
|
||||
{perf.length > 1 && (
|
||||
<div className="panel mb-5 p-5">
|
||||
<ScopeTrace points={perf} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse text-[11px]">
|
||||
<thead>
|
||||
<tr className="border-b border-rule-bright text-left">
|
||||
<th className="label py-2 pr-3 font-normal">conc</th>
|
||||
<th className="label py-2 pr-3 text-right font-normal">tok/s all</th>
|
||||
<th className="label py-2 pr-3 text-right font-normal">/stream</th>
|
||||
<th className="label py-2 pr-3 text-right font-normal">ttft p50</th>
|
||||
<th className="label py-2 pr-3 text-right font-normal">ttft p95</th>
|
||||
<th className="label py-2 text-right font-normal">tpot</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{perf.map((p) => (
|
||||
<tr key={p.concurrency} className="border-b border-rule">
|
||||
<td className="readout py-2.5 pr-3">{p.concurrency}</td>
|
||||
<td className="readout py-2.5 pr-3 text-right text-signal">
|
||||
{p.output_tps_total.toFixed(1)}
|
||||
</td>
|
||||
<td className="readout py-2.5 pr-3 text-right">
|
||||
{p.output_tps_per_stream.toFixed(1)}
|
||||
</td>
|
||||
<td className="readout py-2.5 pr-3 text-right text-dim">
|
||||
{p.ttft_p50_ms ? `${Math.round(p.ttft_p50_ms)}ms` : "—"}
|
||||
</td>
|
||||
<td className="readout py-2.5 pr-3 text-right text-dim">
|
||||
{p.ttft_p95_ms ? `${Math.round(p.ttft_p95_ms)}ms` : "—"}
|
||||
</td>
|
||||
<td className="readout py-2.5 text-right text-dim">
|
||||
{p.tpot_p50_ms ? `${p.tpot_p50_ms.toFixed(1)}ms` : "—"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{flags.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<div className="label mb-3">serving configuration</div>
|
||||
<p className="mb-4 text-[11px] leading-relaxed text-dimmer">
|
||||
Results are only comparable between targets with identical flags.
|
||||
These are recorded from the live server, not from memory.
|
||||
</p>
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 font-mono text-[11px]">
|
||||
{flags.map(([k, v]) => (
|
||||
<div key={k} className="contents">
|
||||
<dt className="text-dimmer">{k}</dt>
|
||||
<dd className="text-dim">{String(v)}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{run.target.notes && (
|
||||
<section className="mt-14 border-t border-rule pt-8">
|
||||
<div className="label mb-3">notes</div>
|
||||
<p className="max-w-3xl text-xs leading-relaxed text-dim">{run.target.notes}</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mt-10 flex flex-wrap items-center gap-4 border-t border-rule pt-8">
|
||||
<a
|
||||
href={`/api/card/${run.run_id.slice(0, 8)}`}
|
||||
className="border border-rule-bright px-4 py-2 text-xs transition-colors hover:border-signal hover:text-signal"
|
||||
>
|
||||
download score card ↓
|
||||
</a>
|
||||
<span className="text-[11px] text-dimmer">
|
||||
PNG, sized for sharing. Same image the link preview uses.
|
||||
</span>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user