Data visualization empowers users to
Temperature（温度）

0.8

Sampling（采样）

k=5

什么是 Transformer？

Transformer 是一种神经网络架构，从根本上改变了人工智能的发展路径。它最早由经典论文 《Attention is All You Need》 在 2017 年提出。此后它成为深度学习模型的主流架构，驱动了 OpenAI 的 GPT、Meta 的 Llama 以及 Google 的 Gemini 等文本生成模型。除文本外，Transformer 还广泛应用于 语音生成, 图像识别, 蛋白质结构预测, and even 博弈智能, demonstrating its versatility across numerous domains.

从原理上看，文本生成 Transformer 的核心是next-token prediction：给定用户输入， 下一个最可能出现的 token（一个词或子词）是什么？Transformer 的关键创新是 self-attention， 它让模型能在整段序列上建模，比早期架构更有效地捕捉长距离依赖关系。

GPT-2 系列是典型的文本生成 Transformer。Transformer Explainer 使用 GPT-2 （small）模型，参数量约 1.24 亿。它不是最新最强的 Transformer，但与当前 SOTA 模型共享大量架构组件与核心原理，非常适合作为入门学习起点。

Transformer 架构总览

每个文本生成 Transformer 通常都包含以下三大关键组件：

  1. Embedding：将输入文本切分为 token（词或子词），并映射为数值向量 embedding，用于承载语义信息。
  2. Transformer Block：模型的核心计算单元，负责处理与变换表示。每个 block 包含：
    • Attention Mechanism：block 的关键部分，让 token 间进行信息交互，捕捉上下文与词间关系。
    • MLP（Multilayer Perceptron）：逐 token 的前馈网络。Attention 负责跨 token 路由信息，MLP 负责细化每个 token 的内部表示。
  3. Output Probabilities：最后的线性层与 softmax 会将表示转为概率分布，用于预测下一个 token。

Embedding（嵌入）

假设你要让 Transformer 生成文本，输入提示词如 “数据可视化让用户能够”。模型无法直接处理自然语言，必须先转成数值表示，这就是 embedding 的作用。完整流程包括：1）分词，2）查表得到 token embedding，3）加入位置信息，4）将 token 与位置编码相加，得到最终 embedding。下面逐步看每一步如何完成。

图 1：展开 Embedding 层后，可以看到输入提示词如何被转为向量表示。流程包括 (1) Tokenization、(2) Token Embedding、(3) Positional Encoding 与 (4) Final Embedding。

步骤 1：Tokenization（分词）

Tokenization 会把输入文本拆解成更小、可处理的单位 token。token 可以是完整词，也可以是子词。例如 "Data" 与 "visualization" 可各对应一个 token，而 "empowers" 可能被拆成两个 token。token 词表在训练前确定，GPT-2 词表共有 50,257 个唯一 token。得到 token ID 后，就可以进一步查 embedding 向量。

步骤 2：Token Embedding

GPT-2（small）把词表中每个 token 表示成一个 768 维向量（具体维度由模型规模决定）。这些向量组成一个形状为 (50,257, 768) 的矩阵，约 3900 万参数。这个高维空间让模型能表达语义：用法/含义相近的 token 在空间中更接近，不相近的 token 距离更远。

步骤 3：Positional Encoding（位置编码）

Embedding 层还需要编码 token 在输入中的位置。不同模型有不同的位置编码方法。GPT-2 采用可学习的位置编码矩阵，并将其与模型训练过程一体化学习。

步骤 4：Final Embedding

最后，将 token encoding 与 positional encoding 相加，得到最终 embedding。这个表示同时包含了 token 语义与序列位置信息。

Transformer Block

Transformer 的核心计算发生在 Transformer block 中，其中包含 multi-head self-attention 与 MLP。实际模型通常会顺序堆叠多个 block。token 表示在层间不断演化，从浅层到深层逐步形成更高阶语义。我们当前使用的 GPT-2（small）包含 12 个 block。

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

self-attention 机制让模型可以在序列内部建模 token 之间的关系，使每个 token 的表示都能感知其他 token。多头机制让模型从多个视角同时建模关系：例如某个 head 擅长短程语法依赖，另一个 head 更关注长程语义上下文。下面我们分步骤看它的计算过程。

步骤 1：Query / Key / Value 矩阵

QKVij=(∑d=1768Embeddingi,d⋅Weightsd,j)+Biasj 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), and Value (V)。它们由输入 embedding 与对应可学习权重矩阵相乘得到： Q, K, and V。可以用“网页搜索”类比理解：

  • Query (Q)：类似你输入搜索框的查询词，即你想“进一步了解什么”。
  • Key (K)：类似搜索结果页每个网页标题，代表 Query 可以对齐的候选对象。
  • Value (V)：类似网页正文内容。匹配到相关 Key 后，真正汇总的是对应的 Value 信息。

通过 Q/K/V，模型可以计算 attention score，从而决定生成时每个 token 应该关注谁、关注多少。

步骤 2：Multi-Head 拆分

Query, key, and Value 向量会被拆成多个 heads。在 GPT-2（small）中共有 12 个 heads。每个 head 独立处理一部分表示，分别学习不同句法和语义关系。多头并行能显著提升表示能力。

