在浏览器里，让 CNN 认出你写的数字

先弄清楚：这台机器到底在做什么

这个演示要完成的任务叫做图像分类：输入是一张手写数字图像，输出是 0–9 中的一个数字类别。

你可以把整件事想成一场有标准答案的猜数游戏：

1. 训练：先给网络看大量带有正确类别标签的手写数字图像。例如，一张图片旁明确写着“正确类别是 3”。网络每预测错误一次，训练程序就调整模型参数——包括卷积核权重、偏置以及后续层的权重——让下一次预测更接近正确类别。
2. 推理：训练结束后，已经学到的模型参数保持不变。此时输入一张新的手写数字图像，网络只使用这些固定参数，计算它属于 0–9 各类别的概率，不再修改权重。

为避免混淆，本文统一使用以下称呼：

• 数字类别：答案属于 0–9 中的哪一类，例如“类别 3”。
• 像素值：图片中每个小格的亮度，本页用 0–1 表示。
• 模型参数：网络在训练时会调整、在推理时保持不变的数值，主要包括权重和偏置。

这个页面做的是“推理”，不是现场训练。你的笔迹只在当前浏览器中计算，不会上传。

CNN 究竟是什么

CNN 的全名是 Convolutional Neural Network，中文叫卷积神经网络。

先不要被“神经网络”这个名字吓到。在这个演示里，它本质上是一条由许多数学运算组成的流水线：

图片 → 找边缘 → 组合成形状 → 给 0–9 打分 → 选最高分

其中“卷积”是这条流水线最关键的观察方式：它不一次看完整张图，而是拿一个小窗口从左到右、从上到下逐格扫描，先找到边、拐角和笔画方向，再把它们组合成更完整的数字字形。

先认识 4 个词

1. 像素：图片中最小的格子。这里的黑白图可以看成 28 × 28 = 784 个像素值；0 接近黑，1 接近白。
2. 层：流水线上的一个工位。每一层只做一类较简单的计算，多层接力后才能完成识别。
3. 卷积核：一个很小的权重方阵，比如 3 × 3 的 9 个权重。它像一枚“花纹探测器”，专门检查局部区域是否出现某种明暗变化。真实模型中的核不是人手写的规则，而是从训练数据中学出来的。
4. 特征图：卷积核扫完整张图后产生的新图。哪里与它想找的花纹越像，对应位置的特征值就越大、显示得越亮。

卷积核到底怎么算

它没有在做什么神秘的事，每停在一个位置，只做下面五步：

1. 用 3 × 3 的卷积核盖住图片上的 3 × 3 个像素。
2. 将 9 个像素值与 9 个卷积核权重逐项相乘，共做 9 次乘法。
3. 把 9 个乘积全部加起来，再加上一个叫做偏置的基础分。偏置也是训练出来的，它用来调整这个卷积核“多容易被触发”。
4. 通过 ReLU：正数原样保留，负数改成 0。可以把它理解成“不像就不点亮，像才点亮”。
5. 向右移动一格，在新位置重复同样的计算。

把它写成一行就是：

输出 = ReLU(9 个“像素 × 卷积核权重”的和 + 偏置)

不需要背这个公式。只要记住：小窗口负责取数，卷积核负责打分，ReLU 负责把没有匹配到的负分关掉。

为什么这样就能找到边缘？因为卷积核里的正权重表示“这里亮就加分”，负权重表示“这里亮就扣分”。当一块像素的明暗排列恰好与卷积核偏好的花纹一致，总分就会很高。

下方的第一张互动卡用一个简化的“竖直边缘核”演示整个计算。点击“下一格”，可以看到窗口移动后，参与计算的 9 个像素和最终分数如何变化。

卷积核里的权重是谁设定的

先给出短答案：不是人逐格填的，而是模型在训练中一点点学出来的。

人会决定“这一层用 8 个 3 × 3 卷积核”，这叫网络结构；但每个核里的 9 个权重和 1 个偏置应该是多少，由训练来决定。

第一步：先从“乱猜”开始

训练开始时，权重通常会被随机初始化成一组接近 0 的小数。它们此时没有“找边缘”或“找圆弧”的能力，第一次预测几乎是随机猜。

