Eval Results
A model-versus-benchmark score matrix. The best result is marked per benchmark rather than overall — a model can lead on reasoning and trail on latency, and one winner badge hides that.
src/components/ui/eval-results.tsxAbout
From the component's own source, where it was written.
A model-versus-benchmark score matrix.
Cells are tinted by score, and the best result in each row is marked. The mark is per benchmark rather than overall, because "which model wins" is rarely one answer — a model can lead on reasoning and trail on latency, and a single winner badge hides exactly that.
A missing score renders as an explicit dash. Blank cells read as zero, which is a very different claim from "not run".
Install
npx astralyx-ui add eval-results
Usage
import { EvalResults } from '@/components/ui/eval-results'
<EvalResults models={models} benchmarks={benchmarks} />Composer
Change the props and the source below follows.
| Benchmark | astralyx-large | astralyx-small | baseline |
|---|---|---|---|
| Reasoning | 91best for this benchmark3 | 746 | 68 |
| Code generation | 88best for this benchmark1 | 794 | 71 |
| Retrieval accuracy | 83 | 85best for this benchmark2 | |
| Latencylower is better | 425 | 12best for this benchmark3 | 28 |
<EvalResults models={models} benchmarks={benchmarks} />Examples
Matrix
<EvalResults models={models} benchmarks={benchmarks} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
EvalResults
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| models | string[] | required | Column order. |
| benchmarks | EvalBenchmark[] | required | { id, label, lowerIsBetter?, scores } where scores maps a model to { value?, delta? }. |
| format | (value: number) => string | DEFAULT_FORMAT | — |
| benchmarkHeader | ReactNode | 'Benchmark' | — |
| lowerIsBetterLabel | ReactNode | 'lower is better' | Note on a benchmark where a lower score wins. |
| notRunLabel | string | 'Not run' | Accessible name for a benchmark a model was not run on. |
| bestLabel | ReactNode | 'best for this benchmark' | Screen-reader note on the winning cell. |
Types
EvalScore
A model-versus-benchmark score matrix.
| Field | Type | Description |
|---|---|---|
| value? | number | 0–1. Undefined means the benchmark was not run. |
| delta? | number | Change against the previous run, in points. |
EvalBenchmark
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| lowerIsBetter? | boolean | Flips which end wins and which direction of delta is good — latency and cost need it. |
| scores | Record<string, EvalScore> | A blank cell reads as zero, which is a different claim from "not run". |