什么是 Transformer？

Transformer 是一种神经网络架构，它从根本上改变了我们处理人工智能任务的方式。 Transformer 最早在 2017 年那篇具有里程碑意义的论文 《Attention is All You Need》 中被提出，此后逐渐成为深度学习模型的主流架构，支撑了许多文本生成模型，例如 OpenAI 的 GPT、Meta 的 Llama、以及 Google 的 Gemini。 除了文本领域之外，Transformer 也被广泛应用于 音频生成、 图像识别、 蛋白质结构预测，甚至 博弈与游戏对局等任务，展现出在众多领域中的强大通用性。

从本质上看，自回归文本生成模型会反复进行“下一个词元预测”： 给定用户输入的一段提示文本（prompt），模型要判断在这段输入之后，下一个词元可能是什么。 Transformer 的核心创新与能力来自于自注意力（self-attention）机制，它允许模型在一次前向计算中同时处理整段序列， 并且比以往的架构更有效地捕捉长距离依赖关系。

GPT-2 系列模型是文本生成 Transformer 的一个代表性家族。 本 Transformer Explainer 使用的是 GPT-2 small 模型，它大约拥有 1.24 亿个参数。 虽然它并不是目前最新或最强大的 Transformer 模型，但在结构上与许多当前的前沿大模型共享大量组件与设计原则， 因此非常适合作为理解 Transformer 基本原理的入门模型。 它主要使用英文语料训练，英文提示文本的效果更稳定。中文文本也能被分词器编码， 但切分方式和生成能力不等同于面向中文训练的模型。本项目汉化的是操作界面和教学解释，底层模型仍是英文 GPT-2 Small。

Transformer 的整体架构

每一个文本生成类 Transformer 大体上都由以下 三个关键组件 组成：

1. 嵌入（Embedding）：将输入文本切分成更小的单元，称为 token， token 可以是单词，也可以是子词（subword）。这些 token 会被转换为数值向量，称为 embedding， 用于捕捉词语的语义含义。
2. Transformer 块（Transformer Block）：这是模型的基本构建单元，用来对输入表示进行处理和变换。 每个 block 内通常包含：
   • 注意力机制（Attention Mechanism）：Transformer block 的核心组件。 它允许不同 token 之间相互“交流”，从而捕捉上下文信息以及词与词之间的关系。
   • 多层感知机（MLP，Multi-Layer Perceptron）层：一个逐 token 的前馈神经网络。 在注意力层负责在 token 之间路由信息之后，MLP 的目标是进一步精炼每个 token 的表示。
3. 输出概率（Output Probabilities）： 最后的线性层与 softmax 层会把处理后的 embedding 转换为概率分布， 模型据此对序列中下一个 token 进行预测。

嵌入（Embedding）

假设你想用这个 Transformer 模型来生成文本，并输入界面中的示例提示： Data visualization empowers users to。 这段输入首先需要被转换成一种模型可以理解并处理的形式。 这就是 embedding 的作用：它会把文本转换成模型可操作的数值表示。 要将一个 prompt 变成 embedding，通常要经过以下几步： 1）对输入进行分词（tokenization）；2）取得对应的 token embedding； 3）取得可学习的位置嵌入（positional embedding）；4）将词元嵌入与位置嵌入相加，得到最终的嵌入表示。 下面我们逐步看看这些步骤是如何完成的。

Transformer 块（Transformer Block）

Transformer 的主要计算单元在于 Transformer 块（Transformer block），它由多头自注意力（self-attention）和一个 多层感知机（MLP，Multi-Layer Perceptron）层构成。 大多数模型会把多个这样的 block 顺序堆叠起来。 随着数据在一个个 block 中向前传递，token 的表示会逐层演化： 从第一层到最后一层，模型逐渐构建起对每个 token 更加复杂的高阶表示。 这种分层表示方式使模型能够对输入进行多层次理解。 我们当前展示的 GPT-2（small）模型总共有 12 个这样的 block。

多头自注意力（Multi-Head Self-Attention）

自注意力（self-attention）机制使模型能够在序列中关注与当前 token 相关的其他位置， 从而捕捉复杂的关系与依赖。 下面我们分步骤看看 self-attention 是如何计算的。

步骤 1：Query、Key 与 Value 矩阵

$$QKV_{ij} = ( \sum_{d=1}^{768} \text{Embedding}_{i,d} \cdot \text{Weights}_{d,j}) + \text{Bias}_j$$

图 2：从原始 embedding 计算得到 Query、Key 与 Value 三个矩阵。

每个 token 的 embedding 向量会被映射成三个向量： 查询 Query（Q）、 键 Key（K） 和 值 Value（V）。 这些向量是通过将输入 embedding 矩阵分别与 Q、K、V 的参数矩阵相乘得到的。 你可以把它类比成一次网络搜索来直观理解这三者的含义：

• 查询 Query（Q） 就像是你在搜索框中输入的那行查询文本， 它代表“当前这个 token 想要查找的信息”。
• 键 Key（K） 类似搜索结果中每个网页的标题， 代表“可以被关注的候选 token”。
• 值 Value（V） 则对应网页的具体内容。 当我们找到哪些结果（键 Key）与查询 Query 最匹配之后，就会去读取这些网页的内容（值 Value）。

通过这些 Q、K、V 向量，模型可以计算出注意力分数（attention score）， 从而决定在生成预测时每个 token 应该关注序列中的哪些位置。

步骤 3：带掩码的自注意力（Masked Self-Attention）

在每个 head 中，我们会执行 masked self-attention 的计算。 这一机制允许模型在生成序列时关注输入中已经出现的部分， 同时通过掩码屏蔽掉“未来”的 token，避免看到还未生成的内容。

