简介本资源是一款专为深度学习教学与可视化设计的神经网络架构绘图工具面向高校学生、AI初学者及课程讲师解决神经网络结构难以直观理解的问题。它支持FCNN、LeNet和AlexNet三类经典模型的SVG级图形生成覆盖从基础全连接到里程碑式CNN的演进脉络特别适用于课堂演示、论文插图与学习笔记配图。压缩包共17个文件含7个JavaScript核心渲染脚本如SVGRenderer.js、LeNet.js、4个HTML示例页面含交互式预览、2个Markdown说明文档README.md、paper.md及PDF论文、Bib参考文献等总大小仅165KB轻量易用。目前已有1209人学习下载用户可直接运行示例快速生成专业级网络结构图无需编程基础源码模块清晰、注释完整便于二次定制与教学拓展是理解层连接逻辑、参数流向与模型差异的实用辅助工具。1. NN-SVG-master用纯 SVG 可视化神经网络前向传播全过程不依赖任何框架也能“看见” FCNN、LeNet、AlexNet 的每一层激活流你有没有试过在 PyTorch 或 TensorFlow 里跑通一个 LeNet 模型却始终说不清卷积核在第 3 层输出特征图时到底是哪几个像素被加权求和、哪个 ReLU 截断了负值NN-SVG-master 就是为这种“黑匣子焦虑”而生的——它不训练模型不加载权重甚至不调用 torch.nn 或 tf.keras而是用原生 SVG JavaScript 把全连接网络FCNN、LeNet-5、AlexNet 的结构拓扑 前向数据流 权重缩放映射全部画出来。输入一张 28×28 手写数字图它能逐层渲染出输入像素灰度 → 第一层 6 个 5×5 卷积核滑动时的加权窗口 → 池化后 12×12 特征图每个单元的数值 → 全连接层中每个神经元接收的 400 个输入加权和 → 最终 softmax 输出概率条的动态伸缩。这不是示意图是可交互、可调试、可导出为静态矢量图的实时计算可视化。适合刚学完 CNN 原理想验证直觉的初学者也适合需要向非技术方解释模型决策路径的工程师。它不替代训练但能让你第一次真正“看见”反向传播之前数据在神经网络里到底经历了什么。2. 架构设计与选型逻辑为什么用 SVG 而不是 Matplotlib 或 TensorBoard2.1 SVG 的不可替代性像素级控制 无损缩放 DOM 可编程性NN-SVG-master 的核心价值不在“画得好看”而在“画得可算”。Matplotlib 生成的是位图每次 resize 都模糊TensorBoard 的 graph 可视化只展示计算图拓扑不呈现具体数值流。而 SVG 是 XML 文档每个rect代表一个神经元line代表权重连接fill属性直接绑定当前激活值如fillrgb(0, 0, 255)对应 0.0fillrgb(255, 0, 0)对应 1.0。这意味着数值即样式无需额外渲染循环修改element.style.fill就完成一次激活值更新无限缩放不失真导出 PDF 或嵌入网页时1000×1000 神经元网格仍清晰锐利DOM 事件直连点击某神经元JS 可立即读取其>{ layers: [ { type: conv2d, name: C1, in_channels: 1, out_channels: 6, kernel_size: [5, 5], stride: 1, padding: 0, activation: tanh, input_shape: [28, 28], output_shape: [24, 24] }, { type: pool2d, name: S2, kernel_size: [2, 2], stride: 2, pool_type: avg, input_shape: [24, 24], output_shape: [12, 12] } ] }注意input_shape和output_shape字段——它们不是装饰而是 SVG 布局引擎的约束条件。渲染器根据output_shape[0] * output_shape[1]计算该层需生成多少个rect再按output_shape[0]行、output_shape[1]列网格排布。对于 AlexNet 这类多分支结构如 LRN 层后的双 GPU 分割项目采用split_axis: channel标记自动将out_channels256的层拆为左右两个 128 通道子图并用g transformtranslate(0, 0)和g transformtranslate(320, 0)控制水平偏移。这种声明式建模让新增 ResNet 残差连接只需在 JSON 中添加skip_connection: {from: C3, to: C5}字段SVG 渲染器会自动生成带箭头的跨层连接线。2.3 前向传播模拟脱离框架的轻量级数值引擎项目内置一个Simulator类它不实现反向传播但完整复现了前向过程中的所有关键操作卷积模拟对每个输出位置(i,j)遍历kernel_size[0] * kernel_size[1]个输入像素执行sum(input[idi][jdj] * weight[di][dj]) bias池化模拟avg池化直接求均值max池化记录最大值索引用于后续高亮反向路径激活函数tanh用Math.tanh()relu用Math.max(0, x)softmax对输出向量做指数归一化。所有计算均在浏览器主线程完成单次 LeNet-5 前向耗时约 8–15ms取决于输入图像尺寸。关键设计在于权重和偏置不存储为数组而作为line元素的>line x1100 y150 x2200 y280 stroke-width0.8 >[S2] Neuron (2,3): value0.672, from C1 neurons: (0,0)→0.12, (0,1)→0.08, (1,0)→0.15, (1,1)→0.32这行日志揭示了池化值的来源——它正是由 C1 层对应 2×2 区域的四个神经元平均而来。这种粒度的调试能力是任何框架可视化工具都无法提供的。4. 避坑指南五个真实踩过的坑与血泪解决方案4.1 现象AlexNet 加载后 SVG 布局错乱C3 层神经元挤成一团无法分辨行列原因AlexNet 的 C3 层配置中output_shape写成了[27, 27]但实际卷积计算后应为[27, 27]仅当padding2。原 JSON 中padding字段缺失默认为 0导致输出尺寸应为[23, 23]而渲染器强行按 27×27 排布造成密度失真。解决打开js/models/alexnet.json找到 C3 层补充padding: 2字段。验证方法在simulator.js的conv2dForward函数末尾添加console.log(C3 output shape:, output.length, output[0].length)确保输出二维数组尺寸与 JSON 一致。4.2 现象点击 “Run Forward Pass” 后界面卡死超过 10 秒浏览器提示“脚本未响应”原因FCNN 模型配置中hidden_layers设为[1000, 500, 250]导致 INPUT784→ H11000层间需绘制 784×1000 784,000 条line。SVG DOM 操作在此规模下性能急剧下降。解决在svg-renderer.js的renderConnections函数中增加连接线抽样逻辑// 仅渲染权重绝对值 top 10% 的连接线 const weights layer.weights.flat(); const threshold weights.sort((a,b) Math.abs(b)-Math.abs(a))[Math.floor(weights.length * 0.9)]; for (let i 0; i fromNeurons.length; i) { for (let j 0; j toNeurons.length; j) { if (Math.abs(layer.weights[i][j]) threshold) { // 创建 line 元素 } } }实测后 FCNN 渲染时间从 12s 降至 1.3s且关键连接路径依然可见。4.3 现象加载自定义 PNG 图片后INPUT 层显示全黑>const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, 28, 28); const imageData ctx.getImageData(0, 0, 28, 28); const pixels new Uint8Array(28 * 28); for (let i 0; i imageData.data.length; i 4) { // 使用 NTSC 加权灰度公式Y 0.299*R 0.587*G 0.114*B const r imageData.data[i], g imageData.data[i1], b imageData.data[i2]; pixels[i/4] Math.round(0.299*r 0.587*g 0.114*b); } return pixels;4.4 现象调整某条连接线粗细后“Run Forward Pass” 结果未变化原因权重修改仅更新了line的stroke-width和>// 同步 SVG 中修改的权重到 JS 数组 if (currentModel fcnn) { const lines document.querySelectorAll(line[data-weight]); lines.forEach(line { const src parseInt(line.dataset.source.split(_)[1]); const tgt parseInt(line.dataset.target.split(_)[1]); fcnnLayer.weights[src][tgt] parseFloat(line.dataset.weight); }); }此补丁确保“拖拽即生效”无需刷新页面。4.5 现象导出 SVG 为文件后打开看到的是空白画布无神经元和连线原因document.getElementById(svg-container).outerHTML导出时仅包含svg标签内联样式但神经元rect的fill颜色由 JS 动态设置未写入 HTML 属性导出后丢失。解决导出前强制将所有动态样式固化为属性function exportSVG() { const svg document.getElementById(svg-container); // 将 fill 颜色写入 rect 元素 svg.querySelectorAll(rect).forEach(r { r.setAttribute(fill, r.style.fill || #ccc); }); svg.querySelectorAll(line).forEach(l { l.setAttribute(stroke, l.style.stroke || #999); }); // 后续导出逻辑... }导出的 SVG 文件即可在 Inkscape 或浏览器中独立查看。5. 进阶技巧用权重热力图定位模型瓶颈以及自定义网络的 JSON 编写规范5.1 权重热力图三步定位哪一层在“瞎学”神经网络训练后若某层权重方差极小如全接近 0.001说明该层未有效学习。NN-SVG-master 提供权重热力图功能无需训练日志在index.html中启用“Show Weight Heatmap”开关点击任意层如 C3的标题栏SVG 区域自动切换为该层所有权重的分布热力图观察颜色分布理想状态应为红大权重与蓝小权重混杂若整张图呈均匀浅蓝则该层权重坍缩需检查初始化或学习率。实现原理在svg-renderer.js的renderWeightHeatmap函数它遍历layer.weights找到全局 min/max将每个权重w映射为fillrgb(0, 0, 255*(1-(w-min)/(max-min)))。注意此功能仅对已加载权重的层生效——若你用的是随机初始化权重热力图反映的是初始化质量若你替换了models/lenet5.json中的weights_path字段指向.npy文件需自行用 Python 脚本转换则热力图显示真实训练后权重。5.2 自定义网络 JSON 编写从 FCNN 到残差块的语法手册新增网络不是改代码而是写 JSON。以下是custom-resnet.json的最小可行示例{ name: CustomResNet, layers: [ { type: input, name: INPUT, shape: [224, 224, 3], description: RGB image }, { type: conv2d, name: CONV1, in_channels: 3, out_channels: 64, kernel_size: [7, 7], stride: 2, padding: 3, activation: relu }, { type: residual, name: RES1, blocks: [ { type: conv2d, in_channels: 64, out_channels: 64, kernel_size: [3, 3], padding: 1 }, { type: conv2d, in_channels: 64, out_channels: 64, kernel_size: [3, 3], padding: 1 } ], skip_connection: { from: CONV1, to: RES1_block1 } } ] }关键规则字段必填说明type✓input,conv2d,pool2d,residual等决定渲染器行为name✓层唯一标识用于skip_connection.from/to引用shape/input_shape/output_shape✓必须精确匹配数学计算结果否则布局崩溃weights_path✗可选指向本地.npy文件需同域格式为np.save(w.npy, layer.weights)activation✗若不填默认线性支持relu,tanh,sigmoid,softmax从那以后我每次要验证新网络结构都先写 JSON 再点“Load Model”——5 分钟内就能看到拓扑是否合理、连接线是否缠绕、输入输出尺寸是否对齐。比跑一遍训练快 100 倍也比画 PPT 示意图准 1000 倍。希望帮到你。本文还有配套的精品资源点击获取
