AI 教室監視系統製作

(1) AI 監視系統製作

本專題目標是建立一套「AI 教室監視系統」，讓電腦或樹莓派透過 Web Camera 即時取得教室畫面，並使用 AI 模型進行物件辨識、手部偵測、臉部網格分析與事件記錄。系統最終以 Flask 網頁方式呈現，使使用者能從瀏覽器查看影像串流、辨識結果、事件時間軸，以及其他自訂功能，例如人數統計或車輛數量計算。

系統目標

建立一個可展示 AI 視覺辨識流程的教室監視系統，整合前端網頁與後端 Python 程式。

核心技術

OpenCV、Flask、YOLO、MediaPipe、HTML、CSS、JavaScript。

應用場景

教室監控、智慧點名輔助、教學展示、電腦視覺課程成果整合。

(2) 資訊專案結構（說明）

本專案分為前端顯示、後端影像處理、AI 辨識模組與資料紀錄四個部分。以下為建議專案資料夾結構：

AI_Classroom_Monitor/
├─ app.py
├─ requirements.txt
├─ templates/
│  └─ index.html
├─ static/
│  ├─ css/
│  │  └─ style.css
│  ├─ js/
│  │  └─ main.js
│  └─ captures/
├─ models/
│  └─ yolov8n.pt
├─ logs/
│  └─ event_log.txt
└─ README.md

前端頁面

使用 HTML 與 CSS 建立報告頁面與監視系統操作頁面，顯示影像串流、資訊區塊與事件時間軸。

後端程式

由 Flask 啟動網頁服務，並用 OpenCV 讀取攝影機影像，再交由 YOLO 或 MediaPipe 進行分析。

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

系統環境圖（文字 UML 示意）

[Web Camera] ↓ [OpenCV 擷取影像] ↓ [AI 辨識模組] ├─ YOLO：物件辨識 / 人數統計 ├─ MediaPipe Hands：手部偵測 └─ MediaPipe Face Mesh：臉部網格偵測 ↓ [Flask 後端處理] ↓ [HTML/CSS/JS 前端網頁] ├─ 即時影像串流 ├─ 物件資訊顯示框 ├─ 事件時間軸 └─ 系統控制按鈕

程式邏輯說明

程式啟動後，由 OpenCV 開啟 Web Camera 取得每一幀畫面。
影像送入不同 AI 模組進行分析，例如 YOLO 判斷物件種類、MediaPipe 手部關鍵點偵測、Face Mesh 臉部網格計算。
辨識結果會畫到影像上，並整理成文字資訊，例如「person、cell phone、hand detected」。
若偵測到新事件，系統會加入 Event Timeline，顯示時間與事件內容。
Flask 將影像串流與分析結果送到前端網頁，即可在瀏覽器中查看。

教師建議： 本段可附上自己繪製的 UML 圖、流程圖，或使用 draw.io、PlantUML、PowerPoint 輸出圖檔後插入頁面。

(4) 功能測試一：Web Camera

在專題初期，先確認攝影機是否能正常開啟、讀取影像與拍照存檔。這是後續所有 AI 辨識功能的基礎。

測試目標

成功開啟筆電或 USB 攝影機
顯示即時畫面
可擷取單張照片

測試結果說明

本次測試成功讀取 Web Camera 影像，畫面穩定，影像更新正常，並可透過程式進行拍照與存檔。

import cv2

cap = cv2.VideoCapture(0)
ret, frame = cap.read()
if ret:
    cv2.imwrite("test.jpg", frame)
cap.release()

【請在此插入 Web Camera 測試畫面截圖】

(5) 功能測試二：YOLO

本功能使用 YOLO 進行即時物件辨識，能辨認人、手機、筆電、書包等物件。此功能可作為監視系統的主要核心，並支援人數或車數統計。

功能	內容說明
物件辨識	辨識 person、cell phone、laptop、backpack 等常見物件
標註框	在畫面上畫出 Bounding Box 與 Label
事件記錄	當新物件出現時，加入事件時間軸

from ultralytics import YOLO
model = YOLO("yolov8n.pt")
results = model(frame)
annotated = results[0].plot()

【請在此插入 YOLO 偵測畫面，例如偵測到 person / laptop / cell phone】

(6) 功能測試三：手部偵測（MediaPipe）

使用 MediaPipe Hands 進行手部關鍵點偵測，顯示 21 個 Landmark 與手部骨架連線。這可延伸到手勢辨識、手指計數、觸控互動等應用。

