AI 教室監視系統製作報告

開發者：家平 | 指導工具：Google Gemini

(1) 專案概述

本專案旨在建置一套整合多種電腦視覺技術的「AI 教室監視系統」。透過 Flask Web 框架搭載 YOLOv8 物件偵測、MediaPipe 手部與臉部辨識，實現即時的人流統計、行為監控與事件記錄功能。

(2) 資訊專案結構 (Project Structure)

classroom_ai_monitor/ ├── app.py # Flask 主程式 (路由與網頁邏輯) ├── camera.py # 影像處理模組 (OpenCV + AI 辨識) ├── database.py # 資料庫操作 (SQLite 儲存事件記錄) ├── requirements.txt # 套件清單 ├── models/ # 存放 AI 模型 (如 yolov8n.pt) ├── static/ # 靜態檔案 (CSS, JS, 截圖) └── templates/ # HTML 網頁 (Dashboard, 歷史查詢)

本架構採用模組化設計，將前端展示、後端邏輯與 AI 推理模組分離，便於後續擴充功能。

(3) 資訊系統環境圖 (UML) 與程式邏輯

系統邏輯流程：

1. 影像擷取：透過 OpenCV 讀取 Web Camera 串流。
2. AI 推理層：影像依序經過 YOLO (物件) 與 MediaPipe (特徵) 處理。
3. 數據傳輸：Flask 透過 /video_feed 推送影像，並透過 /stats API 提供 JSON 格式統計數據。
4. 前端呈現：Dashboard.js 定時抓取數據並利用 Chart.js 繪製動態圖表。

[請插入 UML 環境架構圖]

(4)-(8) 功能測試與技術整合

測試一 Web Camera：確認 OpenCV 能正確驅動硬體並在 Flask 頁面輸出 MJPEG 串流。
測試二 YOLOv8 物件偵測：針對 Person, Laptop, TV, Keyboard 進行辨識，信心水準普遍落在 0.5~0.8 之間。
測試三 MediaPipe 手部偵測：追蹤 21 個節點座標，用於分析是否有舉手或特定手勢。
測試四 臉部網格偵測 (Face Mesh)：精細描繪臉部輪廓，作為疲勞偵測的基礎。
測試五 疲勞偵測：計算 EAR (Eye Aspect Ratio)，當數值低於閾值一段時間，系統發出警示。

(9) 全系統功能展示

即時監控儀表板

系統整合了即時影像、物件標示框與數據統計。下方為實際執行之截圖：

* 即時影像串流與標示

利用 OpenCV 在畫面上即時繪製 Bounding Box 與 Confidence Score。

* 事件時間軸 (Event Timeline)

當偵測到人數變動或異常事件時，自動記錄時間點並更新至前端圖表。

* 其他功能：人流統計

目前系統穩定支援 People Count 功能，並將數據視覺化為折線圖。

(10) 使用 AI 工具對話連結

(11) Trouble Shooting 與學習心得

遇到挑戰與解決方案：

效能瓶頸：同時執行 YOLO 與 MediaPipe 會導致延遲。解決方法：採用多執行緒 (Threading) 處理影像讀取與辨識。
Flask 串流問題：MJPEG 串流有時會斷開。解決方法：在 gen_frames() 中加入異常處理，確保 Frame 遺失時能重新連線。

學習心得：

透過這次製作 AI 教室監視系統，我深刻理解到前端 Flask 與後端 AI 模型整合的難點，特別是即時數據的同步。學習如何閱讀官方文檔並利用 AI 工具加速開發，是這次專案最大的收穫。