MatiwosKebede/OpenTrainDNN 来源：https://github.com/MatiwosKebede/OpenTrainDNN # OpenTrainDNN OpenTrainDNN：一个基于浏览器的实时神经网络可视化工具。 OpenTrainDNN 是一个开源、客户端的 Web 应用，旨在实时渲染深度神经网络的逐步训练机制。它无需后端服务器、专用硬件驱动或本地安装，就能直接展示反向传播、激活流和权重更新的过程。 OpenTrainDNN 截图 无需安装。无需构建步骤。无需框架。无需后端。 ## 目录 - 为何存在 - 功能特性 - 快速开始 - 它能学与不能学 - 项目结构 - 工作原理 - 它所演示的内容 - 要求 - 参与贡献 - 安全 - 许可 ## 为何存在 每个机器学习框架都将有趣的部分隐藏在单个函数调用之后。你写下 model.fit(x, y)，然后一个数字下降。你从未看到发生了什么。 OpenTrainDNN 不隐藏任何东西。它运行一个真实的神经网络——真实的反向传播、真实的优化器、真实的权重更新——完全在你的浏览器中。每一层都可见。每一个权重都是一条你可以看着移动的线。每一个激活都在计算完成的那一刻显示在屏幕上。它存在的目的是回答一个问题：神经网络究竟做了什么？ 它是一个教学工具，而不是框架。如果你想构建生产模型，请使用 PyTorch 或 JAX。如果你想看到那些模型实际在做什么，请使用这个。 ## 功能特性 ### 两种输入，一个网络 摄像头将每一帧转换为 16×16 的灰度图像。麦克风将每一段声音转换为 16×16 的梅尔频谱图。两者都产生 -1 到 +1 范围内的 256 个数字。网络不知道其中的区别。这正是关键所在。 ### 两种架构 - 全连接 —— 完全连接，小巧、快速，易于理解。 - CNN —— 卷积网络，学习空间滤波器，并向你展示特征图形成的过程。 ### 十二种分辨率 从 4×4 到 64×64。小分辨率在几秒内就能训练完成。大分辨率需要更多数据。该工具使这种权衡可见。 ### 一切尽在屏幕 - 每个神经元都是一个发光的圆圈，其亮度跟踪其激活值。 - 每个权重都是一条弯曲的线，其粗细、亮度和光晕跟踪其大小。 - 每个特征图每帧更新。 - 输入本身——图像或频谱图——全尺寸显示。 ### 真实训练 - 精确的解析梯度。 任何地方都没有使用有限差分。 - Adam 优化器。 与生产框架相同的更新规则。 - 梯度裁剪。 防止在大型网络上发散。 - 训练/验证集划分。 每五个样本留出一个用于验证。 - 实时过拟合警告。 一旦验证精度落后于其峰值，警告即触发。 ### 持久化 将训练好的权重保存为 JSON。稍后重新加载。类别名称和颜色会在重新加载后保留。 ## 快速开始 ### 1. 打开它 下载仓库。在任何现代浏览器中打开 index.html。更倾向于本地服务？从项目文件夹运行本地服务器：python3 -m http.server 8000 然后打开 http://localhost:8000/。你也可以使用托管在 GitHub Pages 上的在线版本：https://MatiwosKebede.github.io/OpenTrainDNN/ ### 2. 训练你的第一个网络 1. 点击 启动摄像头。允许权限提示。 2. 将一个 红色物体 放在摄像头前。轻微移动它，同时按 1 十五次。 3. 换一个 蓝色物体。同样地移动它，按 2 十五次。 4. 点击 训练。 5. 观察 DNN 预览填充。线条变粗并发光。大约十秒后，准确率停止上升。 6. 交替使用两个物体。预测框会切换。 ### 3. 尝试麦克风 1. 将输入源切换到 🎤 麦克风。 2. 说 “yes” 二十次。每次之后按 1。 3. 说 “no” 二十次。每次之后按 2。 4. 点击 训练。 5. 说 “yes”。第一个条形图填满。说 “no”。它会切换。 这就是整个系统的端到端过程：真实信号 → 真实数字 → 真实学习 → 真实预测。 ## 它能学与不能学 | ✅ 效果良好 | ⚠️ 效果一般 | ❌ 无法工作 | |—|—|—| | 截然不同的颜色 | 钢笔 vs 铅笔 （如果笔尖可见） | 细腻的纹理（木材 vs 金属） | | 截然不同的亮度 | 字母 A vs B （不是 A vs Å） | 小的细节 | | 人脸（你的脸 vs 墙壁） | 两张相似的人脸 | 完整的句子 | | 手势 | | 猫 vs 狗 | | 简单形状 | | 任何需要计数的事物 | | 两个短单词 | | 任何需要推理的事物 | > 规则。 如果一个人能从一个小的灰度缩略图中分辨出两件事物，那么网络就能学会做同样的事情。如果不能，它就无法学会。再多的训练也无济于事。 ## 项目结构 OpenTrainDNN/ ├── index.html — 标记语言 ├── style.css — 样式表 ├── README.md — 本文件 ├── CONTRIBUTING.md — 如何参与贡献 ├── CODE_OF_CONDUCT.md — 社区规范 ├── SECURITY.md — 安全披露政策 ├── CHANGELOG.md — 版本历史 ├── LICENSE — MIT 许可 ├── docs/ │ └── screenshot.png — README 中的图片 ├── .github/ │ ├── ISSUE_TEMPLATE/ — 错误和功能请求模板 │ ├── workflows/ — Pages 部署流程 │ └── PULL_REQUEST_TEMPLATE.md └── js/ ├── math.js — 纯函数辅助工具、激活函数、MOSFET 模型 ├── state.js — 所有可变的全局状态 ├── input.js — 图像和音频处理管线 ├── network.js — 全连接和 CNN 的前向/反向传播 ├── visualize.js — 实时视图、DNN 预览、特征图 ├── classes.js — 类别 UI、捕获、文件处理 └── main.js — 启动、保存/加载、事件绑定、主循环 加载顺序很重要。 index.html 中的 <script> 标签必须按以下确切顺序加载： math → state → input → network → visualize → classes → main 每个模块仅依赖于它前面的模块。 ## 工作原理 ### 输入处理管线 两种输入类型都被转换为一个数字方格，数值范围在 -1 到 +1 之间。 | 摄像头 | 麦克风 | |—|—| | 帧被绘制到离屏画布，尺寸为 SIZE×SIZE | AnalyserNode 以 40 Hz 计算频谱 | | 读取每个像素的亮度值 | 按对数间隔分到频段中 | | 展平为 Float64Array(SIZE2) | 将列数据写入环形缓冲区 | | | 将缓冲区展平为 Float64Array(SIZE2) | ### 网络结构 标准前馈堆栈。两种形式： input → dense → dense → ... → output (softmax) 或： input → conv → relu → pool → conv → relu → pool → flatten → dense → output ### 训练循环 使用以下参数的随机梯度下降： - 小批量大小： 32（全连接），8（CNN） - 优化器： Adam, β1 = 0.9, β2 = 0.999 - 学习率： 0.01（全连接），0.008（CNN） - 权重裁剪： ±6 - 梯度： 精确的解析导数 不使用有限差分。不使用自动微分。每个导数都在 network.js 中手动编写。 ## 它所演示的内容 | | 课程 | |—|—| | 🧠 | 反向传播是一种坐标变换。 隐藏层重新参数化输入，使得最终分类在新坐标下变为线性。 | | 📈 | 泛化是真实存在的。 一个在 40 个样本上训练的网络能对从未见过的点做出正确回答。 | | 📉 | 过拟合是真实存在的。 训练准确率上升而验证准确率下降。一旦差距出现，警告就会触发。 | | 📊 | 数据决定学习效果。 每个类别只有一张图片，会产生一个报告 100% 准确率但在其他所有情况下都失败的网络。每个类别有四十张图片，才能产生一个真正有效的网络。 | | 🔄 | 媒介并不重要。 无论输入是光线还是声音，也无论神经元单位是平滑的激活函数还是 MOSFET，相同的学习规则都适用。 | ## 要求 任何支持 getUserMedia 和 Web Audio API 的现代浏览器。 | 浏览器 | 状态 | |—|—| | Chrome | ✅ 已测试 | | Firefox | ✅ 已测试 | | Safari | ✅ 已测试 | | Edge | ✅ 已测试 | 无插件。无扩展。无需安装。 麦克风在某些浏览器中需要 HTTPS。GitHub Pages 自动提供此支持。在本地环境，像 Python 内置的简单 HTTP 服务器就足够了。 ## 参与贡献 欢迎贡献。完整指南请参阅 CONTRIBUTING.md。简要版本： - 保持模块化结构完整。 - 不要添加新的架构（RNN、LSTM、Transformer、注意力机制）。 - 不要添加构建步骤或依赖项。 - 至少在两个浏览器上测试。 - 错误报告和诚实批评比功能特性更有价值。 ## 安全 请参阅 SECURITY.md 了解披露政策。 ## 许可 MIT。完整文本请参阅 LICENSE。 由 Matiwos Kebede 开发 相同的学习算法运行在浏览器标签页和数据中心里。 区别仅在于规模。