一个像素的旅行，华人博士卷积网络可视化项目火了：点点鼠标就能看懂的扫盲神器

终于等到了这个交互式学习神器，把 CNN 的工作过程画得明明白白，帮助萌新轻松入门。

什么是 CNN？Convolutional Neural Network，中文译为「卷积神经网络」。

这个常见但有些深奥的词汇，只可意会，不能言传。如果打开教材，会看到这样一些解释：

卷积层是深度神经网络在处理图像时十分常用的一种层。当一个深度神经网络以卷积层为主体时，我们也称之为卷积神经网络。

神经网络中的卷积层就是用卷积运算对原始图像或者上一层的特征进行变换的层……

说得很有道理，但如果将一张图片作为输入，这张图片究竟会在卷积神经网络中经历什么？这可真是太考验想象力了。

最近，来自佐治亚理工学院与俄勒冈州立大学的研究者们，考虑到初学者和非专业人士的学习痛点，合作开发出了一款卷积神经网络交互式可视化工具——CNN 解释器（CNN Explainer）。这个解释器展示了一个 10 层的神经网络，包含卷积层、激活函数、池化层等多个 CNN 初学者无论如何也绕不开的概念。

这个工具到底把 CNN 展示得有多明白？简单来说，项目作者已经给你做好了一个可以交互的界面，各种层、激活函数都铺在眼前。你只需要打开浏览器加载出这个界面，移动鼠标点来点去就可以了。

CNN Explainer 使用 TensorFlow.js 加载预训练模型进行可视化效果，交互方面则使用 Svelte 作为框架并使用 D3.js 进行可视化。最终的成品即使对于完全不懂的新手来说，也没有使用门槛。下面我们来看一下具体的效果。

卷积层

既然是卷积网络，我们就先来看一下卷积层是怎么工作的。卷积层包含学习的卷积核，可以提取出每张图像独有的特征，因此是 CNN 的基础。

当你与卷积层进行交互的时候，前面的层与卷积层之间会出现很多连线，其中的每条线都代表一个独特的卷积核。这些卷积核用于卷积运算，以生成当前卷积神经元的输出或激活图。

以交互图中的 Tiny VGG 架构为例。可以看到，它的第一个卷积层有 10 个神经元，但前一层只有 3 个神经元。聚焦于第一个卷积层顶端卷积神经元的输出，如果我们将鼠标悬停在激活图上，就可以看到这里有 3 个独特的卷积核。

图 1：如果将鼠标悬停在第一个卷积层最前面的激活图上，就可以看到此处应用了 3 个卷积核来得到此激活图。点击此激活图，可以看到每个卷积核都进行了卷积运算。

图 2：用来生成上述激活图顶端中间结果的卷积核。

激活函数

ReLU

ReLu 是 CNN 中的非常常用的一种非线性激活函数，可以加快 CNN 的训练速度。它是一种一对一的数学运算：

点击交互图中的 ReLU 神经元就能观察到这个激活函数是如何工作的：

Softmax

在卷积神经网络中，Softmax 函数通常用于分类模型输出。在这个 CNN 解释器里，点击最后一层，即可显示网络中的 Softmax 运算过程：

在 Softmax 的这部分视图中，用户可以体验不同颜色的 logit 和公式交互，从而了解在 Flatten 层之后，预测分数是如何归一化从而产生分类结果的。

池化层

不同的 CNN 架构有很多不同类型的池化层，但它们的目的都是逐渐缩小网络的空间范围，从而降低网络的参数量和整体计算量。

这个交互图里使用的池化类型是 Max-Pooling，其过程可以通过点击图中的池化神经元来观察：

Flatten 层

这一层将网络中一个三维的层转变为一个一维向量，之后将其输入到全连接层用于分类。因为用于分类的 softmax 函数需要一维向量作为输入（此处不包括 batch 维），因此需要用到 Flatten 层。

通过点击任意一个输出类别可查看该层是如何工作的。

作者简介

这个贴心的项目出自佐治亚理工和俄勒冈州立大学的研究者之手。其中，一作是该校的机器学习博士生 Zijie Wang。他的研究兴趣是机器学习的可解释性、公平性、安全性和可视化分析。

目前，该项目已经登上了 GitHub 热榜，感兴趣的同学可以点击文末链接了解详情。

• 项目地址：https://github.com/poloclub/cnn-explainer
• 网页地址：https://poloclub.github.io/cnn-explainer/
• arXiv 地址：https://arxiv.org/abs/2004.15004