钢是在烈火和急剧冷却里锻炼出来的，所以才能坚硬和什么也不怕。我们的一代也是这样的在斗争中和可怕的考验中锻炼出来的，学习了不在生活面前屈服。—— 奥斯特洛夫斯基

Transformer Explainer：把 Transformer 的文本生成过程，变成一场可以亲手参与的可视化学习

大语言模型正在以惊人的速度走进日常生活。

人们会向模型提问，让它写作、总结、翻译、分析，甚至帮助完成一部分代码工作。但当屏幕上不断浮现自然流畅的文字时，另一个问题也随之而来：这些文字究竟是怎样被生成出来的？

Transformer Explainer 希望把这个问题从抽象的概念，变成能够亲眼观察、亲手探索的学习过程。

这是一个用于帮助人们理解 Transformer 模型工作机制的交互式可视化工具，聚焦于 GPT 一类基于 Transformer 的文本生成模型。它能够直接在浏览器中运行实时 GPT-2 模型，让使用者在体验文本生成的同时，借助交互式可视化理解模型内部的工作过程。

项目地址：https://github.com/poloclub/transformer-explainer

当文本生成不再只是一个黑盒结果

对于许多人而言，使用语言模型是一件直观的事。

输入一句话。

等待模型响应。

看到一段新的文字逐步出现。

这个过程很自然，也很容易让人忽略其中正在发生的大量计算。模型并不是凭空写下答案，而是在已有文本的基础上持续处理信息，并一步步生成后续内容。

Transformer Explainer 将注意力放在这段过程本身。

它不是单纯展示模型生成了什么，而是试图解释模型为什么能够继续生成文本。通过交互式可视化，使用者可以更接近 Transformer 文本生成模型的内部机制，也可以在浏览器中直接运行实时 GPT-2 模型，观察生成过程与模型行为之间的联系。

这让学习不再只是阅读定义。

Transformer 不再只是一组难以想象的术语。

文本生成也不再只是一段突然出现的结果。

模型的运行过程开始拥有可以被观察、被探索、被反复理解的形态。

为理解 GPT 与 Transformer 而设计的交互式空间

Transformer 已经成为现代语言模型的重要基础。

GPT 一类模型能够生成文本，而其背后的 Transformer 机制对于初学者来说，往往既重要又不易理解。模型如何处理输入文本，如何在已有内容上继续生成，如何将一段文本转化为新的输出，这些过程很容易停留在概念层面。

Transformer Explainer 的目标，是让任何人都能更容易学习这类模型的工作方式。

它通过交互式可视化，将学习从静态阅读带向实际操作。使用者不必只面对一段文字说明，也不必仅凭抽象描述去想象模型运行的样子。工具本身运行实时 GPT-2 模型，并将模型的文本生成过程带入浏览器。

浏览器因此不只是打开网页的窗口。

它也成为观察文本生成模型的实验空间。

在这个空间里，模型不是遥远的服务端能力，而是可以被直接运行与理解的对象。输入、生成与可视化之间形成连接，帮助学习者从结果回到过程。

让学习从观看变成实验

理解复杂技术时，观看与操作之间常常存在明显差别。

只看一张结构图，可以知道 Transformer 很复杂。

只读一段介绍，可以知道 GPT 能生成文字。

但真正开始输入文本、运行模型、观察可视化过程时，理解会从被动接收变成主动探索。

Transformer Explainer 的价值，正是在于这种交互性。

它让模型学习不再只是面对一篇篇概念说明，而是能够围绕文本生成进行实际体验。模型在浏览器中实时运行，使用者可以将注意力放在生成过程上，并结合可视化内容理解 Transformer 模型的行为。

这种学习路径很适合从好奇开始。

为什么模型能够根据已有文本继续写下去？

为什么同样是文本输入，模型会生成不同的后续内容？

Transformer 在文本生成中究竟承担了怎样的作用？

这些问题不必急着用复杂术语回答。通过交互式体验，学习者可以先建立直觉，再逐步走向更深入的理解。

