CNN Explainer 可视化指南：在浏览器中逐层观察 Tiny VGG 的卷积、激活、池化与全连接张量流动（nndl 学习资源）-平芜编程栈

【免费下载链接】nndl

邱锡鹏《神经网络与深度学习》第二版与通识版：电子书、章节目录、学习资源与勘误。

项目地址：https://gitcode.com/GitHub_Trending/nn/nndl

《神经网络与深度学习（第二版）》第 5 章讲解卷积神经网络时，读者最大的困惑往往来自"看不见"：卷积核到底如何在图像上滑动、激活与池化之后张量发生了什么、全连接层又是怎样把特征变成类别分数。nndl 仓库可视化资源总览收录的 CNN Explainer 正是为解决这一痛点而设计——它在浏览器中加载一个真实的 Tiny VGG 网络，让你逐层查看从输入图像到 softmax 输出的每一步张量流动。读完本文，你将掌握 CNN Explainer 的完整交互方式，理解卷积 / 激活 / 池化 / 全连接四类运算各自的张量变换规律，并学会把它与仓库内的二维卷积动图、GoogLeNet 结构图等资源组合起来，系统攻克卷积神经网络的理解难点。

卷积运算"滑动窗口 + 局部加权求和"的可视化基础：卷积核大小 m = 3、零填充 p = 0、步长 s = 1，这也是 CNN Explainer 中卷积层运算的底层机制。

一、CNN Explainer 是什么？它在 nndl 可视化资源体系中的定位

CNN Explainer 由 Georgia Tech PoloClub 出品，是一个完全运行在浏览器中的交互式 CNN 解释器。它的核心设计是：不需要安装任何深度学习框架，打开页面即加载一个真实的 Tiny VGG 网络，并把网络前向传播过程中产生的每一层中间张量都渲染出来，供你滚动浏览、点击探查。

在 nndl 仓库中，该页面位于 viz/cnn-explainer.md，对应可视化资源总览中"第 5 章 · 卷积神经网络"分组，与以下资源并列：

二维卷积：不同卷积核大小 m、零填充 p、步长 s 下的滑动过程动图；
转置卷积与空洞卷积：上采样与感受野扩大的对比；
GoogLeNet 结构：Inception 网络整体结构示意。

从仓库结构看，这些 viz 页面由 viz-card.html 通用卡片组件聚合到总览页，每张卡片包含标题、一句话说明与缩略图；CNN Explainer 卡片以external=true标记为外链，点击后在新窗口打开原始交互式网页。这种"总览页 + 卡片 + 详情页"的组织方式，让读者可以按章节顺序在书中概念与在线演示之间来回跳转。

二、核心交互方式：滚动张量、点击感受野、自定义输入

CNN Explainer 的交互设计围绕三个动作展开：

1. 滚动浏览全部中间张量。页面将 Tiny VGG 前向传播的每一步都可视化为二维特征图，从输入图像开始，经过卷积、激活、池化，直到全连接与 softmax 输出。你可以在页面上纵向滚动，像翻看一条流水线一样，观察图像在每一层之后变成了什么样子——这正是"逐层查看张量流动"的含义。

2. 点击任一像素查看感受野与卷积运算细节。这是整个工具最有教学价值的功能。点击某层特征图上的任意一个像素，页面会高亮它在上一层输入中所对应的感受野，并展示该位置的卷积运算细节（卷积核权重、通道求和过程等）。通过这种方式，"特征图上的一个数值从哪来"这一问题被具象化为一次可观察的局部加权求和。

3. 上传图片或选择内置样本。除了预置样本，你也可以上传自己的图片，观察同一网络在不同输入下的激活差异，直观理解卷积网络学到的是与位置无关的局部模式。

三、逐层理解：卷积、激活、池化、全连接各自做了什么

原文档将 CNN Explainer"适合用来理解"的内容归纳为三点，这里逐一展开。

3.1 卷积层："滑动窗口 + 通道求和"如何形成新的特征图

卷积层是 CNN 的核心。一个卷积核（例如 3×3）在输入特征图上按步长滑动，在每个位置执行"窗口内元素与核权重逐位相乘、再对通道求和"的运算，输出一个标量；整个滑动过程结束后，形成一张新的特征图。仓库内的二维卷积演示用动图精确呈现了这一过程，图例定义了三个关键参数：

参数	含义	典型取值
`m`	卷积核大小	如 3（3×3）、5（5×5）
`p`	零填充（zero-padding），在输入边缘补零以控制输出尺寸	0、1、2 …
`s`	步长（stride），卷积核每次滑动的像素数	1、2 …

当卷积核不止一个时，每个核各自滑动并产生一张特征图，堆叠后形成新的通道维度——这就是"为什么会有新的特征图"以及"通道数为什么会变"的直观答案。在 CNN Explainer 中，你可以同时在卷积层看到输入的多通道特征图、每个卷积核以及它们组合出的输出，三者一一对应，比任何公式都直观。

