Spaces:
Running
Running
| import { useState } from "react"; | |
| import type { ReactNode } from "react"; | |
| import { | |
| ArrowClockwise, | |
| CaretRight, | |
| CheckCircle, | |
| Clock, | |
| CloudArrowDown, | |
| Gauge, | |
| HardDrives, | |
| SpinnerGap, | |
| Trash, | |
| WarningCircle, | |
| } from "@phosphor-icons/react"; | |
| import { useBenchmarkState, getAvgTokPerSec, type ModelMetrics } from "../hooks/useBenchmark"; | |
| import { getModelDescriptors } from "../runtime/registry"; | |
| import { formatBytes, quantStatus, type QuantStatus } from "../lib/modelCacheRecord"; | |
| import { en } from "../i18n/en"; | |
| import type { ModelCategory, ModelDescriptor, ModelId } from "../types"; | |
| import type { ModelCacheState } from "../hooks/useModelCache"; | |
| /** The sections the status bar groups its model cards under. */ | |
| const CATEGORIES: { id: ModelCategory; label: string }[] = [ | |
| { id: "language", label: en.categoryLanguage }, | |
| { id: "embedder", label: en.categoryEmbedder }, | |
| { id: "tts", label: en.categoryTts }, | |
| ]; | |
| export function BenchmarkPanel({ | |
| model, | |
| cache, | |
| onSelect, | |
| settingsPanel, | |
| onDownload, | |
| loadingModel = null, | |
| disabled = false, | |
| }: { | |
| model: ModelId; | |
| cache: ModelCacheState; | |
| onSelect(id: ModelId): void; | |
| /** Rendered at the very top of the bar: the Settings panel and its button. */ | |
| settingsPanel?: ReactNode; | |
| /** Download (pre-fetch the weights of) a quant into the browser cache. */ | |
| onDownload?(id: ModelId): void; | |
| /** The quant whose load is currently in flight, if any. */ | |
| loadingModel?: ModelId | null; | |
| disabled?: boolean; | |
| }) { | |
| const { metrics } = useBenchmarkState(); | |
| const models = getModelDescriptors(); | |
| // First step: only the language models exist yet, and only that section | |
| // starts expanded - the other two are reserved for models to come. | |
| const [openCats, setOpenCats] = useState<Record<ModelCategory, boolean>>({ | |
| language: true, | |
| embedder: false, | |
| tts: false, | |
| }); | |
| return ( | |
| <aside className="hidden w-85 shrink-0 flex-col gap-4 overflow-y-auto border-l border-zinc-200 bg-zinc-50 p-4 lg:flex dark:border-zinc-800 dark:bg-zinc-950"> | |
| {settingsPanel} | |
| <div className="flex items-center justify-between gap-2"> | |
| <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400"> | |
| {en.benchmarkTitle} | |
| </h2> | |
| <button | |
| type="button" | |
| onClick={() => void cache.refresh()} | |
| title={en.recheck} | |
| aria-label={en.recheck} | |
| className="flex h-6 w-6 items-center justify-center rounded text-zinc-500 transition-colors hover:bg-zinc-200 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200" | |
| > | |
| <ArrowClockwise size={13} /> | |
| </button> | |
| </div> | |
| <section className="rounded-xl border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-900"> | |
| <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400"> | |
| {en.storageTitle} | |
| </h3> | |
| <div className="mt-2 space-y-1.5"> | |
| <Metric | |
| layout="row" | |
| icon={<CloudArrowDown size={14} />} | |
| label={en.storageUsed} | |
| value={formatBytes(cache.storage.usage)} | |
| /> | |
| <Metric | |
| layout="row" | |
| icon={<HardDrives size={14} />} | |
| label={en.storageQuota} | |
| value={formatBytes(cache.storage.quota)} | |
| /> | |
| </div> | |
| {typeof cache.storage.usage === "number" && cache.storage.usage > 0 && ( | |
| <button | |
| type="button" | |
| onClick={() => void cache.clearAll()} | |
| disabled={cache.clearingAll || disabled} | |
| className="mt-3 inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-zinc-300 px-2 py-1 text-xs font-medium text-zinc-600 transition-colors hover:border-rose-400 hover:text-rose-600 disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-rose-500/60 dark:hover:text-rose-300" | |
| > | |
| {cache.clearingAll ? ( | |
| <SpinnerGap size={13} className="animate-spin" /> | |
| ) : ( | |
| <Trash size={13} /> | |
| )} | |
| {cache.clearingAll ? en.clearingAllModelCache : en.clearAllModelCache} | |
| </button> | |
| )} | |
| </section> | |
| {CATEGORIES.map((cat) => { | |
| const items = models.filter((m) => m.category === cat.id); | |
| const open = openCats[cat.id]; | |
| return ( | |
| <section key={cat.id} aria-label={cat.label}> | |
| <button | |
| type="button" | |
| onClick={() => setOpenCats((o) => ({ ...o, [cat.id]: !o[cat.id] }))} | |
| aria-expanded={open} | |
| className="flex w-full items-center gap-1.5 rounded-md px-1 py-1 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 transition-colors hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200" | |
| > | |
| <CaretRight | |
| size={12} | |
| weight="bold" | |
| className={`shrink-0 transition-transform duration-150 ${open ? "rotate-90" : ""}`} | |
| /> | |
| {cat.label} | |
| <span className="ml-auto font-mono text-[10px] font-medium text-zinc-400 dark:text-zinc-500"> | |
| {items.length} | |
| </span> | |
| </button> | |
| {open && ( | |
| <div className="mt-1.5 space-y-3"> | |
| {items.length === 0 && ( | |
| <p className="px-1 text-xs text-zinc-400 dark:text-zinc-500">{en.noModelsYet}</p> | |
| )} | |
| {items.map((m) => ( | |
| <ModelCard | |
| key={m.id} | |
| m={m} | |
| md={metrics[m.id]} | |
| avgTok={getAvgTokPerSec(m.id)} | |
| cache={cache} | |
| model={model} | |
| onSelect={onSelect} | |
| onDownload={onDownload} | |
| loadingModel={loadingModel} | |
| disabled={disabled} | |
| /> | |
| ))} | |
| </div> | |
| )} | |
| </section> | |
| ); | |
| })} | |
| </aside> | |
| ); | |
| } | |
| function ModelCard({ | |
| m, | |
| md, | |
| avgTok, | |
| cache, | |
| model, | |
| onSelect, | |
| onDownload, | |
| loadingModel, | |
| disabled, | |
| }: { | |
| m: ModelDescriptor; | |
| md: ModelMetrics | undefined; | |
| avgTok: number; | |
| cache: ModelCacheState; | |
| model: ModelId; | |
| onSelect(id: ModelId): void; | |
| onDownload?(id: ModelId): void; | |
| loadingModel: ModelId | null; | |
| disabled: boolean; | |
| }) { | |
| const status = quantStatus(cache.cached[m.id], cache.loadedHere[m.id]); | |
| const clearing = cache.clearing === m.id; | |
| const isSelected = model === m.id; | |
| return ( | |
| <section | |
| className={[ | |
| // The frame carries every visual state; the inner button is the | |
| // interaction and stays visually inert, so hover, focus and the | |
| // press never light up a smaller rectangle inside the card. | |
| "relative rounded-xl border p-3 transition-[border-color,box-shadow,transform] duration-150 ease-out", | |
| // Tactile press: transform-only, on the whole card. | |
| "has-[>button:first-child:active]:scale-[0.99]", | |
| // Keyboard-only focus ring, offset so it never fuses with the | |
| // border (and never with the selected border either). | |
| "has-[>button:first-child:focus-visible]:ring-2 has-[>button:first-child:focus-visible]:ring-emerald-600", | |
| "ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-950", | |
| isSelected | |
| ? "border-emerald-600/50 bg-emerald-600/5 dark:border-emerald-500/50 dark:bg-emerald-500/10" | |
| : disabled | |
| ? "border-zinc-200 bg-white opacity-60 dark:border-zinc-800 dark:bg-zinc-900" | |
| : "border-zinc-200 bg-white hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600", | |
| ].join(" ")} | |
| > | |
| {/* | |
| The card body is the select control: one real button, so it is | |
| clickable, keyboard-reachable, and screen-readable as a single | |
| action. The clear-cache row below is its sibling - a button can | |
| never contain another button. | |
| */} | |
| <button | |
| type="button" | |
| onClick={() => onSelect(m.id)} | |
| disabled={disabled} | |
| aria-label={`${en.selectModel} ${m.labelI18n}`} | |
| aria-current={isSelected ? "true" : undefined} | |
| className="w-full cursor-pointer text-left focus:outline-none disabled:cursor-not-allowed" | |
| > | |
| <div className="flex items-start justify-between gap-2"> | |
| <div className="min-w-0"> | |
| <span className="block truncate text-xs font-semibold text-zinc-800 dark:text-zinc-200"> | |
| {m.labelI18n} | |
| </span> | |
| {m.recommended && ( | |
| <p className="mt-0.5 text-[11px] font-medium text-emerald-700 dark:text-emerald-400"> | |
| {en.recommended} | |
| </p> | |
| )} | |
| {m.hint && ( | |
| <p className="mt-0.5 text-[11px] leading-snug text-zinc-500 dark:text-zinc-400"> | |
| {m.hint} | |
| </p> | |
| )} | |
| </div> | |
| <StatusChip status={status} /> | |
| </div> | |
| {status === "evicted" && ( | |
| <p className="mt-1.5 text-[11px] leading-snug text-amber-600 dark:text-amber-400"> | |
| {en.evictedHint} | |
| </p> | |
| )} | |
| <div className="mt-3"> | |
| {/* | |
| The size is a static property of the model descriptor, so it | |
| shows in every cache state - "Not downloaded" included. | |
| Full-width row layout: one figure across the card, while the | |
| dynamic metrics keep their two-column grid below. | |
| */} | |
| <Metric | |
| icon={<HardDrives size={14} />} | |
| label={en.sizeLabel} | |
| value={`~${formatBytes(m.approxSizeMb * 1024 ** 2)}`} | |
| layout="row" | |
| /> | |
| </div> | |
| <div className="mt-2 grid grid-cols-2 gap-x-3 gap-y-2"> | |
| <Metric | |
| icon={<Clock size={14} />} | |
| label={en.loadTime} | |
| value={md && md.loadTimeMs > 0 ? `${(md.loadTimeMs / 1000).toFixed(1)}s` : "-"} | |
| /> | |
| <Metric | |
| icon={<Gauge size={14} />} | |
| label={en.avgSpeed} | |
| value={avgTok > 0 ? `${avgTok.toFixed(1)} tok/s` : "-"} | |
| accent | |
| /> | |
| </div> | |
| </button> | |
| {/* | |
| The "In use" tag rides the card's top-right corner, outside the | |
| content flow. It must not be the section's first child: the | |
| press/focus selectors target `>button:first-child`, which would | |
| silently stop matching otherwise. | |
| */} | |
| {isSelected && ( | |
| <span | |
| aria-hidden | |
| className="pointer-events-none absolute -top-2.5 right-3 rounded-full bg-emerald-700 px-2 py-0.75 text-[10px] font-semibold uppercase leading-none tracking-wide text-white dark:bg-emerald-500 dark:text-emerald-950" | |
| > | |
| {en.inUseLabel} | |
| </span> | |
| )} | |
| {status !== "not-downloaded" && status !== "unknown" && ( | |
| <button | |
| type="button" | |
| onClick={() => void cache.clear(m.id)} | |
| disabled={clearing || disabled} | |
| className="mt-3 inline-flex items-center gap-1.5 rounded-lg border border-zinc-300 px-2 py-1 text-xs font-medium text-zinc-600 transition-colors hover:border-rose-400 hover:text-rose-600 disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-rose-500/60 dark:hover:text-rose-300" | |
| > | |
| {clearing ? <SpinnerGap size={13} className="animate-spin" /> : <Trash size={13} />} | |
| {clearing ? en.clearingModelCache : en.clearModelCache} | |
| </button> | |
| )} | |
| {(status === "not-downloaded" || status === "evicted") && ( | |
| <button | |
| type="button" | |
| onClick={() => onDownload?.(m.id)} | |
| disabled={disabled} | |
| aria-label={`${en.downloadModel} ${m.labelI18n}`} | |
| className="mt-3 inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-emerald-600/50 bg-emerald-600/5 px-2 py-1 text-xs font-medium text-emerald-700 transition-colors hover:bg-emerald-600/10 disabled:opacity-50 dark:border-emerald-500/50 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500/20" | |
| > | |
| {loadingModel === m.id ? ( | |
| <SpinnerGap size={13} className="animate-spin" /> | |
| ) : ( | |
| <CloudArrowDown size={13} /> | |
| )} | |
| {loadingModel === m.id ? en.downloading : en.downloadModel} | |
| </button> | |
| )} | |
| </section> | |
| ); | |
| } | |
| const CHIP: Record<QuantStatus, { icon: ReactNode; label: string; tone: string }> = { | |
| ready: { | |
| icon: <CheckCircle size={14} weight="fill" />, | |
| label: en.downloadedLabel, | |
| tone: "text-emerald-700 dark:text-emerald-400", | |
| }, | |
| "not-downloaded": { | |
| icon: <CloudArrowDown size={14} />, | |
| label: en.notDownloadedLabel, | |
| tone: "text-zinc-500 dark:text-zinc-400", | |
| }, | |
| evicted: { | |
| icon: <WarningCircle size={14} weight="fill" />, | |
| label: en.evictedLabel, | |
| tone: "text-amber-600 dark:text-amber-400", | |
| }, | |
| unknown: { | |
| icon: <SpinnerGap size={13} className="animate-spin" />, | |
| label: "…", | |
| tone: "text-zinc-500 dark:text-zinc-400", | |
| }, | |
| }; | |
| function StatusChip({ status }: { status: QuantStatus }) { | |
| const chip = CHIP[status]; | |
| return ( | |
| <span | |
| className={`flex shrink-0 items-center gap-1 text-[11px] font-medium ${chip.tone}`} | |
| title={chip.label} | |
| > | |
| <span aria-hidden>{chip.icon}</span> | |
| {chip.label} | |
| </span> | |
| ); | |
| } | |
| /** | |
| * One figure with its label. The label is deliberately visible text rather than | |
| * a tooltip: these numbers are meaningless on their own, and an icon alone does | |
| * not say whether "6.89 GB" is what is being used or what is available. | |
| * | |
| * `row` puts the label and value on one line (for the storage card, where the | |
| * labels are long); the default stacks them, which is what fits two per row in | |
| * the per-quant grid. | |
| */ | |
| function Metric({ | |
| icon, | |
| label, | |
| value, | |
| accent, | |
| layout = "stack", | |
| }: { | |
| icon: ReactNode; | |
| label: string; | |
| value: string; | |
| accent?: boolean; | |
| layout?: "stack" | "row"; | |
| }) { | |
| const tone = accent | |
| ? "text-emerald-700 dark:text-emerald-400" | |
| : "text-zinc-900 dark:text-zinc-100"; | |
| const caption = | |
| "flex min-w-0 items-center gap-1 text-[10px] font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400"; | |
| if (layout === "row") { | |
| return ( | |
| <div className="flex items-baseline justify-between gap-3"> | |
| <span className={caption}> | |
| <span className="shrink-0" aria-hidden> | |
| {icon} | |
| </span> | |
| <span className="truncate">{label}</span> | |
| </span> | |
| <span className={`shrink-0 font-mono text-sm font-medium ${tone}`}>{value}</span> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="flex min-w-0 flex-col gap-0.5"> | |
| <span className={caption}> | |
| <span className="shrink-0" aria-hidden> | |
| {icon} | |
| </span> | |
| <span className="truncate">{label}</span> | |
| </span> | |
| <span className={`truncate font-mono text-sm font-medium ${tone}`}>{value}</span> | |
| </div> | |
| ); | |
| } | |