---
# System prepended metadata

title: Breath_Shield：詳細介紹

---

## 設計理念

本專案的設計理念集中於模塊化、可擴展性和用戶友好性，旨在提供一個高效且易於管理的智能監控系統。

#### 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圖像識別和預測結果展示的功能。