3.2 ReLU 与池化：为什么不改变张量的"语义层级"

在 CNN Explainer 中你会注意到，经过 ReLU 和池化之后，特征图的"内容"仍然可辨认——只是数值分布和尺寸发生了变化。原因在于这两类运算都逐元素或局部地作用于已有特征，不引入跨通道的重新组合：

ReLU（激活）：对每个元素执行max(0, x)，把负响应清零、保留正响应，为网络引入非线性，但特征图的通道数与空间结构保持不变；
池化（如最大池化）：在每个局部窗口内取最大值（或平均值）完成下采样，保留"最强的响应"，显著缩小特征图的空间尺寸，却不改变通道数。

因此它们不会把特征"重新编码"成新的语义层级，而是对卷积层提取到的局部模式做筛选与压缩。这正是原文档所说"ReLU / 池化为什么不会改变张量的语义层级"的含义，也解释了为什么典型的卷积块总是"卷积 → ReLU → 池化"这样的组合：卷积负责提取模式，激活负责引入非线性，池化负责降采样与轻微平移不变性。

3.3 全连接层：把空间特征汇聚为类别 logit

经过若干卷积块之后，特征图仍是带空间位置信息的张量。全连接层做的事情是：先把空间特征展平成一维向量，再通过全连接权重矩阵将其映射为每个类别的分数（logit），最后经 softmax 归一化为概率分布。在 CNN Explainer 中，你可以观察到展平前后的形状变化，以及最后一个全连接层输出与类别标签的一一对应——至此，"图像 → 类别概率"的完整链路闭合。

四、Tiny VGG：一个可以完整观察的真实网络

CNN Explainer 内置的 Tiny VGG 是一个小型 VGG 风格网络。虽然规模远小于真正的 VGG，但它保留了 VGG 家族的骨架：若干个"卷积 + ReLU + 池化"的卷积块堆叠，特征图尺寸逐块减半、通道数逐块增加，最后接全连接层与 softmax。从 CNN Explainer 的逐层视图可以清晰看到这一规律：越往深层，特征图空间尺寸越小、通道数越多，说明网络从"细节纹理"逐步过渡到"语义特征"。Tiny VGG 的价值在于：它小到每一层张量都能在浏览器中被完整渲染，又真实到足以体现 VGG 的核心设计思想——用堆叠的小卷积核换取更大的有效感受野，同时控制参数量。

五、与其他可视化资源的组合使用：一套完整的卷积学习路径

CNN Explainer 适合"看整体"，而仓库中其他卷积资源适合"看局部"，二者组合可形成一条完整的学习路径：

先用二维卷积动图建立参数直觉：通过 m / p / s 三个参数的不同组合，理解滑动窗口、填充与步长如何决定输出尺寸；
再用 CNN Explainer 观察真实网络的逐层流动：把动图学到的"单次卷积"机制，套用到 Tiny VGG 每一层的真实张量上，并借助点击像素查看感受野，把局部运算与全局特征建立联系；
进阶看转置卷积与空洞卷积：当书中讲到转置卷积上采样（如分割网络）或膨胀率 d 扩大感受野时，用对比动图理解这两类变体；
最后用 GoogLeNet 结构俯瞰完整模型：理解 Inception 如何在同一层用不同尺寸卷积核并行提取多尺度特征。

六、在学习路径中的位置：对应《神经网络与深度学习》第 5 章

在《神经网络与深度学习（第二版）》的目录中，卷积神经网络是第 5 章，紧接第 4 章前馈神经网络之后；可视化资源总览也按书的章节顺序组织，CNN Explainer 被归入这一章。因此推荐的阅读节奏是：

读第 5 章卷积层与池化部分时，打开 CNN Explainer 观察卷积 / 池化对张量的实际作用；
读完全章后，用 Tiny VGG 从头到尾走一遍前向传播，检验自己对"特征提取 → 特征汇聚 → 类别输出"整条链路是否建立起了直观图景；
若希望动手实现，可配合案例与实践的卷积神经网络章节，其 PyTorch 实现与 sanity 测试可让你把可视化观察到的张量流动与真实代码逐行对应。

七、技术实现与本地部署

据原文档说明，CNN Explainer 使用Svelte + TensorFlow.js实现，模型推理完全在前端完成，因此可本地部署或二次开发。从实现角度看，TensorFlow.js 让 Tiny VGG 的权重与推理直接跑在浏览器里，Svelte 则负责把各层张量渲染为可交互的界面；二次开发时可以替换内置模型、接入自己的图片分类任务，或把逐层可视化逻辑复用到其他网络结构上。需要注意：本仓库是静态站点（Jekyll 构建），viz 页面本身以 markdown 组织，CNN Explainer 是以外链卡片形式聚合进来的第三方交互资源，两者相互独立——在本地开发本站时，只需按 README.md 说明执行bundle install与bundle exec jekyll serve即可预览包含该卡片的总览页。