模型结构 （悬停查看说明 · 点击查看详情）
位置编码波形
注意力热力图 （行=Query，列=Key）
Head:
Model View · 全层 × 全头注意力总览
行 = 层（第 1 → N 层自上而下），列 = Head（1 → H）。
每格为该层该头的完整注意力矩阵（当前阶段：）。
点击任意格 → 主视图定位到该层该头。
Neuron View · Q·K 逐维分解
📖 功能说明 · 这个页面怎么用
三分钟看懂整个演示的三栏布局与核心玩法。
整体布局：左 · 中 · 右
- 左栏「时间轴」：1943 → 2026 的里程碑论文线，按四个阶段分组。点任意节点，中间架构图会高亮对应模块，并弹出解释抽屉（公式 / 张量形状 / 参数量）。
- 中栏「架构图 + 图表」：上方是当前架构视图的结构图——点图中任意模块同样弹出解释；下方是注意力热力图（可切层/头/Softmax 前后），以及 Model View（全层×全头总览）和 Neuron View（Q·K 逐维分解）。
- 右栏「运行台」：输入文本 → 分词 → 选超参数 → ▶ 运行。这是真实的 TensorFlow.js 前向传播，不是动画模拟；底部控制台可以播放/暂停/单步，点日志任意一步跳转看解释。
顶部一排视图按钮是什么关系？
- 它们不是并列功能，而是架构演进的时间线：「前传·基石」(1943-2016) → 「前史 RNN→2017」→「2017 原版」→ 现代 Dense/MoE → 各技术分流（Attention 演进、线性 SSM、生成范式、前沿探索、训练对齐）。
- 推荐路线：2017 原版 看懂 Encoder-Decoder → 切到 Decoder-Only·Dense 对比 GPT/LLaMA 的差别 → 再按兴趣分流。
让生成"真的会说人话"
- 默认权重是随机初始化的——输出乱码是预期行为，演示的是机制而非语言能力。
- 右上「🎓 训练台」→ 一键加载 TinyShakespeare 预训练权重后，生成即有语义；还可以点「⚡ 微调」跑真实反向传播看 loss 下降。
- KV Cache 开关可对照「每步只算新 token」vs「整段重算」的差异；采样滑杆（temperature/top-k/top-p）实时改变下一个词的概率分布图。
更多细节文档
- 完整文档见项目仓库：docs/功能说明.md（中文）· docs/guide-en.md（English，本浮层的完整版，含术语表与常见问题）。
📖 Guide · How to use this page
Understand the three-column layout and the core features in three minutes.
Overall layout: left · middle · right
- Left — "History Timeline": the milestone paper line from 1943 → 2026, grouped into four phases. Click any node: the architecture diagram highlights the corresponding modules and an explanation drawer opens (formulas / tensor shapes / parameter counts).
- Middle — "Architecture + charts": the top shows the current architecture view's diagram — clicking any module opens the same explanation; below are the attention heatmap (layer/head/post-/pre-softmax switching), plus Model View (all layers × heads overview) and Neuron View (per-dimension Q·K breakdown).
- Right — "Run panel": input text → tokenization → hyperparameters → ▶ run. This is a real TensorFlow.js forward pass, not an animation; the bottom console supports play/pause/single-step, and clicking any log step jumps to its explanation.
How do the view buttons at the top relate?
- They are not parallel features but a timeline of architectural evolution: "Foundations" (1943-2016) → "Prehistory RNN→2017" → "2017 Original" → modern Dense/MoE → technical branches (Attention evolution, Linear SSM, Generation paradigms, Frontier, Training & alignment).
- Suggested route: 2017 Original to understand Encoder-Decoder → switch to Decoder-Only·Dense to compare with GPT/LLaMA → then branch by interest.
Making generation speak real language
- Default weights are randomly initialized — gibberish output is expected behavior; the demo shows mechanism, not language ability.
- "🎓 Training Studio" (top right) → one click loads TinyShakespeare pretrained weights and generation becomes semantically real; you can also hit "⚡ Fine-tune" to watch real backprop drive the loss down.
- The KV Cache toggle compares "only compute the new token each step" vs "recompute everything"; the sampling sliders (temperature/top-k/top-p) reshape the next-token distribution chart in real time.
More detailed documentation
- Full docs in the repository: docs/guide-en.md (English) · docs/功能说明.md (Chinese) — complete version of this guide with glossary and FAQ.
训练台
把「一堆随机数字」变成「会写莎士比亚的模型」——全程发生在你的浏览器里
525K可训练参数
63字符词表
4.14 → 1.52训练 loss（瞎猜 → 学成）
① 加载预训练权重
tools/train.html 在浏览器内训练的 TinyShakespeare 字符级模型，
架构与本页可视化逐算子一致。加载后 Dense 视图生成真实文本，建议输入英文。② 在线微调 · 亲眼看着 loss 下降
对已加载的权重继续训练 40 步（Adam lr=5e-5 · 每步 4 段×96 字符 · 约 10 秒）。
预训练全程
本次微调
——固定验证批「同题考试」，逐点可比。微调完重新生成可见差异。
加载权重后，这里会画出完整的训练 loss 曲线
点击结构图中任意模块或日志中任意步骤，说明将以右侧抽屉展示（公式 / 形状 / 代码 / 参数量 / 论文线）。