浏览器中的实时 GPT-2

Transformer Explainer 的一个鲜明特点，是它会直接在浏览器中运行实时 GPT-2 模型。

这让整个体验具有很强的即时感。

使用者打开工具后，面对的不只是预先准备好的演示结果，而是一个能够进行实时文本生成的模型。模型的输出不是固定的截图，也不是脱离操作的静态案例，而是随着交互过程展开的实时内容。

实时运行的意义，在于让模型行为真正出现在眼前。

文本一边生成，学习者一边观察。

模型一边工作，可视化一边帮助理解。

这使 Transformer 的学习过程不再被切割成两个彼此分离的部分。一边是理论知识，另一边是模型结果。Transformer Explainer 尝试把二者放在同一个界面与同一次体验中，让理解随着生成同步推进。

一项面向人机交互研究的工作

Transformer Explainer 对应的研究论文题为《Transformer Explainer：通过交互式视觉解释与实验学习大语言模型 Transformer》。

该研究发表于 2026 年 CHI 人机交互会议论文集。

从这个标题中，也能看出项目所强调的方向。

它关注的不只是把 Transformer 画出来，而是希望通过交互式视觉解释与实验，帮助人们学习大语言模型中的 Transformer。这里的重点是学习，是理解，也是让复杂模型在人的视角中变得更可接近。

文本生成模型的能力越来越强，但能力本身并不会自动带来理解。

一个模型可以生成自然语言，并不意味着人们已经知道它为何生成这些内容。

一个概念被频繁提及，也不意味着它已经变得容易学习。

Transformer Explainer 将可视化与交互结合起来，为理解模型提供了一条更具参与感的路径。

从本地启动自己的探索环境

Transformer Explainer 也提供了本地运行方式。

运行项目需要准备 Node.js 20 或更高版本，以及 npm 10 或更高版本。完成环境准备后，可以安装项目依赖并启动开发环境：

1
2
npm install
npm run dev

启动后，可以通过本地开发地址打开工具：

1
http://localhost:5173

本地运行意味着，学习者可以在自己的开发环境中启动这个交互式工具，进入围绕 Transformer 与 GPT-2 文本生成展开的可视化学习过程。

不只是解释结果，更是在解释生成

许多关于人工智能的展示，最终都会落在结果上。

模型写得是否流畅。

回答是否准确。

文本是否足够自然。

这些当然重要，但对于学习者而言，理解生成过程同样重要。因为只有当人们开始关注模型如何工作，模型能力才不再只是神秘的输出，而会逐渐成为可以被讨论、被分析、被学习的对象。

Transformer Explainer 的关注点正是生成过程。

它让文本生成不再只是“输入之后得到输出”的简单关系，而成为一个值得探索的过程。借助交互式可视化与浏览器中的实时 GPT-2 模型，使用者能够更贴近 Transformer 模型在文本生成中的工作方式。

模型依然复杂。

Transformer 依然包含需要不断学习的内容。

但复杂并不意味着只能远观。

当复杂过程拥有可视化表达，当模型能够在浏览器中被实时运行，当学习者可以通过交互参与其中，理解便有机会从模糊印象变成逐渐清晰的认识。

让大语言模型的学习更有触感

Transformer Explainer 的意义，在于它为理解文本生成模型提供了一种更具触感的方式。

它不是把 Transformer 简化成一句口号，也不是只展示最终生成的文字。它试图让学习者走进模型生成文本的过程，在交互、可视化与实时运行之间，建立对 GPT 和 Transformer 的直观认识。

对于刚刚接触大语言模型的人来说，它提供了一个可以开始探索的入口。

对于希望理解文本生成机制的人来说，它提供了一个能够观察模型行为的空间。

对于关注交互式学习与模型解释的人来说，它展示了一种将可视化、实验与实时模型运行结合起来的方式。

当语言模型不断生成新的文本，Transformer Explainer 也在提醒人们：理解模型，不必只停留在结果出现之后。

有时，更值得注视的，是文字生成之前与生成之中的那段过程。