CNN-demo: 卷积神经网络(CNN)原理动态演示

这是一个旨在通过可视化和动态交互来揭示卷积神经网络（CNN）内部工作原理的教育类项目。它摒弃了枯燥的数学公式堆砌，通过直观的动画演示，帮助学习者理解“卷积”、“池化”、“特征提取”等核心概念。

🔗 在线体验

👉 点击这里直接打开演示网页

纯前端实现，无需安装环境，现代浏览器即开即用。

📖 使用指南

1. 选择图案：在 "输入图案" 中选择一个预设（如 "小猫"），或选择 "随机噪声" 随机生成（可自定义大小）。
2. 选择卷积核：尝试不同的卷积核，例如：
   • 垂直边缘：观察是否提取出了物体的垂直轮廓。
   • 高斯模糊：观察图像是否变得平滑。
3. 播放动画：
   • 点击 "单步执行" 进行单步调试，观察具体的数学运算。
   • 点击 "自动执行" 观看完整的滑动窗口过程。

📚 相关工作

本项目的设计灵感来源于深度学习领域的经典课程 Stanford CS231n 的主页演示，旨在对其现有的可视化形式进行补充和优化。

斯坦福 CS231n

• CS231n 课程主页提供了一个 CNN 图像分类任务的经典可视化 Demo。它在浏览器中实时运行一个完整的卷积神经网络来对 CIFAR-10 数据集进行分类。
• 局限性：这是一个 “宏观视角” 的演示。它以约 10ms/张 的速度飞快处理图像，侧重于展示“网络能做什么”和“各层输出长什么样”。对于初学者，这种高自动化、无交互的形式很难帮助他们理解“卷积核是如何滑动”、“数值是如何计算”等 微观机制。

本项目的改进与定位

与 CS231n 的宏观展示不同，本项目专注于 微观原理的可视化，旨在打开算法的“黑盒”：

1. 从“观看”到“交互”：

   • CS231n 的演示是自动流转的视频流。
   • 本项目提供了 “单步执行 (Step-by-step)” 功能，将瞬间完成的运算拆解为用户可控的慢动作，允许用户亲自控制卷积核的滑动节奏。

2. 从“结果”到“过程”：

   • CS231n 仅展示计算后的特征图（结果）。
   • 本项目实时展示计算公式（ $Input \times Kernel = Output$ ），让用户清晰地看到每一个像素点背后的数学运算过程。

3. 可解释性增强：

   • 通过引入像素画输入（如小鸭子、小狗）和动态热力图，本项目让“特征提取”这一抽象概念变得肉眼可见，比单纯观察灰度激活图更具教学意义。

如果说 CS231n 的演示是展示森林的全貌，那么本项目则是带领学习者拿着放大镜去观察每一片叶子的纹理。

✨ 项目特色

与传统的静态图解不同，本项目包含以下创新功能：

1. 趣味像素画输入：

   • 内置了精心设计的 9x9 像素画，包括经典的橡皮鸭、小狗、像素怪兽等。
   • 包含用于测试边缘检测的棋盘格和螺旋线，以及用于观察梯度的金字塔。
   • 支持随机噪声：可以自定义输入大小。

2. 沉浸式热力图 (Heatmap)：

   • 输出层采用动态 薄荷绿热力图。颜色的深浅（透明度）直接对应数值的大小。
   • 这直观地展示了 “特征提取” 的过程——颜色越深，代表卷积核在那个位置找到了它正在寻找的特征（如轮廓、边缘）。

3. 交互式算法控制：

   • 支持 卷积 (Conv2d)、最大池化 (Max Pooling)、平均池化 (Avg Pooling) 三种模式。
   • 可自定义 卷积核大小 (Kernel Size)、填充 (Padding) 和 步幅 (Stride)，并实时看到网格结构的变化。

🧠 核心知识点 (Knowledge Points)

本项目基于大湾区大学计算机科学导论课程（CS101）的核心思维构建，具体对应以下知识点：

1. 自动执行的计算过程 (计算过程单元)

"Turning abstract formulas into automated, observable steps."

本项目将抽象的卷积公式 $Y = \sum (X \cdot K)$ 具象化为自动执行的动画。

• 可视化状态机：程序维护了一个“滑动窗口”的状态，用户可以看到计算焦点如何按照既定的步幅（Stride）在矩阵上移动。
• 过程透明化：每一个输出像素的生成，都对应着一次完整的“乘加运算”过程展示。这种将“黑盒”计算过程拆解为肉眼可见的自动执行步骤，完美诠释了冯·诺依曼架构下程序按指令序列自动执行的本质。

2. 分治范式 (算法思维单元)

"Solving complex problems by breaking them down."

卷积神经网络的核心思想正是算法设计中的分治范式。

• 局部感受野：通过演示可以看出，CNN 并不一次性处理整张图片，而是通过一个小的卷积核（如 3x3），将巨大的图像识别任务分解为无数个局部的、微小的矩阵运算任务。
• 局部到整体：每个小的计算单元只负责提取局部的特征（如一条竖线、一个圆弧），最终这些局部特征组合起来，形成了对整体图像的理解。

🤖 关于 AI 与创作背景

本项目保持对 AI 工具使用的透明度：

1. 编码实现：

   • 本项目绝大部分代码为手动编写。
   • 除了 VS Code 内置 Copilot 的基础代码补全外，未依赖 AIGC 生成核心逻辑。

2. 灵感与传承：

   • 在开启本项目之前，我在指导 Gemini-3.0-pro 完成了一个 Transformer 动态演示项目。
   • 通过分析学习 (Learning by Analysis)：本项目的代码架构、UI 设计思路以及 Web 开发技巧，均源于我对上一个 AI 辅助项目的深度解析、消融实验与重构。这不仅仅是一个代码作品，更是我消化并内化 AI 知识的证明。