Inside the LLM — Interactive LLM Inference Visualization
The landing page introducing the 11-stage inference visualization
Inside the LLM is an educational tool designed to demystify how large language models actually work. Instead of treating inference as a black box, it breaks the process into 11 interactive stages that users can explore at their own pace.
Starting with tokenization (using the real GPT tokenizer), users can see how text becomes tokens, how those tokens are embedded into high-dimensional vectors, and how positional encoding gives the model a sense of order. The attention mechanism is visualized with interactive D3 heatmaps that show which tokens attend to which.
The project is honest about what is simulated and what is real computation. It runs entirely in the browser with zero API calls, but the architecture uses a provider pattern that would allow swapping in real model backends without any UI changes. Both beginner and technical explanation modes are available for each stage.
Key Features
11-Stage Inference Pipeline
From tokenization to RAG, each stage of LLM inference is presented as an interactive, explorable step with visual explanations.
D3 Interactive Visualizations
Attention heatmaps and embedding scatterplots built with D3.js let users interactively explore how the model processes information.
Beginner & Technical Modes
Every stage offers two explanation levels — beginner-friendly overviews and detailed technical breakdowns — so the tool serves both curious newcomers and ML practitioners.
Fully Client-Side
The entire application runs in the browser with no API calls. Real GPT tokenization is performed locally, and the provider pattern allows plugging in real model backends.
Screenshots