Components / AI Data Visualization

AI Attention Heatmap

A heatmap visualization of transformer attention weights showing token-to-token relationships.

Live Preview — ai-attention-heatmap-01

Attention Weights (Layer 12)

82
4
1
0
2
91
3
2
0
5
88
4
1
2
4
94

Peak Weight

0.942

Perplexity

12.4

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react

Source Code

ai-attention-heatmap-01.tsx 
"use client";

import React from "react";

const matrix = [
    [82, 4, 1, 0],
    [2, 91, 3, 2],
    [0, 5, 88, 4],
    [1, 2, 4, 94],
];

export default function AIAttentionHeatmap() {
    const getOpac = (val: number) => Math.max(0.1, val / 100);

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-sm mx-auto overflow-hidden">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-xs font-black text-zinc-500 uppercase tracking-widest leading-none">Attention Weights (Layer 12)</h3>
                <div className="h-3 w-24 bg-gradient-to-r from-blue-100 to-blue-600 rounded-full opacity-50" />
            </div>

            <div className="grid grid-cols-4 gap-1 transform rotate-0 scale-100">
                {matrix.flat().map((val, i) => (
                    <div
                        key={i}
                        className="aspect-square rounded-sm relative group cursor-pointer transition-all hover:scale-105"
                        style={{ backgroundColor: `rgba(37, 99, 235, ${getOpac(val)})` }}
                    >
                        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                            <span className="text-[10px] font-black text-zinc-900 dark:text-white drop-shadow-sm">{val}</span>
                        </div>
                    </div>
                ))}
            </div>

            <div className="mt-6 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800 pt-6">
                <div className="space-y-1">
                    <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-tighter">Peak Weight</p>
                    <p className="text-sm font-black text-zinc-900 dark:text-zinc-100">0.942</p>
                </div>
                <div className="space-y-1 text-right">
                    <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-tighter">Perplexity</p>
                    <p className="text-sm font-black text-emerald-500 leading-none">12.4</p>
                </div>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
getOpac() val: number
AIAttentionHeatmap() None

Variables

All variable declarations found in this component.

Name Kind Value
matrix const [

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<div> 9× Native Native HTML
<h3> 1× Native Native HTML
<p> 4× Native Native HTML
<span> 1× Native Native HTML

Related Components

  • AI Confidence Gauge — A gauge chart showing AI prediction confidence levels with color gradients from red (low) to green (high).
  • AI Embedding Scatter Plot — A 2D scatter plot visualizing AI embedding clusters with interactive hover tooltips and cluster labels.
  • AI Training Progress — A training progress dashboard showing loss curves, epoch progress, and training metrics in real-time.
  • AI Token Distribution — A bar chart showing token probability distributions from AI model outputs with top-k visualization.
  • AI Model Comparison Radar — A radar chart comparing multiple AI models across dimensions like speed, accuracy, cost, and reasoning.
  • AI Pipeline Flow — A flowchart visualization showing AI data pipeline stages with status indicators and throughput metrics.