步骤 3：Masked Self-Attention

在每个 head 中都会执行 masked self-attention。它一方面让模型关注有效上下文，另一方面通过掩码阻止访问未来 token，保证自回归生成的因果性。

图 3：利用 Query、Key、Value 计算 masked self-attention。
  • Dot Product： Query 与 Key 做点积得到 attention score，形成一个反映 token 两两关系的方阵。
  • Scaling · Mask：对分数缩放后，在上三角应用掩码，将未来位置置为负无穷，确保模型在预测下一个 token 时不会“偷看未来”。
  • Softmax · Dropout：缩放和掩码后，经 softmax 转为概率分布，再可选地加 dropout 正则。每行和为 1，表示当前 token 对其左侧 token 的关注分配。

步骤 4：输出与拼接

模型将 masked self-attention 分数与 Value 矩阵相乘，得到 最终输出。 GPT-2 有 12 个 self-attention heads，分别捕捉不同关系；它们的输出会被拼接后再经过线性投影。

MLP：Multi-Layer Perceptron

图 4：MLP 将 self-attention 输出映射到更高维空间，以增强模型表示能力。

当多头 self-attention 捕捉到输入 token 的多样关系后，拼接结果会送入 MLP 进一步提升表示能力。MLP 模块由两层线性变换组成，中间使用 GELU 激活函数。

第一层线性变换将维度从 768 扩展到 3072（4 倍）。扩展有助于在高维空间中建模更丰富、更复杂的模式。

第二层线性变换再将维度压回 768。这一压缩步骤在保持关键非线性信息的同时，将表示恢复到可管理的规模。

与跨 token 融合信息的 self-attention 不同，MLP 逐 token 独立处理，将每个 token 表示从一个空间映射到另一个空间，从而提升整体模型容量。

输出概率

输入经过所有 Transformer blocks 后，会进入最终线性层，为下一 token 预测做准备。该层把表示投影到 50,257 维空间，对应词表中每个 token 的 logit 分数。随后通过 softmax 把 logits 转成和为 1 的概率分布，便于按概率采样下一个 token。

图 5：词表中每个 token 都会基于模型输出 logits 获得一个概率，该概率决定它成为下一个词的可能性。

最后一步是从该分布中采样下一个 token。这个过程中 temperature 超参数非常关键。其数学形式很简单：把模型输出 logits 除以 temperature。

  • temperature = 1：对 softmax 输出几乎无影响。
  • temperature < 1：分布更尖锐，模型更“确定”，输出更可预测。
  • temperature > 1：分布更平滑，随机性更高，通常会带来更“有创意”的输出。

此外，可使用 top-k 与 top-p 进一步控制采样：

  • top-k sampling：只保留概率最高的 k 个候选 token，过滤低概率项。
  • top-p sampling：保留累计概率超过阈值 p 的最小候选集合，在保证高概率候选的同时保留多样性。

通过调节 temperature、top-k 与 top-p，你可以在稳定性与多样性之间找到适合任务需求的平衡。

辅助架构特性

Transformer 还有一些提升性能的重要辅助结构。它们对总体表现很关键，尤其在训练阶段。典型包括 Layer Normalization、Dropout 与 Residual Connections：Layer Normalization 稳定训练并加速收敛；Dropout 通过随机失活降低过拟合；Residual Connections 让梯度更顺畅传播，缓解梯度消失。

Layer Normalization

Layer Normalization 通过对特征维做归一化，保持激活值的均值与方差稳定，从而提升训练稳定性与收敛速度，并降低模型对初始化权重的敏感性。每个 Transformer block 中通常会在 self-attention 前和 MLP 前各使用一次。

Dropout

Dropout 是一种经典正则化技术：训练时随机将部分连接置零，防止模型过度依赖局部特征，提升对未见数据的泛化能力。推理阶段通常关闭 dropout。

Residual Connections

Residual connection 最早在 2015 年 ResNet 中被系统化应用。它通过“捷径连接”把层输入直接加到层输出，显著缓解梯度消失问题，使深层网络更易训练。在 GPT-2 中，每个 Transformer block 内会多次使用残差路径，帮助梯度稳定回传到前层。

交互功能

Transformer Explainer 提供了丰富交互，帮助你从内部机制理解 Transformer。你可以重点体验：

  • 输入自定义文本，观察模型如何处理并预测下一个词，包括 attention 权重、中间计算和最终概率的形成过程。
  • 使用 temperature 滑块 控制生成随机性，体验从稳定到更有创造性的输出变化。
  • 选择 top-k / top-p 采样 调整推理阶段的采样行为，比较不同参数对概率分布与预测结果的影响。
  • 交互查看注意力图，了解模型在输入序列中如何分配注意力；悬停 token 可高亮对应权重，直观看到上下文依赖关系。

视频教程

Transformer Explainer 如何实现？

Transformer Explainer 在浏览器中直接运行一个在线 GPT-2（small）模型。 该模型基于 Andrej Karpathy 的 GPT PyTorch 实现 nanoGPT project 并转换为 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, and Polo Chau （佐治亚理工学院）联合开发。