/* global React, PRESETS, sampleWithTemp, applyTemperature, tailAfterTemperature, fmtPct */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* =====================================================================
SECTION 3 — THE RIGGED CASINO
Just three quiet numbers + a small visual of the asymmetry between
training data and a single die roll. No interactivity — this is
the "exhibit placard" moment.
===================================================================== */
function CasinoSection() {
return (
№ 03
The Rigged Casino
The weights are tuned by trillions of examples.
A standard die was built by a factory. The loaded die was built by
reading nearly every sentence humans have written down. The
imbalance is the entire product.
~15T
Tokens of training text
Roughly the entire public internet, every digitized book,
every transcript, fed in so the die's center of gravity
can settle into the shape of human language.
~100K
Sides on the die
The vocabulary. Every word and word-fragment the model can
possibly emit. Each face carries a weight that shifts with
every preceding token.
10¹²
Numbers that tune the weights
The model's parameters: the mathematical residue of all
that reading. They are the casino's rigging.
A heavily loaded die is all the system needs to sound like it knows the answer.
);
}
/* =====================================================================
SECTION 4 — THE TEMPERATURE KNOB
A dial driving a stream of live rolls. As T rises, the spread of
outcomes widens, and the "tail" — off-script invention — becomes
visible.
===================================================================== */
function TemperatureSection() {
const [T, setT] = useState(1.0);
const [presetId, setPresetId] = useState("paris");
const preset = PRESETS.find(p => p.id === presetId);
const [stream, setStream] = useState([]); // recent rolls
const intervalRef = useRef(null);
// Compute the warped distribution + tail mass for the readouts.
const warped = useMemo(() => applyTemperature(preset.dist, T), [preset, T]);
const tailMass = useMemo(() => tailAfterTemperature(preset.dist, T), [preset, T]);
// Auto-roll: emit a new sample every 700ms while the section is mounted.
useEffect(() => {
intervalRef.current = setInterval(() => {
setStream(prev => {
const result = sampleWithTemp(preset.dist, T);
const isTopToken = result.kind === "known" && result.index === 0;
const isFabrication = result.kind === "tail";
const entry = {
token: result.token,
isTop: isTopToken,
isFab: isFabrication,
t: T.toFixed(2),
id: Math.random().toString(36).slice(2, 9),
};
return [entry, ...prev].slice(0, 6);
});
}, 750);
return () => clearInterval(intervalRef.current);
}, [preset, T]);
// Reset stream when the preset changes.
useEffect(() => { setStream([]); }, [presetId]);
const mood = T < 0.05 ? "Deterministic"
: T < 0.4 ? "Cautious"
: T < 0.9 ? "Steady"
: T < 1.2 ? "Fluent"
: T < 1.6 ? "Loose"
: "Chaotic";
// Convert the temperature value (0 → 1.5) to a dial angle (-135° → +135°).
const angle = -135 + (T / 1.5) * 270;
return (
Prompt
“{preset.prompt} ___”
{PRESETS.map(p => (
))}
{T.toFixed(2)}
Temperature
{mood}
setT(parseFloat(e.target.value))}
/>
0.0 · safe0.71.5 · wild
Live rolls @ T = {T.toFixed(2)}
{/* the warped distribution as small bars, so you can watch the
weights collapse / spread as T changes */}
);
}
// SVG arc helper — describes an arc from startAngle to endAngle (in degrees,
// where 0 = up, +90 = right) around (cx, cy) with radius r.
function describeArc(cx, cy, r, startAngle, endAngle) {
const toXY = (a) => {
const rad = (a - 90) * Math.PI / 180;
return [cx + Math.cos(rad) * r, cy + Math.sin(rad) * r];
};
const [sx, sy] = toXY(startAngle);
const [ex, ey] = toXY(endAngle);
const large = (endAngle - startAngle) > 180 ? 1 : 0;
return `M ${sx} ${sy} A ${r} ${r} 0 ${large} 1 ${ex} ${ey}`;
}
/* =====================================================================
SECTION 5 — HALLUCINATION GRID
"Roll 100 times." Watch the 1.5% London show up. This is the moment
where the metaphor pays off: a hallucination isn't a malfunction, it
is a low-probability roll on a die that was always going to roll.
===================================================================== */
function HallucinationGrid() {
const preset = PRESETS[0]; // Paris example — the cleanest illustration
const [results, setResults] = useState([]); // indexes 0..3 or -1 (tail)
const [running, setRunning] = useState(false);
const tRef = useRef(null);
// Stop any in-flight run on unmount.
useEffect(() => () => clearTimeout(tRef.current), []);
const run = useCallback(() => {
if (running) return;
setResults([]);
setRunning(true);
const total = 100;
let i = 0;
const tick = () => {
i++;
setResults(prev => [...prev, sample(preset.dist)]);
if (i < total) {
tRef.current = setTimeout(tick, 25);
} else {
setRunning(false);
}
};
tick();
}, [preset, running]);
// Aggregate counts for the legend.
const counts = useMemo(() => {
const c = { 0: 0, 1: 0, 2: 0, 3: 0, tail: 0 };
results.forEach(r => { if (r === -1) c.tail++; else c[r]++; });
return c;
}, [results]);
return (
100 independent rolls
“{preset.prompt} ___”
Each dot is a single die roll. Blue dots landed on the heavy
weight: Paris. Red dots are the 1.5%, the 0.4%, the
tail. They read like errors, even though the math
worked exactly as designed.
Paris · {counts[0]}
other · {counts[1] + counts[2] + counts[3] + counts.tail}
{Array.from({ length: 100 }).map((_, i) => {
const r = results[i];
if (r === undefined) {
return ;
}
const wrong = r !== 0;
return (
);
})}
);
}
/* =====================================================================
SECTION 6 — TAKEAWAYS
Three Q/A cards. The "glass-box" payoff.
===================================================================== */
function TakeawaysSection() {
return (
Why does it sound so smart?
Because the die is loaded by trillions of human data points.
On nearly every roll, the heaviest weight is also the
grammatically and factually correct one.
Why does it make up fake citations?
Because it is still, ultimately, rolling a die, and sometimes
low-probability tokens win. A "hallucination" is the math
working perfectly on an unlucky roll.
Why is blaming the prompter a cop-out?
Because no prompter can stop a probability engine from
eventually rolling a low-probability sequence. The error is
built into the mechanism itself.