Transformer Explainer 使用指南：在交互中理解大语言模型

Transformer Explainer 使用指南：在交互中理解大语言模型

写在前面

你可能听说过 ChatGPT、Claude、Gemini 这些 AI 助手，但你知道它们背后的核心技术是什么吗？答案是 Transformer——一种 2017 年诞生的神经网络架构，彻底改变了人工智能的发展方向。

今天介绍的 Transformer Explainer 是佐治亚理工学院开发的一个交互式可视化工具，它在浏览器中运行一个真实的 GPT-2 模型，让你能够亲眼看到 Transformer 是如何一步步处理文本、预测下一个词的。

网址：https://poloclub.github.io/transformer-explainer/

建议：使用电脑访问（需要 1300px 以上屏幕宽度），准备好 30 分钟的学习时间。

---

第一课：认识界面

打开网站后，你会看到三个主要区域：

1. 顶部输入区

• Examples 下拉菜单：预设的示例文本
• 输入框：默认显示 "Data visualization empowers users to"
• Generate 按钮：点击生成下一个词
• Temperature 滑块：控制生成的"创造性"（0-2）
• Sampling 选项：Top-k 或 Top-p 采样方式

2. 中间可视化区

这是核心区域，展示了 Transformer 的完整架构：

• Embedding 层（左侧）
• Transformer Block（中间，共 12 层）
• Output Probabilities（右侧）

3. 底部文章区

详细的技术解释，可以边操作边阅读。

---

第二课：理解"下一个词预测"

核心概念：Transformer 的本质就是一个"猜词游戏"——给定一段文字，预测最可能出现的下一个词。

动手实验 1：观察预测过程

1. 保持默认输入 "Data visualization empowers users to"
2. 点击 Generate 按钮
3. 观察右侧的 Output Probabilities 区域

你会看到一个概率分布图，显示词汇表中每个词成为"下一个词"的概率。概率最高的词会被选中并添加到输入末尾。

思考：为什么模型会选择这个词？因为它在训练数据中学到了"Data visualization empowers users to"后面最常出现的词是什么。

---

第三课：Embedding——把文字变成数字

计算机不认识文字，只认识数字。Embedding 就是把文字转换成数字向量的过程。

动手实验 2：观察分词过程

1. 点击左侧的 Embedding 区域展开详情
2. 观察输入文本是如何被切分的

你会发现：

• "Data" → 一个 token
• "visualization" → 一个 token
• "empowers" → 被切成两个 token（"emp" + "owers"）

为什么要切分？ GPT-2 的词汇表有 50,257 个 token。不是所有单词都在词汇表中，所以需要把生僻词切成更小的片段。

Embedding 的四个步骤

网站清晰地展示了这四步：

步骤	作用	GPT-2 参数
1. Tokenization	把文本切成 token	词汇表 50,257 个
2. Token Embedding	每个 token 变成向量	768 维向量
3. Positional Encoding	加入位置信息	让模型知道词的顺序
4. Final Embedding	相加得到最终表示	768 维向量

关键理解：每个词最终变成一个 768 维的向量。意思相近的词，向量也会相近。

---

第四课：Attention——让词与词"对话"

这是 Transformer 最核心的创新。Attention 机制让每个词都能"看到"其他词，从而理解上下文。

动手实验 3：探索注意力权重

1. 点击中间的 Transformer Block 展开
2. 找到 Multi-Head Self-Attention 区域
3. 把鼠标悬停在不同的 token 上

你会看到一个热力图，显示当前词对其他词的"关注程度"。颜色越深，关注度越高。

QKV 三兄弟：用搜索引擎来理解

网站用了一个绝妙的类比：

概念	类比	作用
Query (Q)	你在搜索框输入的关键词	"我想找什么信息？"
Key (K)	搜索结果的标题	"这些网页讲什么？"
Value (V)	网页的实际内容	"匹配后，给我看内容"

计算过程：

1. Query 和 Key 做点积 → 得到"相关性分数"
2. 分数经过 Softmax → 变成概率（加起来等于 1）
3. 用概率加权 Value → 得到最终输出

为什么是"Multi-Head"？

GPT-2 有 12 个注意力头，每个头关注不同的模式：

• 有的头关注语法关系（主语-谓语）
• 有的头关注语义关系（同义词）
• 有的头关注位置关系（相邻的词）

动手实验 4：在可视化中切换不同的 Head，观察注意力模式的变化。

Masked Attention：不能"偷看"未来

注意力矩阵的右上角是灰色的（被 mask 掉了）。这是因为在生成文本时，模型只能看到当前词之前的内容，不能偷看后面的词。

---

第五课：MLP——给每个词"加工"

Attention 让词与词交流后，MLP（多层感知机） 对每个词单独进行处理。

动手实验 5：观察维度变化

1. 在 Transformer Block 中找到 MLP 区域
2. 观察维度的变化

你会看到：

• 输入：768 维
• 中间层：3072 维（扩大 4 倍）
• 输出：768 维（压缩回来）

为什么要先扩大再压缩？ 这就像把数据"展开"到更高维度，在那里做一些复杂的变换，然后再"折叠"回来。这个过程能捕捉到更丰富的模式。

---

第六课：12 层堆叠——逐层深入理解

