Repository navigation
User Guide HUD
The HUD comprises the graphical elements overlaid around the 3D canvas that provide context about the current scene, including live metrics and architectural formulas.
Without context, 3D shapes are just abstract art. The HUD grounds the visual geometry in mathematical reality by displaying exact parameter counts, probabilities, and the LaTeX formulas governing the active operation.
The HUD is built with standard HTML/CSS placed inside the AppShell grid, positioned over the canvas via Z-index where necessary. It uses KaTeX to render high-quality math formulas fetched from lib/formulas.ts.
- Mathematical Formula: Automatically displays the architecture-aware equation for the active component. For example, if a Llama model hits an MLP block, it displays the SwiGLU formula. If GPT-2 hits an MLP, it displays standard GELU.
- Component Stats: Shows the parameter count for the specific component currently highlighted in 3D.
- Displays global information such as the loaded model name, execution device (
mps/cuda), and total layers.
- Indicates whether the current step is a Prefill (processing the prompt) or a Decode (generating a new token).
- Shows
n_positions(tokens computed this step) andcache_len(cached tokens reused).
- A persistent panel showing the Top-1 token prediction at every intermediate layer, revealing how the model "makes up its mind" before the final softmax.
flowchart TD
Store[Zustand Store] --> ActiveOp[Active Operation]
Store --> ModelArch[Model Architecture]
ActiveOp --> FormulaLookup[Formula Library]
ModelArch --> FormulaLookup
FormulaLookup --> LaTeX[KaTeX String]
LaTeX --> HUD[Right Panel UI]
| Previous | Home | Next |
|---|---|---|
| Camera Controls | Home | Timeline |
TokenPrint Wiki | Home | Getting Started | User Guide | Concepts | Architecture | API | GitHub
TokenPrint is an interactive 3D visualization platform for exploring transformer architectures, tensors, and real-time LLM inference.
- User Guide
- Architecture Explorer
- Live Inference
- Tensor Inspector
- Camera Controls
- HUD
- Timeline
- Scene Navigation
- Transformer Concepts
- Tokenization
- Embeddings
- Positional Encoding
- RoPE
- Multi-Head Attention
- KV Cache
- LayerNorm
- Feed Forward Network
- Residual Connections
- Logits
- Softmax
- Sampling
- Autoregressive Generation
- Visualization System
- Scene Graph
- Geometry
- Materials
- Animation System
- Color Mapping
- Camera System
- Interaction Model
- Architecture
- Overall Architecture
- Frontend
- Backend
- WebSocket Protocol
- Data Pipeline
- Renderer
- Event System