Visualisations

A gallery of the interactive React components used across this site.

Counter

A minimal interactive island: local state only, no external data.

0

Float32 Viewer

An interactive IEEE-754 float32 bit-layout visualizer. Drag the slider to watch the sign, exponent, and significand bits flip live.

float32
S
EXPONENT
SIGNIFICAND
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
10
1.5

Integer Bit Viewer

An interactive integer bit-layout visualizer for signed and unsigned values, updating each bit as you drag.

unsigned int8
133=
128
10
64
10
32
10
16
10
8
10
4
10
2
10
1
10

Precision Rounder

Drag a value across the BF16, FP8, and FP4 grids to feel how rounding error grows as bit width shrinks.

round onto a grid
BFLOAT160.59375FLOAT80.625err 0.03125FLOAT40.5err 0.09375

Prefill vs Decode — Forward Passes

The same staircase drawn as forward passes: prefill swallows the whole prompt in one pass (about the cost of generating a single token), while decode spends a full pass on every token.

Prefill & Autoregressive Decode
PROMPTGENERATEDmemorycomputekv cacheprefillpass 1decode 1pass 2decode 2pass 3decode 3pass 4decode 4pass 5decode 5pass 6decode 6pass 7outputthe tokensThequickbrownfoxjumpsoverthelazydog.

Every forward pass streams the weights (memory, warm) and then runs the math (compute, the green sliver). Prefill does the whole prompt in a single pass — for a short prompt that's about the wall-clock of generating one token — so it's one block, not one per prompt token. Decode then spends a full pass on every token, reusing the cached keys and values (faint green) from every earlier position. Collapsing that tower of decode passes back toward a single pass is exactly what speculative decoding chases.

Autoregressive Generation

A timeline of token-by-token generation, showing how each new token is fed back in as input for the next step.

Autoregressive: Memory vs Compute
MEMORYstream weightsCOMPUTEthe mathOUTPUTgenerated text~0%~0%Thecatsatonthemat.

The weights aren't cold — they live in the GPU's high-bandwidth memory (HBM) for the whole session. "Stream weights" means moving them from HBM into the tiny on-chip memory beside the compute cores, which is far too small to hold the model, so every forward pass re-streams the full set. That HBM→chip trip, once per token, is the bottleneck — not a disk load.

Speculative Decoding

Animates the draft-then-verify loop: a small model proposes several tokens, the target model checks them in one pass, and only the accepted prefix survives.

Speculative Decoding — a draft model guesses, the target verifies
memorycomputekv cacheacceptrejectcorrectprefilltarget · pass 1decodetarget · pass 2draftersmall model · 4 passesverifiertarget · pass 3drafted3 kept · 1 fixeddraftersmall model · 4 passesverifiertarget · pass 4drafted3 kept · 1 fixedPROMPTGENERATEDoutcomecommittedThequickbrownfox
0 target passes · 0 draft passes · — tokens / verify · plain decode: 9 passes

A schematic, not a benchmark: the block sizes here are illustrative only and do not reflect the true ratio of memory to compute, or the real cost of any single pass — they are drawn to make the sequence legible, not to scale. What they show is the trick: a tiny draft model guesses 4 tokens ahead in a blink, and the expensive target model checks the whole batch in one pass, reusing its cached keys and values (faint green) for every earlier position. Everything up to the first wrong guess is kept, and the rejection itself yields the target's corrected token for free — 9 tokens from 4 target passes instead of 10.

Bar Chart

A general-purpose, data-driven bar chart island for embedding small datasets in prose.