01项目概览

Kimi K3 技术可视化

把技术报告变成可以点、可以调、可以逐步看懂的讲解。

读模型报告时，难点常常不是找不到名词解释，而是不知道它为什么出现、解决了什么问题、与前后的技术有什么关系。我围绕 Kimi 的模型架构、预训练和后训练，把报告拆成一组可交互的页面：先交代问题，再用图解建立直觉，最后展开公式和具体机制。

项目类型技术内容与交互学习个人角色内容拆解、叙事与交互设计当前状态已上线 · 11 页

在线体验 ↗

KV Cache 页面：目录、具体句子与计算对比共同构成阅读起点。 — 图 01KV Cache 图解

02项目目标

理解技术

技术名词和公式很难直接形成直觉。以 KV Cache 为例，我希望读者先看到每生成一个新词会重复哪些计算，再观察缓存怎样复用已有结果，最后理解它节省了什么、又带来了什么代价。

说明为什么需要从旧方法遇到的困难出发，让新技术的作用自然出现。
让变化可以观察把参数、计算步骤和图形连起来，读者可以自己调节、比较。
允许不同深度的阅读先看图理解主线，再按需要进入公式、案例和技术细节。

03产品功能

阅读过程

选择主题

11 个主题按架构、预训练和后训练组织。读者可以沿目录顺序学习，也可以从总览直接进入 KV Cache、KDA 等主题；主区域一次展开一个问题。

调节参数

KV Cache 页面把同一个解码过程摆在一起比较。拖动“原始 token”和“新增 token”滑块，图中的计算单元和累计数字随之更新。红色区域展示重复计算，另一侧显示复用历史后只需新增的部分。

同一页还用 bank 的“河岸”和“银行”两种语境，说明一个词如何结合上下文获得不同含义。读者先看具体句子，再看它与注意力计算的关系。

参数变化

页面用一个简化计算示例演示缓存：已有 5 个 token、新增 1 个时，两侧显示 21 与 6 个计算单元；把新增数量调到 4 个，两侧变为 130 与 30。切到“公式”后，可以查看同一组输入对应的计算过程。

将新增 token 调至 4 个后，公式页显示两种方式累计计算 130 与 30 个单元。 — 图 03计算对比

分步讲解

KDA 页面把状态更新拆成五步。点击“衰减、擦除、写入”，左侧高亮对应的数据流，右侧展开这一阶段的公式，并补上两句解释：直觉是什么，为什么需要这一步。

读者可以先跟着一份状态从输入走到输出，再回头看整条公式。演进路径、计算过程、衰减机制和混合架构分别放在页内选项中，避免把所有细节挤在一张图里。

KDA 第三步：图中数据流与右侧的衰减、擦除、写入公式同步展开。 — 图 04KDA 分步讲解

跨代对比

后训练页面把 K1.5、K2、K2.5、K3 的流程并排放置。读者先看每一代的训练阶段，再点击损失函数、评价机制或蒸馏结构，查看对应解释。

例如点开 K3 的“蒸馏结构”，右侧会切换到九个专家与学生模型的关系图。这种左右联动保留了整体位置，也让细节随读者的选择出现。

编辑演示

主题、字号和全屏设置适配不同讲解场景。编辑模式可以选中组件，调整文字、位置和层级；草稿保存在当前浏览器，供下次演示继续使用。

04实现逻辑

技术实现

这个网站采用原生 HTML、CSS 和 JavaScript，交互图形主要用 SVG 绘制。讲解内容和计算逻辑已经写进页面，读者操作时由浏览器即时更新。Kimi K3 是被讲解的对象；网站运行时不需要调用大模型。

技术分工

部分	实现方式	承担的工作
页面与图解	HTML · CSS · SVG	呈现讲解、公式和流程，统一图形与文字的布局。
计算与交互	原生 JavaScript	响应滑块和步骤选择，重新计算数值并更新图解。
状态保存	URL hash · localStorage	网址记录阅读位置与页内状态，浏览器本地保存编辑草稿。
自动发布	GitHub Actions Cloudflare Pages · Hugging Face	主分支更新后，将静态站点分别发布到两个入口。

