← #803

TokenTown：用一座城市直观理解 LLM 的运作方式

文章摘要

TokenTown 是一个托管在 GitHub Pages 上的浏览器内交互演示，副标题是”一座按 token 逐个铺开的语言模型城市”。它把 Transformer 的每一个阶段映射成等距视角（isometric）城市里的一个街区，然后让一支”车队”载着隐藏状态在路网上跑一圈，把推理过程演成一段可观看的动画。

映射关系是这样的：文本先在”码头”被切成 token，在”铸造厂”被铸成向量，盖上位置戳，然后每一层都绕”层环”跑一圈——注意力、残差、前馈、残差——最后由”词汇体育场”把隐藏状态变成概率分布，采样器挑出一个 token。这个 token 沿”反馈高速路”开回起点，整座城市再跑一遍。点击任意街区可以飞过去看它对应阶段的解释。

作者在页面里专门写了一节”这里面有多少是真的”，态度相当诚实，分成三档：

真正在你浏览器里实时计算的：分词切分、嵌入查表、正弦位置编码、LayerNorm、带因果掩码的多头缩放点积注意力（跑在一个真实增长的 KV cache 上）、残差相加、GELU 前馈、以及温度/top-p 采样。卡车上的柱状条就是真实的向量，仓库上方的光束就是真实的 softmax 权重。预填充（prefill）确实一次处理全部提示 token，解码（decode）确实每次只处理一个。
等比缩小的：12 维而不是几千维，2 个注意力头而不是几十个，2 到 12 层而不是 80 层，词表只有几百个词而不是十万以上。
故意造假的：权重是随机的，什么都没训练过，所以随机权重模型本来只会吐噪声。为了让输出可读，最终 logits 把真实的隐藏状态投影和一个来自小型固定语料的 bigram 先验混在一起；注意力分数也被锐化过，并加了一点首 token（”sink”）偏置和近因偏置，好让注意力图看起来像训练过的模型真正会产生的模式。作者的原则是：把这座城市写出来的文本当布景，把机制当课程。

节奏设计也花了心思：车队第一次到达某个街区时会停留 9 到 26 秒（取决于要讲的内容多少），面板下方有进度条显示还剩多久；所有街区都讲解完之后，城市就切换到”可观看”而非”可阅读”的速度，重复的层会快进，因为那是同一条路配不同权重。空格键可以无限期停住任意一站，S 键单步推进一个阶段，速度滑块从 0.4 倍到 8 倍缩放一切（包括阅读停留时间），R 重置并重播完整慢速导览，F 跟随镜头，L 切换标签。可以拖动平移、滚轮缩放。作者注明灵感来自 PGSimCity（一个把 PostgreSQL 做成城市的模型），但代码、美术和文案都是原创。

作者在 HN 的自述里补充了动机：他反复给朋友解释分词，发现市面上缺一个以学习而非文档为目的的简单交互工具，所以做了这个——粘贴文本就能立刻看到它如何被切成 token，以及 token ID、计数等细节，从而理解为什么提示词是那个价格、上下文限制为什么那样表现、模型为什么有时会在意想不到的地方切开一个词。

HN 评论精华

这条帖子只有 74 分、21 条评论，讨论的走向对作者相当不友好——绝大多数回复不是在谈 Transformer，而是在谈”这是不是又一个 vibe-coded 项目”。如实记录如下：

作者 laurentiurad 发帖自述后，第一条回复来自 hk__2，只有一句改写：”> 我做了这个 —— 我让一个 LLM 做了这个。”同一位用户后来又发了一条：”能不能把这类随手 vibe-code 出来的项目从首页过滤掉？”
foltik 给出了最具体、也最有建设性的批评：他把所有解释文字读了一遍，认为它们都是典型的空泛 LLM 文风，堆满术语和无关的枝节细节。”如果你要把它当学习工具公开展示，希望你能花点真正的人类脑力亲手写和打磨这些文案，而不是把 Claude 吐出的第一版扔过墙。我几乎能猜出你用的提示词，而且大概能得到一样的东西。”overtaxed 用更温和的方式说了类似的话：”我觉得这想法很好，但对普通人（比如我）来说，再讲得浅一点会很有帮助。”作者回复表示会去简化。
Hugada 指出了这类可视化的根本悖论：要看懂它，你得先懂很多东西——所以页面上或许应该先说明”你需要预先知道什么”。markstos 用一句反讽表达了同样的失望：”从这里我学到了：LLM 很复杂，很耗算力。”
HarHarVeryFunny 是唯一认真逐个街区挑毛病的人，也顺手拆穿了隐喻的边界：他看到一列”公路火车”（一个批次？）在”层计数拱门”处撞车，而其他车照常穿过去；”输出广场”看起来一点也不像输出，车/嵌入似乎绕回了输入；不明白注意力广场为什么时不时往中间的排水沟里丢东西；把采样器画成离心机也很奇怪。他最后的吐槽是：”所以结论是 LLM 和汽车有关？还是和高速公路有关？这是 Schmidhuber 设计的吗？”
GCUMstlyHarmls 指出了文案与画面的直接矛盾：解释里写着”这不是代码里的循环，它是一叠不同的块”，然后画面老老实实地绕了六圈。
lionel-messi 一句”这完全没帮助”引来了本帖最热闹的一串玩梗：pluc：”恭喜你，你现在是资深 AI 工程师了。”willchis：”哥们儿，直接在 KV cache 上 softmax 一下不就行了。”icedchai 则复读了那句著名的模型口头禅：”You’re absolutely right!”
唯一一条纯粹建设性的替代推荐来自 phikappa：他推荐 Brendan Bycroft 的 LLM 可视化工具（bbycroft.net/llm），说自己是视觉型学习者，那个工具比任何东西都更帮他理解了 LLM。onlyrealcuzzo 提了个方向性建议：如果能做成 3Blue1Brown 那种风格的可视化，但可交互、能在任意阶段自由探索，那就真的很酷了。arcs- 则要求做移动端适配，并顺带刺了一句：”有 LLM 在，我预期这应该非常容易。”