图 3：利用 Query、Key 和 Value 矩阵计算带掩码的 self-attention。

• 注意力得分（Attention Score）： 查询 Query 与 键 Key 矩阵的点积 会得到一个方阵，描述每个 query 与每个 key 之间的匹配程度， 从而反映所有输入 token 之间的关系。
• 掩码处理（Masking）： 我们会对注意力矩阵的上三角部分施加一个掩码，把这些位置的值设置为负无穷， 从而阻止模型访问未来的 token。 模型必须在不了解“未来”情况下学会预测下一个 token。
• Softmax 归一化（Softmax）： 在掩码之后，我们对 attention score 施加 softmax，将其转换为概率。 softmax 会对每一行做归一化，使其和为 1，这一行就表示当前 token 对它左侧所有 token 的关注程度分布。

MLP：多层感知机（Multi-Layer Perceptron）

在多个 self-attention head 捕捉到输入 token 之间的多种关系之后， 它们的拼接输出会被送入 Multilayer Perceptron（MLP）层，进一步增强模型的表达能力。 MLP block 通常由两层线性变换和中间的 GELU 激活函数构成。 第一层线性变换会将向量维度从 768 扩展到 3072（四倍）； 第二层线性变换则把维度再缩回 768，以便后续层继续使用统一的表示维度。 与 self-attention 不同，MLP 对每个 token 独立地进行处理， 更像是把 token 从一种表示空间映射到另一种更适合任务的空间。

输出概率（Output Probabilities）

当输入序列依次通过所有 Transformer blocks 处理完成后， 我们会将最后一层的输出送入最终的线性层，以便为 token 预测做准备。 这一线性层会把表示投射到一个 50,257 维的空间， 词表中的每一个 token 都会对应一个数值，称为 logit。 从理论上讲，任何一个 token 都可能成为下一个词， 因此我们可以简单地按这些 logit 的大小对 token 排序， 来衡量它们成为“下一个词”的可能性。 随后，我们对这些 logit 施加 softmax，将它们转换为和为 1 的概率分布， 接着就可以按照概率去采样下一个 token。

最后一步，是从这个概率分布中采样下一个 token。 在这一过程中，超参数 temperature（温度）起着关键作用。 从数学上看，它的操作非常简单： 模型输出的未归一化分数（logits）会被 temperature 除以：

• temperature = 1：用 1 去除 logits 不会改变 softmax 的输出结果。
• temperature < 1：较小的温度会让概率分布更“尖锐”， 模型会更自信、更偏向确定性的输出，生成结果更可预测。
• temperature > 1：较大的温度会让概率分布更“平缓”， 模型输出会带来更多随机性，有时会被描述为更具“创造力”。

此外，我们还可以通过设置 top-k 与 top-p 参数， 进一步控制采样过程的行为：

• top-k sampling：只保留概率最高的 k 个候选 token， 把其余概率较小的候选全部过滤掉。
• top-p sampling：按概率从高到低排序，保留累计概率达到或超过阈值 p 的最小候选集合。

候选集合确定后，会把其余词元过滤掉，并对保留候选的概率重新归一化，再从中采样。 通过调节 temperature、top-k 与 top-p， 我们可以在“确定性”与“多样性”之间找到平衡点，从而让模型的生成行为更符合具体应用需求。

更高级的架构特性

Transformer 模型中还包含一些更高级的架构设计，用来进一步提升性能。 虽然它们对整体效果非常重要，但对理解 Transformer 的核心思路来说并非第一优先级。 Layer Normalization、Dropout 和 Residual Connections 是其中极为关键的三个组件， 特别是在模型训练阶段发挥着重要作用。 Layer Normalization 用来稳定训练，使模型更容易收敛； Dropout 通过随机“关闭”一部分神经元来防止过拟合； Residual Connections 则为梯度提供了更直接的传播路径，缓解梯度消失问题。

交互特性

Transformer Explainer 被设计成一个高度交互式的可视化工具， 可以帮助你探索 Transformer 内部的工作机制。 你可以在界面中尝试以下这些交互操作：

• 输入你自己的文本序列，观察模型如何处理这段输入并预测下一个词。 你可以查看注意力权重、中间计算结果，以及最终输出概率是如何得到的。
• 使用温度（temperature）滑块 来控制模型生成结果的随机性。 通过调整温度，你可以体验从“几乎完全确定”到“更加发散、富有创造性”的不同输出风格。
• 选择 top-k 和 top-p 采样方式，调节推理阶段的采样策略。 你可以尝试不同的参数设置，观察概率分布如何变化，以及这如何影响模型的预测结果。
• 与注意力可视化图进行交互，查看模型在输入序列中关注了哪些 token。 将鼠标悬停在不同 token 上，可以高亮它们的注意力权重， 从而帮助你理解模型是如何通过注意力来捕捉上下文和词语之间关系的。

视频教程

Transformer Explainer 是如何实现的？

Transformer Explainer 在浏览器中直接运行一个实时的 GPT-2（small）模型。 该模型基于 Andrej Karpathy 的 nanoGPT 项目 中的 PyTorch 实现，并被转换为 ONNX Runtime 格式以便在浏览器中高效推理。 前端界面使用 JavaScript 构建，采用 Svelte 作为前端框架，并使用 D3.js 来绘制动态可视化。 在你与界面交互、输入文本的过程中，相关的数值会被实时更新。

谁开发了 Transformer Explainer？

Transformer Explainer 由以下开发者共同完成： Aeree Cho、 Grace C. Kim、 Alexander Karpekov、 Alec Helbling、 Jay Wang、 Seongmin Lee、 Benjamin Hoover，以及 Polo Chau， 他们都来自 Georgia Institute of Technology（佐治亚理工学院）。