教師版示範作業｜含程式邏輯與程式碼截圖區

AI 教室監視系統製作
高分教師版範例

本示範網頁強調「不只展示成果，也說明程式如何運作」。適合作為學生專題作業的高分參考格式。

內容包含系統架構、程式流程、模組說明、功能測試、程式邏輯、程式碼截圖、Trouble Shooting 與學習心得。

格式：單一 HTML 重點：邏輯說明＋截圖證據 適合：資訊課程 / AI 專題 / 教學評分

本版本加強重點

  • 增加每個功能的程式邏輯解說
  • 加入核心程式碼範例區
  • 加入程式碼截圖占位區
  • 更能看出學生是否真正理解程式

系統主題

AI 教室監視系統

核心技術

OpenCV / YOLO / MediaPipe

作業重點

成果 + 邏輯 + 證據

展示形式

HTML + CSS 專題頁

1AI 教室監視系統製作

本專題旨在建立一套可用於智慧教室情境的 AI 監視系統。系統利用攝影機即時取得教室影像，並透過人工智慧模型分析畫面內容， 完成物件偵測、手部偵測、臉部網格追蹤與疲勞偵測等功能，再將結果整合顯示於網頁介面中。

教師評分觀點： 高分作品不能只有截圖，還要說明「系統怎麼跑」、「資料怎麼流動」、「每個模組負責什麼工作」。

系統整體目標

【建議放置：系統首頁主畫面截圖】
例如：即時畫面區、控制區、辨識框、事件紀錄區

2資訊專案結構（說明）

檔案 / 資料夾 功能 說明
app.py 主程式 負責啟動 Flask、整合攝影機讀取、呼叫 AI 模組與回傳網頁畫面。
templates/index.html 前端頁面 顯示即時影像、偵測結果、事件資訊與作品說明。
static/style.css 畫面樣式 自訂版面、顏色、區塊與手機響應式設計。
utils/camera.py 攝影機模組 負責讀取影像、轉換影格與提供後續 AI 模組使用。
utils/yolo_detect.py 物件偵測 呼叫 YOLO 模型辨識人物與教室物件。
utils/hand_detect.py 手部偵測 使用 MediaPipe Hands 找出手掌與手指關鍵點。
utils/face_mesh.py 臉部網格 辨識臉部特徵點，提供眼睛與嘴巴分析依據。
utils/fatigue_detect.py 疲勞判斷 根據眼睛開闔、嘴巴張合等特徵判斷是否疲勞。
logs/ 事件紀錄 保存偵測事件、時間軸資料與統計資訊。

專案邏輯說明

本專案採模組化設計。主程式只負責整合與流程控制，而各功能由不同模組分別處理。 這樣的設計可讓程式更容易維護，也方便逐步測試單一功能是否正常。

3資訊系統環境圖（UML）

系統的資料流向可表示為：使用者透過瀏覽器開啟網頁，Flask 後端取得攝影機畫面後，依序呼叫各 AI 模組進行分析， 再將結果回傳到前端畫面顯示。

使用者
→
瀏覽器 / HTML 頁面
→
Flask 後端
→
Web Camera
YOLO
←
影像分析核心
→
MediaPipe
Fatigue Detect
→
Event Timeline
→
前端顯示結果
【建議放置：draw.io / PowerPoint 繪製的正式 UML 圖】

4功能測試一：Web Camera

功能說明

此功能主要負責開啟攝影機並讀取每一張影格。若沒有穩定的影像來源，後續 YOLO、MediaPipe 與疲勞偵測都無法進行。

程式邏輯說明

  1. 使用 cv2.VideoCapture(0) 開啟預設攝影機
  2. 持續讀取每張畫面 frame
  3. 若讀取成功，將影格送往後續分析模組
  4. 若讀取失敗，則顯示錯誤或重新初始化攝影機

核心程式碼範例

cap = cv2.VideoCapture(0) while True: ret, frame = cap.read() if not ret: break # 後續可送進 YOLO / MediaPipe 模組 cv2.imshow("Camera", frame) if cv2.waitKey(1) & 0xFF == ord('q'): break

程式碼截圖

【放置 Web Camera 程式碼截圖】
建議截圖內容：cv2.VideoCapture()、cap.read()、while 迴圈

測試結果

