AI Room:走进一个正在真实运算的神经网络

开源了一个新项目 AI Room:把神经网络搬进一个 3D 空间,让你走进去逐节点观察它的运算。在线体验:ai-room-phi.vercel.app。

它和常见的"神经网络科普动画"有一个本质区别:这不是动画,是真实计算。页面加载时,每个网络都用固定随机种子在浏览器里真实训练;你看到的每一个数值——激活值、注意力权重、softmax 概率——都是前向传播的真实结果。点开任何节点,可以手动核对它的算术。

为什么做这个

看过不少讲神经网络的图和视频,大多停留在"示意"层面:箭头、方块、渐变色,数字是编的,流程是摆拍的。我一直想要一个能"对账"的版本——每个神经元的输入、权重、偏置、激活函数摆在面前,Σ 加出来的数就是屏幕上亮着的数。想验证它没骗你,就自己按计算器。

于是有了 AI Room。纯前端,没有后端,没有运行时网络请求,所有训练和推理都发生在你的浏览器里。

里面有什么

MLP(多层感知机):对三类高斯簇做分类。数据流粒子沿着带权重的连接逐层流动,动画顺序就是计算顺序。

CNN(卷积网络):识别图案(竖线/横线/对角线/圆环)。感受野滑窗严格按计算顺序在输入上滑动;卷积核有两种模式——手工的 Sobel 风格边缘检测核(可解释,只训练全连接头),或者从随机噪声端到端训练出来的核,反向传播是手写的。还有画板模式:自己在输入网格上画图案,看整个网络一笔一笔地实时分类。S/M/L 三档规模,切换时现场重新训练。

迷你 Transformer(字符级):结构完整的 Transformer 块——分词器 → 嵌入 → 正弦位置编码 → 多头因果注意力(2 头,含输出投影)→ 残差 + LayerNorm → 前馈 → 残差 + LayerNorm → 输出 softmax。前向和反向传播(包括 LayerNorm 和残差的梯度)都是手写实现,加载时在一个小语料上训练约 2.5 秒。两个头的 8×8 注意力矩阵逐行点亮;点开 Add & Norm 格子能看到 μ、σ、γ、β 的完整算式。按下「连续生成」就是真正的自回归解码:采样出的字符拼回上下文、窗口滑动、整条流水线重跑,文字一个字一个字流出来——和真实 LLM 的写字方式一致。温度滑块(0.2–1.4)实时控制采样分布。

语言识别(AI 应用):输入任意文字,文本被转成 8 个可解释的统计特征(拉丁字母占比、CJK 占比、假名占比等),一个训练好的 MLP 判断它是中文、English 还是日本語。这也是"计算是真的"的一个直接证明:你的输入、它的数字、它的预测,一条链看得清清楚楚。

每个层的标题都可以点开讲解:它在做什么、网络为什么需要它、一个大白话类比——中英日三语,讲解时该层在 3D 里高亮,其余变暗。

它没有假装自己是 GPT

README 里专门列了一节「与生产级模型的差异」:只有一个 Transformer 块、2 个头、d=12、字符级分词;训练是逐样本的朴素 SGD;CNN 只有一段卷积+池化;语言识别刻意用了手工统计特征而不是现代 embedding。展示的数学是真的,规模不是。我觉得诚实列出简化项,比假装"这就是 ChatGPT 的原理"更有价值。

技术栈

Vite + React + TypeScript + React Three Fiber + Drei + Zustand。npm run sanity 会把每个网络在每档规模下训练一遍并验证准确率。

代码在 github.com/tan-zhuo/ai-room,欢迎试玩和提 issue。