CNN · 卷積神經網路

機器
如何閱讀
一張圖？

不是一眼看完整張圖。
而是無數個小區域，逐一掃過、計算、組合。

— 煎餃 視覺筆記
下滑繼續 ↓
Q · 02
你看到的是一個「3」。那機器看到的，是什麼？
提示：機器沒有眼睛，它只能讀表格。
— 02 —
輸入

一張圖
其實是一個數字矩陣

把一張 28×28 的手寫「3」放大，它不是連續的筆畫，而是 784 個小方格。每格存一個 0（純白）到 255（純黑）的數字。

所謂「機器閱讀圖片」—— 讀的就是這張表。

把滑鼠移到任一格，看看它的灰階值。

Q · 03
如果只能帶一副「偏見」去看這張圖，你會想看到什麼？
試著切換三種預設濾鏡，或自己調整每一格的值。
{{ isCustomKernel ? '自訂 Kernel' : currentKernelMeta.name }}

3 × 3 Kernel

{{ isCustomKernel ? '自己動手改每一格，kernel 變成你的指令。' : currentKernelMeta.description }}

— 03 —
Filter

一把小小的尺，
用來偵測花樣

Kernel（核）是一個很小的數字矩陣。把它想像成一片帶著偏好的濾鏡：

中心值高、周圍值負，就會對「明暗對比強烈」的位置大力反應——那裡通常是邊緣。

把你自訂 kernel 的中心改大（例如 9），四周改成 -1，它就學會了偵測邊緣。把中心改回 1、四周都 1，它就變成了「平均模糊」。

這就是 CNN 的第一個魔法 —— kernel 長什麼樣，它就看到什麼。

Q · 04
這把尺，是怎麼「滑」過一整張圖的？每一步，它到底在算什麼？
按播放、或拖動下方時間軸。滑到任何位置都會顯示那一步的計算細節。
輸入 · 28 × 28（點任一格跳過去）
Feature Map · 26 × 26

第 {{ convDetail.stepNo }} 步：位置 [{{ convDetail.r }}, {{ convDetail.c }}] 的計算

輸入 3×3（墨色值）
{{ v }}
×
Kernel
{{ formatKernelVal(v) }}
=
{{ convDetail.sum > 0 ? '+' : '' }}{{ Math.round(convDetail.sum) }}
Sum

將對應格子相乘再加總 —— 這個數字就是 feature map 上亮起的那一格。

卷積時間軸 {{ convCursor }} / {{ convTotalSteps }}
Q · 05
一個 kernel 只看得見一種花樣。若同時帶上八把呢？
拖曳右側立方體旋轉；點任一面看它學到了什麼。
— 05 —
多重特徵

同時用八把尺掃，
就得到八張特徵圖

剛才只示範了一個 kernel。實務上，CNN 第一層通常有 32 到 64 個 kernel 同時運作。有的偵測垂直邊、有的偵測橫向邊、有的偵測對角線、有的偵測弧度。

每個 kernel 都會產出自己的 feature map。把它們堆疊起來，就形成一個立體的「感官切片」。

試試點擊任一張 feature map，看它到底是用哪把 kernel 做出來的。

點擊任一面 · 聚焦
—

—

手機版已簡化此 3D 視覺化 — 請用電腦查看完整效果
8 張 feature map · 拖曳旋轉 · 點擊聚焦
Q · 06
特徵圖裡還有一堆「無用的負反應」與雜訊。怎麼清乾淨？
調整下方 pool size、stride、類型，看 feature map 怎麼被壓縮。

ReLU · 激活

原始（含負值）
→
ReLU 後 · 負值 → 0

max(0, x) —— 比零小的數全部夷平成「沒反應」。

Pooling · 降維

26 × 26
→
{{ pooledSize }} × {{ pooledSize }}
Pool Size {{ poolSize }}×{{ poolSize }}
Stride {{ poolingStride }}
取值方式：

{{ poolType === 'max' ? '保留每區塊最強反應，抓特徵。' : '取每區塊平均，抓整體趨勢。' }}

Q · 07
第 1 層看邊緣。第 2 層看紋理。第 4 層看整個物體 —— 這個「越疊越抽象」是怎麼發生的？
拖動下方層數，看每層 CNN 真正「興奮」的視覺模式。
神經元最愛的視覺模式 Layer {{ depthLevel + 1 }} / 4
{{ d.label }}
{{ currentDepth.tag }}

{{ currentDepth.title }}

{{ currentDepth.desc1 }}

{{ currentDepth.desc2 }}

典型反應：{{ currentDepth.examples }}

沒有人告訴 CNN「3 由上下兩個彎組成」。它只是在數百萬張圖上反覆被調參，自己長出這種層級結構。

Q · 08
所有特徵都偵測好了。這些「證據」如何被投成一個答案：是 3？還是 8？
拖動右側四個特徵滑桿，看機率條即時重算、預測結果跟著改變。
全連接層 · {{ computedWinner }} 勝出
手機版已簡化此視覺化
特徵 → 加權 → Softmax · 即時更新
PREDICTION
{{ computedWinner }}
信心 {{ (computedProbabilities[computedWinner] * 100).toFixed(1) }}%

你偵測到哪些特徵？

這些滑桿代表 CNN 在各 feature map 上的「強度」。

{{ f.name }}
{{ f.hint }}
{{ Math.round(featureStrengths[i] * 100) }}%
SOFTMAX 輸出機率
{{ i }}
{{ (p * 100).toFixed(1) }}%
— 09 —
結語
最後一問
那麼，CNN 真的「看懂」了這張圖嗎？
CNN 不會一眼看懂一張圖。
它只是把一張圖，
拆成無數個小問題，
逐一回答。

從像素矩陣，到邊緣偵測，到多層堆疊，到最終投票——
整個過程其實沒有一步用到「理解」。機器不知道「3」是什麼，也沒有眼睛。

但當數百萬張圖片經過同樣的流程反覆調參，這條計算管道最終長出了某種近似視覺的能力。

— 煎餃 · 視覺筆記