代码结构

app/main.js页面入口: 加载内容目录与页面样式，完成装配、协议校验和画布缩放。
pages/主题页面: 每页分别保存内容定义、组件、计算逻辑、样式和图片。修改 KDA 页面时，不必改动 KV Cache 的实现。
deck.js内容装配: 组合 11 个页面，定义顺序、章节和页面之间的关系。
core/播放与编辑: 处理导航、键盘输入、页内状态、地址恢复和编辑操作。
shared/公共组件: 提供文本、公式、对比、模拟等组件，以及基础样式和页面工具。
themes/视觉规则: 集中设置颜色、字体、字号、间距和动画，让不同主题页保持一致。

状态联动

读者调滑块、点步骤或切换选项

↓

更新当前页面状态 → 重新计算数值 → 更新图解与说明

↓

状态写入网址 → 重新打开时恢复对应页面与选项

每块交互内容用“页面编号＋组件编号”区分状态。KDA 的步骤、KV Cache 的长度和后训练的选项各自保存，因此切到另一页不会把参数混在一起。编辑器的文字和位置草稿另存在浏览器的本地存储中。

SVG 里的图形和文字由同一份计算结果生成。例如 KV Cache 的滑块值变化后，计算模块先得到新的累计数量，展示组件再绘制对应的格子和数字。图解与公式共用输入，读者切换展示方式时能继续比较同一个例子。

页面装配

每个页面向外提供页面定义、渲染器和样式清单，主程序统一加载。导航引擎只认识页面关系，不需要了解某个公式的含义。新增一个技术主题，主要是在页面目录实现内容，再在目录文件中接入。

工程还设置了协议检查，检查页面与组件是否符合约定。字体、按钮和图例遵守同一套设计变量；窄屏则缩放逻辑演示画布，保留图形之间的相对关系。

部署更新

代码保存在 GitHub。主分支收到更新后，GitHub Actions 自动取出代码，将当前提交编号加到入口脚本的版本参数中，再把静态文件部署到 Cloudflare Pages。用户通过个人域名访问更新后的演示。

01
本地修改内容与交互
检查页面效果和项目协议，再把代码推送到 GitHub 主分支。
02
自动部署 Cloudflare Pages
发布任务为入口模块加上提交版本，再上传 HTML、样式、脚本和资产。
03
同步 Hugging Face
另一条自动任务将同一份静态站点同步到 Hugging Face Space，保留第二个展示入口。

本地通过静态服务器预览，用项目检查脚本核对页面协议。上线只需发布 HTML、样式、脚本和图片；入口模块附带提交版本，减少浏览器沿用旧入口的情况。编辑草稿留在各自浏览器，不会随代码发布同步给其他读者。

05我的工作

内容与交互设计

我负责内容拆解、叙事顺序和交互信息架构。工作重点是把报告中的技术关系整理成一条能跟得上的学习路径，再决定每一段适合用什么形式呈现。

拆解内容把架构、预训练和后训练分层，梳理概念之间的前置关系与演进脉络。
安排叙事先讲旧方法遇到的问题，再讲新机制怎样回应，并在对应位置补上公式和来源。
设计交互为计算比较设置滑块，为连续机制设置步骤，为横向比较设置联动详情。
组织呈现在总览、目录和页内切换之间分配信息，让主线与细节有各自的位置。

让交互承担解释任务

同一段技术内容，我按问题选择交互：比较计算量用滑块，解释连续机制用分步图，比较多代技术用总览与详情联动。每次操作都要带来新的信息。

06完成情况

当前版本

当前线上版本包含 11 个主题页，覆盖架构、预训练和后训练。目录、参数调节、图解与公式切换、分步展开、跨代比较和本地编辑均已做出。

已经完成

11 个主题页与在线阅读入口。
图解、公式、分步演示和跨代对比。
本地编辑与两条自动发布工作流。

交互验证

调节 KV Cache 参数后，图形和数字同步变化。
KDA 第三步可以展开对应公式与数据流。
后训练总览可切换到蒸馏结构详情。
编辑模式可选中组件并显示编辑工具。