攝影機能正常開啟，畫面可持續顯示在視窗或網頁中。若使用 Flask 串流，則能在瀏覽器中看到即時影像。

【放置 Web Camera 執行結果截圖】

5功能測試二：YOLO

功能說明

YOLO 模型可即時辨識教室中的人與物件，例如 person、chair、backpack、laptop 等。 辨識完成後，系統會將物件名稱與信心值標示在畫面上。

程式邏輯說明

  1. 載入已訓練好的 YOLO 模型
  2. 將攝影機影格傳入模型做推論
  3. 讀取模型回傳的邊界框、類別與信心值
  4. 把偵測框畫到原始影像上
  5. 將處理後畫面回傳前端顯示

核心程式碼範例

from ultralytics import YOLO model = YOLO("yolov8n.pt") results = model(frame) for r in results: boxes = r.boxes for box in boxes: # 可取得框座標、類別、信心值 pass

程式碼截圖

【放置 YOLO 程式碼截圖】
建議截圖內容：模型載入、推論、繪製框線

測試分析

在光線良好的環境下，YOLO 能快速辨識人物與常見物件；若畫面過暗、物件重疊或角度不佳，準確率可能下降。

【放置 YOLO 偵測結果截圖】

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

功能說明

MediaPipe Hands 用來找出手掌與手指關鍵點，可應用於舉手、比手勢、互動教學或動作觀察。

程式邏輯說明

  1. 將 OpenCV 讀取的 BGR 畫面轉為 RGB
  2. 送入 MediaPipe Hands 模型
  3. 取得每隻手的 landmark 關鍵點
  4. 在畫面上繪製手部骨架與節點

核心程式碼範例

import mediapipe as mp mp_hands = mp.solutions.hands hands = mp_hands.Hands() rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) results = hands.process(rgb) if results.multi_hand_landmarks: for hand_landmarks in results.multi_hand_landmarks: mp.solutions.drawing_utils.draw_landmarks( frame, hand_landmarks, mp_hands.HAND_CONNECTIONS )

程式碼截圖

【放置 MediaPipe Hands 程式碼截圖】
建議截圖內容：Hands() 初始化、process()、draw_landmarks

測試結果

在正面、光線充足的情況下，手部關鍵點可穩定顯示；若手部快速揮動或被遮擋，辨識穩定度會下降。

【放置手部偵測執行結果截圖】

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

功能說明

臉部網格偵測可在臉上建立大量特徵點，提供眼睛、嘴巴、臉部輪廓等分析依據，是疲勞偵測的重要前置步驟。

程式邏輯說明

  1. 將影格轉為 RGB
  2. 交給 Face Mesh 模型分析
  3. 取得臉部關鍵點座標
  4. 把網格點繪製在畫面上
  5. 後續可用來計算眼睛比例或嘴巴開合程度

核心程式碼範例

mp_face_mesh = mp.solutions.face_mesh face_mesh = mp_face_mesh.FaceMesh() rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) results = face_mesh.process(rgb) if results.multi_face_landmarks: for face_landmarks in results.multi_face_landmarks: mp.solutions.drawing_utils.draw_landmarks( frame, face_landmarks, mp_face_mesh.FACEMESH_TESSELATION )

程式碼截圖

【放置 Face Mesh 程式碼截圖】
建議截圖內容：FaceMesh 初始化、process、draw_landmarks

測試結果

正面臉辨識較穩定，若臉部轉側太多、距離太遠或有遮蔽物，特徵點會變得不穩定。

【放置臉部網格執行結果截圖】

8功能測試五：疲勞偵測

功能說明

疲勞偵測主要根據臉部關鍵點進行分析，例如眼睛閉合時間過長、嘴巴張開過大等，進而判斷是否出現打瞌睡或打哈欠現象。

程式邏輯說明

  1. 從 Face Mesh 取得眼睛與嘴巴關鍵點
  2. 計算眼睛開合比例（EAR）或嘴巴張合比例
  3. 若數值低於或高於門檻，持續累計幀數
  4. 超過門檻後判定為疲勞事件並顯示警示

核心程式碼範例

if eye_ratio < EYE_THRESHOLD: eye_close_count += 1 else: eye_close_count = 0 if eye_close_count > 15: cv2.putText(frame, "Drowsy Warning!", (30, 40), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)

程式碼截圖

【放置疲勞偵測程式碼截圖】
建議截圖內容：眼睛比例計算、門檻判定、警示顯示

