「識生學坊 - 臉盲教師救星」是阿凱老師為「開學第一週記不住學生名字」這個真痛點打造的 遊戲化臉部辨識訓練工具,部署在 cagoooo.github.io/recognize/,當前 v3.14.0 活躍開發中。資訊科任老師教 6 個班 = 180 個名字,特教巡迴老師跨 4 間學校 28 個學生 — 這款工具就是為這群人而生。
🎯 核心特色
- 📁 班級雙通道匯入 — Excel 批次匯入名單 + 相簿批次匯入照片,一張照片一個學生
- 🤖 MediaPipe 端離線臉部偵測 —
@mediapipe/tasks-visionWebAssembly 本地跑,1:1 智慧裁切「頭頂 +50% / 肩膀 +140% / 左右 +35%」不上傳第三方 - 🧠 Gemini Vision 記憶口訣(殺手鐧)—
gemini-2.5-flash-lite看照片產出「黑框眼鏡、燦爛笑容、馬尾」3 個特徵描述 + 3-5 個關鍵字標籤幫老師建記憶錨點 - 🎮 4 模式遊戲化特訓 — 看照片猜名字 / 看名字猜照片 / 極限混淆(相似標籤干擾)/ 標籤特訓(如「眼鏡」組專練),含 Combo 連擊 + S+/S/A/B 評級
- 📖 班級攻略本兩階段比對演算法 — 階段 1 前端 64×64 灰階 fingerprint 餘弦相似度粗篩(30 人班 435 對毫秒完成),階段 2 對 top 50 對呼叫 Gemini 雙圖比對,30 人班一次跑全套約 NT$0.25-0.5
- 📊 成長戰績儀表板 — 折線圖 / 難易度指數 / 班級爭霸榜,html2canvas 戰績卡含 QR Code 分享家長群
- 🤝 shareToken 班級攻略本分享 — 科任老師只能讀不能寫,firestore.rules 嚴綁
teacherUid == request.auth.uid - 📱 PWA + 觸感震動 50ms + SpeechSynthesis 語音教練 — 答題自動唸正確答案與特徵描述
💡 設計理念
技術棧 React 19 + Vite 7 + Tailwind v4 + framer-motion + lucide-react + recharts + Firebase(Auth + Firestore + Storage + Hosting)+ IndexedDB v3 雙存(裁切版 blob 顯示 + 原圖保留供重新裁切)+ Vitest + Playwright 視覺回歸測試。腦科學告訴我們:記名字需要「多次接觸 + 主動回想 + 情境連結」三件事。#54 把這三件事用遊戲化機制全包,並把成本控制做到極致 — 兩階段比對演算法讓「找出最容易認錯的相似學生 pair」這件事的單次成本壓在 NT$0.5 以下。
🎒 適合情境
石門國小 5 位科任老師實測:全班記熟時間從 4-6 週縮到 1.5-2 週,上課叫錯名字次數從 8-12 次/節降到 1-2 次/節,親師會家長辨識率從 50% 拉到 90%。
- 開學新接班的導師(記 30 個學生 + 30 個家長)— 開學前一週就上傳照片開始練
- 國中 / 高中科任老師(180+ 學生)— 兩週後能在走廊叫出每個學生的名字
- 音樂 / 體育 / 美術 / 英語 / 資訊老師 — 多班輪流上課不再喊「那個誰」
- 特教巡迴 / 兼任輔導老師 — 跨校把學生跟學校連起來,不會走錯教室
- 補習班 / 安親班新進老師 — 第一週快速建立信任
搭配 #49 教務處寶藏庫(班級照、座位表)+ #89 教師回覆小幫手 Pro(記名字 + 寫回覆一條龍)形成完整師生互動鏈。