基于 Transformer 的大型语言模型（Transformer-based large language models）生成时能从先前 token 取信息，但需选择性机制决定影响权重。此机制能可视化：悬停生成 token 查看影响生成的过往 token。可视化高度简化，按注意力权重乘值向量幅值跨头跨层聚合控制透明度。因每 token 仅留单值丢信息，起初以为难懂却现有趣模式，如默认 Office Move Summary 提示中悬停逐字复制的地址日期可见关联。

基于 Transformer 的大语言模型有个有趣之处：在生成阶段，它能从之前的任意 token 提取信息。但它必须有所选择，如果每个 token 对生成的影响都相同，效果就会很差。因此这个过程需要一种机制，来决定某个 token 对下一个 token 的影响程度。

事实证明，我们可以把这个机制可视化！ 你可以点按或悬停在任意生成的 token 上，查看那些影响了生成的过往 token。

“受影响”这个说法可能不太准确，因为这个可视化高度简化了。它计算的是注意力权重乘以值向量的模长，在所有注意力头之间聚合，再跨层求和，然后用这个结果控制之前 token 的透明度。最大值透明度总是 1，其余做插值。

为了把每个过往 token 的可视化限制为单一数值，我们丢弃了大量信息。一开始实现时，我其实觉得它可能根本没法看懂。但它确实能产生一些有趣的模式！

例如在默认的“办公室搬迁摘要”提示中，你可以悬停在逐字复制的内容上，比如地址和日期。你会看到原始数据相当突出，因为生成的 token 从源数据提取了大量信息。

这解答了我之前觉得 LLM 不直观的一点：如果它们是靠概率预测下一个 token，为什么复制粘贴能这么准？难道不会因随机性出错吗？ 通过这个机制可以看到，它并非从有限的内部状态预测整个序列。既然能访问所有过往 token，它只需在复制时决定从哪些 token 提取，错误概率就能很低。在“调试平均函数”例子中，这个很小的模型（6 亿参数）能轻松复现整个 JS 函数，只差预期的修改。（不过它自己其实没法定位问题，所以需要一些提示。）

另一处有趣的是，在“办公室搬迁摘要”提示中，悬停于“Existing access cards and phone numbers remain”里的“remain”。你会看到它从“Existing employee access cards will work”里的“work”，以及“company phone numbers will stay the same”里的“stay the same”提取信息。相当于结合了两句词的信息，我觉得很酷。

实现

可视化本身是个基础的 React 应用，用 Transformers.js 生成文本。但因为需要从模型提取更多数据来可视化，它没法用常规生成循环。我只好在应用里 vibe-code 了生成循环，以便记录要可视化的值。

尽管用了较小模型，它仍有几百 MB，如果等下载完再显示什么，体验不行。所以我预生成了一批提示，可以即时加载查看。

另一个棘手点是，可视化里有些东西本不是设计来读的，所以没定义为输出。如果用 Python ML 库实现，访问它们大概很容易。但 Transformers.js 用的 .onnx 文件包含整个计算图，模型加载和计算逻辑在 wasm 里实现，据我所知，除了预定义输出，没法轻易访问其他东西。

最后，我用一个小脚本修改 onnx 文件，刚好暴露那些内部值。但这意味着不能直接用常规 .onnx 模型。因为想要浏览器内生成功能，我得把单独的插桩模型传到自己的 Hugging Face 仓库，让应用指向那里。

代码可以在 GitHub 仓库 找到。

多数读者赞赏该注意力可视化工具的直观清晰，认为它极大帮助理解机制与教学，少数人质疑其将高向量模长等同于高影响的简化假设，另有部分人提出关于公式、层级淹没与计算复杂度的技术疑问。

认为可视化清晰直观有助于理解注意力机制

• 读者普遍肯定该工具能直观展示注意力运作，尤其是融合双短语信息的能力，并有人计划用于教学，认为比书本视频更清晰。（较多人） > 这是我见过最清晰的展示注意力如何工作的例子（@fuddle）

质疑高向量模长等同于高影响的简化观点

• 有读者高度怀疑将向量模长大小直接对应影响力高低的想法，认为过于简单化。（少数人） > 我很怀疑高向量模长等于高影响这种简单想法（@sva_）

对实际公式、层级淹没与计算复杂度存疑

• 读者好奇背后加权方案或消融测试，担心早期层因数量多而在求和时掩盖后期层，另有新手询问自注意力是否导致上下文长度的二次方计算量。（少数人） > 这么多头和层，很难选择符合直觉的算法，是加权平均还是消融测试（@stared）