# LLM Pipeline Visualizer：在浏览器中可视化大语言模型的推理过程

> 一个交互式的教育工具，通过七个步骤完整展示 LLM 从文本到 token、嵌入、注意力、logits、采样的完整推理流程，完全在浏览器中运行

- 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm)
- 发布时间: 2026-06-10T20:43:50.000Z
- 最近活动: 2026-06-10T20:57:35.982Z
- 热度: 141.8
- 关键词: LLM, 可视化, Transformers.js, 教育工具, 注意力机制, GPT-2, tokenization, 机器学习教育
- 页面链接: https://www.zingnex.cn/forum/thread/llm-pipeline-visualizer-db8fcb01
- Canonical: https://www.zingnex.cn/forum/thread/llm-pipeline-visualizer-db8fcb01
- Markdown 来源: ingested_event

---

## 原作者与来源

- 原作者/维护者：Mahiler1909
- 来源平台：github
- 原始标题：llm-pipeline-visualizer
- 原始链接：https://github.com/Mahiler1909/llm-pipeline-visualizer
- 来源发布时间/更新时间：2026-06-10T20:43:50Z

## 原作者与来源\n\n- **原作者/维护者**: Mahiler1909\n- **来源平台**: GitHub\n- **原项目名**: llm-pipeline-visualizer\n- **原始链接**: https://github.com/Mahiler1909/llm-pipeline-visualizer\n- **在线演示**: https://mahiler1909.github.io/llm-pipeline-visualizer/\n- **发布时间**: 2026年6月\n\n---\n\n## 项目概述\n\nLLM Pipeline Visualizer 是一个教育性质的交互式可视化工具，它以"滚动叙事"（scrollytelling）的方式，逐步展示大语言模型如何处理文本并选择下一个词。\n\n这个项目的独特之处在于：**所有数据都是真实的模型输出，而非模拟**。它使用 Transformers.js 在浏览器中直接运行 DistilGPT-2 模型，让用户能够真正"感受"自回归生成的过程——一个词一个循环。\n\n---\n\n## 七个核心步骤的完整旅程\n\n用户输入一次提示后，将依次浏览七个全屏章节，每个章节教授一个核心概念，并配有实时交互组件：\n\n### 1. Texto（文本）\n\n起点是用户输入的原始文本。这是整个流程的输入，也是人类与模型交互的界面。\n\n### 2. Tokens（分词）\n\n展示文本如何被分割成真实的 BPE（Byte Pair Encoding）片段及其对应的 token ID。\n\n**交互功能**: 内置实时迷你分词器，用户可以输入任意单词查看其 token 化结果。这帮助理解为什么某些单词会被拆分成多个 token（例如 "unhappiness" → "un", "happiness"）。\n\n### 3. Embeddings（嵌入）\n\n展示真实的词嵌入向量。系统通过 HTTP Range 请求从原始 safetensors 文件中按需获取每个 token 的 `wte`（word token embedding）行（约 3KB/ token）。\n\n**可视化内容**: \n- 48 维的条形图表示嵌入向量的每个维度\n- token 间的余弦相似度矩阵，直观展示语义相似性\n\n### 4. Atención（注意力）\n\n展示真实的 layer-0 注意力计算。约 7MB 的 layer-0 权重在用户到达该章节时惰性下载（使用 Cache API 持久化）。\n\n**交互功能**: \n- 逐行展示 query 向量\n- 支持按注意力头查看或查看平均值\n- 显示注意力百分比，突出最被关注的 token\n\n### 5. Logits（对数几率）\n\n展示模型输出的原始 logits 和经过 softmax 后的真实概率分布。\n\n**关键特性**: \n- 展示 top-15 候选词及其原始 logits 和概率\n- 概率计算覆盖完整的 5 万词表，而非重新归一化后的子集\n- 温度滑块可以即时重塑概率分布，无需重新推理\n\n### 6. Muestreo（采样）\n\n展示如何从概率分布中采样得到最终输出的 token。\n\n**交互功能**: \n- 堆叠概率条形图展示 nucleus 采样后的候选池\n- top-k / top-p 滑块可直观看到候选词被逐步淘汰\n- 「Muestrear」按钮可在同一分布上重新采样\n- 贪婪模式切换\n\n### 7. El bucle（循环）\n\n最后一个章节闭合循环：将采样的 token 追加到原文，然后重新运行整个页面——这就是自回归生成。\n\n**交互功能**: \n- 一键追加 token 并重复循环\n- 粘性上下文栏跟踪不断增长的文本和循环计数\n\n---\n\n## 技术实现亮点\n\n### 浏览器内真实推理\n\n与许多教育演示使用模拟数据不同，这个项目使用 Transformers.js（ONNX 后端）在浏览器中直接运行 DistilGPT-2 模型。\n\n**首次加载**: \n- 模型在后台下载（约 165MB，fp16 精度）\n- 浏览器缓存后续访问\n- 其他 GPT-2 变体可通过 URL 参数切换：`?model=gpt2`、`?model=gpt2-medium`、`?model=gpt2-large`\n\n### 渐进式权重加载\n\n为了优化性能，项目采用智能的权重加载策略：\n\n- **嵌入层**: 按需通过 HTTP Range 请求获取（~3KB/token）\n- **注意力层**: 惰性加载，到达对应章节时才下载（~7MB）\n- **Cache API**: 使用浏览器缓存 API 持久化已下载的权重\n\n这种设计确保用户无需等待完整模型下载即可开始探索前几个章节。\n\n### 稳定采样的实现\n\n项目实现了一个稳定的采样分布机制，确保：\n- 同一分布上的重复采样结果可预期\n- 温度调整即时生效，无需重新运行模型推理\n- 贪婪模式和采样模式可无缝切换\n\n---\n\n## 教育设计哲学\n\n### 西班牙语内容\n\n项目使用西班牙语撰写教育文本，这在技术教育工具中相对少见。每个章节包含：\n\n- **主解释**: 通俗易懂的语言描述当前概念\n- **「Profundizar」折叠块**: 包含实际公式，供希望深入理解数学原理的学习者\n- **「Pruébalo」实验**: 动手实践环节，让用户自己尝试\n\n### 可分享的旅程\n\n提示文本被编码在 URL 中（`?p=...`），意味着任何探索都可以作为链接分享。这在教育场景中特别有用——教师可以准备特定的提示让学生探索。\n\n### 演示模式\n\n添加 `?presentar` 到 URL（或按 `P` 键）可进入演示模式：\n\n- 内容逐步淡入显示\n- 支持空格键/方向键/翻页键（PageDown）推进\n- 组件保持完全交互，适合现场演示\n- 按 `P` 或 `Esc` 退出演示模式\n\n---\n\n## 技术栈与架构\n\n| 组件 | 技术 |
|------|------|
| 前端 | 原生 JavaScript（ES 模块），DOM + SVG（无 Canvas） |
| 推理 | Transformers.js v3 |
| 模型 | DistilGPT-2（onnx-community 提供） |
| 样式 | 单文件 CSS，无预处理器 |
| 构建 | 无构建步骤 |
\n### 代码结构\n\n```\n├── index.html              # 单页面：轨道 + 粘性栏 + 7 个章节\n├── js/\n│   ├── main.js             # 编排器：状态、模型启动、自回归循环\n│   ├── content.js          # 教育文本（西班牙语），基于模型配置模板化\n│   ├── stages/             # 每个章节的 UI 模块\n│   ├── pipeline.js         # 分词 → 推理 → 采样（+ 稳定分布）\n│   ├── models.js           # 通过 Transformers.js 加载模型\n│   ├── weights.js          # 通过 Range 请求获取真实权重\n│   ├── attention.js        # 在 JS 中计算真实 layer-0 注意力\n│   ├── config.js           # 响应式状态（发布/订阅模式）\n│   └── utils.js            # 工具函数（softmax、余弦相似度）\n├── css/style.css           # 纸质质感、以排版为主的主题\n└── assets/                 # 网站图标\n```\n\n---\n\n## 浏览器要求与性能\n\n- **浏览器**: 最新版 Chrome、Firefox 或 Safari\n- **WebAssembly**: 需要启用\n- **存储**: 约 200MB 用于模型缓存\n\n由于使用 WebAssembly 和 ONNX Runtime，推理性能接近原生速度，足以支持实时交互。\n\n---\n\n## 实际应用价值\n\n### 对于 LLM 学习者\n\n许多学习材料要么过于抽象（纯数学公式），要么过于简化（忽略关键细节）。这个工具提供了恰到好处的抽象层次：\n\n- 初学者可以直观理解每个步骤的作用\n- 进阶学习者可以展开公式深入了解数学原理\n- 实践者可以动手调整参数观察影响\n\n### 对于教育工作者\n\n- 可直接用于课堂教学，无需安装任何软件\n- 演示模式支持结构化讲解\n- 可分享链接让学生课后继续探索\n- 西班牙语内容填补了非英语学习者的资源空白\n\n### 对于研究者\n\n虽然 DistilGPT-2 是一个相对较小的模型，但其架构与 GPT-2/GPT-3 系列一致。这个工具可以帮助研究者：\n\n- 快速验证对注意力机制的理解\n- 观察不同采样策略的实际效果\n- 理解温度、top-k、top-p 等参数如何影响输出分布\n\n---\n\n## 与其他教育工具的比较\n\n| 特性 | LLM Pipeline Visualizer | 传统教程 | 交互式笔记本 |
|------|------------------------|---------|-------------|
| 无需安装 | ✅ 浏览器直接运行 | ✅ | ❌ 需要 Jupyter |
| 真实模型数据 | ✅ | ❌ 通常用简化示例 | ✅ |
| 渐进式探索 | ✅ 七个结构化章节 | ❌ | ⚠️ 依赖用户组织 |
| 实时交互 | ✅ | ❌ | ✅ |
| 演示友好 | ✅ 专门演示模式 | ⚠️ | ❌ |
| 可分享状态 | ✅ URL 编码 | ❌ | ❌ |
| 离线可用 | ✅ 缓存后可用 | ✅ | ⚠️ |
\n---\n\n## 总结与思考\n\nLLM Pipeline Visualizer 代表了技术教育工具的一个优秀范例：它不仅仅是"展示"，而是"让学习者体验"。\n\n这个项目的成功之处在于它平衡了多个看似矛盾的目标：\n\n1. **真实 vs 可理解**: 使用真实模型数据，但通过渐进式披露避免信息过载\n2. **深度 vs 易用**: 提供数学公式，但默认折叠，不强迫初学者\n3. **教育 vs 演示**: 既是自学工具，也是课堂演示工具\n4. **轻量 vs 功能完整**: 无构建步骤，但功能齐全\n\n对于希望真正理解大语言模型"黑盒"内部工作原理的人来说，这个工具提供了一个难得的透明窗口。它不是要取代阅读论文或实现代码，而是作为理解复杂概念的直觉构建工具。\n\n在技术教育领域，我们往往需要在"太简单"和"太复杂"之间寻找平衡。LLM Pipeline Visualizer 找到了一个 sweet spot——它足够简单让初学者入门，又足够真实让进阶学习者有所收获。