課程作業參考答案（HTML + CSS 自訂版）
學生姓名：王小明 | 學號：A123456789 | 課程名稱：人工智慧資訊系統實作
本專題旨在建置一套「AI 教室監視系統」，透過電腦視覺與人工智慧模型， 對教室中的即時影像進行分析。系統整合 Web Camera、YOLO 物件偵測、 MediaPipe 手部偵測、Face Mesh 臉部網格偵測，以及疲勞偵測功能， 可作為智慧教室、出席觀察、教學示範與 AI 應用練習之基礎平台。
本專案使用 Python 作為後端影像處理語言，搭配 HTML/CSS 作為前端展示介面，專案結構如下：
| 資料夾 / 檔案 | 功能說明 |
|---|---|
app.py |
主程式，負責啟動 Flask 伺服器與影像串流 |
templates/index.html |
前端主頁面，顯示監控畫面與系統資訊 |
static/style.css |
前端樣式設計 |
models/ |
存放 YOLO 權重檔或其他 AI 模型 |
utils/camera.py |
攝影機讀取模組 |
utils/yolo_detect.py |
YOLO 物件辨識模組 |
utils/hand_detect.py |
MediaPipe 手部偵測模組 |
utils/face_mesh.py |
臉部網格偵測模組 |
utils/fatigue_detect.py |
疲勞偵測模組，判斷閉眼或打哈欠 |
logs/ |
事件紀錄、時間軸資料 |
本系統以使用者、Web 介面、Python 後端、AI 模型模組與攝影機設備為主要元件， 系統環境圖如下：
本測試目標為確認系統是否能正確啟動攝影機，並將畫面即時傳送到網頁介面中。 在測試過程中，系統成功讀取攝影機畫面，顯示教室現場影像，更新速度正常。
確認攝影機可被系統辨識與存取，並可提供穩定的影像來源。
攝影機成功開啟，畫面可正常顯示於網頁，延遲約 0.2 至 0.5 秒。
YOLO（You Only Look Once）是一種即時物件偵測模型， 本系統使用 YOLO 對教室畫面中的人、椅子、書包、電腦等物件進行辨識， 並在畫面中以方框與標籤顯示結果。
| 測試項目 | 內容 |
|---|---|
| 模型名稱 | YOLOv8 / YOLOv5（依學生實作版本填寫） |
| 辨識物件 | person、chair、backpack、laptop 等 |
| 顯示方式 | 偵測框 + 類別名稱 + 信心值 |
| 測試結論 | 可即時辨識教室內主要目標物件，但在遮擋或光線不足時準確度下降 |
本功能利用 MediaPipe Hands 偵測手部關鍵點， 可辨識手掌輪廓與手指關節位置。此功能可延伸應用於手勢控制、舉手辨識或互動教學。
系統在良好光線條件下可穩定辨識手部位置，當手部快速移動或被遮擋時， 部分關鍵點可能短暫消失。
本系統使用 MediaPipe Face Mesh 進行臉部特徵點偵測， 可在臉部上標示大量網格節點，用來分析眼睛、嘴巴與臉部輪廓。
提供後續疲勞偵測、表情辨識、視線觀察等進階分析基礎。
正面臉辨識效果佳，若側臉角度太大，部分特徵點可能偏移。
疲勞偵測主要透過臉部特徵點分析眼睛開闔程度與嘴巴張開情況， 判斷是否出現閉眼過久、打哈欠等疲勞現象。
| 判斷項目 | 說明 |
|---|---|
| 閉眼偵測 | 利用雙眼特徵點距離估算眼睛開合程度 |
| 打哈欠偵測 | 利用嘴部關鍵點距離計算張嘴比例 |
| 疲勞警示 | 若閉眼或哈欠超過門檻，於畫面上顯示警示文字 |
本系統將前述功能整合為完整 AI 教室監控平台，除了即時影像顯示外， 亦加入事件記錄、標示與統計分析功能，使系統更接近實際資訊系統應用。
使用攝影機持續取得畫面，經由後端處理後傳送至網頁頁面， 使使用者可即時觀察教室狀況。
對辨識到的人或物件加上方框，並顯示物件名稱與信心值， 方便使用者快速判讀系統辨識結果。
當系統偵測到特定事件時，例如人數增加、手勢出現、疲勞警示等， 即可在畫面上用文字或顏色進行標示，提升監控可讀性。
本系統可延伸計算畫面中的人數。若應用在校園停車場、道路或戶外監控， 亦可改為計算車輛數量，作為智慧監控的擴充應用。
在本專題開發過程中，我有使用 AI 工具協助撰寫程式、修正錯誤與理解套件功能。 例如：請 AI 協助說明 OpenCV 攝影機讀取、YOLO 安裝方式、MediaPipe 使用方法、 Flask 網頁串流寫法與錯誤排除。
對話連結範例： Gemini 對話平台
| 遇到問題 | 原因分析 | 解決方式 |
|---|---|---|
| 攝影機無法開啟 | 可能被其他程式占用，或設備編號錯誤 | 確認攝影機索引值，重新插拔設備，關閉其他使用鏡頭的程式 |
| YOLO 模型無法載入 | 權重路徑錯誤或套件未安裝完整 | 重新確認模型路徑，安裝 ultralytics 或對應版本套件 |
| MediaPipe 無法匯入 | Python 環境版本不相容 | 重建虛擬環境，改用相容版本安裝 mediapipe |
| 網頁無法顯示即時畫面 | Flask 串流格式錯誤或路由未設定完成 | 檢查 video_feed 路由與 JPEG 串流格式 |
| 疲勞偵測不穩定 | 臉部角度或光線影響特徵點辨識 | 改善照明、調整鏡頭位置、重新設定判斷門檻 |
透過本次作業，我學到如何把多個人工智慧模組整合成一套完整系統， 不再只是單獨執行某個辨識程式，而是從「攝影機輸入、AI 分析、網頁顯示、事件記錄」 的角度思考整體系統設計。
在實作過程中，我也發現影像辨識不只與程式有關，還與光線、鏡頭角度、 電腦效能、套件版本等因素密切相關。這讓我更了解資訊系統開發需要整合軟體、硬體與測試能力。
此外，我利用 AI 工具協助我理解錯誤訊息與整理程式架構， 提高了開發效率，也讓我學會如何與 AI 協作完成專題。未來若能再加入資料庫、 使用者登入、事件查詢與雲端通知功能，系統將更接近真實應用。
本作業完成了一套以 AI 教室監視系統為主題的資訊系統展示網頁， 內容涵蓋系統介紹、專案結構、UML 環境圖、Web Camera、YOLO、MediaPipe 手部偵測、 Face Mesh 臉部網格、疲勞偵測、整合功能、AI 工具使用說明以及問題排除與學習心得。
本作品展現出人工智慧在教室監控、影像辨識與資訊整合上的應用潛力， 也反映學生對於前後端整合、系統分析與專案實作能力的掌握程度。