Build the quantization picker

An interactive replacement for the quantization method table in the
Transformers docs. The table lists bits; the deciding arithmetic is bytes,
and that is where people stall. This does the arithmetic.

- lib/data.ts holds the methods and the memory model: weights from params ×
bits, KV cache from the attention shape, activations as a flat estimate.
- lib/hardware.ts is scraped from huggingface.co/hardware, one entry per
memory configuration (316 of them) rather than per device, since an RTX
3060 is sold as both 8GB and 12GB.
- The model is typed as a Hub repo id and resolved through /api/model, so any
model works, not a curated five.
- MemoryBar draws the selected precision solid with fp16 behind it as a
ghost, so quantizing shows its own effect.
- TradeoffMap places the matching methods by when they quantize and whether
they serialize — the axes that actually separate them, since every method
at a given precision lands at the same footprint.

Deploys to a Space via the Docker SDK.

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "quantization-picker",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000
+    }
+  ]
+}

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+.git
+.claude
+npm-debug.log

Dockerfile

@@ -0,0 +1,29 @@
+# syntax=docker/dockerfile:1
+
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+# Spaces routes traffic to 7860 and runs the container as uid 1000.
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+EXPOSE 7860
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=node:node /app/.next/standalone ./
+COPY --from=builder --chown=node:node /app/.next/static ./.next/static
+
+USER node
+CMD ["node", "server.js"]

README.md

@@ -1,36 +1,97 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+---
+title: Quantization picker
+emoji: 🧮
+colorFrom: gray
+colorTo: gray
+sdk: docker
+app_port: 7860
+pinned: false
+license: apache-2.0
+short_description: Work out what fits on your card, and which method to use
+---
 
-## Getting Started
+# Quantization picker
 
-First, run the development server:
+An interactive version of the quantization method table from the Transformers
+docs. Instead of a 22×13 grid of status emoji, it answers the two questions
+people actually arrive with: **will this fit on my card**, and **which method
+should I use**.
+
+## Screens
+
+| Route | What it does |
+| --- | --- |
+| `/` | Pick a model, a card, and a goal. Shows total memory footprint against your VRAM, with every precision marked on one bar. |
+| `/compare` | The methods that match, plotted by when they quantize and whether the result can be saved, plus a capability table. |
+
+## The memory model
+
+Figures are computed in `lib/data.ts`, not hardcoded:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
+weights = params × bits / 8                      # decimal GB
+kv_cache = 2 × layers × kv_heads × head_dim × 2 × context_tokens
+total    = weights + kv_cache + activations
+```
+
+Two things this makes visible that a bits-only table cannot:
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- **KV cache is a fixed reservation.** It does not shrink when you quantize
+  weights, so it is drawn as its own block against the capacity line.
+- **Fitting is not the same as being a good idea.** 8-bit often clears the line
+  with only a few GB spare, which will not survive a longer context.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+`ACTIVATIONS_GB` is a flat 1.5 GB allowance and context is fixed at 8k. Both are
+estimates — see Caveats.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## Design
 
-## Learn More
+Vercel's system (`#fafafa` canvas, hairline rings, 6px radius, Geist Sans with
+Geist Mono reserved for labels and metadata) with four accent colours borrowed
+from Cursor used only to identify precisions:
 
