llmPopular Client-Side Only

Self-Attention Heatmap Visualizer

Interactive Scaled Dot-Product Attention matrix. Select any token to view real-time attention weights across the entire sentence.

Concept Breakdown: Self-Attention Scoring & Contextual Weighting

1. The Student with a Highlighter

When you read "The animal did not cross the street because it was tired", your brain instantly highlights "animal" when looking at "it". Attention is the AI's digital highlighter linking words that explain each other.

2. Why Context Changes Meaning

The word "bank" means money in "river bank" vs "savings bank". By computing attention weights between all words at once, the AI lets every word borrow context from its neighbors.

3. Try Clicking Below!

Click any word in the black bar below. Watch the orange and green heat bars jump to show which other words the AI connects to that word!

Example Sentence:
SELECT A QUERY TOKEN (Click any word below):Query = "it"

Attention Distribution for Query: "it"

Attention Temp:1.0
The
7.3%
animal
15.8%
didn't
7.1%
cross
7.3%
the
7.1%
street
7.8%
because
7.2%
it
9.4%
was
8.5%
too
7.7%
tired.
14.7%
How Attention Computes This Result:

1. Query Vector (q): Generated for token "it".
2. Key Vectors (k): Compared with q via dot product (q · k).
3. Scaled Softmax: Dot products are scaled by 1 / √d_k and normalized with Softmax, producing the percentage bars above.
4. Value Weighted Sum (v): Attention weights blend value vectors into the final contextual embedding.

Interactive Challenge: Co-Reference Resolution

In Example #1, click on the pronoun "it" in the sentence strip above to see what the model thinks "it" refers to.

Quick Reference & Instructions

Simple steps, pro tips, and execution details

1

Provide Inputs

Type, paste, or select your values in the form fields below.

2

Instant Live Analysis

Calculations and formatting happen automatically with zero delay as you type.

3

Copy or Use Output

Copy results or apply the clean output directly to your projects.

How It Works

Calculates query-key dot products for each token in an educational sentence, applies scaling and softmax, and animates attention weight flow.

Formula & Logic

Attention(Q,K,V)=softmax(QKTdk)V\text{Attention}(Q,K,V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V
Example: Select "it" in "The animal didn't cross the street because it was too tired" to see high attention affinity toward "animal".

Frequently Asked Questions

Common questions about calculations, assumptions, and edge cases.

Yes, Self-Attention Heatmap Visualizer is 100% free with unlimited calculations and zero paywalls or subscriptions.