## 設計理念 本專案的設計理念集中於模塊化、可擴展性和用戶友好性，旨在提供一個高效且易於管理的智能監控系統。 #### 1. 模塊化設計 **分離功能模塊**：系統分為三個主要模塊：Flask應用、ASP.NET應用和前端頁面。每個模塊負責特定的功能，這樣可以簡化開發和維護過程。 - **Flask應用**：專注於視頻流的處理和AI預測。 - **ASP.NET應用**：作為中介，負責處理前端和Flask應用之間的通信。 - **前端頁面**：提供用戶接口，允許用戶輸入IP地址並查看預測結果。 #### 2. 可擴展性 **易於擴展**：系統設計允許輕鬆添加新功能或升級現有功能。例如，可以在Flask應用中更換或升級AI模型，而不需要對ASP.NET應用和前端頁面進行重大修改。 - **可替換的AI模型**：只需更改Flask應用中的模型加載部分，即可替換AI模型。 - **多攝像頭支持**：系統設計可以擴展以支持多個攝像頭，只需修改前端頁面的輸入方式和ASP.NET應用的處理邏輯。 #### 3. 用戶友好性 **簡單易用的界面**：前端頁面設計簡單直觀，用戶只需輸入攝像頭和Flask服務器的IP地址，即可查看實時視頻流和AI預測結果。 - **實時更新**：使用JavaScript動態更新視頻流和預測結果，提供流暢的用戶體驗。 - **即時反饋**：系統能夠即時顯示預測結果，並根據預測結果改變頁面顯示，例如變更邊框顏色以指示不同的狀態。 #### 4. 安全性和可靠性 **數據保護**：系統設計中考慮到數據保護和隱私問題，例如確保視頻流只在內部網絡中傳輸，不會外洩。 - **內部網絡傳輸**：視頻流和預測結果僅在內部網絡中傳輸，減少外部攻擊的風險。 - **錯誤處理**：系統包括適當的錯誤處理機制，如攝像頭未初始化或預測失敗時，會給用戶適當的錯誤提示。 #### 5. 高效性能 **性能優化**：系統設計中考慮到性能優化，以確保實時視頻流處理和AI預測的高效性。 - **異步處理**：使用異步請求來獲取預測結果，避免阻塞前端頁面。 - **資源管理**：合理管理系統資源，如釋放未使用的攝像頭連接，減少資源浪費。 通過這些設計理念，本專案的智能監控系統實現了高效、可靠且用戶友好的目標，能夠為各種應用場景提供強大的支持。 ## 原理 本專案的目標是設計一個智能監控系統，利用人工智能技術進行實時視頻流處理和預測。系統由三個主要部分組成：Flask應用處理視頻流並進行AI預測，ASP.NET應用負責接收前端用戶輸入的IP地址並轉發給Flask應用，前端頁面用於輸入IP地址並動態顯示預測結果。 #### 1.1 實時視頻流捕獲 系統使用樹莓派作為攝像頭伺服器，通過HTTP協議提供實時視頻流。攝像頭捕獲的影像通過內部網絡傳輸到Flask應用進行處理。 - **原理**：樹莓派上的攝像頭捕捉連續的圖像帧，並將這些帧作為視頻流通過HTTP協議傳輸到指定的IP地址和端口。 #### 1.2 Flask應用的影像處理 Flask應用負責接收來自攝像頭的視頻流，並對每一幀圖像進行處理。Flask應用內部使用OpenCV來捕捉視頻流，並使用已經訓練好的深度學習模型來進行圖像識別和預測。 - **影像處理**：使用OpenCV庫將視頻流中的每一幀圖像轉換為數據陣列，然後進行預處理（如調整大小、標準化等），以符合模型的輸入要求。 - **模型預測**：預處理後的圖像數據輸入到深度學習模型中進行推理，得到分類結果和置信度分數。 #### 1.3 ASP.NET應用的中介服務 ASP.NET應用作為前端頁面和Flask應用之間的中介，負責接收用戶輸入的IP地址並將其轉發給Flask應用。同時，ASP.NET應用還負責定期從Flask應用獲取最新的預測結果並返回給前端頁面。 - **IP地址轉發**：接收到前端頁面提交的攝像頭IP地址後，ASP.NET應用通過HTTP POST請求將IP地址發送到Flask應用，設置攝像頭源。 - **預測結果獲取**：通過HTTP GET請求定期從Flask應用獲取最新的圖像識別結果，並將其返回給前端頁面顯示。 #### 1.4 前端頁面的交互展示 前端頁面提供用戶輸入IP地址的接口，並動態顯示來自攝像頭的實時視頻流和AI預測結果。 - **IP地址輸入**：用戶在輸入框中輸入攝像頭和Flask服務器的IP地址，點擊按鈕後，JavaScript腳本將IP地址發送給ASP.NET應用。 - **視頻流展示**：頁面上的`<img>`標籤動態更新為來自攝像頭的視頻流URL，實時顯示攝像頭捕捉的影像。 - **預測結果展示**：JavaScript定期向ASP.NET應用請求最新的預測結果，並根據結果動態更新頁面上的顯示內容，如邊框顏色和預測文本。 #### 1.5 整體流程 1. 用戶在前端頁面輸入攝像頭和Flask服務器的IP地址。 2. ASP.NET應用接收並轉發IP地址給Flask應用。 3. Flask應用初始化攝像頭，捕獲視頻流並進行AI預測。 4. ASP.NET應用定期從Flask應用獲取預測結果。 5. 預測結果動態顯示在前端頁面上。 這個系統通過協同工作，實現了實時視頻流捕獲、AI圖像識別和預測結果展示的功能。