-To learn more about Next.js, take a look at the following resources:
+| | |
+| --- | --- |
+| 2-bit | Crimson `#cf2d56` |
+| 3-bit | Ember `#f54e00` |
+| 4-bit | Forest `#34785c` |
+| 8-bit | Amber `#c08532` |
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Fit and overflow are encoded as a **tonal value shift** — solid obsidian for what
+fits, graphite for the KV reservation, hairline grey for what spills — rather
+than red/green, so the chart reads without relying on colour.
+
+## Caveats
+
+- Capability flags mirror the current docs table, including its gaps. `?` means
+  genuinely unverified upstream, not "not yet filled in".
+- Config snippets in the comparison table need checking against the installed
+  Transformers version before anyone copies them.
+- Setup minutes are order-of-magnitude estimates for a 70B calibration pass.
+- Quality at a given precision is deliberately **not** plotted — there is no
+  trustworthy per-method number to plot.
+
+## Running it
+
+```bash
+npm install
+npm run dev
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Hardware data
 
-## Deploy on Vercel
+`lib/hardware.ts` is scraped from the [Hugging Face hardware
+table](https://huggingface.co/hardware?view=table) — the Hardware and Memory
+columns only. 316 entries, one per memory configuration rather than per device,
+because an RTX 3060 is sold as both 8GB and 12GB and only one of those runs a
+7B at 8-bit. Order is the table's own, most owners first.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Two caveats:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- **CPUs are omitted.** All 59 CPU rows list `—` for memory: they draw on
+  system RAM, so there is no fixed pool to size a bar against.
+- **`backend` is derived, not scraped.** The table has no backend column, so
+  vendor maps to `cuda` / `rocm` / `metal` / `intel`. That is coarse — a GTX
+  1060 and a B300 are both `cuda` — so the picker will offer a method on
+  hardware too old to run it. Method filtering by compute capability, Metal
+  kernel availability, and ROCm version needs a source the table does not have.

app/api/model/route.ts

@@ -0,0 +1,99 @@
+import type { Model } from "@/lib/data";
+
+const HUB = "https://huggingface.co";
+
+interface HubModel {
+  id: string;
+  gated?: false | "auto" | "manual";
+  safetensors?: { total?: number };
+}
+
+interface HubConfig {
+  num_hidden_layers?: number;
+  num_key_value_heads?: number;
+  num_attention_heads?: number;
+  hidden_size?: number;
+  head_dim?: number;
+  /** GPT-2 era naming, still used by a long tail of repos */
+  n_layer?: number;
+  n_head?: number;
+  n_embd?: number;
+  /** some multimodal configs nest the language model */
+  text_config?: HubConfig;
+}
+
+function fail(message: string, status: number) {
+  return Response.json({ error: message }, { status });
+}
+
+/**
+ * Resolve a Hub repo id into the four numbers the memory math needs.
+ *
+ * Parameter count comes from the safetensors index the Hub already computed;
+ * the attention shape comes from config.json. Both are public files, so no
+ * token is involved — which is also why gated repos cannot be sized here.
+ */
+export async function GET(request: Request) {
+  const id = new URL(request.url).searchParams.get("id")?.trim();
+  if (!id) return fail("No model id.", 400);
+  if (!/^[\w.-]+\/[\w.-]+$/.test(id)) return fail("Expected owner/model.", 400);
+
+  const infoRes = await fetch(`${HUB}/api/models/${id}`, {
+    next: { revalidate: 3600 },
+  });
+  // The Hub answers 401 for both private and non-existent repos.
+  if ([401, 403, 404].includes(infoRes.status)) {
+    return fail(`No model called ${id}, or it is private.`, 404);
+  }
+  if (!infoRes.ok) return fail("The Hub did not answer.", 502);
+
+  const info = (await infoRes.json()) as HubModel;
+  const params = info.safetensors?.total;
+  if (!params) {
+    return fail("No safetensors weights, so there is nothing to size.", 422);
+  }
+
+  const configRes = await fetch(`${HUB}/${id}/resolve/main/config.json`, {
+    next: { revalidate: 3600 },
+  });
+  if (!configRes.ok) {
+    return fail(
+      info.gated
+        ? "This repo is gated — accept its terms on the Hub, or use an ungated mirror."
+        : "No config.json, so the KV cache cannot be computed.",
+      422,
+    );
+  }
+
+  let config: HubConfig;
+  try {
+    config = (await configRes.json()) as HubConfig;
+  } catch {
+    return fail("config.json is not readable.", 422);
+  }
+
+  // Multimodal repos put the transformer under text_config.
+  const shape = config.text_config ?? config;
+  const layers = shape.num_hidden_layers ?? shape.n_layer;
+  const heads = shape.num_attention_heads ?? shape.n_head;
+  const hidden = shape.hidden_size ?? shape.n_embd;
+  // Multi-head attention is the degenerate case of grouped-query attention.
+  const kvHeads = shape.num_key_value_heads ?? heads;
+  // Most configs leave head_dim implicit at hidden_size / heads.
+  const headDim =
+    shape.head_dim ?? (hidden && heads ? hidden / heads : undefined);
+
+  if (!layers || !kvHeads || !headDim) {
+    return fail("config.json does not describe a transformer we can size.", 422);
+  }
+
+  const model: Model = {
+    id: info.id,
+    label: info.id.split("/").pop() ?? info.id,
+    params: params / 1e9,
+    layers,
+    kvHeads,
+    headDim,
+  };
+  return Response.json(model);
+}

app/compare/page.tsx

@@ -0,0 +1,97 @@
+import Link from "next/link";
+import TradeoffMap from "@/components/TradeoffMap";
+import CapabilityRow from "@/components/CapabilityRow";
+import {
+  GOALS,
+  GPUS,
+  methodsFor,
+  round1,
+} from "@/lib/data";
+
+export default async function ComparePage({ searchParams }: PageProps<"/compare">) {
+  const sp = await searchParams;
+  const first = (v: string | string[] | undefined, fallback: string) =>
+    (Array.isArray(v) ? v[0] : v) ?? fallback;
+
+  const bits = Number(first(sp.bits, "4"));
+  const gpu = GPUS.find((g) => g.id === first(sp.gpu, "a100-80gb")) ?? GPUS[0];
+  const goal = GOALS.find((g) => g.id === first(sp.goal, "serve")) ?? GOALS[0];
+  const methods = methodsFor(bits, gpu.backend, goal);
+  // The calculator knows the footprint; it arrives as ?gb= rather than being
+  // recomputed here, since the model is now whatever the user typed.
+  const total = Number(first(sp.gb, ""));
+
+  return (
+    <main className="mx-auto w-full max-w-[1280px] px-10 pb-24 pt-16">
+      <Link href="/" className="inline-flex items-center gap-2 text-sm text-stone hover:text-obsidian">
+        <svg width="12" height="10" viewBox="0 0 12 10" fill="none" aria-hidden>
+          <path d="M5 1L1 5L5 9M1 5H11" stroke="currentColor" strokeWidth="1.4"
+            strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        Back to the calculator
+      </Link>
+
+      <h1 className="pt-4 text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-obsidian">
+        {methods.length} {methods.length === 1 ? "method quantizes" : "methods quantize"} to {bits}-bit on {gpu.label}
+      </h1>
+      <p className="max-w-[760px] pt-4 text-base leading-6 text-charcoal">
+        {methods.length > 0 ? (
+          <>
+            {Number.isFinite(total) && total > 0
+              ? `All of them land at ${round1(total)} GB. `
+              : "All of them land at the same footprint. "}
+            What separates them is what they let you do.
+          </>
+        ) : (
+          <>Nothing in the table supports that combination. Try a different precision or card.</>
+        )}
+      </p>
+
+      {methods.length > 0 && (
+        <>
+          <div className="pt-10">
+            <TradeoffMap methods={methods} />
+          </div>
+
+          <div className="pt-12">
+            <div className="flex items-center gap-6 border-b border-obsidian pb-3">
+              <span className="label w-[420px] shrink-0 text-stone">Method</span>
+              <span className="label w-[140px] shrink-0 text-center text-stone">On the fly</span>
+              <span className="label w-[140px] shrink-0 text-center text-stone">torch.compile</span>
+              <span className="label w-[140px] shrink-0 text-center text-stone">PEFT</span>
+              <span className="label w-[140px] shrink-0 text-center text-stone">Serializable</span>
+            </div>
+            {methods.map((m) => (
+              <CapabilityRow key={m.id} method={m} />
+            ))}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-6 pt-8">
+            <Legend color="#34785c" filled label="Supported" />
+            <Legend color="#c08532" label="Partial" />
+            <span className="flex items-center gap-2">
+              <span className="h-[1.5px] w-[11px] shrink-0 bg-ash" />
+              <span className="label text-stone">Not supported</span>
+            </span>
+            <span className="flex items-center gap-2">
+              <span className="w-[11px] shrink-0 text-center font-mono text-xs text-smoke">?</span>
+              <span className="label text-stone">Unverified</span>
+            </span>
+          </div>
+        </>
+      )}
+    </main>
+  );
+}
+
+function Legend({ color, filled, label }: { color: string; filled?: boolean; label: string }) {
+  return (
+    <span className="flex items-center gap-2">
+      <span
+        className="h-[9px] w-[9px] shrink-0 rounded-full"
+        style={filled ? { background: color } : { boxShadow: `inset 0 0 0 1.5px ${color}` }}
+      />
+      <span className="label text-stone">{label}</span>
+    </span>
+  );
+}

app/globals.css

@@ -1,26 +1,176 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  /* Vercel neutrals */
+  --color-canvas: #fafafa;
+  --color-paper: #ffffff;
+  --color-hairline: #ebebeb;
+  --color-ash: #c9c9c9;
+  --color-smoke: #a8a8a8;
+  --color-graphite: #8f8f8f;
+  --color-stone: #666666;
+  --color-charcoal: #4d4d4d;
+  --color-obsidian: #171717;
+
+  /* Cursor accents, used only to identify precisions */
+  --color-crimson: #cf2d56;
+  --color-ember: #f54e00;
+  --color-forest: #34785c;
+  --color-amber: #c08532;
+
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html,
+body {
+  background: var(--color-canvas);
+  color: var(--color-obsidian);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Uppercase mono label — the system reserves Geist Mono for metadata */
+.label {
+  font-family: var(--font-geist-mono), ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.071em;
+  text-transform: uppercase;
 }
+
+/* Hairline ring that survives any background, per the Vercel spec */
+.ring-hairline {
+  box-shadow: 0 0 0 1px var(--color-hairline);
+}
+.ring-raised {
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 0.08),
+    0 0 0 2px var(--color-canvas);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

app/layout.tsx

@@ -2,28 +2,19 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Quantization picker",
+  description:
+    "Work out what fits on your card, and which quantization method to use.",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full`}>
+      <body className="min-h-full">{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -1,69 +1,78 @@
-import Image from "next/image";
+"use client";
+
+import { useState } from "react";
+import SentenceSelect from "@/components/SentenceSelect";
+import SentenceCombobox from "@/components/SentenceCombobox";
+import ModelInput from "@/components/ModelInput";
+import MemoryBar from "@/components/MemoryBar";
+import TradeoffMap from "@/components/TradeoffMap";
+import { GOALS, GPUS, PRECISIONS, methodsFor, type Model } from "@/lib/data";
+
+export default function CalculatorPage() {
+  const [model, setModel] = useState<Model | null>(null);
+  const [gpuId, setGpuId] = useState("a100-80gb");
+  const [bits, setBits] = useState(4);
+
+  const gpu = GPUS.find((g) => g.id === gpuId)!;
+  const contextTokens = 8192;
+  // No goal filter on this screen — every method that can hit this precision
+  // on this backend belongs on the map.
+  const methods = methodsFor(bits, gpu.backend, GOALS[0]);
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
+    <main className="mx-auto w-full max-w-[1280px] px-10 pb-24 pt-20">
+      <div className="flex flex-wrap items-center gap-2.5">
+        <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+          I want to run
+        </span>
+        <ModelInput onResolve={setModel} />
+        <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+          on
+        </span>
+        <SentenceCombobox
+          ariaLabel="Hardware"
+          placeholder="Search 316 configurations"
+          muted={!model}
+          value={gpuId}
+          options={GPUS.map((g) => ({ id: g.id, label: g.label }))}
+          onChange={setGpuId}
         />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
+      </div>
+
+      <div className="pt-11">
+        <MemoryBar
+          model={model}
+          gpu={gpu}
+          contextTokens={contextTokens}
+          selectedBits={bits}
+        />
+      </div>
+
+      {model && (
+        <>
+          <div className="flex flex-wrap items-center gap-2.5 pt-10">
+            <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+              Quantize to
+            </span>
+            <SentenceSelect
+              ariaLabel="Precision"
+              value={String(bits)}
+              options={PRECISIONS.map((p) => ({ id: String(p), label: `${p}-bit` }))}
+              onChange={(v) => setBits(Number(v))}
             />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+          </div>
+
+          {methods.length > 0 ? (
+            <div className="pt-8">
+              <TradeoffMap methods={methods} />
+            </div>
+          ) : (
+            <p className="label pt-5 text-graphite">
+              No method supports {bits}-bit on {gpu.label}
+            </p>
+          )}
+        </>
+      )}
+    </main>
   );
 }

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

components/CapabilityRow.tsx

@@ -0,0 +1,44 @@
+import { Method, Support } from "@/lib/data";
+
+function Mark({ value }: { value: Support }) {
+  if (value === "yes") return <span className="h-[9px] w-[9px] rounded-full bg-forest" />;
+  if (value === "partial")
+    return <span className="h-[9px] w-[9px] rounded-full shadow-[inset_0_0_0_1.5px_#c08532]" />;
+  if (value === "unknown") return <span className="font-mono text-[13px] text-smoke">?</span>;
+  return <span className="h-[1.5px] w-[11px] bg-ash" />;
+}
+
+export default function CapabilityRow({ method }: { method: Method }) {
+  const allFour =
+    method.onTheFly &&
+    method.compile === "yes" &&
+    method.peft === "yes" &&
+    method.serializable === "yes";
+
+  return (
+    <div className="flex items-center gap-6 border-b border-hairline px-3 py-[18px]">
+      <div className="flex w-[420px] shrink-0 flex-col gap-1">
+        <div className="flex items-center gap-2.5">
+          <a href={method.docs} target="_blank" rel="noreferrer"
+            className="font-mono text-[15px] font-medium text-obsidian hover:text-forest">
+            {method.name}
+          </a>
+          {allFour && (
+            <span className="label rounded-md px-2 py-0.5 text-[10px] text-forest shadow-[0_0_0_1px_#34785c]">
+              All four
+            </span>
+          )}
+        </div>
+        <p className="text-[13px] text-charcoal">{method.blurb}</p>
+        <code className="font-mono text-[11px] text-stone">{method.config}</code>
+      </div>
+      {[method.onTheFly ? "yes" : "no", method.compile, method.peft, method.serializable].map(
+        (v, i) => (
+          <div key={i} className="flex w-[140px] shrink-0 justify-center">
+            <Mark value={v as Support} />
+          </div>
+        ),
+      )}
+    </div>
+  );
+}

