AI 教室監視系統製作

1. AI 教室監視系統製作

本專案的主題是利用 Python 建立一個結合攝影機、電腦視覺與網頁展示的 AI 教室監視系統。整體系統以 Visual Studio Code 作為開發環境， 配合 OpenCV 進行影像擷取，再整合 MediaPipe、YOLO 與 Flask， 讓攝影機畫面不只是單純顯示，而是可以進一步進行智慧分析與網頁化呈現。

在教室場景中，這樣的系統可以延伸應用在出席觀察、手勢互動、 臉部特徵分析、疲勞偵測，以及物件辨識等實際需求。 透過本次作業，我希望完成從環境安裝、功能測試到畫面展示的完整流程， 讓 AI 視覺應用不只停留在理論，而是能真正看到執行結果。

2. 資訊專案結構（說明）

本專案主要由以下幾個模組組成，各模組分工明確，彼此互相配合：

專案檔案規劃

• cam_test.py：測試 Web Camera 是否能正常讀取。
• shou.py：手部偵測程式，利用 MediaPipe Hands 顯示手部骨架。
• lian.py：臉部網格程式，利用 Face Mesh 顯示臉部特徵點。
• app.py：與 Flask 網頁整合的主程式。
• hand_landmarker.task / face_landmarker.task：模型檔案。
• templates/index.html：前端頁面。

3. 資訊系統環境圖（UML）、程式邏輯說明

系統環境圖（UML）

程式邏輯說明

1. 啟動 Python 程式並載入所需套件與模型。
2. 使用 OpenCV 開啟攝影機，連續讀取每一幀影像。
3. 將影像轉換為 AI 模型需要的格式，例如 BGR 轉 RGB。
4. 把影像送入 Hands、Face Mesh 或 YOLO 進行偵測。
5. 擷取模型輸出的關鍵點或辨識框資訊。
6. 將結果畫回原始畫面，例如手部線條、臉部網格、狀態文字。
7. 透過 Flask 提供 /video_feed 與 /stats 等路由，讓畫面與統計可在網頁同步顯示。
8. 最後在瀏覽器中看到即時監控結果，並可做截圖、記錄或後續擴充。

影像輸入 → 影像前處理 → AI 模型分析 → 結果標示 → 顯示/串流輸出

4. 功能測試一：Web Camera

本功能的目的是確認電腦攝影機是否能被 Python 正常存取。 我使用 OpenCV 的 cv2.VideoCapture(0) 開啟預設 Webcam， 並利用 cap.read() 讀取單幀畫面。如果成功，代表攝影機、 權限設定與 OpenCV 基本環境都沒有問題。

此步驟是整個 AI 視覺專案的基礎。若攝影機無法啟動，後續的手部偵測、 臉部網格、疲勞偵測與物件辨識都無法進行，因此必須先完成這項測試。

import cv2

cap = cv2.VideoCapture(0)
if not cap.isOpened():
    print("無法開啟攝影機")
    raise SystemExit

ret, frame = cap.read()
if ret:
    cv2.imwrite("test.jpg", frame)
    print("拍照成功：test.jpg")
else:
    print("拍照失敗")

cap.release()

5. 功能測試二：YOLO

YOLO（You Only Look Once）是一種常用的即時物件偵測模型， 可以同時辨識畫面中的多種物件，例如人、車、筆電、椅子等。 在智慧教室監控中，YOLO 可以拿來做人物統計、物件種類辨識、 以及簡單的動態監控分析。

從我的實作結果來看，YOLO 已成功標示出人物框線與信心值， 並與入室、離室、目前人數等資訊一起顯示在同一個監控介面中。 右側的 Event Timeline 也會同步記錄 entry、exit、occupancy 與 fatigue 等事件， 讓整個系統更接近真實智慧教室監控應用。

from ultralytics import YOLO
import cv2

model = YOLO("yolov8n.pt")
cap = cv2.VideoCapture(0)

while True:
    ret, frame = cap.read()
    if not ret:
        break
    results = model(frame)
    annotated = results[0].plot()
    cv2.imshow("YOLO Test", annotated)
    if cv2.waitKey(1) & 0xFF == ord("q"):
        break

