Attention Lab Heatmap
A richer heatmap variant of AttentionHeatmap with token labels on both axes, hover row/column cross-highlight, and click-to-pin focus.
Preview
Attention lab heatmap: 4 output tokens by 3 input tokens.
the
cat
sat
A
fluffy
cat
reclines
catcat: 0.5500
Anatomy
Rows are output tokens, columns are input tokens. Cell intensity encodes the attention weight. Hovering lights the cross; clicking pins it (click again to release).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
inputTokens | string[] | required | Column labels. |
outputTokens | string[] | required | Row labels. |
attentionWeights | number[][] | required | outputs × inputs matrix. |
focusedToken / defaultFocusedToken / onFocusedTokenChange | controlled pair | — | The pinned cell. |
Accessibility
Each cell is a real <button> with aria-label and aria-pressed. Keyboard arrow nav between cells via native tab order.