Attention Mechanism Visualizer

What Is the Attention Mechanism?

The attention mechanism, introduced in the landmark paper "Attention Is All You Need" (Vaswani et al., 2017), is the core building block of transformer models. It allows every position in a sequence to directly attend to every other position in a single operation, overcoming the sequential bottleneck of recurrent architectures. The mechanism computes a weighted sum of value vectors, where the weights are determined by the compatibility between query and key vectors.

The fundamental computation is: Attention(Q, K, V) = softmax(QK^T / sqrt(d_k)) * V. Here Q (queries), K (keys), and V (values) are linear projections of the input. The dot product QK^T measures how much each query should attend to each key. Dividing by sqrt(d_k) prevents the dot products from growing too large (which would push softmax into saturation). The softmax converts scores into a probability distribution, and the result is a weighted sum of values.

Self-Attention vs Cross-Attention

In self-attention, the queries, keys, and values all come from the same sequence. This allows the model to build rich contextual representations by letting each token gather information from all other tokens. For example, in the sentence "The bank by the river was steep," the word "bank" can attend strongly to "river" to resolve its meaning. Self-attention is used in both the encoder and decoder of standard transformers, and exclusively throughout encoder-only models like BERT.

In cross-attention, queries come from one sequence (typically the decoder) while keys and values come from another (typically the encoder output). This is how a translation model connects source and target languages: each position in the translation can selectively attend to relevant positions in the source sentence. The cross-attention heatmap reveals which source tokens the model focuses on when generating each target token.

Multi-Head Attention

Rather than performing a single attention function, transformers use multi-head attention: running h parallel attention operations with different learned projections, then concatenating the results. Different heads tend to specialize. In practice, some heads capture syntactic dependencies (subject-verb agreement), others capture semantic relationships (coreference, synonymy), others focus on positional proximity, and some develop more abstract patterns. This visualizer simulates four such heads with different characteristic behaviors.

Reading the Heatmap

Each cell (i, j) in the heatmap shows how much token i attends to token j. Brighter green indicates higher attention weight. A bright diagonal means each token attends strongly to itself (common in early layers). Off-diagonal bright cells reveal long-range dependencies. A nearly uniform row means the token is "confused" or distributing attention evenly (high entropy). A very peaked row means the token attends strongly to one specific other token (low entropy, high focus).

The attention entropy metric in the stats row measures how concentrated or diffuse the attention distribution is on average. Lower entropy means sharper, more focused attention. Higher entropy means the model is looking broadly at many tokens simultaneously. Temperature controls softmax sharpness: lower temperature produces sharper (more peaked) attention distributions.

Practical Implications of Attention Patterns

Analyzing attention weights can reveal what a model has learned. Probing studies have shown that specific BERT heads capture syntactic structure like dependency parsing arcs, that some heads track sentence boundaries, and that certain heads specialize in tracking which pronouns refer to which entities. However, attention weights are not a direct explanation of model predictions — high attention to a token does not necessarily mean that token causally influenced the output. Gradient-based attribution methods provide more reliable explanations, but attention visualizations remain valuable for building intuition about transformer behavior.

For practitioners, understanding attention patterns helps with debugging (why is the model confused here?), architecture decisions (how many heads are needed?), and pruning (which heads can be removed without hurting performance?). Research has found that many attention heads in large pretrained transformers are redundant and can be pruned with minimal accuracy loss.

Related Tools

About the Author

Michael Lip builds open-source ML tools and developer utilities at zovo.one. ml0x is part of the Zovo Tools network, a collection of free, privacy-first tools for developers and data scientists. No tracking, no accounts required, no data leaves your browser.