cap.release()
cv2.destroyAllWindows()

6. 功能測試三：手部偵測（MediaPipe Hands）

手部偵測功能使用 MediaPipe Hands 模組完成。其核心概念是先將 OpenCV 讀取的 BGR 影像轉換為 RGB，再送入模型進行分析。模型會偵測手掌位置， 並輸出 21 個手部關鍵點，最後將關節點與連線畫回畫面中。

這項功能能應用於手勢控制、互動式白板、虛擬滑鼠與教學互動系統。 從實際測試結果中，可以看到畫面中的手掌輪廓、手指關節與連線都能被準確標示， 代表程式與模型整合成功。

7. 功能測試四：臉部網格偵測（Face Mesh）

臉部網格偵測使用 MediaPipe Face Mesh 模組，可在臉部上標示大量細緻的特徵點。 與一般只偵測臉框的位置不同，Face Mesh 可以提供更高精度的臉部結構資訊， 包括眼睛、鼻子、嘴巴、輪廓與虹膜等區域。

這項功能特別適合拿來做表情分析、AR 濾鏡、專注度觀察，以及疲勞偵測等進階應用。 從我的測試畫面中，可以清楚看到臉部上有大量綠色特徵點與眼睛位置標示， 表示 Face Mesh 模型已成功執行。

8. 功能測試五：疲勞偵測（EAR）

疲勞偵測通常會建立在 Face Mesh 或臉部關鍵點偵測之上，利用眼睛周圍的關鍵點計算 EAR（Eye Aspect Ratio）值。EAR 的概念是比較眼睛上下距離與左右距離的比例， 當眼睛閉合時，EAR 數值會明顯下降。

從實際整合到 Dashboard 的結果中，可以看到系統已能在事件欄中顯示 fatigue 警告， 代表系統已具備根據眼部特徵做狀態判斷的能力。若未來再搭配更穩定的閾值調整， 就能進一步提升疲勞偵測的準確性。

• EAR > 0.25：通常視為清醒狀態。
• EAR < 0.20 且持續超過 1.5 秒：可視為疲勞或打瞌睡警告。

EAR = (||p2-p6|| + ||p3-p5||) / (2 * ||p1-p4||)

若 EAR 持續低於門檻值，表示眼睛長時間閉合，
系統可進一步判斷為疲勞警告。

9. 全系統功能

本專案整合了 Python、OpenCV、MediaPipe、YOLO 與 Flask， 建立一套可即時執行的 AI 視覺辨識系統。整體系統已具備影像讀取、 即時分析、事件紀錄、統計顯示與網頁展示的能力。

（1）即時影像讀取與顯示

系統透過 OpenCV 連接電腦攝影機，持續讀取即時畫面，並在網頁中同步顯示辨識結果。 這代表系統可以即時接收外部影像，不需要先錄影再分析，適合用於互動式 AI 視覺應用。

（2）人物辨識與人數統計

系統整合 YOLO 模型辨識人物，並在畫面上顯示框線與信心值。 同時也會統計目前人數、進入人數、離開人數，讓使用者快速了解教室內的狀況。

（3）手部與臉部特徵偵測

在手部辨識功能中，系統使用 MediaPipe Hands 模組標示手部骨架； 在臉部辨識部分，系統使用 Face Mesh 模組顯示臉部特徵點與眼睛位置。 這些功能可以作為手勢互動、表情分析與疲勞偵測的基礎。

（4）事件時間軸（Event Timeline）

系統右側提供 Event Timeline，可記錄進入、離開、人數變化與疲勞事件， 讓使用者不只看到即時畫面，也能回顧剛剛發生過的狀況。

（5）系統延伸性

雖然目前已完成即時監控、人物辨識、手部偵測、臉部網格與疲勞事件記錄， 但整體系統仍具備良好的擴充性。未來可以繼續加入表情辨識、姿勢分析、 資料庫存檔、歷史事件查詢與通知功能，做成更完整的智慧教室平台。

10. 使用 AI 工具對話連結

在本次專案製作過程中，我有使用 AI 工具協助學習與完成作業內容。 因為本次專案包含 Python 環境安裝、套件設定、MediaPipe 功能理解、 OpenCV 攝影機操作、Flask 網頁串流與程式除錯，所以在實作過程中， AI 工具對我來說是一個非常有效的輔助學習方式。

