可视化讲解 Transformer
文章摘要
Transformer Explainer 是佐治亚理工学院 Polo Chau 教授团队（Polo Club of Data Science）做的一个交互式可视化工具，作者包括 Aeree Cho、Grace C. Kim、Alexander Karpekov、Seongmin Lee、Alec Helbling、Benjamin Hoover、Zijie J. Wang、Minsuk Kahng 和 Duen Horng (Polo) Chau，相关论文发表在 CHI 2026 上，代码以 MIT 协议开源。这个团队此前还做过 CNN Explainer、GAN Lab 和 Diffusion Explainer。它的最大特点是直接在浏览器里运行一个真实的 GPT-2（small）模型（约 1.24 亿参数，首次打开需要下载约 600MB 权重），你可以输入自己的文本，实时观察模型内部各个组件如何协作、一步步预测出下一个 token。页面上半部分是可交互的模型结构图，下半部分是一篇完整的图文讲解，主要内容如下。
什么是 Transformer。 Transformer 是 2017 年在论文《Attention is All You Need》中提出的神经网络架构，此后成为深度学习的首选架构，驱动了 OpenAI 的 GPT、Meta 的 Llama、Google 的 Gemini 等文本生成模型，也被用于音频生成、图像识别、蛋白质结构预测乃至下棋打游戏。文本生成类 Transformer 的基本原理是”预测下一个 token”：给定用户的提示词，接下来最可能出现的 token（一个词或词的一部分）是什么？它的核心创新在于自注意力机制，能处理整个序列，比之前的架构更有效地捕捉长距离依赖。之所以选 GPT-2 small，是因为它虽然不是最新最强的模型，却和当今最先进的模型共享大部分架构组件和原理，适合作为入门。
整体架构分三部分：嵌入层（Embedding），把文本切分成 token 并转换成数值向量；Transformer 块，模型的基本构件，每块包含注意力机制和 MLP（多层感知机）两部分，前者负责让 token 之间”互相交流”、在 token 之间路由信息，后者独立地作用于每个 token、细化每个 token 的表示；以及输出概率层，最后的线性层和 softmax 把处理后的向量变成下一个 token 的概率分布。
嵌入。 以默认示例提示词”Data visualization empowers users to”为例，嵌入分四步。第一步分词：「Data」和「visualization」各对应一个 token，而「empowers」被拆成两个；词表在训练前就定好了，GPT-2 的词表有 50,257 个 token。第二步查 token 嵌入：GPT-2 small 用一个 768 维向量表示每个 token，这些向量存放在一个 (50,257, 768) 的矩阵里，光这个矩阵就有约 3900 万个参数；用法或含义相近的 token 在这个高维空间里靠得近，不相近的离得远。第三步位置编码：不同模型编码位置的方式不同，GPT-2 从零开始训练自己的位置编码矩阵。第四步把 token 嵌入和位置编码相加，得到同时包含语义和位置信息的最终嵌入。
多头自注意力是讲解的重点。GPT-2 small 由 12 个 Transformer 块依次堆叠，token 的表示在逐层传递中不断演化，形成越来越高阶的理解。第一步，每个 token 的嵌入分别乘以三个学习得到的权重矩阵，得到 Query、Key、Value 三个向量。页面用搜索引擎打比方：Query 是你在搜索框里输入的内容，也就是你想”了解更多”的那个 token；Key 是搜索结果里每个网页的标题，代表可以被关注的候选 token；Value 是网页的实际内容，匹配到相关结果之后要取回的东西。第二步，把 Q、K、V 拆分成多个头（GPT-2 small 是 12 个），每个头独立处理嵌入的一段，捕捉不同的句法和语义关系，例如一个头捕捉近距离的语法联系，另一个头追踪更广的语义上下文。第三步是带掩码的自注意力：Query 和 Key 做点积得到一个方阵形式的注意力分数，反映所有输入 token 两两之间的关系；分数经过缩放后，把矩阵上三角部分设为负无穷作为掩码，防止模型”偷看”未来的 token；再经过 softmax 转成概率（可选地加上 dropout），每一行加起来等于 1，表示当前 token 左边每个 token 的相关程度。第四步，用注意力分数乘以 Value 矩阵得到每个头的输出，12 个头的输出拼接后再经过一次线性投影。
MLP 层由两个线性变换和中间的 GELU 激活函数组成。第一个线性变换把维度从 768 扩大四倍到 3072，让模型在更高维的空间里捕捉更丰富、更复杂的模式；第二个再压缩回 768，保留扩展阶段引入的有用非线性变换。和整合跨 token 信息的注意力不同，MLP 独立处理每个 token，只是把每个 token 的表示从一个空间映射到另一个空间。
输出概率与采样。 经过所有 Transformer 块后，最终的线性层把表示投影到 50,257 维的空间，词表中每个 token 对应一个 logit 值，再经 softmax 变成总和为 1 的概率分布，从中采样下一个 token。温度在这里起关键作用，数学上非常简单：把 logits 除以温度。温度等于 1 时没有影响；小于 1 时分布变尖锐，模型更自信、输出更确定；大于 1 时分布变平缓，输出更随机，也就是有人所说的”创造力”。另外还可以用 top-k（只从概率最高的 k 个 token 中选）和 top-p（从累积概率超过阈值 p 的最小 token 集合中选）来进一步调整采样。页面上可以直接拖动温度滑块、切换 top-k/top-p，实时观察概率分布的变化。
辅助结构：层归一化（每个 Transformer 块里用两次，分别在自注意力和 MLP 之前，用于稳定训练、加快收敛）；dropout（训练时随机把一部分权重置零以防止过拟合，推理时关闭，相当于使用训练出来的子网络的集成）；以及 2015 年 ResNet 引入的残差连接（绕过一层或多层、把输入直接加到输出上，缓解梯度消失，让深层网络可以训练，GPT-2 每个块里用两次）。
交互功能：输入自己的文本，查看模型如何处理并预测下一个词，展开注意力权重和中间计算；拖动温度滑块；切换采样方式；把鼠标悬停在 token 上高亮它的注意力权重，观察模型如何捕捉上下文和词与词之间的关系。页面还附有一段视频教程，项目也可以克隆到本地用 Node.js 运行。
HN 评论精华
本帖 651 分、约 90 条评论。和许多交互式演示帖一样，讨论大多没有停留在工具本身，而是延伸成一堂关于注意力机制”到底在干什么”的集体补课，外加不少关于”transformer”一词歧义的玩笑。帖子里没有看到项目作者现身。
“为什么是 Transformer，而不是别的架构？” est 的提问得到了最多回复：大家都在讲 Transformer 怎么工作，他更想知道其他方案为什么不行。DevelopingElk 的回答很务实：其他方案也能工作，只是 Transformer 在精度与算力的权衡曲线上更好。它让序列中相距很远的位置一步就能交换信息，而空洞卷积网络需要很多层；而且 Transformer 训练效率高。如果没有发明 Transformer，照样能训练出强大的语言模型，只是更耗内存、更慢，所以没人那么做。imtringued 总结了两点：Transformer 训练很容易并行化，可以用蛮力快速训练（”苦涩的教训”奖励对算力友好的可扩展架构）；而且它每生成一个 token 都会从头重读整个上下文窗口，检索是”完美”的。他还推演说，按此逻辑下一代架构只会用更多蛮力：现在的 Transformer 只能在末尾追加 token，也就是能读任何输入、却只能写一个特定输出，下一步也许是让它能在每次迭代中更新整个 KV 缓存。octoberfranklin 的说法是：”与其说其他方案不行，不如说我们找到的第一个能行的东西，恰好就是能行的最小方案。”他把注意力块比作”可微分的哈希表”，一种草稿纸式的存储：”真正令人惊讶的是，只需要在前馈网络上加上这些简单的哈希表/草稿纸单元（再加上巨大的规模），就能得到基本上通用的智能。”fithisux 则泼了点冷水：这只是实验结果和现有算力共同选择的结果，目前并没有多少理论解释，”大多是在挥手比划”。
关于注意力的几种直觉。 ActorNightly 写了一段颇为自信的长评：大多数做机器学习的人其实不知道 Transformer 是什么，K/Q/V 没什么神奇的，名字只是沿用了早期数据科学里手工定义 key 和 query 矩阵的做法；它之所以有效，是因为它是早年核技巧（kernel trick）的延伸，把单个 token 映射到更高维的潜在空间，从而可以做更复杂的区分。octoberfranklin 欣赏这个类比，但指出一个关键区别：核方法用的内积是可交换的、双向的，两个 token 被同一个函数投影后再做点积，因此无法捕捉单向关系，比如在”I threw the ball”中，ball 是 threw 这个动作的对象，反过来却不成立；Transformer 对两个 token 分别使用不同的投影（W^Q 和 W^K），让”先投影再点积”变成不可交换的运算，可以说是把核技巧推广到了非交换关系。
andblac 分享了他觉得最迷人的一点，也是入门讲解很少强调的：注意力矩阵算出来之后乘以 Value 的那一步，其行为和普通网络里向量穿过一个全连接层完全一样，只不过这里的”权重矩阵”就是注意力矩阵。也就是说，注意力头被训练成在推理时根据 Key 和 Query 动态构造一个小型单层网络。bonoboTP 解释了这一点为什么很少被讲：它要求读者熟悉 MLP 却不熟悉 Transformer，而这样的人越来越少了。他补充说，在经典的类 MLP 网络里几乎从不出现两个依赖输入的值相乘（Squeeze-and-Excitation 层等是例外），乘法总是发生在与输入无关的参数和依赖输入的激活值之间，而注意力带来了大量依赖输入的激活值之间的乘法交互。然后是惯例的一句：”另外，Schmidhuber 很早以前就讲过这个了。”octoberfranklin 附和说这就是 Schmidhuber 的”快速权重编程器”（Fast Weight Programmers），”不知为何，人们总以不引用他为乐”。
bilsbie 问 Q、K、V 三个矩阵到底在做什么。kingstnap 答道：Wq 把嵌入投影到”这个 token 在问什么问题”的空间，Wk 投影到”这个 token 能回答什么问题”的空间，Wv 投影到”答案是什么”的空间，当然这些解释都是事后附加上去的；实际上你甚至可以构造权重让注意力计算最小二乘、给数字排序、执行梯度下降步骤。penguin_booze 直言这种解释虽然技术上正确，但对提问者毫无帮助，”和’单子不过是自函子范畴上的幺半群，有什么问题吗？’是一个级别”。kingstnap 于是耐心地展开：比如「dog」这个 token 的 query 可能是”这只狗叫什么名字”，前面的「bella」的 key 可能是”这是一个名字”、value 是”名字是 bella”，key 和 query 方向一致就匹配上了；”真正需要信仰一跃的，是承认这种抽象的语言模型可以存在、并且可以用一串数字表示，这确实有点离奇”。
对这个工具的批评。 E-Reverance 担心外行会把它当作现代模型的工作方式，比如现在已经不用绝对位置编码了，而这类细节会深刻影响模型能学到什么样的表示。foobazgt 回应说教学就是要简化；ViscountPenguin 认为 RoPE 在概念上其实更简单，或者干脆去掉位置编码、把 Transformer 当作集合模型来讲。做”用电子表格实现 GPT-2”项目的 ianand 则说，他反而觉得绝对位置编码比 RoPE 更容易向外行解释。robrenaud 提出几点意见：页面在介绍采样策略时用”平衡安全与创造力”的说法，”安全”这个词用得不对；温度为 0 生成的文字有一种奇怪的”缺乏意外”的特质，反而显得不自然；dropout 已经不是现代训练配方的一部分，建议整段删掉（被追问时他解释说大模型配大数据会泛化而不是过拟合，可参考”双下降”现象）。他还怀疑单靠一个可视化，很难让一个人同时新理解词嵌入和注意力，并附上了自己为一场关于”Full Bandwidth Transformers”的讲座做的可视化。maciejzj 认为这是他见过的较好的可视化之一，只是 Q/K/V 权重应该放在更显眼的位置，并且放进每个”Head N of M”块里，因为每个头都有自己的权重。
实际使用体验。 这个页面相当吃资源：jwpapi 的 Chromebook 被它弄崩了两次，shagie 指出页面要下载 600MB 的 GPT-2 模型，noncovalence 说后台一个标签页 10 秒内吃掉 2.2GB 内存，笔记本掉到每秒 5 帧。hollowturtle 抱怨它在手机上不能用，拿 Bartosz Ciechanowski 的博客举例，说那么复杂的可视化照样在手机上完美运行。mhl47 则说这个工具帮他解开了一个长久的困惑：他一直不明白计算当前 token 时，Transformer 怎么能把所有上下文压缩进注意力和 MLP 之间一个 768 维的扁平向量里，现在他明白了，因为注意力和 MLP 交替进行，会反复把其他 token 的信息混入当前计算。
推荐的其他资源：Jay Alammar 的《The Illustrated Transformer》（jasonjmcghee 力荐，另有人推荐他的书《Hands-On Large Language Models》），Brendan Bycroft 的 3D LLM 可视化 bbycroft.net/llm（多人推荐，dang 附上了此前两次讨论的链接），3Blue1Brown 的系列视频，Welch Labs 关于 DeepSeek 注意力的视频和海报，以及把 GPT-2 塞进电子表格的 spreadsheets-are-all-you-need。
最后，评论区少不了关于名字的玩笑：好几位电气工程背景的人（ftumminello、throw0101a、stdatomic）说他们点进来以为是讲电力变压器的，dgellow 本来想看磁场和电感的酷炫可视化；另一批人期待的是擎天柱和威震天，BobbyTables2 建议把”token”改叫”能量块”（energon），cobbzilla 则说”transformer”正在跻身”最被滥用的术语”榜单，和”service”、”template”、”zone”争夺名次。