Spaces:
Runtime error
Runtime error
File size: 3,573 Bytes
d4ec2fa | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { useEffect, useState } from 'react'
import { api, API_BASE } from '../lib/api'
function MetricCard({ label, value, target, meetsTarget }) {
return (
<div className="bg-surface-white border border-border-light rounded-card p-16">
<div className="text-xs font-medium text-text-slate mb-8">{label}</div>
<div className={`text-[28px] font-bold ${meetsTarget ? 'text-success' : 'text-severity-high'}`}>
{value}
</div>
<div className="text-xs text-text-slate mt-4">Target: {target}</div>
</div>
)
}
function ClassifierSection({ title, metrics, confusionMatrixUrl, targetLabel, targetValue, actualKey, formatFn }) {
if (!metrics) {
return (
<div className="bg-surface-white border border-border-light rounded-card p-16 text-text-slate text-sm">
{title}: no evaluation results found yet.
</div>
)
}
const meetsTarget = metrics.meets_prd_target
const actual = formatFn(metrics[actualKey])
return (
<div className="flex flex-col gap-16">
<h2 className="text-[20px] font-semibold text-text-charcoal">{title}</h2>
<div className="grid grid-cols-3 gap-16">
<MetricCard label={targetLabel} value={actual} target={targetValue} meetsTarget={meetsTarget} />
<MetricCard label="Macro Precision" value={metrics.test_macro_precision.toFixed(3)} target="—" meetsTarget />
<MetricCard label="Macro Recall" value={metrics.test_macro_recall.toFixed(3)} target="—" meetsTarget />
</div>
{!meetsTarget && (
<div className="text-sm text-severity-high bg-surface-white border border-severity-high/30 rounded-card p-16">
This model does not currently meet the PRD's target. See the project write-up for the documented
root cause and iteration history — this is a disclosed, known limitation, not a hidden gap.
</div>
)}
<div className="bg-surface-white border border-border-light rounded-card p-16">
<div className="text-xs font-medium text-text-slate mb-8">
Confusion Matrix (Test Set, {metrics.n_test_examples} examples)
</div>
<img src={confusionMatrixUrl} alt={`${title} confusion matrix`} className="max-w-full rounded" />
</div>
</div>
)
}
export default function ModelPerformance() {
const [data, setData] = useState(null)
useEffect(() => {
api.modelPerformance().then(setData)
}, [])
if (!data) return <div className="text-text-slate text-sm">Loading model performance…</div>
return (
<div className="flex flex-col gap-32">
<div>
<h1 className="text-[28px] font-bold text-text-charcoal mb-8">Model Performance</h1>
<p className="text-text-slate text-sm">
Real results on the held-out test set — reported honestly, including where targets weren't met.
</p>
</div>
<ClassifierSection
title="ATA Chapter Classifier"
metrics={data.ata_classifier}
confusionMatrixUrl={`${API_BASE}/reports/ata_classifier/confusion_matrix.png`}
targetLabel="Test Accuracy"
targetValue="≥ 80%"
actualKey="test_accuracy"
formatFn={(v) => `${(v * 100).toFixed(1)}%`}
/>
<ClassifierSection
title="Severity Classifier"
metrics={data.severity_classifier}
confusionMatrixUrl={`${API_BASE}/reports/severity_classifier/confusion_matrix.png`}
targetLabel="Macro F1"
targetValue="≥ 0.70"
actualKey="test_macro_f1"
formatFn={(v) => v.toFixed(3)}
/>
</div>
)
}
|