Recommend methods by source: on the fly or from a checkpoint

The receipt now lists a curated set of methods per precision, in
recommendation order, chosen by a new "quantized on the fly / from a
checkpoint" slot in the sentence. Adds NVFP4, GGUF, AutoRound and Quark;
drops HQQ, optimum-quanto, HIGGS and AQLM, which no list includes.

Also drops the ?/* qualifiers from the receipt and the focus outline on
the precision hit targets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/compare/page.tsx

@@ -4,6 +4,7 @@ import CapabilityRow from "@/components/CapabilityRow";
 import {
   GOALS,
   GPUS,
+  SOURCES,
   methodsFor,
   round1,
 } from "@/lib/data";
@@ -16,7 +17,8 @@ export default async function ComparePage({ searchParams }: PageProps<"/compare"
   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);
+  const source = SOURCES.find((s) => s.id === first(sp.source, "on-the-fly")) ?? SOURCES[0];
+  const methods = methodsFor(bits, gpu.backend, goal, source.id);
   // 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, ""));

app/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import SentenceCombobox from "@/components/SentenceCombobox";
+import SentenceSelect from "@/components/SentenceSelect";
 import ModelInput from "@/components/ModelInput";
 import MemoryBar from "@/components/MemoryBar";
 import MethodReceipt from "@/components/MethodReceipt";
@@ -9,16 +10,19 @@ import {
   GOALS,
   GPUS,
   PRECISIONS,
+  SOURCES,
   methodsFor,
   overheadGB,
   weightsGB,
   type Model,
+  type Source,
 } from "@/lib/data";
 
 export default function CalculatorPage() {
   const [model, setModel] = useState<Model | null>(null);
   const [gpuId, setGpuId] = useState("a100-80gb");
   const [hoverBits, setHoverBits] = useState<number | null>(null);
+  const [source, setSource] = useState<Source>("on-the-fly");
 
   const gpu = GPUS.find((g) => g.id === gpuId)!;
   const contextTokens = 8192;
@@ -31,9 +35,9 @@ export default function CalculatorPage() {
     PRECISIONS.find((p) => weightsGB(model, p) + overhead <= gpu.vram);
   const shownBits = hoverBits ?? bestFitting ?? 4;
 
-  // No goal filter: every method that reaches this precision on this backend.
+  // No goal filter: every recommended method for this precision and backend.
   const methods = hoverBits
-    ? methodsFor(hoverBits, gpu.backend, GOALS[0])
+    ? methodsFor(hoverBits, gpu.backend, GOALS[0], source)
     : [];
 
   return (
@@ -54,6 +58,15 @@ export default function CalculatorPage() {
           options={GPUS.map((g) => ({ id: g.id, label: g.label }))}
           onChange={setGpuId}
         />
+        <span className="text-[40px] font-medium leading-[44px] tracking-[-0.04em] text-stone">
+          quantized
+        </span>
+        <SentenceSelect
+          ariaLabel="Where the quantized weights come from"
+          value={source}
+          options={SOURCES}
+          onChange={(id) => setSource(id as Source)}
+        />
       </div>
 
       <div className="pt-11">
@@ -64,7 +77,7 @@ export default function CalculatorPage() {
           selectedBits={shownBits}
           hoverBits={hoverBits}
           onHoverBits={setHoverBits}
-          hoverCard={<MethodReceipt methods={methods} />}
+          hoverCard={<MethodReceipt methods={methods} source={source} />}
         />
       </div>
     </main>

components/MemoryBar.tsx

@@ -250,7 +250,7 @@ function FilledBar({ model, gpu, contextTokens, selectedBits, onHoverBits, hover
           width={HIT_W}
           height={barBottom}
           fill="transparent"
-          className="cursor-pointer"
+          className="cursor-pointer outline-none"
           onMouseEnter={() => {
             cancelClose();
             onHoverBits?.(t.bits);

components/MethodReceipt.tsx

@@ -1,4 +1,4 @@
-import type { Method, Support } from "@/lib/data";
+import type { Method, Source, Support } from "@/lib/data";
 
 /**
  * The four capabilities, in the order they appear on every row. Lane widths
@@ -13,14 +13,12 @@ const LANES = [
 ] as const;
 
 interface Cell {
-  /** the word as rendered, with its qualifier suffix */
   text: string;
   support: Support;
 }
 
 function cell(label: string, support: Support): Cell {
-  const suffix = support === "unknown" ? "?" : support === "partial" ? "*" : "";
-  return { text: label + suffix, support };
+  return { text: label, support };
 }
 
 function cellsFor(m: Method): Cell[] {
@@ -39,28 +37,26 @@ function toneFor(support: Support): string {
   return "text-ash";
 }
 
-/** Most capable first, so the row shapes go from solid to sparse. */
-function score(m: Method): number {
-  return cellsFor(m).filter((c) => c.support === "yes").length;
-}
-
-export default function MethodReceipt({ methods }: { methods: Method[] }) {
+/**
+ * Methods arrive in recommendation order, best first, so the receipt keeps it.
+ */
+export default function MethodReceipt({ methods, source }: { methods: Method[]; source: Source }) {
   if (methods.length === 0) {
     return (
       <div className="w-[466px] rounded-[6px] bg-paper px-[17px] py-4 ring-hairline shadow-[0_6px_20px_rgb(0_0_0/7%)]">
         <p className="font-mono text-[13px] text-graphite">
-          Nothing supports this precision here.
+          {source === "on-the-fly"
+            ? "Nothing quantizes to this precision on the fly. Try a checkpoint."
+            : "Nothing supports this precision here."}
         </p>
       </div>
     );
   }
 
-  const ranked = [...methods].sort((a, b) => score(b) - score(a));
-
   return (
     <div className="w-[466px] rounded-[6px] bg-paper px-[17px] pb-[17px] pt-[15px] ring-hairline shadow-[0_6px_20px_rgb(0_0_0/7%)]">
       <div className="flex flex-col gap-[9px]">
-        {ranked.map((m) => (
+        {methods.map((m) => (
           <div key={m.id} className="flex items-center gap-[9px]">
             <a
               href={m.docs}
@@ -99,9 +95,6 @@ export default function MethodReceipt({ methods }: { methods: Method[] }) {
         <p className="font-mono text-[10px] leading-[15px] tracking-[0.04em] text-graphite">
           save = save_pretrained keeps it quantized
         </p>
-        <p className="font-mono text-[10px] leading-[15px] tracking-[0.04em] text-ash">
-          ? = the docs do not say · * = partly
-        </p>
       </div>
     </div>
   );

lib/data.ts

@@ -115,24 +115,10 @@ export const METHODS: Method[] = [
     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],
+    bits: [2, 3, 4, 8],
     backends: ["cuda", "rocm", "intel", "cpu"],
     onTheFly: false,
     compile: "no",
@@ -158,60 +144,74 @@ export const METHODS: Method[] = [
     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"],
+    id: "finegrained-fp8",
+    name: "FINEGRAINED_FP8",
+    bits: [8],
+    backends: ["cuda", "intel"],
     onTheFly: true,
-    compile: "yes",
+    compile: "no",
     peft: "no",
-    serializable: "no",
+    serializable: "yes",
     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",
+    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",
   },
   {
-    id: "higgs",
-    name: "HIGGS",
-    bits: [2, 4],
+    id: "nvfp4",
+    name: "NVFP4",
+    bits: [4],
     backends: ["cuda"],
     onTheFly: true,
     compile: "yes",
     peft: "no",
-    serializable: "yes",
+    serializable: "no",
     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",
+    blurb: "NVIDIA's 4-bit float format, run through Hub kernels. Needs a Blackwell card.",
+    config: "see the NVFP4 docs",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/nvfp4",
   },
   {
-    id: "aqlm",
-    name: "AQLM",
-    bits: [2],
-    backends: ["cuda", "intel", "cpu"],
+    id: "gguf",
+    name: "GGUF",
+    bits: [2, 3, 4, 8],
+    backends: ["cuda", "metal", "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",
+    peft: "no",
+    serializable: "no",
+    setupMinutes: 0,
+    blurb: "The llama.cpp format. Pick a file from any of the GGUF repos on the Hub.",
+    config: 'from_pretrained(repo, gguf_file="model-Q4_K_M.gguf")',
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/gguf",
   },
   {
-    id: "finegrained-fp8",
-    name: "FINEGRAINED_FP8",
-    bits: [8],
-    backends: ["cuda", "intel"],
-    onTheFly: true,
+    id: "auto-round",
+    name: "AutoRound",
+    bits: [2, 3, 4, 8],
+    backends: ["cuda", "intel", "cpu"],
+    onTheFly: false,
     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",
+    blurb: "Intel's weight-rounding method, with checkpoints from 2 to 8 bits.",
+    config: "load an AutoRound checkpoint",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/auto_round",
+  },
+  {
+    id: "quark",
+    name: "Quark",
+    bits: [2, 4, 8],
+    backends: ["cuda", "rocm", "metal", "intel", "cpu"],
+    onTheFly: false,
+    compile: "unknown",
+    peft: "no",
+    serializable: "no",
+    setupMinutes: 0,
+    blurb: "AMD's toolkit. Loads Quark checkpoints on AMD and NVIDIA hardware.",
+    config: "load a Quark checkpoint",
+    docs: "https://huggingface.co/docs/transformers/main/en/quantization/quark",
   },
 ];
 
@@ -237,14 +237,48 @@ export function totalGB(model: Model, bits: number, contextTokens: number): numb
   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;
-  });
+/**
+ * Where the quantized weights come from: made as the model loads, or read
+ * from a checkpoint someone already quantized.
+ */
+export type Source = "on-the-fly" | "checkpoint";
+
+export const SOURCES: { id: Source; label: string }[] = [
+  { id: "on-the-fly", label: "on the fly" },
+  { id: "checkpoint", label: "from a checkpoint" },
+];
+
+const BELOW_4 = ["gguf", "auto-round", "compressed-tensors", "quark"];
+
+/**
+ * The methods we recommend for each source and precision, best first. Anything
+ * not listed is left out even when it technically supports the combination.
+ */
+export const RECOMMENDED: Record<Source, Record<number, string[]>> = {
+  "on-the-fly": {
+    8: ["finegrained-fp8", "bitsandbytes", "torchao"],
+    4: ["bitsandbytes", "torchao", "nvfp4"],
+    3: [],
+    2: [],
+  },
+  checkpoint: {
+    8: ["finegrained-fp8", "bitsandbytes", "torchao", "gguf", "auto-round", "compressed-tensors", "quark"],
+    4: ["bitsandbytes", "torchao", "nvfp4", "gguf", "auto-round", "gptqmodel", "awq", "compressed-tensors", "quark"],
+    3: BELOW_4,
+    2: BELOW_4,
+  },
+};
+
+export function methodsFor(bits: number, backend: Backend, goal: Goal, source: Source): Method[] {
+  return (RECOMMENDED[source][bits] ?? [])
+    .map((id) => METHODS.find((m) => m.id === id)!)
+    .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 {