| import { motion } from "framer-motion"; |
| import { |
| ChevronDown, |
| ChevronUp, |
| AlertTriangle, |
| CheckCircle2, |
| Clock, |
| Cpu, |
| Beaker, |
| Sparkle, |
| } from "lucide-react"; |
| import { useState } from "react"; |
| import type { ModelResult } from "@/types/inference"; |
| import { |
| classifyStatus, |
| cn, |
| confidenceColor, |
| formatMs, |
| formatPercent, |
| formatParams, |
| } from "@/lib/utils"; |
| import ConfidenceGauge from "./ConfidenceGauge"; |
|
|
| interface Props { |
| result: ModelResult; |
| } |
|
|
| const PAPER_IDS = new Set([ |
| "nes2net", |
| "sonar", |
| "bicrossmamba_st", |
| "voiceradar", |
| "holi_antispoof", |
| ]); |
|
|
| export default function ModelCard({ result }: Props) { |
| const [open, setOpen] = useState(false); |
| const isFake = result.prediction === "fake"; |
| const status = classifyStatus(result.status); |
| const confColor = confidenceColor(result.confidence, result.prediction); |
| const isPaper = PAPER_IDS.has(result.model_id); |
|
|
| const ribbon = isPaper ? "bg-warn" : "bg-cyber"; |
| const familyLabel = isPaper ? "paper architecture" : "production"; |
| const FamilyIcon = isPaper ? Beaker : Sparkle; |
|
|
| return ( |
| <motion.div |
| layout |
| initial={{ opacity: 0, y: 8 }} |
| animate={{ opacity: 1, y: 0 }} |
| transition={{ duration: 0.3 }} |
| className={cn( |
| "panel relative flex h-full flex-col overflow-hidden p-4 pl-5", |
| isFake ? "shadow-danger" : "shadow-cyber" |
| )} |
| > |
| {/* Family ribbon along the left edge */} |
| <div className={cn("absolute left-0 top-0 h-full w-1.5", ribbon, "opacity-70")} /> |
| |
| {/* Soft accent glow */} |
| <div |
| className={cn( |
| "pointer-events-none absolute -right-16 -top-16 h-36 w-36 rounded-full blur-3xl", |
| isFake ? "bg-danger/20" : "bg-cyber/15" |
| )} |
| /> |
| |
| {/* ── Header ────────────────────────────────────────────────── */} |
| <div className="flex items-start justify-between gap-2"> |
| <div className="min-w-0 flex-1"> |
| <span className="font-display text-base font-semibold text-ink truncate block"> |
| {result.display_name} |
| </span> |
| <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-ink-dim"> |
| <span |
| className={cn( |
| "inline-flex items-center gap-1 font-mono uppercase", |
| isPaper ? "text-warn" : "text-cyber" |
| )} |
| > |
| <FamilyIcon className="h-3 w-3" /> {familyLabel} |
| </span> |
| <span className="text-ink-mute">·</span> |
| <span className="truncate">{result.paradigm}</span> |
| </div> |
| </div> |
| <div |
| className={cn( |
| "shrink-0 rounded-md border px-2 py-1 font-mono text-xs font-bold", |
| isFake |
| ? "border-danger/40 bg-danger/10 text-danger" |
| : "border-cyber/40 bg-cyber/10 text-cyber" |
| )} |
| > |
| {result.prediction.toUpperCase()} |
| </div> |
| </div> |
| |
| {/* ── Status pill row ───────────────────────────────────────── */} |
| <div className="mt-2 flex flex-wrap items-center gap-1.5"> |
| <span |
| className={cn( |
| "inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider", |
| status === "live" && "bg-cyber/15 text-cyber", |
| status === "fallback" && "bg-warn/15 text-warn", |
| status === "error" && "bg-danger/15 text-danger", |
| status === "loading" && "bg-surface-alt text-ink-dim" |
| )} |
| title={result.status} |
| > |
| {status === "live" && <CheckCircle2 className="h-2.5 w-2.5" />} |
| {status === "fallback" && <AlertTriangle className="h-2.5 w-2.5" />} |
| {status} |
| </span> |
| <span className="inline-flex items-center gap-1 rounded-full border border-line bg-surface-alt/60 px-2 py-0.5 font-mono text-[10px] text-ink-dim"> |
| <Clock className="h-2.5 w-2.5" /> {formatMs(result.inference_time_ms)} |
| </span> |
| <span className="inline-flex items-center gap-1 rounded-full border border-line bg-surface-alt/60 px-2 py-0.5 font-mono text-[10px] text-ink-dim"> |
| <Cpu className="h-2.5 w-2.5" /> {formatParams(result.params_k)} |
| </span> |
| </div> |
| |
| {/* ── Gauge + numbers ──────────────────────────────────────── */} |
| <div className="mt-3 grid grid-cols-[auto,1fr] gap-4"> |
| <ConfidenceGauge value={result.confidence} prediction={result.prediction} /> |
| <div className="flex flex-col justify-center gap-1 font-mono text-[11px]"> |
| <div className="flex items-baseline gap-2"> |
| <span className="text-ink-mute">confidence</span> |
| <span className={cn("text-base font-bold", confColor)}> |
| {formatPercent(result.confidence)} |
| </span> |
| </div> |
| {result.eer_reference?.df21 != null && ( |
| <div className="text-ink-dim"> |
| DF21 EER:{" "} |
| <span className="text-ink">{result.eer_reference.df21}%</span> |
| </div> |
| )} |
| {result.eer_reference?.in_the_wild != null && ( |
| <div className="text-ink-dim"> |
| ITW EER:{" "} |
| <span className="text-ink"> |
| {result.eer_reference.in_the_wild}% |
| </span> |
| </div> |
| )} |
| {result.eer_reference?.la21 != null && ( |
| <div className="text-ink-dim"> |
| LA21 EER:{" "} |
| <span className="text-ink">{result.eer_reference.la21}%</span> |
| </div> |
| )} |
| </div> |
| </div> |
| |
| {/* Spacer pushes the details block to the bottom for visual alignment */} |
| <div className="flex-1" /> |
| |
| {/* ── Status detail strip ──────────────────────────────────── */} |
| {status === "fallback" && ( |
| <div className="mt-3 flex items-start gap-2 rounded-md border border-warn/30 bg-warn/5 p-2 text-[11px] text-warn"> |
| <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" /> |
| <span> |
| No checkpoint — routed to{" "} |
| <span className="font-bold">{result.fallback_to ?? "fallback"}</span>. |
| Drop weights in{" "} |
| <code className="font-mono">backend/checkpoints/</code> to go live. |
| </span> |
| </div> |
| )} |
| |
| {/* ── Why? expander ───────────────────────────────────────── */} |
| <button |
| onClick={() => setOpen((v) => !v)} |
| className="mt-3 inline-flex items-center gap-1 self-start font-mono text-[11px] text-ink-dim transition hover:text-cyber" |
| > |
| {open ? "hide details" : "details"} |
| {open ? ( |
| <ChevronUp className="h-3 w-3" /> |
| ) : ( |
| <ChevronDown className="h-3 w-3" /> |
| )} |
| </button> |
| |
| {open && ( |
| <motion.div |
| initial={{ opacity: 0, height: 0 }} |
| animate={{ opacity: 1, height: "auto" }} |
| className="mt-2 overflow-hidden border-t border-line pt-2 text-[11px] leading-relaxed text-ink-dim" |
| > |
| {result.notes && ( |
| <p className="mb-2 whitespace-normal">{result.notes}</p> |
| )} |
| <FeatureGrid features={result.features} /> |
| </motion.div> |
| )} |
| </motion.div> |
| ); |
| } |
|
|
| function FeatureGrid({ features }: { features: Record<string, unknown> }) { |
| const flat = Object.entries(features).filter( |
| ([, v]) => |
| typeof v === "number" || typeof v === "string" || typeof v === "boolean" |
| ); |
| if (!flat.length) return null; |
| return ( |
| <div className="grid grid-cols-2 gap-x-3 gap-y-1 font-mono text-[10px]"> |
| {flat.slice(0, 12).map(([k, v]) => ( |
| <div key={k} className="flex justify-between gap-2 truncate"> |
| <span className="text-ink-mute truncate">{k}</span> |
| <span className="text-ink truncate">{String(v)}</span> |
| </div> |
| ))} |
| </div> |
| ); |
| } |
|
|
