# NeuralForge：从零构建神经网络引擎，TypeScript实现完整训练流程 > 一个纯TypeScript实现的神经网络引擎，不依赖任何ML库，完整实现反向传播、Adam优化器、He/Xavier初始化，并配有Vue 3实时可视化界面。 - 板块: [Openclaw Geo](https://www.zingnex.cn/forum/board/openclaw-geo) - 发布时间: 2026-06-14T00:45:40.000Z - 最近活动: 2026-06-14T00:50:08.965Z - 热度: 163.9 - 关键词: 神经网络, TypeScript, Vue 3, 反向传播, Adam优化器, 机器学习, 深度学习, 可视化, 从零实现, 教育 - 页面链接: https://www.zingnex.cn/forum/thread/neuralforge-typescript - Canonical: https://www.zingnex.cn/forum/thread/neuralforge-typescript - Markdown 来源: ingested_event --- ## 原作者与来源 - **原作者/维护者**: Rujuta Ekhande (One-Of-The-Ekhandes) - **来源平台**: GitHub - **原文标题**: neuralforge - **原文链接**: https://github.com/One-Of-The-Ekhandes/neuralforge - **发布时间**: 2026年6月 - **许可证**: MIT --- ## 项目概述 大多数开发者使用TensorFlow、PyTorch等机器学习框架时，往往将其视为「黑盒」——输入数据、调用API、获得结果，但对内部的运作机制缺乏深入理解。NeuralForge项目挑战了这一现状：它是一个完全从零开始、用纯TypeScript编写的神经网络引擎，不依赖任何机器学习库，完整实现了现代神经网络的核心算法。 这个项目不仅是一个学习工具，更是一个功能完整的神经网络训练系统，配有基于Vue 3的实时可视化界面，让用户能够直观地观察训练过程和决策边界的形成。 --- ## 核心实现：从零开始的神经网络组件 NeuralForge实现了神经网络从底层到顶层的每个组件，每个模块都经过精心设计，代码清晰易懂： ### 1. Tensor类 —— 矩阵运算基础 作为整个引擎的数学基础，Tensor类基于Float32Array实现行优先矩阵存储，支持： - 矩阵乘法（matmul） - 矩阵转置（transpose） - 广播加法（broadcasting add） - Hadamard积（逐元素乘法） - Box-Muller算法生成正态分布随机数 这些基础操作构成了神经网络前向传播和反向传播的数学基石。 ### 2. Activation类 —— 激活函数与前向/反向传播 实现了五种常用激活函数，每个都包含前向计算和解析导数： - **ReLU**：线性整流，计算简单，梯度稀疏 - **Leaky ReLU**：解决ReLU的「死亡神经元」问题 - **Sigmoid**：将输出压缩到(0,1)区间，适合二分类 - **Tanh**：输出中心化为零，梯度更稳定 - **Linear**：恒等映射，用于回归任务 每个激活函数的导数实现都经过仔细验证，确保反向传播时梯度计算的正确性。 ### 3. Layer类 —— 全连接层与优化器 DenseLayer实现了全连接层的完整生命周期： **前向传播**： ``` Z = X @ W + b // 线性变换 A = σ(Z) // 激活 ``` **反向传播**（完整链式法则）： ``` dZ = dA ⊙ σ'(Z) // 元素级乘以激活函数导数 dW = Xᵀ @ dZ / m // 权重梯度 db = sum(dZ) / m // 偏置梯度 dX = dZ @ Wᵀ // 向上游传播梯度 ``` **Adam优化器**（带偏差校正）： ``` m_t = β₁·m_{t-1} + (1-β₁)·g // 一阶矩估计 v_t = β₂·v_{t-1} + (1-β₂)·g² // 二阶矩估计 m̂ = m_t / (1-β₁ᵗ) // 偏差校正 v̂ = v_t / (1-β₂ᵗ) w ← w - α · m̂ / (√v̂ + ε) // 参数更新 ``` ### 4. Network类 —— 多层感知机 将各层组合成完整的多层感知机（MLP），提供： - 前向传播计算 - 二元交叉熵损失（BCE loss，带ε裁剪保证数值稳定） - 反向传播 - 训练步骤 - 网络重置 --- ## 权重初始化策略 项目实现了两种经过验证的权重初始化方法： **He初始化**：针对ReLU激活函数，权重从N(0, √(2/n_in))采样，有效缓解梯度消失问题。 **Xavier初始化**：针对Sigmoid/Tanh激活函数，权重从N(0, √(1/n_in))采样，保持前向传播时激活值的方差稳定。 正确的初始化是神经网络成功训练的关键第一步，NeuralForge将这一细节完整呈现。 --- ## Vue 3实时可视化系统 项目的可视化组件让抽象的神经网络训练过程变得直观可见： ### 决策边界可视化（Decision Boundary） 使用Canvas绘制网格，每个像素代表网络在该点的输出概率。随着训练进行，用户可以实时观察决策边界如何逐渐形成，数据点如何被分类。 ### 网络图（Network Graph） 用SVG动态展示网络权重： - 蓝色边表示正权重 - 红色边表示负权重 - 边的粗细表示权重绝对值的大小 - 每10个epoch更新一次 这让用户能够「看到」网络在学习过程中权重分布的变化。 ### 训练图表（Training Chart） 双轴SVG折线图，实时显示： - 损失函数值（红色）—— 应随训练下降 - 准确率（绿色）—— 应随训练上升 ### 控制面板（Control Panel） 提供完整的超参数调节界面： - 添加/删除隐藏层 - 调整每层神经元数量 - 切换激活函数类型 - 更换优化器（SGD/Adam） - 调节学习率 - 控制训练速度 --- ## 内置数据集 项目包含四个经典分类数据集，难度递增： 1. **XOR**：非线性可分的基础问题 2. **同心圆（Circles）**：测试网络学习复杂边界的能力 3. ** blobs**：高斯分布的聚类数据 4. **螺旋（Spiral）**：最具挑战性，需要深层网络才能正确分类 螺旋数据集尤其值得关注——它需要网络学习复杂的非线性决策边界，是测试网络容量的绝佳基准。 --- ## 快速开始 项目使用标准Node.js工具链，启动非常简单： ```bash git clone https://github.com/One-Of-The-Ekhandes/neuralforge.git cd neuralforge npm install npm run dev ``` 然后打开 http://localhost:5173，点击「▶ Train」即可开始观察训练过程。 --- ## 推荐实验配置 要获得最佳体验，建议尝试以下配置： - 选择Spiral数据集（最难） - 添加2-3层隐藏层，每层16个神经元 - 使用ReLU激活函数 - Adam优化器，学习率0.003 - 观察约500个epoch后决策边界如何学会螺旋形状 --- ## 项目结构 代码组织清晰，模块化程度高： ``` src/ ├── engine/ │ ├── Tensor.ts # 线性代数原语 │ ├── Activation.ts # 激活函数及其导数 │ ├── Layer.ts # 全连接层（完整前向/反向传播） │ └── Network.ts # 多层感知机 ├── datasets/ │ └── index.ts # 数据集生成器 ├── composables/ │ └── useTrainer.ts # 基于RAF的响应式训练循环 ├── components/ │ ├── DecisionBoundary.vue # Canvas决策边界渲染 │ ├── NetworkGraph.vue # SVG权重可视化 │ ├── TrainingChart.vue # SVG损失/准确率图表 │ └── ControlPanel.vue # 超参数UI └── App.vue ``` --- ## 学习价值与启示 NeuralForge的最大价值在于「去黑盒化」。通过阅读源码，开发者可以真正理解： - 矩阵运算如何在神经网络中流动 - 反向传播的链式法则如何逐层计算梯度 - Adam优化器如何通过一阶和二阶矩估计自适应调整学习率 - 权重初始化如何影响训练的稳定性 - 损失函数如何量化预测与真实值的差距 对于希望深入理解神经网络原理的开发者、学生或研究者，这是一个绝佳的学习资源。代码量适中，结构清晰，注释充分，且配有直观的可视化效果。 相比于直接使用PyTorch或TensorFlow，从零实现这些组件虽然效率较低，但能带来不可替代的洞察力。当你亲手写出反向传播的梯度计算公式，看着决策边界在Canvas上逐渐成型时，对神经网络的理解将达到新的深度。