HomeAI & Machine LearningToken Attention Graph

Self-Attention Simulator

Interactive self-attention simulator: watch a sentence's tokens compute query/key dot products, softmax into an attention matrix, and blend value vectors — with temperature, head focus and sentence choice tunable in real time.

AI & Machine Learning2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
natural-language-processing-data-science ↗ Open standalone

Transformer language models like BERT and GPT understand a sentence by letting every token look at every other token before deciding what it means. This simulator renders that self-attention step directly: pick a sentence, and watch each token compute a query/key dot-product score against the others, normalize the row into a probability distribution with softmax, and blend value vectors accordingly. The heatmap in the middle is the live attention matrix — brighter cells mean stronger attention — while the token graph below animates the flow of information as edges whose thickness tracks the current weight. Adjust temperature and key noise to see how sharply or loosely the model can disambiguate an ambiguous word like "bank" from its neighbors.

⚙ Under the hood

Visualizes self-attention mechanisms by showing query-key dot products and a softmax weight matrix as edge thickness in a token graph.

Natural Language ProcessingData ScienceMachine LearningToken Attention

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)