通过手写识别数字可视化学习卷积神经网络原理

1. 项目概述

本项目是一个交互式卷积神经网络(CNN)可视化工具，旨在帮助用户直观地理解卷积神经网络的工作原理。用户可以在绘图板上绘制数字，系统会实时将绘制内容输入到预训练的CNN模型中，并以3D可视化的方式展示神经网络各层的工作过程和决策依据。

2. 功能需求

2.1 绘图功能

功能描述：用户可以在左侧绘图板上绘制数字
技术实现：使用HTML5 Canvas结合自定义的DrawingBoard库
操作方式 ：
- 使用鼠标在画布上绘制
- 支持铅笔工具调整粗细和颜色
- 提供清除画布功能

2.2 数字识别功能

功能描述：系统自动识别用户绘制的数字
技术实现 ：
- 将绘制内容下采样为28×28像素的图像
- 输入预训练的卷积神经网络模型
- 输出识别结果及置信度
显示方式：在绘图板下方显示前两个最可能的识别结果

2.3 3D可视化功能

功能描述：以3D方式展示卷积神经网络的结构和工作过程
技术实现：使用Three.js库实现3D渲染
展示内容 ：
- 神经网络各层节点（以立方体表示）
- 节点间的连接（以线条表示）
- 节点激活值（以颜色深浅表示）

2.4 层控制功能

功能描述：允许用户控制各层神经网络的可见性
技术实现：使用开关控件结合JavaScript事件处理
控制选项 ：
- 输入层
- 卷积层1
- 下采样层1
- 卷积层2
- 下采样层2
- 全连接层1
- 全连接层2
- 输出层

2.5 节点信息显示功能

功能描述：鼠标悬停在节点上时显示详细信息
技术实现：使用Three.js的拾取功能和HTML信息面板
显示内容 ：
- 节点类型和所属图层
- 节点输入值
- 计算过程
- 节点输出值
- 相关的滤波器信息（针对卷积层）

3. 技术架构

3.1 前端技术栈

HTML5：页面结构和Canvas元素
CSS3：样式设计和动画效果
JavaScript ：
- 核心逻辑实现
- 神经网络算法
- 3D渲染控制
Three.js：3D图形渲染
DrawingBoard.js：绘图板功能
jQuery：DOM操作和事件处理
Math.js：数学计算
Sylvester.js：矩阵和向量运算

3.2 项目结构

复制代码

├── cnn/
│   └── 3d.html              # 主页面文件
├── css/
│   ├── drawingboard2.css    # 绘图板样式
│   ├── katex.min.css        # 数学公式渲染样式
│   └── main.css             # 主样式文件
├── images/
│   ├── clear64.png          # 清除按钮图标
│   ├── eraser64.png         # 橡皮擦图标
│   └── pencil64.png         # 铅笔图标
└── js/
    ├── colormaps/           # 颜色映射
    │   └── myColorMap_dark.js
    ├── drawingboard/        # 绘图板功能
    │   ├── controls/
    │   │   ├── color.js
    │   │   ├── control.js
    │   │   ├── download.js
    │   │   ├── drawingmode.js
    │   │   ├── navigation.js
    │   │   └── size.js
    │   ├── board.js
    │   └── utils.js
    ├── nn/                  # 神经网络相关
    │   ├── common.js
    │   ├── conv.js
    │   ├── convnet_weights.js
    │   └── webgl_convnet2.json
    ├── GeometryUtils.js
    ├── camera.js
    ├── createText.js
    ├── droid_sans_regular.typeface.js
    ├── jquery-1.11.2.min.js
    ├── katex.min.js
    ├── math.min.js
    ├── myOrbitControls.js
    ├── processing.min.js
    ├── stats.min.js
    ├── sylvester.src.js
    └── three.min.js

3.3 神经网络结构

该项目使用的是一个经典的LeNet-5结构的卷积神经网络，包含以下层：

输入层：32×32像素的灰度图像
卷积层1：6个5×5的卷积核
下采样层1：2×2的最大池化
卷积层2：16个5×5的卷积核
下采样层2：2×2的最大池化
全连接层1：120个神经元
全连接层2：100个神经元
输出层：10个神经元（对应0-9的数字）

4. 界面设计

4.1 整体布局

左侧：绘图板和识别结果显示
中央：3D神经网络可视化区域
右侧：神经网络层控制设置
底部：节点信息显示面板

4.2 主要界面元素

4.2.1 绘图区域

尺寸：282×361像素
背景色：黑色
绘图色：白色
功能按钮：铅笔工具、颜色选择、清除画布

4.2.2 3D可视化区域

背景：深色渐变
节点表示：立方体，大小根据图层不同而变化
连接表示：线条，颜色表示权重大小
交互方式：鼠标旋转、缩放、悬停查看详情

4.2.3 控制面板

尺寸：292像素宽
控制选项：各层神经网络的显示/隐藏开关
交互反馈：开关状态实时更新3D可视化

4.2.4 信息面板

尺寸：300像素宽
显示内容：节点类型、输入值、计算过程、输出值
显示时机：鼠标悬停在3D节点上时显示

5. 实现细节

5.1 绘图与预处理

javascript 复制代码

// DrawingBoard库初始化
var customBoard = new DrawingBoard.Board('custom-board', {
    background: "#000",
    color: "#fff",
    size: 30,
    controls: [
        { Navigation: { back: false, forward: false } },
        { DrawingMode: { filler: false } }
    ],
    controlsPosition: "bottom right",
    webStorage: 'session',
    droppable: false
});

// 下采样处理
var tinyCtx = $("#tiny")[0].getContext("2d");
tinyCtx.scale(0.1,0.1);

5.2 神经网络计算

javascript 复制代码

// 获取神经网络输出
function getNNOutput() {
    // 1. 获取下采样后的图像数据
    // 2. 数据预处理（归一化、填充）
    // 3. 执行卷积操作
    // 4. 执行池化操作
    // 5. 执行全连接层计算
    // 6. 输出结果
}

5.3 3D可视化实现

javascript 复制代码

// 初始化3D场景
function init() {
    // 1. 创建场景、相机、渲染器
    // 2. 设置灯光
    // 3. 创建拾取纹理用于交互
    // 4. 设置事件监听
}

// 渲染3D场景
function animate() {
    requestAnimationFrame( animate );
    render();
    stats.update();
}

6. 性能优化

节点渲染优化：使用BufferGeometry减少绘制调用
计算优化：仅在用户完成绘制后执行神经网络计算
内存管理：及时释放不再需要的图像数据和计算结果
交互优化：使用拾取纹理高效检测鼠标悬停的节点

7. 未来扩展

支持更多网络结构：允许用户选择不同的神经网络模型
实时训练可视化：展示神经网络训练过程
多平台支持：优化移动端体验
教育资源整合：添加神经网络相关的教学内容
自定义网络：允许用户构建和可视化自己的神经网络结构

8. 项目贡献者

Adam Harley：项目创建者和主要开发者

9. 技术参考

Three.js：https://threejs.org/
DrawingBoard.js：https://github.com/Leimi/drawingboard.js
LeNet-5：经典卷积神经网络结构
MNIST数据集：手写数字识别数据集

参见：

https://adamharley.com/nn_vis/cnn/3d.html