我主要使用的 AI 工具有 ChatGPT、Gemini 與 Claude。 這些工具幫助我理解 MediaPipe Hands 與 Face Mesh 的基本概念， 也協助我整理程式結構、修正文法錯誤、改善 HTML 排版， 並把單純的 Python 偵測程式一步步整理成完整的 Dashboard 介面。

• ChatGPT： 協助撰寫 HTML/CSS、整理作業內容、說明程式邏輯與除錯。
• Gemini： 協助查詢 MediaPipe Hands、Face Mesh 與 AI 視覺辨識相關概念。
• Claude： 協助整理程式架構與技術說明內容。

我認為 AI 工具不只是拿來找答案，更重要的是幫助我理解程式背後的原理、 加快學習速度，並在遇到問題時提供可參考的解法。

AI 工具連結

• ChatGPT
• Gemini
• Claude

11. Trouble Shooting 與 學習心得

（1）Trouble Shooting

問題一：套件安裝與環境設定

在一開始安裝專案環境時，我需要安裝 mediapipe、opencv-python 等套件。 雖然指令本身不複雜，但若 Python 環境沒有切換正確，或虛擬環境沒有啟動， 就容易出現找不到模組或安裝位置錯誤的情況。後來我確認已進入 .venv 虛擬環境後，再執行安裝指令，問題就順利解決。

問題二：專案結構與路徑整理

當專案從單一 Python 程式逐步擴充成 Flask + YOLO + Dashboard 時， 檔案數量會變多，若結構沒有整理好，就很容易發生路徑錯誤或靜態檔案讀取失敗。 後來我把前端頁面放在 templates，其餘資源整理到專案資料夾中， 讓整個專案更清楚，也比較容易維護。

問題三：Flask 與即時監控畫面整合

在把 Python 視覺程式整合到 Flask 時，我學到除了辨識邏輯本身， 還需要處理路由、串流、統計資料更新與前端畫面排版。從 VS Code 的執行畫面可看到， 伺服器需要持續處理 /、/video_feed、/stats 等請求， 才能讓前端頁面正常更新。

問題四：即時辨識穩定性

即時辨識功能需要持續處理每一幀畫面，因此若電腦效能不足， 或同時執行太多程式，畫面可能會有延遲或辨識不穩的情況。 在實際操作中，我學到要盡量保持執行環境單純， 並確認模型檔案已正確下載，才能讓程式穩定運作。

（2）學習心得

透過這次作業，我更深入了解了 AI 視覺應用的基本流程。 以前我對這類技術的印象停留在「打開鏡頭就能辨識」， 但實際操作後才知道，一個完整的功能需要包含環境安裝、 套件設定、模型讀取、影像擷取、即時分析、網頁整合與結果顯示等多個步驟。

在 Hands 與 Face Mesh 的測試過程中，我最有感的是 MediaPipe 的實用性很高。 它不但能快速完成手部與臉部關鍵點偵測，還能讓我很直觀地理解 AI 是如何從畫面中抓取特徵並進行分析。後來再把這些功能整合到 Dashboard 中， 會更明顯感受到從單一功能到完整系統之間的差異。

這次專案也讓我體會到除錯能力的重要性。很多時候問題不是出在程式邏輯本身， 而是環境、路徑、模組版本、前後端整合或執行方式。當我學會看終端機訊息、 一步一步排查原因後，就比較不會因為出錯而卡住太久。

此外，我也發現 AI 工具對學習程式設計很有幫助。 在遇到不懂的語法、功能概念或錯誤訊息時，可以先透過 AI 工具協助整理思路， 再自己動手修改與測試。這樣不但能加快學習速度， 也能提升我自己解決問題的能力。

整體來說，這次作業讓我學到的不只是 MediaPipe 與 OpenCV 的基本使用方式， 更重要的是學會如何把不同工具整合成一個可以實際執行的 AI 教室監視系統。 看到自己的網頁介面能顯示即時畫面、人物辨識、事件時間軸與統計資訊時， 我覺得非常有成就感，也更有動力繼續學習 Python 與 AI 視覺應用。