👀 #54 識生學坊：MediaPipe 離線臉部偵測 + Gemini Vision 記憶口訣 + 4 模式遊戲化特訓 + 班級攻略本兩階段比對
#54「識生」= 認識學生，「學坊」= workshop 修練場。MediaPipe WebAssembly 端離線跑（不上傳第三方）+ Gemini Vision 自動產 3 個外觀特徵與口訣 + Combo 連擊 S+/S/A/B 評級 + 班級攻略本兩階段比對（fingerprint 粗篩 + Gemini 雙圖比對）。30 人班一次跑全套成本 NT$0.25-0.5，v3.14.0 活躍開發中。
開學第一週，最大的焦慮是什麼？
不是怎麼教，是 怎麼記住所有學生的名字。
特別痛的角色：
- 新接班導師：30 個學生 + 30 個家長名字
- 科任老師：6 個班 × 30 個學生 = 180 個名字
- 音樂 / 體育 / 美術 / 英語 / 資訊 / 輔導 / 特教 老師
我自己當資訊科任的第一週，每節課都要偷瞄座位表叫人 — 學生會笑說「老師你又叫錯了」。
為什麼記名字這麼難？
人類大腦對「陌生臉孔」的識別速度比熟人慢 10 倍。何況：
- 學生穿同款制服 / 髮型相似
- 開學前兩週還沒互動，沒「故事」幫助記憶
- 雙胞胎 / 兄弟姊妹同校（這個最毒）
- 名字諧音 / 同名（兩個小明）
腦科學告訴我們：要把名字記住，需要「多次接觸 + 主動回想 + 情境連結」。
#54 識生學坊怎麼解？（真實技術細節）
功能 A：班級 / 學生建檔（雙通道匯入）
- Excel 批次匯入名單（姓名 + 座號）
- 相簿批次匯入照片
- 不是「自動切全班合照」— 一張照片一個學生
功能 B：AI 智慧裁切（MediaPipe WebAssembly 離線跑）
- 用
@mediapipe/tasks-vision端離線偵測人臉（不上傳第三方） - 自動 1:1 智慧裁切演算：「頭頂 +50% / 肩膀 +140% / 左右 +35%」
- 同框多人會挑「面積最大且最靠中央」當主體
- 偵測失敗 fallback 中央裁切 + UI 黃徽章提示
功能 C：AI 記憶口訣（殺手鐧）
- 呼叫 Gemini Vision API
gemini-2.5-flash-lite看學生照片 - 產出 3 個外觀特徵中文描述（如「黑框眼鏡、燦爛笑容、馬尾」）
- 3-5 個關鍵字標籤幫老師建記憶錨點
- LocalStorage 快取避免重複 API call
功能 D：4 種遊戲化特訓模式
- 「看照片猜名字」
- 「看名字猜照片」（反向）
- 「極限混淆」（相似標籤干擾）
- 「標籤特訓」（如「眼鏡」組專練）
- Combo 連擊系統 + 記憶大師 S+/S/A/B 評級
功能 E：班級攻略本 v3.9（兩階段比對演算法） 找出「最容易認錯的相似學生 pair」：
- 階段 1：前端把人臉縮成 64×64 灰階 fingerprint 跑餘弦相似度粗篩（免費，30 人班 435 對毫秒完成）
- 階段 2：對 top 50 對呼叫 Gemini 雙圖比對，產出「A 是 ___，B 是 ___」對比區分點
- 月度配額 1000 次守門
- 30 人班一次跑全套約 NT$0.25-0.5（成本控制超漂亮）
功能 F：成長戰績儀表板
- 折線圖 / 難易度指數 / 班級爭霸榜
- html2canvas 戰績卡截圖含 QR Code 可分享家長群
功能 G：班級攻略本可分享給科任老師
- 透過 shareToken + sharedWith 清單
- 科任老師只能讀不能寫
- firestore.rules 嚴謹綁定
teacherUid == request.auth.uid
真實技術棧
- React 19 + Vite 7 + Tailwind v4 + framer-motion + lucide-react + recharts
- AI：
@google/generative-ai（Gemini Vision）+@mediapipe/tasks-vision（本地人臉偵測） - Firebase（Auth + Firestore + Storage + Hosting）
- IndexedDB v3 雙存：裁切版 blob 顯示 + 原圖 originalBlob 保留供重新裁切
- vite-plugin-pwa + html2canvas + jszip + xlsx + file-saver
- Vitest + Playwright（視覺回歸測試）
- 觸感震動 50ms（PWA 安裝後有原生 app 感）+ SpeechSynthesis 語音教練（答題自動唸正確答案 + 特徵描述）
- 當前 v3.14.0（活躍開發中，PROGRESS.md 寫到 v3.9.0）
實測數字（石門國小 5 位科任老師）
| 指標 | 傳統靠座位表 | 用 #54 識生學坊 |
|---|---|---|
| 全班名字記熟所需時間 | 4-6 週 | 1.5-2 週 |
| 上課叫錯名字次數（第 2 週） | 8-12 次/節 | 1-2 次/節 |
| 學生「老師記得我」滿意度 | 中 | 高（學生開心被點到） |
| 親師會家長辨識率 | 50% | 90% |
老師回饋
「我教 6 個班共 180 個學生，用 #54 兩週後我能在走廊叫出每個學生的名字 — 學生不敢造次了」
— 石門國小資訊科任老師
「特教巡迴老師我有 28 個學生分散 4 間學校，這工具幫我把學生跟學校連起來 — 不會走錯教室找錯人」
— 桃園市特教巡迴教師
「親職教育日我能跟每個家長叫出小孩名字，家長感動到當場跟我說謝謝」
— 新北市某國小新進導師
配對工具推薦
- #49 教務處寶藏庫 — 班級照、座位表、學生資料統整
- #89 教師回覆小幫手 Pro 版 — 親師溝通 AI 草稿（記名字 + 寫回覆一條龍）
- #54 識生學坊 — 本篇主角
適用對象
- 開學新接班的導師（記 30 個學生 + 30 個家長）
- 國中 / 高中科任老師（180+ 學生）
- 音樂 / 體育 / 美術 / 英語 / 資訊老師
- 特教巡迴 / 兼任輔導老師
- 補習班 / 安親班新進老師
想試試？
開學前一週就先上傳照片開始練，到開學第一天你就能叫出大半的名字 — 那個畫面學生會記一輩子。