components/MemoryBar.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import {
+  Model,
+  Gpu,
+  PRECISIONS,
+  PRECISION_ACCENT,
+  overheadGB,
+  round1,
+  weightsGB,
+} from "@/lib/data";
+
+const W = 1180;
+const BAR_H = 55;
+const R = 5.5;
+
+interface Props {
+  /** null until a model resolves — the bar renders empty, but to scale */
+  model: Model | null;
+  gpu: Gpu;
+  contextTokens: number;
+  selectedBits: number;
+}
+
+interface Tick {
+  bits: number;
+  total: number;
+  x: number;
+  row: 0 | 1;
+}
+
+/** Round a scale ceiling up to something a human would pick. */
+function niceCeil(v: number): number {
+  const step = v > 400 ? 100 : v > 200 ? 50 : v > 60 ? 10 : 5;
+  return Math.ceil(v / step) * step;
+}
+
+export default function MemoryBar({ model, gpu, contextTokens, selectedBits }: Props) {
+  if (!model) return <EmptyBar />;
+  return (
+    <FilledBar
+      model={model}
+      gpu={gpu}
+      contextTokens={contextTokens}
+      selectedBits={selectedBits}
+    />
+  );
+}
+
+/**
+ * The card, waiting. Just the empty track, holding the same space the filled
+ * bar will take, so nothing moves when a model arrives.
+ */
+function EmptyBar() {
+  const barTop = 84;
+  const barBottom = barTop + BAR_H;
+
+  return (
+    <svg viewBox={`0 0 ${W} ${barBottom + 66}`} className="h-auto w-full" role="img"
+      aria-label="No model chosen yet">
+      <rect x="0.5" y={barTop + 0.5} width={W - 1} height={BAR_H} rx={R} fill="#ffffff"
+        stroke="#ebebeb" />
+    </svg>
+  );
+}
+
+function FilledBar({ model, gpu, contextTokens, selectedBits }: Props & { model: Model }) {
+  const overhead = overheadGB(model, contextTokens);
+  const vram = gpu.vram;
+
+  // The solid bar is the precision you picked. fp16 trails behind it as a
+  // ghost, so you can see what quantizing bought you.
+  const selWeights = weightsGB(model, selectedBits);
+  const selTotal = selWeights + overhead;
+  const ghostTotal = weightsGB(model, 16) + overhead;
+
+  // The scale follows the selection, so the bar always fills the frame. fp16
+  // is free to run off the end.
+  const scaleMax = niceCeil(Math.max(selTotal, vram) * 1.02);
+  const x = (gb: number) => (gb / scaleMax) * W;
+
+  const overflows = selTotal > vram;
+  // When it overflows, the card is full: weights fill whatever the reservation leaves.
+  const weightsThatFit = Math.max(0, vram - overhead);
+  const kvStart = overflows ? x(weightsThatFit) : x(selWeights);
+  const kvEnd = overflows ? x(vram) : x(selTotal);
+  const barEnd = x(selTotal);
+  const ghostEnd = x(ghostTotal);
+  const ghostClipped = ghostEnd > W;
+  const ghostRight = Math.min(ghostEnd, W - 0.5);
+  // The callout needs ~215px; right-align it on the block when it would run off.
+  const kvLabelFlips = kvStart + 215 > W;
+  // Two totals this close would overprint.
+  const showGhostLabel = ghostRight - barEnd >= 64;
+
+  // Precision ticks, staggered onto a second row when they would collide.
+  const MIN_GAP = 68;
+  const lastX: [number, number] = [-Infinity, -Infinity];
+  const ticks: Tick[] = PRECISIONS.map((bits) => {
+    const total = weightsGB(model, bits) + overhead;
+    return { bits, total, x: x(total), row: 0 as 0 | 1 };
+  })
+    .filter((t) => t.total <= scaleMax)
+    .sort((a, b) => a.x - b.x)
+    .map((t) => {
+      const row: 0 | 1 = t.x - lastX[0] >= MIN_GAP ? 0 : 1;
+      lastX[row] = t.x;
+      return { ...t, row };
+    });
+
+  const staggered = ticks.some((t) => t.row === 1);
+  const barTop = staggered ? 100 : 84;
+  const barBottom = barTop + BAR_H;
+  const height = barBottom + 66;
+
+  return (
+    <svg viewBox={`0 0 ${W} ${height}`} className="h-auto w-full" role="img"
+      aria-label={`${model.label} at ${selectedBits}-bit needs ${round1(selTotal)} GB of the ${vram} GB on ${gpu.label}`}>
+      {/* precision labels + drop lines above the bar */}
+      {ticks.map((t) => {
+        const accent = PRECISION_ACCENT[t.bits];
+        const isSel = t.bits === selectedBits;
+        const nameY = t.row === 0 ? 11 : 53;
+        const valY = t.row === 0 ? 29 : 71;
+        const lineTop = t.row === 0 ? 40 : 82;
+        return (
+          <g key={t.bits}>
+            <text x={t.x} y={nameY} textAnchor="middle" fontFamily="var(--font-geist-mono)"
+              fontSize="11" letterSpacing="0.79" fill={accent}>
+              {t.bits}-BIT
+            </text>
+            <text x={t.x} y={valY} textAnchor="middle" fontFamily="var(--font-geist-mono)"
+              fontSize="13" fontWeight={isSel ? 500 : 400} fill={isSel ? accent : "#171717"}>
+              {round1(t.total)}
+            </text>
+            <line x1={t.x} y1={lineTop} x2={t.x} y2={barTop} stroke={accent}
+              strokeWidth={isSel ? 2.5 : 1.75} strokeLinecap="round"
+              strokeDasharray={isSel ? "0.01 4" : "0.01 3.5"}
+              opacity={isSel ? 1 : 0.9} />
+          </g>
+        );
+      })}
+
+      {/* KV reservation callout — under the bar, anchored on the block it describes */}
+      <text
+        x={kvLabelFlips ? kvEnd : kvStart}
+        y={barBottom + 52}
+        textAnchor={kvLabelFlips ? "end" : "start"}
+        fontFamily="var(--font-geist-mono)"
+        fontSize="11"
+        letterSpacing="0.79"
+        fill="#8f8f8f"
+      >
+        <tspan fontSize="12" letterSpacing="0" fill="#666666">{round1(overhead)}</tspan>
+        {"  KV CACHE + ACTIVATIONS"}
+      </text>
+
+      {/* track */}
+      <rect x="0.5" y={barTop + 0.5} width={W - 1} height={BAR_H} rx={R} fill="#ffffff"
+        stroke="#ebebeb" />
+
+      {/* fp16, unquantized — the ghost the solid bar is measured against. It is
+          left open on the right when it runs past the edge of the scale. */}
+      <path
+        d={
+          ghostClipped
+            ? `M${ghostRight} ${barTop + 0.5} H${R} A${R} ${R} 0 0 0 0.5 ${barTop + R} V${barBottom - R} A${R} ${R} 0 0 0 ${R} ${barBottom + 0.5} H${ghostRight}`
+            : `M${ghostRight} ${barTop + 0.5} H${R} A${R} ${R} 0 0 0 0.5 ${barTop + R} V${barBottom - R} A${R} ${R} 0 0 0 ${R} ${barBottom + 0.5} H${ghostRight} Z`
+        }
+        fill="none"
+        stroke="#d4d4d4"
+        strokeWidth="1"
+        strokeDasharray="2 3"
+      />
+      {showGhostLabel && (
+        <text x={ghostRight - 6} y={barTop - 8} textAnchor="end"
+          fontFamily="var(--font-geist-mono)" fontSize="11" letterSpacing="0.79" fill="#a8a8a8">
+          {round1(ghostTotal)} AT FP16{ghostClipped ? " ›" : ""}
+        </text>
+      )}
+
+      {/* weights that fit — rounded on the left only */}
+      <path
+        d={`M${R} ${barTop} H${kvStart} V${barBottom} H${R} A${R} ${R} 0 0 1 0 ${barBottom - R} V${barTop + R} A${R} ${R} 0 0 1 ${R} ${barTop} Z`}
+        fill="#171717"
+      />
+      {/* the fixed reservation */}
+      <rect x={kvStart} y={barTop} width={Math.max(0, kvEnd - kvStart)} height={BAR_H} fill="#8f8f8f" />
+      {/* what will not load */}
+      {overflows && (
+        <rect x={x(vram)} y={barTop} width={barEnd - x(vram)} height={BAR_H} fill="#ebebeb" />
+      )}
+
+      {/* drop lines continued through the bar */}
+      {ticks.map((t) => {
+        const accent = PRECISION_ACCENT[t.bits];
+        const isSel = t.bits === selectedBits;
+        return (
+          <line key={t.bits} x1={t.x} y1={barTop + 1} x2={t.x} y2={barBottom - 1} stroke={accent}
+            strokeWidth={isSel ? 2.5 : 1.75} strokeLinecap="round"
+            strokeDasharray={isSel ? "0.01 4" : "0.01 3.5"}
+            opacity={isSel ? 1 : 0.9} />
+        );
+      })}
+
+      {/* in-bar figures */}
+      {kvStart >= 52 && (
+        <text x="16" y={barTop + 32} fontFamily="var(--font-geist-mono)" fontSize="13" fill="#fafafa">
+          {round1(overflows ? weightsThatFit : selWeights)}
+        </text>
+      )}
+      {overflows && barEnd - x(vram) >= 52 && (
+        <text x={(x(vram) + barEnd) / 2} y={barTop + 32} textAnchor="middle"
+          fontFamily="var(--font-geist-mono)" fontSize="13" fill="#171717">
+          {round1(selTotal - vram)}
+        </text>
+      )}
+
+      {/* capacity line */}
+      <line x1={x(vram)} y1={barBottom} x2={x(vram)} y2={barBottom + 12} stroke="#171717" strokeWidth="1.5" />
+      <text x={x(vram)} y={barBottom + 30} textAnchor="middle" fontFamily="var(--font-geist-mono)"
+        fontSize="13" fill="#171717">
+        {vram}
+      </text>
+
+    </svg>
+  );
+}