測試分析

若使用者閉眼時間過長或張嘴幅度過大，系統可發出警示；但此功能容易受到鏡頭角度、光線與個人表情差異影響，因此需進一步校正。

【放置疲勞偵測結果截圖】

9全統功能

整合邏輯說明

本系統的整合方式是：先由攝影機取得影像，再依序或並行交給 YOLO、手部偵測、臉部網格與疲勞模組分析， 最後將所有結果畫在同一張影像上，並同步更新事件時間軸與統計資訊。

Camera Frame
→
YOLO Detect
→
Hand Detect
→
Face/Fatigue
→
Render UI

9.1 即時影像串流

將處理後畫面以 MJPEG 或 Flask 串流方式顯示到網頁上。

9.2 物件資訊顯示框

將 YOLO 辨識到的人或物件用方框與文字標註。

9.3 事件時間軸（Event Timeline）

09:10:12YOLO
偵測到 person × 3，更新人數統計。
09:10:19Hand
偵測到舉手動作。
09:10:27Face Mesh
成功追蹤臉部特徵點。
09:10:34Fatigue
觸發疲勞警示事件。

9.4 事件標示

對重要事件以文字提示、顏色框或狀態訊息進行標示。

9.5 其他功能（計算人數 or 車數）

在教室情境中可統計人數；若改為校園車道或停車場畫面，則可延伸為車數統計功能。

整合核心程式邏輯範例

while True: ret, frame = cap.read() if not ret: break frame = yolo_detect(frame) frame = hand_detect(frame) frame = face_mesh_detect(frame) frame = fatigue_detect(frame) # 顯示或串流到網頁

整合程式碼截圖

【放置整合主程式碼截圖】
建議截圖內容：主迴圈、各模組呼叫、最終輸出
【放置整合系統畫面截圖】

10使用 AI 工具對話連結（例：Gemini）

在本專題開發過程中，AI 工具可協助完成程式生成、錯誤排除、套件說明與網頁版面設計。 學生應誠實說明 AI 工具如何幫助自己完成作業。

AI 可協助的工作

  • 生成 OpenCV / Flask / YOLO 基礎程式
  • 解釋 mediapipe 與 face mesh 錯誤
  • 協助整理專案結構與報告文字
  • 美化 HTML / CSS 作品頁面

對話連結範例

Gemini 對話平台

也可補充 ChatGPT、Copilot 等對話截圖或連結。

11Trouble Shooting 與 學習心得

Trouble Shooting

問題 可能原因 解決方式
攝影機讀不到畫面 索引錯誤、設備被占用 更換攝影機編號、關閉其他占用鏡頭程式
YOLO 模型載入失敗 模型檔路徑錯誤、套件版本不符 確認模型位置並重新安裝對應版本套件
mediapipe 無法安裝 Python 版本不相容 改用相容版本 Python 或重建虛擬環境
Flask 網頁看不到影像 影像串流格式設定錯誤 檢查回傳 MIME 類型與 route 設定
疲勞偵測誤判 門檻值未校正、光線不足 調整門檻值並改善拍攝環境

學習心得

本次作業讓我理解，一個完整的 AI 專題不只是把模型跑起來，而是要把攝影機、後端分析、前端呈現與使用者理解串連起來。 透過這份作業，我學會如何把一個技術功能整理成可展示、可說明、可評分的資訊系統作品。

我也發現影像辨識的成果不只跟程式有關，還與硬體設備、環境光線、鏡頭角度與套件版本有很大關係。 因此，Trouble Shooting 與測試記錄也是作業很重要的一部分。

此外，使用 AI 工具可以加快開發速度，但仍需自己理解程式邏輯，否則很難真正完成一套可維護、可說明的系統。

教師建議： 學生若能在每個功能下同時提供「原理說明、流程說明、程式碼片段、執行截圖、測試心得」，通常就能明顯拉開分數差距。

◎教師評分建議

分數區間 表現特徵
90 分以上 11 項完整、排版佳、有系統架構、有邏輯說明、有程式碼截圖、有測試分析與心得。
80 分左右 內容大致齊全，但程式邏輯與測試分析較簡略，或缺少部分截圖證據。
70 分以下 只有標題與簡單文字，缺少系統說明、程式邏輯、測試證據與自訂樣式。