LLM Visualizer

This browser-side teaching surface separates several core language-model steps: tokenization, embeddings, self-attention, next-token sampling, temperature/top-p, and KV cache. It is not a hosted inference service; it uses small controlled examples so readers can see what each step changes.

Object	What you can vary	What to record	Boundary
Tokens	Input text, token fragments, and sequence positions.	Token count for the same sentence under different splits.	The demo splitter is not a full commercial tokenizer.
Attention	Attention weights, context window, and positional effects.	Which token contributes most to the output and whether that matches intuition.	The small matrix explains the mechanism, not real model capability.
Sampling	Temperature, top-p, and candidate-token probability.	How output diversity changes for the same prompt.	Sampling demonstrates randomness; it does not guarantee factual accuracy.
KV cache	Processed tokens, reusable state, and incremental generation.	New computation per step and which state is reused.	The demo shows the concept, not production memory scheduling.

LLM visualizer

From tokens to next-token generation

This teaching lab uses only browser-side simulation data so you can inspect tokenization, embeddings, self-attention, sampling, and KV cache without loading a real model.

Input

Choose an example or type a short prompt

For explainability, v1 keeps the first 16 tokens and uses deterministic teaching weights.

Prompt

Mechanism walkthrough

Watch one LLM forward pass like a debugger

Step through the LLM pipeline and the matching panel will open automatically.

Suggested order

Start with fixed temperature and inspect attention plus token positions. Then change only top-p or only temperature. Finish with KV cache and ask why incremental generation avoids repeated work. One changed variable per run makes the result easier to verify.