Shipping a Tiny LLM Playground in the Browser

You do not need a GPU farm to teach people how language models think.
A 40-line playground that tokenizes, samples and streams beats any diagram.

The whole trick: a softmax you can watch

// A microscopic "model": scores -> probabilities -> sampled token
const vocab = ["the", "model", "learns", "tokens", "slowly"];
const scores = [0.4, 2.1, 1.6, 0.9, 0.2];

const exps = scores.map(s => Math.exp(s));
const sum = exps.reduce((a, b) => a + b, 0);
const probs = exps.map(e => +(e / sum).toFixed(3));
console.log("probabilities:", probs);

let r = Math.random(), acc = 0, pick = vocab.at(-1);
for (let i = 0; i < vocab.length; i++) { acc += probs[i]; if (r <= acc) { pick = vocab[i]; break; } }
console.log("sampled token ->", pick);

Press Run on the block above. Watching probabilities appear makes the
abstract concrete — that is the entire pedagogical win.

Temperature, visually

• T -> 0 the distribution collapses to argmax (boring, deterministic)
• T -> inf uniform noise (creative, incoherent)
• T = 0.7 the sweet spot where demos feel alive

Ship the playground, not the paper. People learn by dragging sliders.