基于 Vue 3 的手写数字识别与神经网络逐层可视化实验台。
- 在画布中手写数字,自动标准化为
28 x 28灰度输入。 - 使用由 9,000 个 MNIST 样本训练的默认模型进行本地推理。
- 显示每一层的连接、激活强度、活跃占比和 0-9 概率。
- 自由添加或删除隐藏层,调整神经元数量与激活函数。
- Conv2D 可插入输入层之后、任意两个隐藏层之间或输出层之前,并支持核数量、核尺寸、步幅、填充、激活函数、逐项卷积核编辑与独立训练开关。默认按
[out_channel,in_channel,kernel_y,kernel_x]独立进行 He Uniform 初始化,也可选择使用手工卷积核进行模板引导初始化;模板不会原样复制到所有输入通道。冻结时卷积参数保持不变,但输入梯度仍会继续向前传播。Dense 输出会按等长整数因子自动重排为单通道特征图,例如64 → 8×8×1,不会补零或丢弃神经元。 - MaxPool2D、AvgPool2D 与 Global Average Pooling(GAP)都是可执行、可反向传播的层,可与 Conv2D 和 Dense 一起拖拽到任意隐藏层级。GAP 将
[B,C,H,W]按通道压缩为[B,C],适合在卷积特征与 MLP 之间完成降维。 - 每个 Dense 隐藏层可独立设置 Dropout;训练使用 inverted dropout,推理与验证自动关闭。
- 架构修改后可直接在浏览器中重新训练;训练集每轮使用新的随机顺序,并实时查看轮次、损失与验证准确率。
- 训练可随时暂停并从当前样本继续;Worker 到达批次安全点后原子冻结输入、标签、逐层信号与进度,避免暂停界面混合不同样本。
- 完整训练自动写入本地模型库,暂停时也可主动保存当前权重快照。
- 模型库支持载入、重命名、筛选、跨筛选多选和批量删除,模型数据保存在浏览器 IndexedDB 中。
- 载入模型后可设置任意正整数追加轮数,在现有权重基础上继续微调;微调结果会作为新记录保留。
- 学习率只要求是大于 0 的有限数值,不设置额外上限。
- 提供 SGD、Momentum、Adam、RMSProp 和 AdaGrad 五种完整优化器;重头训练与微调训练分别保存轮数、学习率、mini-batch 大小、优化器及其参数,并各自提供建议值和默认组合。
- 独立提供解耦 Weight Decay;它只衰减 Dense/可训练 Conv2D 的权重,不衰减偏置,也不与 RMSProp 的平方梯度
decay混用。 - 输出头可选 Softmax + 分类交叉熵(CE)或 Sigmoid + 二元交叉熵(BCE)。手写数字是互斥单分类任务,通常推荐 Softmax;Sigmoid 用于观察十个类别的独立分数或开展对照实验。
- 推理和训练采样均支持逐层步进;训练时可分别检查前向激活与反向梯度的具体数值。
- 顶部“信号流”页面以灰度矩阵同时展开全部网络层的输入信号、激活状态和训练反向梯度;可冻结推理快照或直接暂停训练,并逐个查看神经元坐标、数值、偏置与权重统计。点击卷积神经元还会按输入通道展开其共享卷积核权重矩阵,训练采样期间显示最新的参数快照。
- 训练期间同步采样输入图像、识别结果、逐层激活与反向梯度,并显示双向传播状态。
- 通过独立样本库页面管理手写数据,可筛选、修改标签、切换训练/测试归属,并进行单条或批量删除。
- 样本库可随时启用或关闭内置 MNIST 数据源;默认启用,关闭后训练与验证只使用用户自己的样本。
- 使用 Zig 编写并直接编译的 Wasm 内核执行 Conv2D、Dense 推理、前向训练、反向传播和优化器更新。
- 构建同时生成 SIMD128 与标量内核;浏览器优先加载 SIMD,并在不支持时自动回退标量版本。
- Web UI 可在“快速”和“完整”数学实现之间切换:快速模式使用 Zig 近似
exp/log/tanh/softplus,完整模式使用标准精度实现;选择同时作用于手写推理、重新训练和追加微调,并保存在本地。 - 浏览器训练由 Web Worker 调度 Zig/Wasm 内核,计算不阻塞绘图与界面交互。
- 架构偏好保存在浏览器本地,不依赖后端服务。
- Node.js
>=22.13.0 - Zig(仅重新编译 Wasm 时需要)
npm install
npm run wasm:build
npm run dev本地地址默认为 http://127.0.0.1:5173/。
npm test该命令依次执行 TypeScript 类型检查、标量/SIMD 数值一致性与性能基准、Wasm 训练回归和生产构建。
public/default-model.json 包含网站默认的完整训练模型:Conv2D 4×3×3 / stride 2 → Dense 128 LeakyReLU → Dense 64 ReLU → 10,来自本地模型记录“完整训练 · 07/24 15:58”,训练 100 轮,记录验证准确率为 93.51%。public/model.json 保留旧的 Dense 校准模型作为回退,并继续提供十个演示样本。需要在本地重新生成回退模型时运行:
npm run model:train训练脚本使用固定随机种子和 npm 的 MNIST 数据集,便于复现结果。
架构编辑器通过“添加隐藏层”菜单选择全连接层、二维卷积层或池化层,隐藏层数量不设上限;每个层级可通过拖拽把手排序,也可在把手聚焦时用上下方向键移动。池化层可在 MaxPool2D、AvgPool2D 和 GAP 间切换;每个全连接层至少包含 1 个神经元且不设数量上限,并可分别选择 16 种已实现的激活函数。输出层可切换 Softmax + CE 或 Sigmoid + BCE。修改架构后,在训练面板设置轮次与学习率并开始训练,训练完成的权重会立即接入同一套 Wasm 推理与可视化流程。学习率只校验为大于 0 的有限数值,不设置上限。
顶部“优化器”页面提供五种优化器的说明、公式与一键应用的建议参数。页面将重头训练与微调训练拆分为两个独立配置档,分别保存轮数、学习率、mini-batch 大小、Weight Decay、优化器类型和具体参数;默认 batch size 均为 16,建议 Weight Decay 分别为重训 1e-4、微调 1e-5。每种优化器也会根据当前配置档给出不同建议,例如微调会使用更短轮次和更低学习率。SGD 直接使用当前梯度;Momentum 可配置 [0, 1) 范围内的动量系数;Adam 可配置 beta1、beta2 与 epsilon;RMSProp 的 decay 只控制平方梯度移动平均;AdaGrad 累计历史平方梯度并提供数值稳定项。所有优化器更新均由 Zig/Wasm 执行,两套设置分别保存在浏览器本地,并由重训和追加微调入口自动选用。
实验台信号流标题右侧提供逐层步进开关。推理时可以从输入层逐步前进到 Softmax 输出层;训练采样出现后还可切换为反向传播,从输出层逐步回到输入层。步进面板会列出当前方向绝对值最高的神经元及其激活值、反向梯度,网络画布同步突出已经传播到的层与当前传播边界。
顶部“信号流”页面提供完整的逐层状态检查。每层以 Canvas 灰度矩阵显示送入该层的输入信号和本层激活,训练时额外显示反向梯度;卷积输出按特征图排列,全连接输出按神经元矩阵排列。点击任意单元会在指针旁打开神经元详情浮层,显示完整索引、激活、梯度、坐标、偏置和权重统计,也可以通过索引输入与前后按钮遍历未直接显示在主网络画布中的神经元。推理模式下暂停会冻结当前帧,训练模式下暂停会同时暂停 Worker,继续后从当前样本恢复。
手写数字完成后,可以选择标签并将当前输入加入训练集或测试集。自定义样本保存在浏览器本地。顶部“样本库”页面可用于查看缩略图、筛选、批量选择、修正标签、调整数据集归属和删除样本,并提供 MNIST 数据源开关。开关默认启用,此时自定义样本会与内置的 4,000 个训练样本和 1,000 个测试样本合并;关闭后 Worker 不再加载 MNIST,只使用自定义样本。
模型库中的任意完整模型或暂停快照都可以重新载入,也可以进入批量管理模式,跨类型筛选保留选择并一次删除多个模型。删除前会显示页面内确认条,批量写入使用单个 IndexedDB 事务。载入后,训练面板会同时提供“从头重新训练”和“追加微调”两个入口;设置的轮数表示本次追加轮数,微调会保留载入模型的当前权重并继续训练。完成后自动生成新的模型库记录,显示累计训练轮数;暂停后也可保存当前微调快照。取消或训练失败不会覆盖原先载入的模型。
浏览器训练使用 public/mnist-training.bin 中的稀疏二值 MNIST 数据。Worker 将每批输入打包为连续的 NCHW [B,1,28,28] 张量,在批内累积 Dense/Conv2D 梯度,并在批末统一取平均、执行优化器更新与解耦 Weight Decay。卷积、池化、Dense 权重、激活、Dropout 掩码、梯度和优化器状态均映射到 Wasm 线性内存;MaxPool2D 通过 argmax 回传梯度,AvgPool2D 与 GAP 将梯度均匀分配到有效输入。卷积位于中间时,Zig 内核按网络层序执行前向传播,再按相反顺序贯通池化、卷积和 Dense 的外部梯度。JavaScript 只负责批数据调度、暂停和可视化采样。Dense 点积、连续梯度传播和五种优化器更新使用 4 路 FP32 SIMD 向量块。训练面板中的数学实现分段控件默认选择“快速”;切换“完整”会令 Sigmoid、Tanh、ELU、SELU、GELU、Swish、Mish、Softplus、Softmax 和交叉熵改用标准精度非线性数学。需要重新生成训练数据时运行:
npm run data:build所有识别、训练与数据加载都在本地浏览器中完成;项目不包含 Sites 配置,也不会自动发布或上传数据。
本项目采用 MIT License,Copyright (c) 2026 SorMaze。完整条款见 LICENSE。