读了很多注意力机制的文章，公式背下来了，闭上眼睛却依然想不清"一个数字到底怎么变成另一个数字"——因为静态的公式和截图展示不了一个动态的计算过程。这篇用三个可交互的小组件，让你亲手把 Attention 的每一步"点"出来：从 X 到 Q/K/V 的投影、从打分到加权求和的完整链路、再到多头的 reshape/transpose 把戏。所有数值都是真实可验算的（d_k=3，笔算就能对上），玩具级的未训练权重，数值本身没有语义——重点永远是流程，不是数字。

交互组件为本站原创实现（单文件 vanilla JS，无外部依赖），在文章内直接操作即可。

一、QKV 投影：一个 token 的三种角色

同一个隐藏向量 X，分别乘上三个可学习的权重矩阵，得到三种视角：Q（我要找什么）、K（我能提供什么）、V（我携带的内容）。点击下方组件的「下一步」，看三份矩阵如何依次诞生；悬停任意结果单元格可以看到完整的点积展开——你会发现所谓"投影"不过是每行做三次点积。

三个值得盯着看的细节：

  1. Q/K/V 来自同一个 X——"提问的表示"和"被读取的内容"被解耦成两组不同的向量，这是注意力能学到丰富交互模式的关键自由度；
  2. Q 和 K 的维度必须相同（本例 d_k=3），因为下一步它们要做点积；V 的维度理论上可以不同（它只被加权求和）；
  3. 悬停你会发现 Q 的每个元素都是 X 一整行（6 个数）的线性组合——没有任何魔法，全是点积。

二、注意力计算：从打分到加权求和

有了 Q/K/V，注意力只剩四步：打分（Q·Kᵀ/√d_k）→ 因果掩码 → 按行 softmax → 加权求和 V。下面的组件把这四步做成通关流程：

操作建议（对应组件里的四步）：

  • 第 1 步：点击任意分数格子，右侧会展开它的点积计算。注意「追」对「小」的分数高达 5.2——相对其他格子是"强相关"；
  • 第 2 步：因果掩码把上三角打成 −∞。生成第 i 个 token 时不能偷看未来，这是训练不"抄答案"的保证；
  • 第 3 步：softmax 按行归一化，每行和恒为 1。「追」那行因为 5.2 对 −1.7 的悬殊分差，变成了接近 100% 的单点分布——softmax 对大分差是指数级敏感的，这正是除以 √d_k 的原因（把分差控制住，否则每行都会饱和成 one-hot，梯度消失）；
  • 温度滑块：把 T 拉到 0.3，看分布变得极端尖锐；拉到 3，看它摊平。这就是推理篇里采样温度的同一数学——T 直接作用于 softmax 前的 logits；
  • 第 4 步：输出 = 权重 · V。「狗」的输出 = 0.6·V[小] + 0.4·V[追]，每个 token 的新表示都是可见 V 向量的加权混合，维度不变。

到这里，softmax(QK^T/√d_k)·V 这行公式应该在你脑中变成了一台"看得见内部"的机器。

三、多头注意力：reshape 与 transpose 只是换一种看法

"多头"听起来玄，实际只是对投影结果做了两次纯视图变换：reshape 把 8 列切成 2 组、transpose 把"头"维度换到最外面——数据在内存里一个字节都没动，变的只是 shape 和 stride 元数据。下面的组件用元素原始坐标做跟踪，盯住任何一个格子看它如何"换阵营"：

理解要点：

  1. 头 = 列的分组方式，不是什么新结构。列 0~3 是头 0，列 4~7 是头 1（d_k=4）；
  2. reshape (4,8)→(4,2,4) 后 transpose (4,2,4)→(2,4,4)，"头"成为最外层维度——于是每个头都能独立跑一遍第二节的完整注意力流程；
  3. PyTorch 里的 view/reshape 与 transpose 是零拷贝操作（返回视图），这也是为什么 transpose 之后直接 view 会报错——数据不连续（non-contiguous）了，需要先 .contiguous() 拷贝一份；
  4. 32 个头各自算完，拼接回 (S, H)，再过一次输出投影 W_O 融合各头的信息。

写在最后

三个组件连起来，就是单头注意力的完整一生：投影 → 打分 → 掩码 → 归一化 → 加权混合 → 分头重复 → 拼接融合。这套流程在 Transformer 篇里以张量形状的视角推演过一遍，这里补上"手算级"的数值直觉——两种视角互补，形状告诉你数据怎么流，数值告诉你每一步在算什么。

如果你想在自己的文章里复用这类交互组件：它们是纯 HTML 单文件（无框架、无依赖），上传到 Halo 附件库后用 iframe 嵌入即可；文中的三个组件源文件在 /upload/qkv-w1-projection.html、qkv-w2-attention.html、qkv-w3-multihead.html，浏览器直接打开就能玩。

系列关联阅读：Transformer 架构详解（张量形状视角）、LLM 推理引擎（温度与采样的工程用法）。