Show HN：LLM注意力可视化

# 大语言模型注意力可视化 来源：https://ishamf.dev/p/llm-attention-visualizer/ 基于Transformer的大语言模型有一个有趣的特性：在生成阶段，模型能够从任意历史词元中提取信息。但这种提取需要选择性——如果每个词元对生成的影响都相同，效果就不会理想。这个过程需要一种机制来决定每个词元对下一个词元的影响程度。 实际上，我们可以将这种机制可视化！ 你可以点击或悬停在任意已生成的词元上，查看影响了*生成的*历史词元。 （正在加载……需启用JavaScript） *注："影响"的表述可能不完全准确，因为此可视化是高度简化的版本。它计算注意力权重（乘以值向量的模长，在所有注意力头间聚合，并在所有层间求和），并用此值控制历史词元的透明度。最大值对应透明度1，其余值按比例插值。 由于必须将可视化简化为每个历史词元仅显示一个数值，因此不得不舍弃大量信息。正因如此，当我开始实现时，本以为这种形式可能难以理解，但实际上它却呈现出一些有趣的规律！ 例如在默认的"办公室搬迁摘要"提示中，你可以悬停在如地址和日期等完全复制的文本上。此时会明显看到原始数据被突出显示，因为生成的词元从源数据中提取了大量信息。 这解释了我之前对大语言模型的一个困惑：如果它们只是通过概率预测下一个词元，为何却擅长精确复制内容？难道随机性不会导致错误吗？ 但通过这个机制可以看到，模型并非仅从有限的内部状态预测整个序列。由于它能访问所有历史词元，只需在复制时决定从哪些历史词元提取信息，因此出错概率极低。在"调试平均函数"示例中，可以看到这个相当小的模型（6亿参数）能轻松复现整个JS函数，仅修改预期部分。（尽管它无法自主定位问题，因此需要一些提示。） 另一个有趣之处在于，当你悬停在"办公室搬迁摘要"提示中"现有门禁卡和电话号码**保留**"的"保留"一词时，可见它同时从"现有员工门禁卡将**继续有效**"的"有效"和"公司电话号码将**保持不变**"的"保持不变"中提取信息。这种融合短语中词汇信息的能力相当精妙。 ## 实现细节 可视化本身是一个基础的React应用，使用Transformers.js生成文本。但由于需要从模型中提取更多数据进行可视化，无法使用常规生成循环。我不得不在应用中自主编写生成循环，以便跟踪需要可视化的数值。 尽管使用了较小模型，仍有数百兆大小，等待下载完成再显示内容显然不可行。因此我预先生成了一批提示样本，可立即加载查看。 另一个难点是可视化中的某些元素实际并未定义为输出项。如果使用Python机器学习库实现，可能仍能轻松访问这些数据。但Transformers.js使用的.onnx文件包含完整计算图，模型加载和计算逻辑均通过wasm实现。据我所知，无法简便地访问预定义输出之外的数据。 最终，我使用小脚本修改了onnx文件，使其能暴露这些内部值。但这意味着无法直接使用常规.onnx模型。由于需要浏览器端生成功能，我必须将经过特殊处理的模型上传至个人Hugging Face仓库（https://huggingface.co/ishamf/Qwen3-0.6B-ONNX-Instrumented），并将应用指向该位置。 代码可在GitHub仓库（https://github.com/ishamf/llm-visualizer）中找到。