LLM Visualizer

LLM Visualizer 是一款基于 Vite/React 构建的开源 Web 应用，让开发者、研究者和爱好者直观地探索 Transformer 语言模型如何从上下文中“读取”信息。它通过可视化的方式，揭示了提示词（Prompt）与生成词之间的深层联系。

该工具的核心优势在于隐私安全与本地运行：所有推理均在浏览器的 Web Worker 中完成，数据永不离开用户设备。

核心功能：贡献文本 (Contribution Text)

这是该工具最主要的可视化视图，它将抽象的注意力权重转化为直观的视觉信号：

• 不透明度即强度：生成的每个令牌（Token）以纯文本渲染，其不透明度反映了前文令牌对该令牌的“贡献强度”。颜色越深，表示前文对该词的预测影响越大。
• 交互式溯源：将鼠标悬停在某个生成的令牌上，系统会高亮显示对其贡献最强的来源令牌，帮助用户理解模型的决策依据。
• 两种模式：
  1. 探索预生成示例：加载静态 JSON 数据，快速体验。
  2. 实时生成：输入任意提示词，使用插桩后的 ONNX 模型在本地即时生成并可视化。

实验性功能

除了主视图，应用还包含一些开发专用的实验性可视化（通过 /dev/visualizations 访问）：

• 贡献网格 (Contribution Grid)：按 Transformer 层级展示哪些较早令牌的值向量对目标令牌有贡献，提供更细粒度的分层洞察。

本地部署指南

1. 环境准备

需要 Node.js 和 pnpm。

pnpm install

2. 下载插桩模型

应用默认使用 Qwen3-0.6B 的 int8 权重。为了获取内部注意力张量，必须使用经过“插桩”（Instrumented）的 ONNX 模型。

方法 A：直接下载预插桩模型（推荐）

hf download ishamf/Qwen3-0.6B-ONNX-Instrumented \
  onnx/instrumented_int8.onnx \
  config.json generation_config.json \
  tokenizer.json tokenizer_config.json \
  special_tokens_map.json added_tokens.json \
  vocab.json merges.txt chat_template.jinja \
  --local-dir models/Qwen3-0.6B-ONNX

方法 B：自行插桩
从 onnx-community/Qwen3-0.6B-ONNX 下载原始模型，并运行项目提供的插桩脚本。

3. 启动服务

pnpm dev

访问 http://localhost:5173。首次运行时，浏览器会加载约 620 MB 的模型权重（后续会缓存），所有生成均在本地 Web Worker 中私密进行。

4. (可选) 生成预置数据

若希望使用预生成的示例而非实时生成，可运行：

pnpm generate:summed-contributions
pnpm generate:data-manifest