components/ModelInput.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useRef, useState } from "react";
+import type { Model } from "@/lib/data";
+
+interface Props {
+  onResolve: (model: Model | null) => void;
+}
+
+type Status =
+  | { kind: "empty" }
+  | { kind: "loading" }
+  | { kind: "error"; message: string }
+  | { kind: "ok" };
+
+/**
+ * A free-text field for a Hub repo id. There are millions of models on the
+ * Hub, so there is no list to pick from — the id is typed, and the sizes come
+ * back from /api/model.
+ */
+export default function ModelInput({ onResolve }: Props) {
+  const [text, setText] = useState("");
+  const [status, setStatus] = useState<Status>({ kind: "empty" });
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  // Only the newest lookup may write state; earlier ones lose the race.
+  const latest = useRef(0);
+
+  async function lookup(id: string, ticket: number) {
+    try {
+      const res = await fetch(`/api/model?id=${encodeURIComponent(id)}`);
+      const body = await res.json();
+      if (ticket !== latest.current) return;
+      if (!res.ok) {
+        setStatus({ kind: "error", message: body.error ?? "Lookup failed." });
+        onResolve(null);
+        return;
+      }
+      setStatus({ kind: "ok" });
+      onResolve(body as Model);
+    } catch {
+      if (ticket !== latest.current) return;
+      setStatus({ kind: "error", message: "Could not reach the Hub." });
+      onResolve(null);
+    }
+  }
+
+  function handleChange(next: string) {
+    setText(next);
+    clearTimeout(timer.current);
+    const id = next.trim();
+    const ticket = ++latest.current;
+
+    if (!id) {
+      setStatus({ kind: "empty" });
+      onResolve(null);
+      return;
+    }
+
+    setStatus({ kind: "loading" });
+    timer.current = setTimeout(() => lookup(id, ticket), 400);
+  }
+
+  return (
+    <span className="relative inline-flex flex-col">
+      <input
+        aria-label="Model"
+        value={text}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder="Qwen/Qwen3-32B"
+        spellCheck={false}
+        autoCapitalize="off"
+        autoComplete="off"
+        className="h-[52px] w-[420px] rounded-md bg-paper px-3.5 text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-obsidian ring-raised outline-none placeholder:text-ash"
+      />
+      <span
+        className="label absolute top-[56px] left-1 whitespace-nowrap text-graphite"
+        role={status.kind === "error" ? "alert" : undefined}
+      >
+        {status.kind === "loading" && "Looking up"}
+        {status.kind === "error" && status.message}
+      </span>
+    </span>
+  );
+}

