Transformer Visualizer

p5.js Engine
H1
H2
H3
H4
ALL
Click any matrix cell or drag vector trajectory handles to modify Q/K dot products
Micro-State Inspector Head 1: "Okra" → "White"
1. Scaled Dot-Product Mechanics
Q · Kᵀ / √d_k = 0.62 · 0.18 = 0.82
Raw Dot Product (Q_i · K_j): 1.640
Scaling Factor 1/√d_k (d_k=4): 0.500
Temperature Adjusted Score: 0.820
2. Softmax Context Probabilities
3. Residual Connection & LayerNorm
LN(X + Output) = (X' - μ) / σ
Input Residual Norm (||E_i||): 1.414
Attention Output Delta (||Δv||): 0.832
Post-LayerNorm Variance (σ²): 1.000
4. Contextualized Token Embedding Vector

Why "White Okra" Context Matters

In natural language, the token "Okra" isolated carries ambiguous physical properties. When passed through multi-head self-attention alongside "White", Query-Key vectors align to shift the contextual embedding trajectory toward rare botanical cultivars, demonstrating how attention contextualizes raw token embeddings.

Multi-Head Attention Projections

Multiple attention heads project embeddings into distinct subspaces simultaneously. While Head 1 focuses on modifier relationships ("White" → "Okra"), Head 2 captures action-object pairings ("Harvest" → "Okra"), allowing LLMs to process syntactical and semantic relations in parallel.

Residual Paths & Layer Normalization

The residual connection ($X + \text{SelfAttention}(X)$) preserves original positional token information, preventing vanishing gradients. LayerNorm stabilizes vector scale across transformer depth, ensuring smooth optimization across deep architectures.

Enjoy this tool? Build your own with Super