// 視覺模型基礎 — 迷你互動 demo 元件 // 用 React 寫成 Web Components 風格,可以塞進任何 slide section const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────── // 1. ImageNet Top-5 Error 柱狀圖 (slide 19) // ───────────────────────────────────────────────────────── function ImageNetChart() { const data = [ { year: '2010', name: 'NEC', err: 28.2, color: 'var(--ink-faint)' }, { year: '2011', name: 'XRCE', err: 25.8, color: 'var(--ink-faint)' }, { year: '2012', name: 'AlexNet', err: 16.4, color: 'var(--orange)' }, { year: '2013', name: 'ZFNet', err: 11.7, color: 'var(--orange)' }, { year: '2014', name: 'VGG/GoogLeNet', err: 6.7, color: 'var(--yellow)' }, { year: '2015', name: 'ResNet ★', err: 3.57, color: 'var(--red)' }, { year: '2016', name: 'Trimps', err: 2.99, color: 'var(--green)' }, { year: '2017', name: 'SENet', err: 2.25, color: 'var(--green)' }, { year: 'Human', name: '人類基準', err: 5.1, color: 'var(--blue)' }, ]; const max = 30; return (
ImageNet Top-5 Error Rate (%) · 越低越好
{data.map((d, i) => { const isHuman = d.year === 'Human'; return (
{d.err}%
{isHuman &&
← 5.1%
}
{d.year}
{d.name}
); })}
★ 2015 ResNet 首次超越人類基準 (3.57% < 5.1%)
); } // ───────────────────────────────────────────────────────── // 2. Conv 輸出尺寸計算器 (slide 12) // ───────────────────────────────────────────────────────── function ConvCalculator() { const [input, setInput] = useState(32); const [kernel, setKernel] = useState(3); const [stride, setStride] = useState(1); const [padding, setPadding] = useState(1); const output = Math.floor((input + 2 * padding - kernel) / stride) + 1; const params = kernel * kernel; const Slider = ({ label, value, set, min, max, step = 1, color }) => (
{label} {value}
set(+e.target.value)} style={{ accentColor: color }} />
); return (
輸入尺寸計算機 ⟳ 拉拉看
output = ⌊(input + 2p - k) / s⌋ + 1
⌊({input} + 2×{padding} − {kernel}) / {stride}⌋ + 1
{output > 0 ? output : '?'}
{input}×{input} → {output}×{output}
每個 kernel 參數量 = {params}
); } // ───────────────────────────────────────────────────────── // 3. Activation 函數曲線 (slide 18) // ───────────────────────────────────────────────────────── function ActivationViz() { const [enabled, setEnabled] = useState({ relu: true, sigmoid: true, tanh: true, leaky: false, gelu: false }); const fns = { relu: { color: 'var(--red)', label: 'ReLU', f: x => Math.max(0, x) }, sigmoid: { color: 'var(--blue)', label: 'Sigmoid', f: x => 1 / (1 + Math.exp(-x)) }, tanh: { color: 'var(--green)', label: 'Tanh', f: x => Math.tanh(x) }, leaky: { color: 'var(--orange)', label: 'LeakyReLU', f: x => x > 0 ? x : 0.1 * x }, gelu: { color: 'var(--purple)', label: 'GELU', f: x => 0.5 * x * (1 + Math.tanh(Math.sqrt(2 / Math.PI) * (x + 0.044715 * x ** 3))) }, }; const W = 460, H = 240, range = 4; const sx = x => W / 2 + (x / range) * (W / 2); const sy = y => H / 2 - (y / 2.2) * (H / 2); const path = (f) => { let p = ''; for (let i = 0; i <= 100; i++) { const x = -range + (2 * range * i / 100); const y = f(x); p += (i === 0 ? 'M' : 'L') + sx(x) + ',' + sy(Math.max(-2.2, Math.min(2.2, y))) + ' '; } return p; }; return (
{/* grid */} {[-3, -2, -1, 1, 2, 3].map(x => ( ))} {[-2, -1, 1, 2].map(y => ( ))} {/* axes */} {/* curves */} {Object.entries(fns).map(([k, v]) => enabled[k] && ( ))}
切換看曲線疊加
{Object.entries(fns).map(([k, v]) => ( ))}
); } // ───────────────────────────────────────────────────────── // 4. 電梯 vs 樓梯類比 (slide 25) // ───────────────────────────────────────────────────────── function ElevatorAnalogy() { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick(t => (t + 1) % 100), 60); return () => clearInterval(id); }, []); const stairY = Math.sin(tick / 100 * Math.PI * 2) * 40; const elevY = Math.sin(tick / 100 * Math.PI * 2) * 5; return (
{/* Plain CNN = 樓梯 */}
Plain CNN
= 從 1 樓爬樓梯到 100 樓
{/* stairs */} {[...Array(8)].map((_, i) => ( ))} {/* climber */} 😰 累死了…
每層都要重新學整個 mapping
梯度傳到底部已經消失
退化問題就是這樣來的
{/* ResNet = 電梯 */}
ResNet
= 搭電梯到 100 樓 (中間隨時可下車)
{/* elevator shaft */} {/* cable */} {/* floor markers */} {[40, 80, 120].map(y => )} {/* car */} 😎 輕鬆 識別 = identity
只學「殘差」F(x) = H(x) − x
梯度有 highway 直接回傳
1000 層也訓練得起來
); } // ───────────────────────────────────────────────────────── // 5. Backbone-Neck-Head 流動動畫 (slide 41) // ───────────────────────────────────────────────────────── function BackboneNeckHead() { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick(t => (t + 1) % 100), 60); return () => clearInterval(id); }, []); const Block = ({ x, y, w, h, color, label, sub, t = 0 }) => { const active = (tick + t) % 100 < 33; return ( {label} {sub} ); }; // particles const pPos = (start, end) => { const p = (tick % 100) / 100; return { x: start.x + (end.x - start.x) * p, y: start.y + (end.y - start.y) * p }; }; return (
🎞 特徵流動 · YOLOv4 三段式架構
{/* connections */} {/* input image */} 輸入圖 640×640×3 {/* moving particles */} {(() => { const segs = [ { from: { x: 130, y: 100 }, to: { x: 250, y: 100 }, t: 0 }, { from: { x: 400, y: 100 }, to: { x: 520, y: 100 }, t: 25 }, { from: { x: 670, y: 100 }, to: { x: 790, y: 100 }, t: 50 }, ]; return segs.map((s, i) => { const p = ((tick + s.t) % 100) / 100; const cx = s.from.x + (s.to.x - s.from.x) * p; return ; }); })()}
Backbone
把圖片變成 feature map
例: CSPDarknet53
Neck
不同層 feature 融合
例: SPP + PANet
Head
輸出 box + 類別 + 信心
例: YOLO Head ×3 尺度
); } // ───────────────────────────────────────────────────────── // 6. YOLO 對照表 (slide 51) — hover 高亮 // ───────────────────────────────────────────────────────── function YoloCompareTable() { const [hoverRow, setHoverRow] = useState(null); const [hoverCol, setHoverCol] = useState(null); const cols = ['版本', 'Backbone', 'Neck', 'Head', 'Anchor', 'Loss']; const rows = [ ['v1 (2016)', 'GoogLeNet 改', '—', 'Coupled', '無', 'SSE'], ['v2 (2017)', 'Darknet-19', '—', 'Coupled', 'k-means', 'SSE'], ['v3 (2018)', 'Darknet-53', 'FPN-like', 'Coupled', '9 個', 'BCE'], ['v4 (2020)', 'CSPDarknet53', 'SPP+PANet', 'Coupled', '9 個', 'CIoU'], ['v5 (2020)', 'CSPDarknet+Focus', 'SPP+PANet', 'Coupled', '自動 anchor', 'CIoU'], ['v6 (2022) ★', 'EfficientRep', 'Rep-PAN', 'Decoupled', 'Anchor-free', 'SIoU/CIoU'], ['v7 (2022)', 'E-ELAN', 'PANet+', 'Coupled+Aux', '9 個', 'CIoU'], ['v8 (2023) ★', 'C2f', 'PANet 改', 'Decoupled', 'Anchor-free', 'CIoU+DFL'], ]; const getBg = (r, c) => { if (hoverRow === r && hoverCol === c) return 'rgba(200, 85, 61, 0.25)'; if (hoverRow === r || hoverCol === c) return 'rgba(232, 197, 71, 0.18)'; return 'transparent'; }; return (
滑鼠移上去看高亮 · ★ 表示重要轉折
{cols.map((c, ci) => ( ))} {rows.map((row, ri) => ( setHoverRow(ri)} onMouseLeave={() => setHoverRow(null)}> {row.map((cell, ci) => ( ))} ))}
setHoverCol(ci)} onMouseLeave={() => setHoverCol(null)}> {c}
{cell}
); } // ───────────────────────────────────────────────────────── // 7. 點圖辨識 mini demo (slide 3) // ───────────────────────────────────────────────────────── function PixelGuess() { const [revealed, setRevealed] = useState([]); const [showAnswer, setShowAnswer] = useState(false); // 用簡單的灰階 grid 表示一張貓圖 const grid = useMemo(() => { // 16x16 簡化「貓」(用一些圖形啟發式) const g = []; for (let y = 0; y < 16; y++) { const row = []; for (let x = 0; x < 16; x++) { // 頭部圓形 const dh = Math.sqrt((x - 8) ** 2 + (y - 8) ** 2); let v = 220; if (dh < 5.5) v = 180; // 耳朵 if ((x >= 4 && x <= 6 && y >= 4 && y <= 6) || (x >= 10 && x <= 12 && y >= 4 && y <= 6)) v = 160; // 眼睛 if ((x === 6 || x === 7) && y === 8) v = 50; if ((x === 10 || x === 11) && y === 8) v = 50; // 鼻子嘴 if (x === 8 && y === 10) v = 100; if (y === 11 && x >= 7 && x <= 9) v = 130; row.push(v); } g.push(row); } return g; }, []); const toggle = (i) => { setRevealed(r => r.includes(i) ? r : [...r, i]); }; const revealAll = () => { setRevealed([...Array(256).keys()]); setShowAnswer(true); }; return (
點開像素 · 你看得出來嗎?
{grid.flat().map((v, i) => { const isRevealed = revealed.includes(i); return (
toggle(i)} style={{ aspectRatio: '1', background: isRevealed ? `rgb(${v},${v},${v})` : 'var(--paper-dark)', cursor: 'pointer', transition: 'background 0.2s' }} > {!isRevealed &&
?
}
); })}
這是一張 16×16 = 256 個像素 的圖
每個像素只是一個 0–255 的數字
電腦看到的就是 [[180, 220, ...], ...]
{showAnswer && (
🐱 是一隻貓!
)}
→ 我們要做的事:用 256 個數字推斷「這是貓還是狗」
); } // ───────────────────────────────────────────────────────── // 8. 反向傳播粒子流動 (slide 24 梯度消失) // ───────────────────────────────────────────────────────── function GradientFlow() { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick(t => (t + 1) % 100), 50); return () => clearInterval(id); }, []); const layers = 8; return (
🌧 梯度反向傳播 · 越往前梯度越小
{/* arrows backward */} {[...Array(layers)].map((_, i) => { const x = 60 + i * 90; const opacity = 1 - i * 0.12; return ( L{i+1} {i > 0 && ( <> {/* particle */} {(() => { const p = (tick + i * 10) % 100 / 100; const cx = x - p * 30; return ; })()} )} {(0.25 ** (layers - i)).toExponential(1)} ); })} ← Loss 從這邊回傳
每層 sigmoid 最大梯度 0.25 → 8 層後只剩 1.5e-5 → 前層 weight 學不動
); } // ───────────────────────────────────────────────────────── // Mount 元件到指定 mount points // ───────────────────────────────────────────────────────── const mounts = { 'demo-imagenet': ImageNetChart, 'demo-conv-calc': ConvCalculator, 'demo-activation': ActivationViz, 'demo-elevator': ElevatorAnalogy, 'demo-bnh-flow': BackboneNeckHead, 'demo-yolo-table': YoloCompareTable, 'demo-pixel-guess': PixelGuess, 'demo-gradient-flow': GradientFlow, }; function mountAll() { Object.entries(mounts).forEach(([id, Comp]) => { document.querySelectorAll(`[data-demo="${id}"]`).forEach(el => { if (!el.dataset.mounted) { el.dataset.mounted = '1'; ReactDOM.createRoot(el).render(); } }); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mountAll); } else { mountAll(); } // add bar grow keyframe const sheet = document.createElement('style'); sheet.textContent = ` @keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }`; document.head.appendChild(sheet);