components/SentenceCombobox.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/components/ui/combobox";
+
+export interface Option {
+  id: string;
+  label: string;
+}
+
+interface Props {
+  value: string;
+  options: Option[];
+  onChange: (id: string) => void;
+  ariaLabel: string;
+  /** shown in the search field inside the popup */
+  placeholder?: string;
+  /** render the value in placeholder grey — a default nobody has confirmed yet */
+  muted?: boolean;
+}
+
+/**
+ * A type-ahead that reads as part of the sentence. Same chip as
+ * SentenceSelect, but the list is long enough (316 hardware configurations)
+ * that scrolling it is hopeless — so the popup opens on a search field.
+ */
+export default function SentenceCombobox({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  placeholder = "Search",
+  muted = false,
+}: Props) {
+  const current = options.find((o) => o.id === value) ?? options[0];
+
+  return (
+    <Combobox
+      items={options}
+      value={current}
+      onValueChange={(o: Option | null) => o && onChange(o.id)}
+      itemToStringLabel={(o: Option) => o.label}
+    >
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        className={`inline-flex h-[52px] items-center gap-2.5 rounded-md bg-paper px-3.5 text-[40px] font-medium leading-[44px] tracking-[-0.04em] ring-raised [&_svg]:text-graphite ${
+          muted ? "text-ash" : "text-obsidian"
+        }`}
+      >
+        <ComboboxValue />
+      </ComboboxTrigger>
+      <ComboboxContent className="min-w-[280px] border-hairline bg-paper">
+        <ComboboxInput placeholder={placeholder} showTrigger={false} />
+        <ComboboxEmpty className="font-mono text-[13px] text-graphite">
+          Nothing matches
+        </ComboboxEmpty>
+        <ComboboxList>
+          {(o: Option) => (
+            <ComboboxItem key={o.id} value={o} className="font-mono text-[13px]">
+              {o.label}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}

components/SentenceSelect.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+interface Option {
+  id: string;
+  label: string;
+}
+
+interface Props {
+  value: string;
+  options: Option[];
+  onChange: (id: string) => void;
+  /** matches the 40px display type of the surrounding sentence */
+  size?: "display" | "inline";
+  ariaLabel: string;
+}
+
+/**
+ * A dropdown that reads as part of a sentence. The native <select> is layered
+ * transparently over the rendered text so it stays keyboard and screen-reader
+ * navigable while looking like body copy.
+ */
+export default function SentenceSelect({
+  value,
+  options,
+  onChange,
+  size = "display",
+  ariaLabel,
+}: Props) {
+  const current = options.find((o) => o.id === value) ?? options[0];
+  const display = size === "display";
+
+  return (
+    <span
+      className={`relative inline-flex items-center gap-2.5 rounded-md bg-paper ring-raised ${
+        display ? "h-[52px] px-3.5" : "h-9 px-3"
+      }`}
+    >
+      <span
+        className={
+          display
+            ? "text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-obsidian"
+            : "font-mono text-[13px] text-obsidian"
+        }
+      >
+        {current.label}
+      </span>
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden
+        className="shrink-0"
+      >
+        <path
+          d="M3 4.5L6 7.5L9 4.5"
+          stroke="#8f8f8f"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <select
+        aria-label={ariaLabel}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="absolute inset-0 cursor-pointer opacity-0"
+      >
+        {options.map((o) => (
+          <option key={o.id} value={o.id}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </span>
+  );
+}

components/TradeoffMap.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Method } from "@/lib/data";
+
+const W = 1120;
+const H = 600;
+const LEFT = 140;
+// The leftmost ink is the rotated y-axis caption, which paints out to x=101.
+// Cropping the viewBox to it lines the map up with the body text.
+const INK_LEFT = 100;
+const RIGHT = 1100;
+const TOP = 40;
+const BOTTOM = 520;
+const MID_X = 620;
+const MID_Y = 280;
+const CHAR_W = 10.2; // Geist Mono at 17px
+
+/** Stable pseudo-random in [0,1) from a string, so jitter never moves between renders. */
+function hash01(s: string, salt: number): number {
+  let h = 2166136261 ^ salt;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return ((h >>> 0) % 10000) / 10000;
+}
+
+interface Placed {
+  method: Method;
+  x: number;
+  y: number;
+}
+
+/**
+ * Spread a quadrant's members across evenly-spaced vertical slots, then jitter
+ * within each slot. Guarantees no vertical collision while breaking up the
+ * column of text that a naive layout produces.
+ */
+function place(members: Method[], left: number, right: number, top: number, bottom: number): Placed[] {
+  const slot = (bottom - top) / (members.length + 1);
+  return members.map((method, i) => {
+    const jx = hash01(method.id, 1);
+    const jy = hash01(method.id, 2);
+    const textW = method.name.length * CHAR_W;
+    const usable = Math.max(0, right - left - 56 - textW);
+    return {
+      method,
+      x: left + 28 + jx * usable,
+      y: top + slot * (i + 1) + (jy - 0.5) * slot * 0.4,
+    };
+  });
+}
+
+export default function TradeoffMap({ methods }: { methods: Method[] }) {
+  const saves = (m: Method) => m.serializable === "yes" || m.serializable === "partial";
+
+  const topLeft = methods.filter((m) => m.onTheFly && saves(m));
+  const topRight = methods.filter((m) => !m.onTheFly && saves(m));
+  const bottomLeft = methods.filter((m) => m.onTheFly && !saves(m));
+  const bottomRight = methods.filter((m) => !m.onTheFly && !saves(m));
+
+  const placed = [
+    ...place(topLeft, LEFT, MID_X, TOP, MID_Y),
+    ...place(topRight, MID_X, RIGHT, TOP, MID_Y),
+    ...place(bottomLeft, LEFT, MID_X, MID_Y, BOTTOM),
+    ...place(bottomRight, MID_X, RIGHT, MID_Y, BOTTOM),
+  ];
+
+  const emptyQuadrant =
+    bottomRight.length === 0
+      ? { x: (MID_X + RIGHT) / 2, y: (MID_Y + BOTTOM) / 2 + 20 }
+      : bottomLeft.length === 0
+        ? { x: (LEFT + MID_X) / 2, y: (MID_Y + BOTTOM) / 2 + 20 }
+        : null;
+
+  return (
+    <svg viewBox={`${INK_LEFT} 0 ${W - INK_LEFT} ${H}`} className="h-auto w-full" role="img"
+      aria-label="Methods plotted by when they quantize and whether the result can be saved">
+      <rect x={LEFT} y={TOP} width={MID_X - LEFT} height={MID_Y - TOP} fill="#f3f7f5" />
+      <line x1={LEFT} y1={MID_Y} x2={RIGHT} y2={MID_Y} stroke="#a8a8a8" strokeWidth="1" strokeDasharray="2 5" />
+      <line x1={MID_X} y1={TOP} x2={MID_X} y2={BOTTOM} stroke="#a8a8a8" strokeWidth="1" strokeDasharray="2 5" />
+
+      <text x="112" y="160" textAnchor="middle" transform="rotate(-90 112 160)"
+        fontFamily="var(--font-geist-mono)" fontSize="11" letterSpacing="0.79" fill="#171717">
+        SAVES TO A CHECKPOINT
+      </text>
+      <text x="112" y="400" textAnchor="middle" transform="rotate(-90 112 400)"
+        fontFamily="var(--font-geist-mono)" fontSize="11" letterSpacing="0.79" fill="#8f8f8f">
+        LIVES IN MEMORY ONLY
+      </text>
+      <text x={LEFT} y="552" fontFamily="var(--font-geist-mono)" fontSize="11" letterSpacing="0.79" fill="#171717">
+        QUANTIZES WHEN YOU LOAD
+      </text>
+      <text x={RIGHT} y="552" textAnchor="end" fontFamily="var(--font-geist-mono)" fontSize="11"
+        letterSpacing="0.79" fill="#171717">
+        QUANTIZES BEFORE YOU LOAD
+      </text>
+      <text x={MID_X} y="580" textAnchor="middle" fontFamily="var(--font-geist-mono)" fontSize="10"
+        letterSpacing="0.71" fill="#a8a8a8">
+        WHEN QUANTIZATION HAPPENS
+      </text>
+      <text x={LEFT + 12} y={TOP + 22} fontFamily="var(--font-geist-mono)" fontSize="10"
+        letterSpacing="0.71" fill="#34785c">
+        BEST ZONE
+      </text>
+
+      {placed.map(({ method, x, y }) => (
+        <a key={method.id} href={method.docs} target="_blank" rel="noreferrer">
+          <text x={x} y={y} fontFamily="var(--font-geist-mono)" fontSize="17" fontWeight="500"
+            fill="#171717" className="hover:fill-[#34785c]">
+            {method.name}
+          </text>
+        </a>
+      ))}
+
+      {emptyQuadrant && (
+        <text x={emptyQuadrant.x} y={emptyQuadrant.y} textAnchor="middle"
+          fontFamily="var(--font-geist-mono)" fontSize="11" letterSpacing="0.79" fill="#c9c9c9">
+          NOTHING LANDS HERE
+        </text>
+      )}
+    </svg>
+  );
+}

components/ui/button.tsx

@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

components/ui/combobox.tsx

@@ -0,0 +1,297 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}

components/ui/input-group.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+import { cn } from "cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { cn } from "cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

lib/data.ts

@@ -0,0 +1,252 @@
+import { HARDWARE, hardwareLabel } from "./hardware";
+
+export type Support = "yes" | "no" | "partial" | "unknown";
+
+export type Backend = "cuda" | "rocm" | "metal" | "intel" | "cpu";
+
+export interface Model {
+  id: string;
+  label: string;
+  /** billions of parameters */
+  params: number;
+  layers: number;
+  kvHeads: number;
+  headDim: number;
+}
+
+export interface Gpu {
+  id: string;
+  label: string;
+  /** GB of VRAM */
+  vram: number;
+  backend: Backend;
+}
+
+export interface Goal {
+  id: string;
+  label: string;
+  /** capability that must be supported for this goal */
+  requires?: "peft" | "serializable";
+}
+
+export interface Method {
+  id: string;
+  name: string;
+  bits: number[];
+  backends: Backend[];
+  onTheFly: boolean;
+  compile: Support;
+  peft: Support;
+  serializable: Support;
+  /** minutes of setup before you can load */
+  setupMinutes: number;
+  blurb: string;
+  config: string;
+  docs: string;
+}
+
+
+/**
+ * Every memory configuration in the Hugging Face hardware table, most-owned
+ * first — so the cards people actually have sit at the top of the list.
+ */
+export const GPUS: Gpu[] = HARDWARE.map((h) => ({
+  id: h.id,
+  label: hardwareLabel(h),
+  vram: h.vram,
+  backend: h.backend,
+}));
+
+export const GOALS: Goal[] = [
+  { id: "serve", label: "serve requests" },
+  { id: "finetune", label: "fine-tune it", requires: "peft" },
+  { id: "publish", label: "publish a checkpoint", requires: "serializable" },
+];
+
+export const PRECISIONS = [8, 4, 3, 2] as const;
+
+export const PRECISION_ACCENT: Record<number, string> = {
+  8: "#c08532",
+  4: "#34785c",
+  3: "#f54e00",
+  2: "#cf2d56",
+};
+
+export const METHODS: Method[] = [
+  {
+    id: "bitsandbytes",
+    name: "bitsandbytes",
+    bits: [4, 8],
+    backends: ["cuda", "rocm", "metal", "intel", "cpu"],
+    onTheFly: true,
+    compile: "yes",
+    peft: "yes",
+    serializable: "yes",
+    setupMinutes: 0,
+    blurb: "Quantizes as the model loads. No calibration data, no extra pipeline.",
+    config: "BitsAndBytesConfig(load_in_4bit=True)",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/bitsandbytes",
+  },
+  {
+    id: "gptqmodel",
+    name: "GPTQModel",
+    bits: [2, 3, 4, 8],
+    backends: ["cuda", "rocm", "metal", "intel", "cpu"],
+    onTheFly: false,
+    compile: "no",
+    peft: "yes",
+    serializable: "yes",
+    setupMinutes: 25,
+    blurb: "Best accuracy available at 4-bit. Costs a calibration pass up front.",
+    config: 'GPTQConfig(bits=4, dataset="c4")',
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/gptq",
+  },
+  {
+    id: "awq",
+    name: "AWQ",
+    bits: [4],
+    backends: ["cuda", "rocm", "intel", "cpu"],
+    onTheFly: false,
+    compile: "unknown",
+    peft: "yes",
+    serializable: "yes",
+    setupMinutes: 20,
+    blurb: "Activation-aware and widely deployed. Slightly behind GPTQ on accuracy.",
+    config: "AwqConfig(bits=4)",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/awq",
+  },
+  {
+    id: "hqq",
+    name: "HQQ",
+    bits: [2, 3, 4, 8],
+    backends: ["cuda", "intel", "cpu"],
+    onTheFly: true,
+    compile: "yes",
+    peft: "yes",
+    serializable: "no",
+    setupMinutes: 0,
+    blurb: "Fast to apply and needs no dataset, but the result cannot be saved.",
+    config: "HqqConfig(nbits=4, group_size=64)",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/hqq",
+  },
+  {
+    id: "compressed-tensors",
+    name: "compressed-tensors",
+    bits: [4, 8],
+    backends: ["cuda", "rocm", "intel", "cpu"],
+    onTheFly: false,
+    compile: "no",
+    peft: "yes",
+    serializable: "yes",
+    setupMinutes: 0,
+    blurb: "Loads checkpoints that are already quantized, and sparse as well.",
+    config: "load a compressed-tensors checkpoint",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/compressed_tensors",
+  },
+  {
+    id: "torchao",
+    name: "torchao",
+    bits: [4, 8],
+    backends: ["cuda", "metal", "intel", "cpu"],
+    onTheFly: true,
+    compile: "unknown",
+    peft: "unknown",
+    serializable: "partial",
+    setupMinutes: 0,
+    blurb: "Native to PyTorch. Three of the four capabilities are unverified.",
+    config: 'TorchAoConfig("int4_weight_only")',
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/torchao",
+  },
+  {
+    id: "optimum-quanto",
+    name: "optimum-quanto",
+    bits: [2, 4, 8],
+    backends: ["cuda", "metal", "intel", "cpu"],
+    onTheFly: true,
+    compile: "yes",
+    peft: "no",
+    serializable: "no",
+    setupMinutes: 0,
+    blurb: "Portable across backends, including Metal. Cannot save the result.",
+    config: "QuantoConfig(weights='int4')",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/quanto",
+  },
+  {
+    id: "higgs",
+    name: "HIGGS",
+    bits: [2, 4],
+    backends: ["cuda"],
+    onTheFly: true,
+    compile: "yes",
+    peft: "no",
+    serializable: "yes",
+    setupMinutes: 0,
+    blurb: "Calibration-free at 2 and 4 bits. No PEFT support.",
+    config: "HiggsConfig(bits=4)",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/higgs",
+  },
+  {
+    id: "aqlm",
+    name: "AQLM",
+    bits: [2],
+    backends: ["cuda", "intel", "cpu"],
+    onTheFly: false,
+    compile: "yes",
+    peft: "yes",
+    serializable: "yes",
+    setupMinutes: 90,
+    blurb: "Additive quantization for extreme compression. Long calibration.",
+    config: "load an AQLM checkpoint",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/aqlm",
+  },
+  {
+    id: "finegrained-fp8",
+    name: "FINEGRAINED_FP8",
+    bits: [8],
+    backends: ["cuda", "intel"],
+    onTheFly: true,
+    compile: "no",
+    peft: "no",
+    serializable: "yes",
+    setupMinutes: 0,
+    blurb: "Built into Transformers, so there is no extra dependency to pin.",
+    config: "FineGrainedFP8Config()",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/finegrained_fp8",
+  },
+];
+
+/** Weight bytes, in decimal GB. */
+export function weightsGB(model: Model, bits: number): number {
+  return (model.params * bits) / 8;
+}
+
+/** KV cache for a given context length, in decimal GB (fp16 K and V). */
+export function kvCacheGB(model: Model, contextTokens: number): number {
+  const bytesPerToken = 2 * model.layers * model.kvHeads * model.headDim * 2;
+  return (bytesPerToken * contextTokens) / 1e9;
+}
+
+/** Rough allowance for activations and CUDA workspace, in decimal GB. */
+export const ACTIVATIONS_GB = 1.5;
+
+export function overheadGB(model: Model, contextTokens: number): number {
+  return kvCacheGB(model, contextTokens) + ACTIVATIONS_GB;
+}
+
+export function totalGB(model: Model, bits: number, contextTokens: number): number {
+  return weightsGB(model, bits) + overheadGB(model, contextTokens);
+}
+
+export function methodsFor(bits: number, backend: Backend, goal: Goal): Method[] {
+  return METHODS.filter((m) => {
+    if (!m.bits.includes(bits)) return false;
+    if (!m.backends.includes(backend)) return false;
+    if (goal.requires === "peft" && m.peft !== "yes") return false;
+    if (goal.requires === "serializable" && m.serializable === "no") return false;
+    return true;
+  });
+}
+
+export function round1(n: number): number {
+  return Math.round(n * 10) / 10;
+}

lib/hardware.ts

@@ -0,0 +1,350 @@
+import type { Backend } from "./data";
+
+/**
+ * The hardware catalog from https://huggingface.co/hardware?view=table — the
+ * Hardware and Memory columns only, in the table's own order (most owners
+ * first). CPUs are omitted: the table lists no memory for them, because they
+ * run out of system RAM rather than a fixed pool.
+ *
+ * One entry per memory configuration, not per device: an RTX 3060 is sold as
+ * both 8GB and 12GB, and which one you own decides what fits. `id` is the
+ * page's own slug for that configuration.
+ *
+ * Every field here is scraped except `backend` — the table has no such column,
+ * so it is derived from the vendor. See the note in the README.
+ */
+export interface HardwareConfig {
+  /** the page's slug, e.g. "a100-80gb" */
+  id: string;
+  name: string;
+  vendor: "NVIDIA" | "AMD" | "Apple" | "INTEL";
+  /** the product line, as the table labels it (e.g. "NVIDIA SXM") */
+  family: string;
+  backend: Backend;
+  /** GB of memory in this configuration */
+  vram: number;
+}
+
+export const HARDWARE: HardwareConfig[] = [
+  { id: "rtx-3060-8gb", name: "RTX 3060", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-3060-12gb", name: "RTX 3060", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "rtx-3090", name: "RTX 3090", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 24 },
+  { id: "apple-m4-16gb", name: "Apple M4", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 16 },
+  { id: "apple-m4-24gb", name: "Apple M4", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 24 },
+  { id: "apple-m4-32gb", name: "Apple M4", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 32 },
+  { id: "rtx-5090", name: "RTX 5090", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 32 },
+  { id: "rtx-4090", name: "RTX 4090", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 24 },
+  { id: "apple-m4-pro-24gb", name: "Apple M4 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 24 },
+  { id: "apple-m4-pro-48gb", name: "Apple M4 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 48 },
+  { id: "apple-m4-pro-64gb", name: "Apple M4 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 64 },
+  { id: "rtx-5070-ti", name: "RTX 5070 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rtx-5060-ti-8gb", name: "RTX 5060 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-5060-ti-16gb", name: "RTX 5060 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "apple-m1-pro-16gb", name: "Apple M1 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 16 },
+  { id: "apple-m1-pro-24gb", name: "Apple M1 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 24 },
+  { id: "apple-m1-pro-32gb", name: "Apple M1 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 32 },
+  { id: "apple-m1-8gb", name: "Apple M1", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 8 },
+  { id: "apple-m1-16gb", name: "Apple M1", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 16 },
+  { id: "apple-m4-max-36gb", name: "Apple M4 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 36 },
+  { id: "apple-m4-max-48gb", name: "Apple M4 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 48 },
+  { id: "apple-m4-max-64gb", name: "Apple M4 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 64 },
+  { id: "apple-m4-max-128gb", name: "Apple M4 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 128 },
+  { id: "rtx-5080", name: "RTX 5080", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "gb10", name: "GB10", vendor: "NVIDIA", family: "DGX Spark", backend: "cuda", vram: 128 },
+  { id: "rtx-3080-10gb", name: "RTX 3080", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 10 },
+  { id: "rtx-3080-12gb", name: "RTX 3080", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "rtx-4060", name: "RTX 4060", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "apple-m1-max-16gb", name: "Apple M1 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 16 },
+  { id: "apple-m1-max-24gb", name: "Apple M1 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 24 },
+  { id: "apple-m1-max-32gb", name: "Apple M1 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 32 },
+  { id: "apple-m1-max-64gb", name: "Apple M1 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 64 },
+  { id: "rtx-3070", name: "RTX 3070", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-4060-ti-8gb", name: "RTX 4060 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-4060-ti-16gb", name: "RTX 4060 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rx-9070-xt", name: "RX 9070 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "rtx-4070", name: "RTX 4070", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "rtx-3050-mobile-4gb", name: "RTX 3050 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 4 },
+  { id: "rtx-3050-mobile-6gb", name: "RTX 3050 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 6 },
+  { id: "apple-m5-pro-24gb", name: "Apple M5 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 24 },
+  { id: "apple-m5-pro-36gb", name: "Apple M5 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 36 },
+  { id: "apple-m5-pro-48gb", name: "Apple M5 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 48 },
+  { id: "apple-m5-pro-64gb", name: "Apple M5 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 64 },
+  { id: "apple-m3-pro-18gb", name: "Apple M3 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 18 },
+  { id: "apple-m3-pro-36gb", name: "Apple M3 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 36 },
+  { id: "apple-m5-max-36gb", name: "Apple M5 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 36 },
+  { id: "apple-m5-max-48gb", name: "Apple M5 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 48 },
+  { id: "apple-m5-max-64gb", name: "Apple M5 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 64 },
+  { id: "apple-m5-max-128gb", name: "Apple M5 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 128 },
+  { id: "rtx-4060-laptop", name: "RTX 4060 Laptop", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "apple-m2-8gb", name: "Apple M2", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 8 },
+  { id: "apple-m2-16gb", name: "Apple M2", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 16 },
+  { id: "apple-m2-24gb", name: "Apple M2", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 24 },
+  { id: "rtx-5070", name: "RTX 5070", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "apple-m5-16gb", name: "Apple M5", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 16 },
+  { id: "apple-m5-24gb", name: "Apple M5", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 24 },
+  { id: "apple-m5-32gb", name: "Apple M5", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 32 },
+  { id: "rtx-3060-ti", name: "RTX 3060 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-4070-ti-super", name: "RTX 4070 Ti Super", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "ryzen-ai-max-395-64gb", name: "Ryzen AI Max+ 395", vendor: "AMD", family: "AMD Ryzen AI Max", backend: "rocm", vram: 64 },
+  { id: "ryzen-ai-max-395-96gb", name: "Ryzen AI Max+ 395", vendor: "AMD", family: "AMD Ryzen AI Max", backend: "rocm", vram: 96 },
+  { id: "ryzen-ai-max-395-128gb", name: "Ryzen AI Max+ 395", vendor: "AMD", family: "AMD Ryzen AI Max", backend: "rocm", vram: 128 },
+  { id: "apple-m3-max-36gb", name: "Apple M3 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 36 },
+  { id: "apple-m3-max-48gb", name: "Apple M3 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 48 },
+  { id: "apple-m3-max-64gb", name: "Apple M3 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 64 },
+  { id: "apple-m3-max-96gb", name: "Apple M3 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 96 },
+  { id: "apple-m3-max-128gb", name: "Apple M3 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 128 },
+  { id: "rx-7900-xtx", name: "RX 7900 XTX", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 24 },
+  { id: "gtx-1660", name: "GTX 1660", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 6 },
+  { id: "gtx-1650-mobile", name: "GTX 1650 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 4 },
+  { id: "rtx-4070-super", name: "RTX 4070 Super", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "apple-m2-pro-16gb", name: "Apple M2 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 16 },
+  { id: "apple-m2-pro-24gb", name: "Apple M2 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 24 },
+  { id: "apple-m2-pro-32gb", name: "Apple M2 Pro", vendor: "Apple", family: "Apple Silicon Pro", backend: "metal", vram: 32 },
+  { id: "rtx-4080", name: "RTX 4080", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rtx-4070-ti", name: "RTX 4070 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "rtx-4080-super", name: "RTX 4080 SUPER", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rtx-3080-ti", name: "RTX 3080 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "h100", name: "H100", vendor: "NVIDIA", family: "NVIDIA SXM", backend: "cuda", vram: 80 },
+  { id: "apple-m3-8gb", name: "Apple M3", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 8 },
+  { id: "apple-m3-16gb", name: "Apple M3", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 16 },
+  { id: "apple-m3-24gb", name: "Apple M3", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 24 },
+  { id: "rtx-pro-6000-ws", name: "RTX PRO 6000 WS", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 96 },
+  { id: "a100-40gb", name: "A100", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 40 },
+  { id: "a100-80gb", name: "A100", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 80 },
+  { id: "apple-m2-max-32gb", name: "Apple M2 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 32 },
+  { id: "apple-m2-max-64gb", name: "Apple M2 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 64 },
+  { id: "apple-m2-max-96gb", name: "Apple M2 Max", vendor: "Apple", family: "Apple Silicon Max", backend: "metal", vram: 96 },
+  { id: "t4", name: "T4", vendor: "NVIDIA", family: "NVIDIA T4", backend: "cuda", vram: 16 },
+  { id: "rtx-5060", name: "RTX 5060", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "apple-m3-ultra-96gb", name: "Apple M3 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 96 },
+  { id: "apple-m3-ultra-256gb", name: "Apple M3 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 256 },
+  { id: "apple-m3-ultra-512gb", name: "Apple M3 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 512 },
+  { id: "gtx-1060-3gb", name: "GTX 1060", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 3 },
+  { id: "gtx-1060-6gb", name: "GTX 1060", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 6 },
+  { id: "rtx-4050-laptop", name: "RTX 4050 Laptop", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 6 },
+  { id: "rtx-3070-ti", name: "RTX 3070 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "gtx-1070-ti", name: "GTX 1070 Ti", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rx-6700-xt", name: "RX 6700 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 12 },
+  { id: "gtx-1050-ti", name: "GTX 1050 Ti", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 4 },
+  { id: "rtx-2080-ti-11gb", name: "RTX 2080 Ti", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 11 },
+  { id: "rtx-2080-ti-22gb", name: "RTX 2080 Ti", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 22 },
+  { id: "rx-7800-xt", name: "RX 7800 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "gtx-1080-ti", name: "GTX 1080 Ti", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 11 },
+  { id: "v100-16gb", name: "V100", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "v100-32gb", name: "V100", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 32 },
+  { id: "rtx-3060-mobile", name: "RTX 3060 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 6 },
+  { id: "rtx-2070-super", name: "RTX 2070 SUPER", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-3090-ti", name: "RTX 3090 Ti", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 24 },
+  { id: "rtx-2060", name: "RTX 2060", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 6 },
+  { id: "rx-6800", name: "RX 6800", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "rtx-2070", name: "RTX 2070", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "r9700-pro", name: "R9700 PRO", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 32 },
+  { id: "rx-7900-xt", name: "RX 7900 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 20 },
+  { id: "rx-9060-xt-8gb", name: "RX 9060 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "rx-9060-xt-16gb", name: "RX 9060 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "h200", name: "H200", vendor: "NVIDIA", family: "NVIDIA SXM", backend: "cuda", vram: 141 },
+  { id: "rx-6600", name: "RX 6600", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "rtx-pro-6000-max-q", name: "RTX PRO 6000 Max-Q", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 96 },
+  { id: "rtx-2080", name: "RTX 2080", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-6000-ada", name: "RTX 6000 Ada", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "rtx-4070-mobile", name: "RTX 4070 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-4070-laptop", name: "RTX 4070 Laptop", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-3070-ti-mobile", name: "RTX 3070 Ti Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rx-6950-xt", name: "RX 6950 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "rtx-a6000", name: "RTX A6000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "rx-7600-xt-8gb", name: "RX 7600 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "rx-7600-xt-16gb", name: "RX 7600 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "rtx-2060-mobile", name: "RTX 2060 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 6 },
+  { id: "p40", name: "P40", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "rtx-a4000", name: "RTX A4000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "l40s", name: "L40s", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "rtx-5070-mobile", name: "RTX 5070 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rx-9070", name: "RX 9070", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "arc-b580", name: "Arc B580", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 12 },
+  { id: "l4", name: "L4", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "b200", name: "B200", vendor: "NVIDIA", family: "NVIDIA SXM", backend: "cuda", vram: 192 },
+  { id: "arc-a770-8gb", name: "Arc A770", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 8 },
+  { id: "arc-a770-16gb", name: "Arc A770", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 16 },
+  { id: "apple-m2-ultra-64gb", name: "Apple M2 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 64 },
+  { id: "apple-m2-ultra-96gb", name: "Apple M2 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 96 },
+  { id: "apple-m2-ultra-128gb", name: "Apple M2 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 128 },
+  { id: "apple-m2-ultra-192gb", name: "Apple M2 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 192 },
+  { id: "rtx-5060-mobile", name: "RTX 5060 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-5090-mobile", name: "RTX 5090 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 24 },
+  { id: "rtx-5080-mobile", name: "RTX 5080 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rtx-5070-ti-mobile", name: "RTX 5070 Ti Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "apple-m1-ultra-16gb", name: "Apple M1 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 16 },
+  { id: "apple-m1-ultra-24gb", name: "Apple M1 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 24 },
+  { id: "apple-m1-ultra-32gb", name: "Apple M1 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 32 },
+  { id: "apple-m1-ultra-64gb", name: "Apple M1 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 64 },
+  { id: "apple-m1-ultra-96gb", name: "Apple M1 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 96 },
+  { id: "apple-m1-ultra-128gb", name: "Apple M1 Ultra", vendor: "Apple", family: "Apple Silicon Ultra", backend: "metal", vram: 128 },
+  { id: "rtx-a2000-6gb", name: "RTX A2000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 6 },
+  { id: "rtx-a2000-12gb", name: "RTX A2000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 12 },
+  { id: "arc-pro-b70", name: "Arc Pro B70", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 32 },
+  { id: "rtx-4000-ada", name: "RTX 4000 Ada", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 20 },
+  { id: "rx-6600-xt", name: "RX 6600 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "rtx-2000-ada", name: "RTX 2000 Ada", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "jetson-orin-nano-8gb", name: "Jetson Orin Nano 8GB", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 8 },
+  { id: "p100", name: "P100", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "rx-5500-xt-4gb", name: "RX 5500 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 4 },
+  { id: "rx-5500-xt-8gb", name: "RX 5500 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "radeon-780m-16gb", name: "Radeon 780M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-780m-24gb", name: "Radeon 780M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-780m-32gb", name: "Radeon 780M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-780m-48gb", name: "Radeon 780M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-780m-64gb", name: "Radeon 780M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-780m-96gb", name: "Radeon 780M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "rtx-a5000-8gb", name: "RTX A5000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-a5000-12gb", name: "RTX A5000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 12 },
+  { id: "rtx-a5000-24gb", name: "RTX A5000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "mi50-16gb", name: "MI50", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 16 },
+  { id: "mi50-32gb", name: "MI50", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 32 },
+  { id: "rtx-4090-mobile", name: "RTX 4090 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rtx-3080-mobile-8gb", name: "RTX 3080 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-3080-mobile-16gb", name: "RTX 3080 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "arc-a750", name: "Arc A750", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 8 },
+  { id: "rtx-4080-mobile", name: "RTX 4080 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "rx-7700-xt", name: "RX 7700 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 12 },
+  { id: "a40", name: "A40", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "a10", name: "A10", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "b300", name: "B300", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 288 },
+  { id: "gtx-1070", name: "GTX 1070", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-4090-laptop", name: "RTX 4090 Laptop", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 16 },
+  { id: "rtx-5000-ada", name: "RTX 5000 Ada", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 32 },
+  { id: "radeon-pro-vii-16gb", name: "Radeon Pro VII", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-pro-vii-32gb", name: "Radeon Pro VII", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "rtx-4090d-24gb", name: "RTX 4090D", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 24 },
+  { id: "rtx-4090d-48gb", name: "RTX 4090D", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 48 },
+  { id: "rtx-4080-laptop", name: "RTX 4080 Laptop", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 12 },
+  { id: "l40", name: "L40", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "rx-6650-xt", name: "RX 6650 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "jetson-agx-orin-64gb", name: "Jetson AGX Orin 64GB", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 64 },
+  { id: "gtx-1080", name: "GTX 1080", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-4500-ada", name: "RTX 4500 Ada", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "rtx-2060-12gb", name: "RTX 2060 12GB", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 12 },
+  { id: "rx-7900-gre", name: "RX 7900 GRE", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 16 },
+  { id: "rtx-5090-d", name: "RTX 5090 D", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 32 },
+  { id: "arc-b60-24gb", name: "Arc B60", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 24 },
+  { id: "arc-b60-48gb", name: "Arc B60", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 48 },
+  { id: "rtx-pro-5000-48gb", name: "RTX PRO 5000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "rtx-pro-5000-72gb", name: "RTX PRO 5000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 72 },
+  { id: "arc-b50", name: "Arc B50", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 16 },
+  { id: "rx-6700", name: "RX 6700", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 10 },
+  { id: "rtx-2050-mobile", name: "RTX 2050 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 4 },
+  { id: "quadro-p6000", name: "Quadro P6000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "mi300", name: "MI300", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 192 },
+  { id: "rtx-4000-sff-ada", name: "RTX 4000 SFF Ada", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 20 },
+  { id: "rtx-pro-4000", name: "RTX PRO 4000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "radeon-890m-16gb", name: "Radeon 890M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-890m-24gb", name: "Radeon 890M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-890m-32gb", name: "Radeon 890M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-890m-48gb", name: "Radeon 890M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-890m-64gb", name: "Radeon 890M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-890m-96gb", name: "Radeon 890M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "rx-5700-xt", name: "RX 5700 XT", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "apple-macbook-neo", name: "Apple MacBook Neo", vendor: "Apple", family: "Apple Silicon", backend: "metal", vram: 8 },
+  { id: "rtx-a2000-mobile-4gb", name: "RTX A2000 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 4 },
+  { id: "rtx-a2000-mobile-8gb", name: "RTX A2000 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-titan", name: "RTX Titan", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "rtx-5050", name: "RTX 5050", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-2070-super-mobile", name: "RTX 2070 SUPER Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "jetson-nano", name: "Jetson Nano", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 4 },
+  { id: "rtx-5050-mobile", name: "RTX 5050 Mobile", vendor: "NVIDIA", family: "RTX", backend: "cuda", vram: 8 },
+  { id: "rtx-pro-4500-ws", name: "RTX PRO 4500 WS", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 32 },
+  { id: "rtx-a3000-mobile-6gb", name: "RTX A3000 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 6 },
+  { id: "rtx-a3000-mobile-12gb", name: "RTX A3000 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 12 },
+  { id: "l20", name: "L20", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "jetson-orin-nx-16gb", name: "Jetson Orin NX 16GB", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 16 },
+  { id: "rx-5700", name: "RX 5700", vendor: "AMD", family: "AMD Radeon", backend: "rocm", vram: 8 },
+  { id: "rtx-pro-2000", name: "RTX PRO 2000", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "mi60", name: "MI60", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 32 },
+  { id: "a2", name: "A2", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "rtx-5880-ada", name: "RTX 5880 Ada", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 48 },
+  { id: "radeon-pro-v620", name: "Radeon Pro V620", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "arc-a380", name: "Arc A380", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 6 },
+  { id: "rtx-a5000-mobile", name: "RTX A5000 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "radeon-860m-16gb", name: "Radeon 860M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-860m-24gb", name: "Radeon 860M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-860m-32gb", name: "Radeon 860M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-860m-48gb", name: "Radeon 860M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-860m-64gb", name: "Radeon 860M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-860m-96gb", name: "Radeon 860M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "arc-b570", name: "Arc B570", vendor: "INTEL", family: "Intel Arc", backend: "intel", vram: 10 },
+  { id: "mi250", name: "MI250", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 128 },
+  { id: "mi100", name: "MI100", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 32 },
+  { id: "rtx-pro-4000-sff", name: "RTX PRO 4000 SFF", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "radeon-610m-16gb", name: "Radeon 610M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-610m-24gb", name: "Radeon 610M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-610m-32gb", name: "Radeon 610M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-610m-48gb", name: "Radeon 610M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-610m-64gb", name: "Radeon 610M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-610m-96gb", name: "Radeon 610M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "mi210", name: "MI210", vendor: "AMD", family: "AMD Instinct", backend: "rocm", vram: 64 },
+  { id: "jetson-orin-nano-4gb", name: "Jetson Orin Nano 4GB", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 4 },
+  { id: "rtx-a4000-mobile", name: "RTX A4000 Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "jetson-agx-orin-32gb", name: "Jetson AGX Orin 32GB", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 32 },
+  { id: "jetson-agx-xavier-32gb", name: "Jetson AGX Xavier", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 32 },
+  { id: "jetson-agx-xavier-64gb", name: "Jetson AGX Xavier", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 64 },
+  { id: "t10", name: "T10", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "radeon-760m-16gb", name: "Radeon 760M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-760m-24gb", name: "Radeon 760M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-760m-32gb", name: "Radeon 760M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-760m-48gb", name: "Radeon 760M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-760m-64gb", name: "Radeon 760M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-760m-96gb", name: "Radeon 760M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "rtx-3500-ada-mobile", name: "RTX 3500 Ada Mobile", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 12 },
+  { id: "pro-w7800-32gb", name: "PRO W7800", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "pro-w7800-48gb", name: "PRO W7800", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-680m-16gb", name: "Radeon 680M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-680m-24gb", name: "Radeon 680M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-680m-32gb", name: "Radeon 680M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-680m-48gb", name: "Radeon 680M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-680m-64gb", name: "Radeon 680M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-680m-96gb", name: "Radeon 680M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "a30", name: "A30", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 24 },
+  { id: "radeon-880m-16gb", name: "Radeon 880M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-880m-24gb", name: "Radeon 880M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-880m-32gb", name: "Radeon 880M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-880m-48gb", name: "Radeon 880M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-880m-64gb", name: "Radeon 880M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-880m-96gb", name: "Radeon 880M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "pro-w7900", name: "PRO W7900", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "h20", name: "H20", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 96 },
+  { id: "radeon-740m-16gb", name: "Radeon 740M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-740m-24gb", name: "Radeon 740M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-740m-32gb", name: "Radeon 740M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-740m-48gb", name: "Radeon 740M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-740m-64gb", name: "Radeon 740M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-740m-96gb", name: "Radeon 740M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "a800-40gb", name: "A800", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 40 },
+  { id: "a800-80gb", name: "A800", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 80 },
+  { id: "jetson-orin-nx-8gb", name: "Jetson Orin NX 8GB", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 8 },
+  { id: "jetson-xavier-nx-8gb", name: "Jetson Xavier NX", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 8 },
+  { id: "jetson-xavier-nx-16gb", name: "Jetson Xavier NX", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 16 },
+  { id: "rtx-a5000-max-q", name: "RTX A5000 Max-Q", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 16 },
+  { id: "jetson-tx2-4gb", name: "Jetson TX2", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 4 },
+  { id: "jetson-tx2-8gb", name: "Jetson TX2", vendor: "NVIDIA", family: "Jetson", backend: "cuda", vram: 8 },
+  { id: "h800", name: "H800", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 80 },
+  { id: "rtx-a4000-max-q", name: "RTX A4000 Max-Q", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "radeon-840m-16gb", name: "Radeon 840M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-840m-24gb", name: "Radeon 840M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-840m-32gb", name: "Radeon 840M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-840m-48gb", name: "Radeon 840M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-840m-64gb", name: "Radeon 840M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-840m-96gb", name: "Radeon 840M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+  { id: "rtx-a2000-max-q-4gb", name: "RTX A2000 Max-Q", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 4 },
+  { id: "rtx-a2000-max-q-8gb", name: "RTX A2000 Max-Q", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 8 },
+  { id: "rtx-a2000-embedded", name: "RTX A2000 Embedded", vendor: "NVIDIA", family: "GPU", backend: "cuda", vram: 4 },
+  { id: "radeon-820m-16gb", name: "Radeon 820M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 16 },
+  { id: "radeon-820m-24gb", name: "Radeon 820M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 24 },
+  { id: "radeon-820m-32gb", name: "Radeon 820M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 32 },
+  { id: "radeon-820m-48gb", name: "Radeon 820M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 48 },
+  { id: "radeon-820m-64gb", name: "Radeon 820M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 64 },
+  { id: "radeon-820m-96gb", name: "Radeon 820M", vendor: "AMD", family: "GPU", backend: "rocm", vram: 96 },
+];
+
+/** "A100 80GB" — how a configuration reads in the sentence. */
+export function hardwareLabel(h: HardwareConfig): string {
+  return `${h.name} ${h.vram}GB`;
+}

lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn"

next.config.ts

@@ -1,7 +1,9 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // Spaces runs the app from a Docker image; standalone bundles the server and
+  // only the node_modules it actually reaches.
+  output: "standalone",
 };
 
 export default nextConfig;

package.json

@@ -9,9 +9,15 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.2.6",
+    "lucide-react": "^1.42.0",
     "next": "16.3.4",
     "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "shadcn": "^4.21.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",