技術重點

影像需由 BGR 轉換為 RGB
輸出 21 個手部關鍵點
可辨識單手或雙手

延伸應用

比手勢控制系統
手指數量辨識
教室互動式投影控制

import mediapipe as mp
mp_hands = mp.solutions.hands
hands = mp_hands.Hands()
results = hands.process(rgb_frame)

【請在此插入 MediaPipe 手部偵測截圖】

(7) 功能測試四：臉部網格偵測

臉部網格偵測採用 MediaPipe Face Mesh，可取得大量臉部關鍵點，適合做表情分析、疲勞偵測、視線方向研究等應用。

測試項目	說明
Face Mesh	建立臉部網格線與 landmark
應用可能	疲勞偵測、表情分析、頭部姿態估計
系統整合	可與事件警示、上課專注度分析結合

mp_face_mesh = mp.solutions.face_mesh
face_mesh = mp_face_mesh.FaceMesh(refine_landmarks=True)
results = face_mesh.process(rgb_frame)

【請在此插入 Face Mesh 測試畫面】

(8) 全系統功能

本專題最後整合多個模組，形成一個網頁版 AI 教室監視系統。使用者透過瀏覽器即可查看即時畫面與系統狀態。

即時影像串流

透過 Flask 將攝影機影像以 MJPEG 方式串流到網頁，達成即時監看功能。

物件資訊顯示框

在網頁右側列出目前偵測到的物件，並顯示其類別名稱，例如 person、cell phone、hand。

事件時間軸（Event Timeline）

當系統偵測到新的事件時，會依照時間順序記錄，方便回顧與分析。

事件標示

可將特定物件定義為關鍵事件，例如「偵測到 person」、「手機出現」、「雙手進入畫面」。

其他功能：人數或車數計算

可依 YOLO 辨識結果統計畫面中的 person 數量，若場景是停車場，也可計算 car 數量。

截圖與紀錄

按下按鈕可將當前畫面存成圖片，並將事件資訊記錄於文字檔或時間軸清單中。

事件時間軸範例

14:23:10　偵測到 person，系統開始記錄。

14:23:18　偵測到 cell phone，加入事件標示。

14:23:32　偵測到 hand landmarks，手勢模組啟動。

14:23:46　偵測到 face mesh，臉部分析完成。

整合成果： 本系統已具備即時串流、AI 辨識、資訊顯示與事件記錄等功能，符合智慧教室監視系統的基礎架構。

(9) 使用 AI 工具對話連結（例：Gemini）

在開發本專題時，使用生成式 AI 工具協助查詢程式語法、修正錯誤、設計 UI 與優化流程。此部分建議附上對話截圖或對話連結，以呈現 AI 協作開發過程。

AI 工具名稱：Gemini / ChatGPT / Claude
用途：除錯、產生 Flask 程式碼、說明 YOLO 參數、修改 HTML/CSS
附上內容：對話連結、問題描述、AI 回答摘要、實際修改成果

【請在此插入 AI 對話截圖或填入對話網址，例如：https://gemini.google.com/...】

(10) Trouble Shooting 與學習心得

Trouble Shooting

問題	原因	解決方式
攝影機無法開啟	裝置編號錯誤或攝影機被其他程式占用	修改 `cv2.VideoCapture(0)` 為 1，或關閉其他程式
MediaPipe 無法匯入	未啟用正確虛擬環境，或安裝失敗	重新啟用 `.venv`，並以 `pip install mediapipe` 安裝
Flask 網頁無法顯示影像	路由錯誤或影像串流函式未正常輸出 JPEG	確認 `/video_feed` 路由與 `Response(...)` 設定
YOLO 執行速度慢	模型較大或電腦效能不足	改用 `yolov8n.pt` 小模型，並降低解析度

學習心得

透過本次專題，我學習到如何將 OpenCV、YOLO、MediaPipe 與 Flask 整合成一個完整的 AI 網頁系統。除了理解影像辨識技術的流程，也學會如何排除套件安裝、攝影機控制與前後端整合等問題。使用 AI 工具協助開發時，我體會到提問方式與問題描述的清楚程度，會大幅影響解決效率。

未來若有更多時間，我希望能加入疲勞偵測、點名統計、異常事件警示與資料庫儲存功能，讓整個系統更接近真實的智慧教室應用。