为什么不把所有卷积核都初始化成完全相同的 0？因为那样 8 个核会收到完全相同的修改，永远学成一样的东西。用略有不同的随机数开局，是为了打破这种对称，让不同核有机会分工学习不同特征。

第二步：让当前卷积核先猜一次

一张带有正确类别标签的手写图片进入网络，依次经过卷积、池化和分类层，最后产生属于 0–9 各类别的概率。数据从输入一路流向输出的过程，叫做正向传播。

假设图片的正确答案是 3，模型却把 8 的概率给得最高，这次猜测就是错的。但“错了”还不足以指导修改，还要知道错得多严重。

第三步：用损失函数量化错误程度

损失函数会把“预测”与“正确答案”的差距变成一个数，称为损失。预测越离谱，损失越大；预测越接近答案，损失越小。

训练的目标不是让某一个卷积核“看起来像边缘检测器”，而是让整个网络在大量图片上的平均损失尽可能小。这也是真实卷积核的权重常常不整齐、不能逐个用人类语言命名的原因。

第四步：把错误的责任一层层传回去

最终答案猜错，不只是最后一层的责任。前面的卷积核提取了什么特征，也会影响后面的判断。

反向传播会从最后的损失出发，沿着网络倒着往回算，为每个权重算出一个梯度。梯度可以先理解成一张“责任单”：

• 这个权重如果变大一点，损失会变大还是变小？
• 它对这次错误的影响大不大？
• 它应该向上调还是向下调？

它不是把误差平均分给所有参数。某个权重对本次预测的影响越大，收到的修改信号通常也越大。

第五步：每次只修改一小步

有了梯度后，梯度下降负责真正更新权重：

新权重 = 旧权重 − 学习率 × 梯度

学习率决定每次修改多少。太大可能一步跨过更好的位置，在两边来回震荡；太小则学得非常慢。合适的学习率会让损失逐步下降，而不是期待一次就把答案改对。

下方的第二张互动卡使用一个可以心算的简化例子，展示一个全为 0 的卷积核如何在三次更新中逐渐学成“左负右正”：

可以看到，“学会找边”不是突然产生的，而是预测逐步靠近目标、损失逐步下降的结果。

真实卷积核为什么看起来比这个例子乱

上面的例子直接告诉小卷积核“这是一条边”，只是为了把一次更新讲清楚。真实 CNN 并没有“边缘正确答案”，它只知道整张图最后应该是 3 还是 8。卷积核与其他层一起调整，只要最终分类损失下降就会保留这次改动。

因此，真实结果通常会有三个特点：

1. 权重通常是 -0.42、0.27 这样的小数，而不是整齐的 -1、0、1。
2. 每个核只是团队中的一员，单独拿出来未必有完美的人类语义；页面中的“竖边”“斜边”标签只是近似解读。
3. 换一个随机起点重新训练，最后的具体参数值可能不同，但整体识别效果可以同样好。

训练结束后，这些模型参数才会固定下来。你在本页输入新的手写数字图像时，只在做正向传播，卷积核权重不会再更改。

为什么还要一层层叠加

一个卷积核通常只会找到一种很简单的局部特征。所以 CNN 会让多个核并行工作，再把它们叠成多层：

784 个像素值 → 边缘 / 方向 → 拐角 / 圆弧 → 手写字形的整体结构 → 0–9 各类别的概率

第一层不需要知道“这是 3”，它只要找边。后面的层再把边拼成更大的部件。这就是神经网络“由简单特征逐层组合出复杂概念”的核心思路。

现在再亲手试一次

先用下面的小例子看懂一次卷积计算，然后在画板上写一个 0–9 的数字。模型会把你的笔迹依次变成：

1. 28 × 28 的像素值矩阵。
2. 第一层卷积核找到的边缘和笔画方向。
3. 池化后更小、更抗抖动的特征图。
4. 第二层卷积组合出的拐角和圆弧。
5. 展平后的一维特征向量，以及经过 Softmax 换算的类别概率。

画完后向下滚动，可以逐层看真实 CNN 刚才计算出来的中间结果。如果不想手写，也可以直接点击预设数字。