GPT-2 (small) 有 12 个 Transformer Block 堆叠在一起。

动手实验 6：观察层间变化

1. 点击不同层的 Transformer Block
2. 观察同一个词在不同层的表示变化

直觉理解：

• 浅层（1-4 层）：捕捉基础的语法和词汇关系
• 中层（5-8 层）：理解短语和句子结构
• 深层（9-12 层）：把握整体语义和上下文

每经过一层，模型对输入的"理解"就更深一层。

Head1：

Head5：

Head12：

---

第七课：Temperature——控制"创造力"

这是你能直接调节的最重要参数。

动手实验 7：Temperature 对比实验

1. 把 Temperature 设为 0.2（低温）
2. 多次点击 Generate，记录生成的词
3. 把 Temperature 设为 10.0（高温）
4. 再次多次生成，对比结果

你会发现：

• 低温（< 1）：输出稳定、可预测，每次生成的词几乎相同
• 高温（> 1）：输出多样、有"创意"，每次可能不同

数学原理：Temperature 除以 logits 后再做 Softmax

• 低温 → 概率分布更"尖锐" → 高概率词更突出
• 高温 → 概率分布更"平坦" → 低概率词也有机会

Temperature 设为 0.2（低温）

把 Temperature 设为 10.0（高温）

---

第八课：Top-k 和 Top-p 采样

除了 Temperature，还有两种控制生成多样性的方法。

Top-k 采样

只从概率最高的 k 个词中选择。

动手实验 8：

1. 选择 Top-k 模式
2. 把 k 设为 5
3. 观察右侧概率图，只有 5 个词被高亮

只有5个词有预测百分率显示

Top-p 采样（又叫 Nucleus Sampling）

选择累积概率达到 p 的最小词集合。

动手实验 9：

1. 切换到 Top-p 模式
2. 把 p 设为 0.9
3. 观察被选中的词数量会根据概率分布动态变化

对比：

• Top-k：固定选 k 个词，不管概率分布如何
• Top-p：动态选词，概率集中时选得少，分散时选得多

---

第九课：完整流程回顾

现在让我们把所有知识串起来，理解一次完整的预测过程：

输入文本: "Data visualization empowers users to"
    ↓
[1. Tokenization] 切分成 token
    ↓
[2. Token Embedding] 每个 token → 768维向量
    ↓
[3. Positional Encoding] 加入位置信息
    ↓
[4. Transformer Block × 12]
    ├── Layer Norm
    ├── Multi-Head Self-Attention (12个头)
    ├── Residual Connection
    ├── Layer Norm
    ├── MLP (768 → 3072 → 768)
    └── Residual Connection
    ↓
[5. Final Layer Norm]
    ↓
[6. Linear Projection] → 50,257维 (词汇表大小)
    ↓
[7. Softmax] → 概率分布
    ↓
[8. Sampling] (根据 Temperature/Top-k/Top-p)
    ↓
输出: "understand" (或其他词)

---

第十课：进阶探索

1. 尝试不同的输入

在输入框中输入你自己的文本，观察：

• 不同长度的输入如何影响注意力模式？
• 中文输入会发生什么？（提示：会被切成很多小片段）

2. 观察辅助组件

网站还展示了三个重要的辅助组件：

• Layer Normalization：稳定训练过程
• Dropout：防止过拟合（推理时关闭）
• Residual Connections：让梯度更容易流动

3. 阅读论文

网站右上角有 PDF 图标，链接到原始论文：
https://arxiv.org/abs/2408.04619

4. 观看视频教程

YouTube 视频提供了更详细的讲解：
https://www.youtube.com/watch?v=ECR4oAwocjs

---

常见问题

Q: 为什么用 GPT-2 而不是 GPT-4？
A: GPT-2 (small) 只有 1.24 亿参数，可以在浏览器中运行。虽然不是最新模型，但核心架构与 GPT-4、Claude 等现代模型相同。

Q: 这个模型能生成中文吗？
A: GPT-2 主要在英文数据上训练，中文能力有限。但你可以尝试输入中文，观察它如何处理。

Q: 为什么有时候生成的文本不通顺？
A: GPT-2 是 2019 年的模型，能力有限。现代模型（GPT-4、Claude）在更大的数据集上训练，效果好得多。

---

学习路线图

阶段	目标	建议时间
入门	理解"下一个词预测"的概念	10 分钟
基础	掌握 Embedding 和 Attention	30 分钟
进阶	理解 Temperature 和采样策略	20 分钟
深入	阅读论文，理解数学细节	2+ 小时

---

总结

Transformer Explainer 是目前最好的 Transformer 可视化学习工具之一。通过它，你可以：

1. 直观理解 Transformer 的工作原理
2. 动手实验 各种参数的效果
3. 建立直觉 为深入学习打下基础

记住：理解 Transformer 不需要先学会所有数学。先建立直觉，再逐步深入细节。

祝学习愉快！

---

相关资源：

• 论文：https://arxiv.org/abs/2408.04619
• GitHub：https://github.com/poloclub/transformer-explainer
• 视频：https://www.youtube.com/watch?v=ECR4oAwocjs

---

更多资源获取欢迎关注我的公众号：「木子吉星」