From bbf60c849d961e953c70dd1d539c58a837a07de9 Mon Sep 17 00:00:00 2001
From: YiHungWONG <40423264+yihong1120@users.noreply.github.com>
Date: Wed, 10 Jul 2024 00:48:08 +0800
Subject: [PATCH 1/6] Delete user_manual_marp.md

---
 user_manual_marp.md | 90 ---------------------------------------------
 1 file changed, 90 deletions(-)
 delete mode 100644 user_manual_marp.md

diff --git a/user_manual_marp.md b/user_manual_marp.md
deleted file mode 100644
index 48af846..0000000
--- a/user_manual_marp.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-marp: true
-theme: default
-class:
-  - lead
-  - invert
-paginate: true
----
-
-# Live Stream Hazard Detection and Notification
-
----
-
-## Introduction
-
-- **Purpose**: Automate hazard detection in live streams using YOLOv8.
-- **Functionality**:
-  - Detects hazards in real-time video streams.
-  - Sends notifications with relevant information.
-  - Logs events and alerts.
-
----
-
-## Setup and Configuration
-
-1. **Environment Variables**:
-   - `VIDEO_URL`: URL of the live video stream.
-   - `MODEL_PATH`: File path of the YOLOv8 detection model.
-   - `IMAGE_PATH`: Path for images to send with notifications (optional).
-
-2. **Logging**:
-   - Utilises custom logging configurations for monitoring and debugging.
-
----
-
-## Implementation Details
-
-- **LiveStreamDetector**:
-  - Monitors live video streams for potential hazards.
-- **LineNotifier**:
-  - Sends notifications via LINE messaging service.
-- **DangerDetector**:
-  - Analyses detections to identify potential hazards.
-
----
-
-## Main Execution Flow
-
-1. Initialise components: Live stream detector, LINE notifier, and danger detector.
-2. Process detections in real-time:
-   - Convert timestamps, detect dangers, and compile warnings.
-3. Send notifications:
-   - If new warnings and a sufficient time has passed since the last notification.
-
----
-
-## Notification Logic
-
-- **Frequency Control**: Ensures a 5-minute interval between notifications.
-- **Unique Warnings**: Filters and sends distinct warnings only.
-- **Feedback**:
-   - Success or failure of each notification attempt is logged.
-
----
-
-## Resource Management
-
-- Proper release of video stream and other resources after processing.
-- Ensures efficient memory usage and avoids resource leaks.
-
----
-
-## Running the Script
-
-- Load environment variables from `.env` or system defaults.
-- Input prompts for missing configuration details.
-- Execute with:
-  ```bash
-  python demo.py
-  ```
-
----
-
-## Conclusion
-
-- Streamlines the process of monitoring live streams for hazards.
-- Integrates notification systems for immediate alerting.
-- Facilitates logging and alert management for enhanced safety measures.
-
-Thank you for attending this presentation.

From 023a46870490cda6e54846fdd9ccdd01ca119599 Mon Sep 17 00:00:00 2001
From: YiHungWONG <40423264+yihong1120@users.noreply.github.com>
Date: Wed, 10 Jul 2024 00:48:50 +0800
Subject: [PATCH 2/6] Delete
 docs/Detailed_Cost_Analysis_and_Payback_Plan_Report.md

---
 ...d_Cost_Analysis_and_Payback_Plan_Report.md | 215 ------------------
 1 file changed, 215 deletions(-)
 delete mode 100644 docs/Detailed_Cost_Analysis_and_Payback_Plan_Report.md

diff --git a/docs/Detailed_Cost_Analysis_and_Payback_Plan_Report.md b/docs/Detailed_Cost_Analysis_and_Payback_Plan_Report.md
deleted file mode 100644
index 735dd14..0000000
--- a/docs/Detailed_Cost_Analysis_and_Payback_Plan_Report.md
+++ /dev/null
@@ -1,215 +0,0 @@
-## 更新後的成本分析及回本計畫報告
-
-### 1. 已花費成本
-- 計算主機：100,000 TWD
-- 資料標記：50,000 TWD
-- 台灣專利申請費：32,000 TWD
-- 美國專利申請費：120,000 TWD
-- 螢幕：5,000 TWD
-- 計算主機電費：3,000 TWD/月 × 4月 = 12,000 TWD
-- 軟體工程師的開發費用：50,000 TWD/月 × 4月 = 200,000 TWD
-
-已花費成本總計 = 100,000 + 50,000 + 32,000 + 120,000 + 5,000 + 12,000 + 200,000 = 519,000 TWD
-
-### 2. 預計成本
-- 客戶本地計算主機：每台 22,690 TWD
-- 樹莓派：每台 4,400 TWD
-- 辦公室新增主機：100,000 TWD
-- 資料標記：20,000 TWD/月
-- 人力成本：每小時 500 TWD
-
-### 3. 新增成本
-- 機房電費：持續開冷氣維持 20-24°C
-- 客戶架設人力及交通費
-- 工業工程技師服務費：設計、售賣等，固定抽取30-50%
-- 機器損壞風險準備金：設備成本的50%
-
-### 4. 人力及交通成本
-假設每月有10個地方架設，每次架設包含人力和交通費：
-- 人力成本（含交通）：5,000 TWD/次（假設）
-
-月度人力及交通成本 = 5,000 TWD × 10次 = 50,000 TWD
-
-### 5. 電費計算
-假設機房冷氣電費為每月 10,000 TWD：
-全年電費 = 10,000 TWD/月 × 12月 = 120,000 TWD
-
-### 6. 營業成本
-營業稅率為 5%：
-營業成本 = 營業收入 × 5%
-
-### 7. 收入及服務費
-#### 方案1：一次性收費
-- 每個地點收費：150,000 TWD
-- 假設一年有5個客戶：150,000 TWD × 5 = 750,000 TWD
-
-#### 方案2：訂閱制收費
-- 每月每個地點訂閱費：15,000 TWD
-- 每個地點每月可串聯六個鏡頭，假設增加兩個鏡頭（每鏡頭1500 TWD），使用樹莓派
-- 訂閱費：15,000 TWD/月 + (2 × 1,500 TWD) = 18,000 TWD/月
-- 如果超過11個鏡頭，使用客戶本地計算主機
-- 訂閱制最少需六個月
-- 假設一年有5個客戶：18,000 TWD × 6月 × 5 = 540,000 TWD
-
-#### 網頁串流額外成本
-- 固定IP與網址費用：假設每月額外成本 2,000 TWD
-
-### 混合方案總收入
-- 一次性收費總收入：750,000 TWD
-- 訂閱制收費總收入：540,000 TWD
-- 固定IP與網址費用總收入（假設 5 個客戶需此服務）：2,000 TWD/月 × 6月 × 5 = 60,000 TWD
-- 總收入：750,000 TWD + 540,000 TWD + 60,000 TWD = 1,350,000 TWD
-
-### 8. 總成本計算
-#### 固定成本
-1. 計算主機：100,000 TWD
-2. 資料標記：50,000 TWD
-3. 台灣專利申請費：32,000 TWD
-4. 美國專利申請費：120,000 TWD
-5. 螢幕：5,000 TWD
-6. 計算主機電費：12,000 TWD
-7. 軟體工程師的開發費用：200,000 TWD
-
-固定成本總計 = 100,000 + 50,000 + 32,000 + 120,000 + 5,000 + 12,000 + 200,000 = 519,000 TWD
-
-#### 預計成本
-1. 客戶本地計算主機（假設5台）：22,690 TWD/台 × 5台 = 113,450 TWD
-2. 樹莓派（假設5台）：4,400 TWD/台 × 5台 = 22,000 TWD
-3. 辦公室新增主機：100,000 TWD
-4. 資料標記：20,000 TWD/月 × 12月 = 240,000 TWD
-
-預計成本總計 = 113,450 + 22,000 + 100,000 + 240,000 = 475,450 TWD
-
-#### 機器損壞風險準備金
-設備成本的50%：
-1. 客戶本地計算主機：113,450 TWD × 50% = 56,725 TWD
-2. 樹莓派：22,000 TWD × 50% = 11,000 TWD
-
-損壞準備金總計 = 56,725 + 11,000 = 67,725 TWD
-
-#### 人力及交通成本
-1. 人力及交通費用：50,000 TWD/月 × 12月 = 600,000 TWD
-
-#### 電費
-1. 全年機房冷氣電費：120,000 TWD
-
-#### 折舊費用
-1. 計算主機折舊：18,000 TWD/年
-
-### 9. 回本計畫
-
-#### 月收入
-每月收入（訂閱制） = 18,000 TWD × 5 = 90,000 TWD
-
-#### 月營業成本
-1. 營業稅：90,000 × 5% = 4,500 TWD
-2. 工業工程技師服務費（40%）：36,000 TWD
-3. 人力及交通費：50,000 TWD
-4. 電費：10,000 TWD
-5. 資料標記：20,000 TWD
-
-月營業成本總計 = 4,500 + 36,000 + 50,000 + 10,000 + 20,000 = 120,500 TWD
-
-#### 月淨收入
-月淨收入 = 月收入 - 月營業成本 = 90,000 - 120,500 = -30,500 TWD（訂閱制不涵蓋所有費用）
-
-#### 回本時間
-固定成本 + 預計成本 + 損壞準備金 + 折舊費用 = 519,000 + 475,450 + 67,725 + 18,000 = 1,080,175 TWD
-
-#### 總收入
-1. 一次性收入：750,000 TWD
-2. 訂閱制收入（全年）：540,000 TWD
-3. 固定IP與網址費用收入：60,000 TWD
-
-回本時間 = 總成本 / 總收入 = 1,080,175 / 1,350,000 ≈ 0.80 年（約9.6個月）
-
-### 10. 收益分潤計畫
-
-根據貝殼放大的經驗，設立收入分潤協議如下：
-
-#### 投資人分潤
-- 分潤比例：6% ~ 30%
-- 最高回報上限：投資額的 1.5 倍
-
-#### 如果投資人提供額外協助，分潤比例增加且不受最高回報上限限制
-##### 額外協助細項及分潤比例增加
-1. **推廣市場活動**
-   - 分潤比例增加：5%
-2. **簽訂重要合同**
-   - 分潤比例增加：5%
-3. **技術支援**
-   - 分潤比例增加：3%
-4. **客戶關係管理**
-   - 分潤比例增加：2%
-5. **提供資金援助**
-   - 分潤比例增加：5%
-
-#### 分潤計算（假設基礎分潤比例為 20%，並且投資人提供推廣市場活動和簽訂重要合同的協助）
-- 每月淨收入：90,000 TWD（假設訂閱制收入無虧損）
-- 投資人基礎分潤：90,000
-
- × 20% = 18,000 TWD
-- 額外協助分潤：90,000 × (5% + 5%) = 90,000 × 10% = 9,000 TWD
-- 總分潤：18,000 + 9,000 = 27,000 TWD
-- 公司再投資及發展資金：90,000 - 27,000 = 63,000 TWD
-
-#### 分潤限制
-- 投資人最高回報上限 = 投資額 × 1.5
-- 已花費成本總計（投資額）= 519,000 TWD
-- 最高回報 = 519,000 × 1.5 = 778,500 TWD
-
-#### 分潤期間
-- 假設每月分潤 27,000 TWD，則需約 28.8 個月達到最高回報上限
-- 如果投資人提供額外協助，分潤比例增加且不受最高回報上限限制
-
-### 11. 工業工程管理技師的工作與協助
-工業工程管理技師在銷售、推廣和客戶關係管理方面的主要工作和協助包括：
-
-#### 銷售與推廣
-1. **市場調查與分析**
-   - 分析市場需求和競爭對手，找出市場機會。
-2. **銷售策略制定**
-   - 制定銷售計劃和策略，包括定價、銷售渠道和目標市場。
-3. **推廣活動策劃與執行**
-   - 策劃和執行推廣活動，如參展、線上廣告和宣傳活動。
-4. **產品演示**
-   - 向潛在客戶進行產品演示，展示產品功能和優勢。
-5. **銷售數據分析**
-   - 分析銷售數據，評估銷售效果，調整銷售策略。
-
-#### 客戶關係管理
-1. **客戶需求分析**
-   - 分析客戶需求，提供定制化解決方案。
-2. **售前技術支持**
-   - 為客戶提供售前技術支持，解答客戶疑問。
-3. **客戶培訓**
-   - 為客戶提供培訓，幫助客戶了解和使用產品。
-4. **客戶關係維護**
-   - 維護與客戶的良好關係，定期進行客戶回訪。
-5. **客戶反饋管理**
-   - 收集客戶反饋，及時解決客戶問題，改進產品和服務。
-
-### 12. 保固內容
-為了確保客戶在使用我們的軟體服務時享有良好的體驗，提供以下合理的保固內容：
-
-1. **硬體保固**
-   - 計算主機和樹莓派設備享有一年的硬體保固，期間內因非人為因素造成的設備故障免費維修或更換。
-   - 設備保固期間內，如果需要更換硬體，將提供相應的技術支持和更換服務。
-
-2. **軟體更新**
-   - 服務期間內，客戶將免費享有軟體的更新和升級，以確保系統的穩定性和安全性。
-   - 軟體更新內容包括功能改進、性能優化和安全補丁。
-
-3. **技術支持**
-   - 提供技術支持服務，客戶可以通過電話、郵件或線上客服獲得技術支持。
-   - 對於軟體使用過程中的問題，技術支持團隊將在24小時內響應並提供解決方案。
-
-4. **數據安全**
-   - 保證客戶數據的安全和隱私，所有數據將採用加密存儲和傳輸。
-
-5. **客戶培訓**
-   - 提供初次安裝和使用的培訓，幫助客戶快速上手使用系統。
-   - 針對重大軟體更新，將提供相應的培訓資料和操作指導。
-
-### 總結
-提供軟體服務的詳細成本分析和回本計畫顯示，初始投資和預計開支能在大約9.6個月內回本。此後的收入將按照 6% 至 30% 的比例分配給投資人，並設定最高回報上限為投資額的 1.5 倍。如果投資人提供額外協助（如推廣、簽約、技術支援、客戶關係管理、提供資金援助等），分潤比例可增加且不受最高回報上限限制。工業工程管理技師在銷售、推廣和客戶關係管理方面的工作和協助對提升業務發展和客戶滿意度具有重要意義。提供合理的保固內容進一步提升了客戶的信任和滿意度，確保他們在使用我們的服務時獲得最佳體驗。這樣的計劃確保了投資人的合理回報，同時維持公司穩定的現金流和長期的可持續發展。

From 6f4667ebb4d78339cd2fc04b57d1ddd2b00733d8 Mon Sep 17 00:00:00 2001
From: yihong1120 <qazsx748596@gmail.com>
Date: Thu, 11 Jul 2024 00:30:04 +0800
Subject: [PATCH 3/6] Update edition

---
 requirements.txt | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/requirements.txt b/requirements.txt
index d447f38..27a67b2 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -12,18 +12,18 @@ imageio==2.34.2
 imgaug==0.4.0
 numpy==1.26.4
 onnx==1.16.1
-opencv_python==4.7.0.72
-opencv_python_headless==4.7.0.72
+opencv_python==4.8.1.78
+opencv_python_headless==4.8.1.78
 Pillow==10.3.0
 pre-commit==3.7.1
 pycocotools==2.0.8
 pytest==8.2.2
 python-dotenv==1.0.1
 redis==5.0.7
-sahi==0.11.16
+sahi==0.11.18
 speedtest-cli==2.1.3
-streamlink==6.8.1
-tenacity==8.4.2
+streamlink==6.8.2
+tenacity==8.5.0
 torch==2.3.0
 torchvision==0.18.0
-ultralytics==8.2.46
+ultralytics==8.2.52

From 4f4ea13553f36ef28e3fb43601ccecc01165021f Mon Sep 17 00:00:00 2001
From: yihong1120 <qazsx748596@gmail.com>
Date: Thu, 11 Jul 2024 00:30:28 +0800
Subject: [PATCH 4/6] Add manual

---
 examples/YOLOv8_server_api/README-zh-tw.md | 69 ++++++++++++++++++++++
 examples/YOLOv8_server_api/README.md       | 67 +++++++++++++++++++++
 2 files changed, 136 insertions(+)
 create mode 100644 examples/YOLOv8_server_api/README-zh-tw.md
 create mode 100644 examples/YOLOv8_server_api/README.md

diff --git a/examples/YOLOv8_server_api/README-zh-tw.md b/examples/YOLOv8_server_api/README-zh-tw.md
new file mode 100644
index 0000000..4297466
--- /dev/null
+++ b/examples/YOLOv8_server_api/README-zh-tw.md
@@ -0,0 +1,69 @@
+🇬🇧 [English](./README.md) | 🇹🇼 [繁體中文](./README-zh-tw.md)
+
+# YOLOv8 Server API 範例
+
+本部分提供一個 YOLOv8 Server API 的範例實作，旨在利用 YOLOv8 模型進行物件檢測。此指南提供有關如何使用、配置和了解該 API 功能的信息。
+
+## 使用方式
+
+1. **啟動伺服器：**
+    ```sh
+    python app.py
+    ```
+
+    或者
+
+    ```sh
+    gunicorn -w 1 -b 0.0.0.0:8000 "examples.YOLOv8_server_api.app:app"
+    ```  
+
+2. **向 API 發送請求：**
+    - 可以使用 `curl`、Postman 或瀏覽器來向伺服器發送請求。
+    - 使用 `curl` 的範例：
+        ```sh
+        curl -X POST -F "file=@path/to/your/image.jpg" http://localhost:8000/detect
+        ```
+
+## 功能
+
+- **身份驗證**：使用身份驗證機制來保護 API。
+- **快取**：通過快取檢測結果來提高性能。
+- **模型下載**：自動下載和加載 YOLOv8 模型。
+- **配置**：靈活的配置選項來定制 API。
+- **物件檢測**：使用 YOLOv8 模型對上傳的圖像進行物件檢測。
+- **錯誤處理**：強健的錯誤處理機制來管理各種情況。
+
+## 配置
+
+可以通過 `config.py` 文件來配置 API。以下是一些可用的主要配置選項：
+
+- **伺服器設置**：
+  - `HOST`：運行伺服器的主機名。默認為 `0.0.0.0`。
+  - `PORT`：運行伺服器的端口。默認為 `8000`。
+
+- **模型設置**：
+  - `MODEL_PATH`：YOLOv8 模型文件的路徑。
+  - `CONFIDENCE_THRESHOLD`：物件檢測的置信度閾值。
+
+- **快取設置**：
+  - `CACHE_ENABLED`：啟用或禁用快取。默認為 `True`。
+  - `CACHE_EXPIRY`：快取過期時間（以秒為單位）。默認為 `3600`。
+
+- **身份驗證設置**：
+  - `AUTH_ENABLED`：啟用或禁用身份驗證。默認為 `True`。
+  - `SECRET_KEY`：JWT 身份驗證的密鑰。
+
+## 文件概述
+
+- **app.py**：啟動伺服器並定義 API 端點的主應用文件。
+- **auth.py**：處理身份驗證機制。
+- **cache.py**：實現快取功能。
+- **config.py**：包含 API 的配置設置。
+- **detection.py**：使用 YOLOv8 模型進行物件檢測。
+- **model_downloader.py**：處理 YOLOv8 模型的下載和加載。
+- **models.py**：定義數據模型和結構。
+- **security.py**：實現安全功能。
+
+請確保檢查並調整 `config.py` 中的配置設置以適應您的具體需求。
+
+歡迎通過在 GitHub 存儲庫提交問題或拉取請求來為本項目做出貢獻。
\ No newline at end of file
diff --git a/examples/YOLOv8_server_api/README.md b/examples/YOLOv8_server_api/README.md
new file mode 100644
index 0000000..7b20dd9
--- /dev/null
+++ b/examples/YOLOv8_server_api/README.md
@@ -0,0 +1,67 @@
+🇬🇧 [English](./README.md) | 🇹🇼 [繁體中文](./README-zh-tw.md)
+
+# YOLOv8 Server API example
+
+This section an example implementation of a YOLOv8 Server API, designed to facilitate object detection using the YOLOv8 model. This guide provides information on how to use, configure, and understand the features of this API.
+
+## Usage
+
+3. **Run the server:**
+    ```sh
+    python app.py
+    ```
+
+    or
+
+    ```sh
+    gunicorn -w 1 -b 0.0.0.0:8000 "examples.YOLOv8_server_api.app:app"
+    ```  
+
+4. **Send a request to the API:**
+    - Use tools like `curl`, Postman, or your web browser to send a request to the server.
+    - Example using `curl`:
+        ```sh
+        curl -X POST -F "file=@path/to/your/image.jpg" http://localhost:8000/detect
+        ```
+
+## Features
+
+- **Authentication**: Secure the API with authentication mechanisms.
+- **Caching**: Improve performance with caching of detection results.
+- **Model Download**: Automated downloading and loading of the YOLOv8 model.
+- **Configuration**: Flexible configuration options to customise the API.
+- **Object Detection**: Perform object detection on uploaded images using YOLOv8.
+- **Error Handling**: Robust error handling to manage different scenarios gracefully.
+
+## Configuration
+
+The API can be configured through the `config.py` file. Below are some of the key configuration options available:
+
+- **Server Settings**:
+  - `HOST`: The hostname to run the server on. Default is `0.0.0.0`.
+  - `PORT`: The port to run the server on. Default is `8000`.
+
+- **Model Settings**:
+  - `MODEL_PATH`: Path to the YOLOv8 model file.
+  - `CONFIDENCE_THRESHOLD`: Confidence threshold for object detection.
+
+- **Cache Settings**:
+  - `CACHE_ENABLED`: Enable or disable caching. Default is `True`.
+  - `CACHE_EXPIRY`: Cache expiry time in seconds. Default is `3600`.
+
+- **Authentication Settings**:
+  - `AUTH_ENABLED`: Enable or disable authentication. Default is `True`.
+  - `SECRET_KEY`: Secret key for JWT authentication.
+
+## File Overview
+
+- **app.py**: Main application file that starts the server and defines the API endpoints.
+- **auth.py**: Handles authentication mechanisms.
+- **cache.py**: Implements caching functionalities.
+- **config.py**: Contains configuration settings for the API.
+- **detection.py**: Performs object detection using the YOLOv8 model.
+- **model_downloader.py**: Handles downloading and loading of the YOLOv8 model.
+- **models.py**: Defines data models and schemas.
+- **security.py**: Implements security features.
+
+Ensure to review and adjust the configuration settings in `config.py` to suit your specific requirements. 
\ No newline at end of file

From 422d9628e0aed6cf253b89d5acbf04909adaca0c Mon Sep 17 00:00:00 2001
From: yihong1120 <qazsx748596@gmail.com>
Date: Thu, 11 Jul 2024 00:45:41 +0800
Subject: [PATCH 5/6] Add manual

---
 examples/YOLOv8_server_api/README-zh-tw.md |  2 -
 examples/streaming_web/READMD-zh-tw.md     | 69 ++++++++++++++++++++++
 examples/streaming_web/README.md           | 69 ++++++++++++++++++++++
 3 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 examples/streaming_web/READMD-zh-tw.md
 create mode 100644 examples/streaming_web/README.md

diff --git a/examples/YOLOv8_server_api/README-zh-tw.md b/examples/YOLOv8_server_api/README-zh-tw.md
index 4297466..5d58d04 100644
--- a/examples/YOLOv8_server_api/README-zh-tw.md
+++ b/examples/YOLOv8_server_api/README-zh-tw.md
@@ -65,5 +65,3 @@
 - **security.py**：實現安全功能。
 
 請確保檢查並調整 `config.py` 中的配置設置以適應您的具體需求。
-
-歡迎通過在 GitHub 存儲庫提交問題或拉取請求來為本項目做出貢獻。
\ No newline at end of file
diff --git a/examples/streaming_web/READMD-zh-tw.md b/examples/streaming_web/READMD-zh-tw.md
new file mode 100644
index 0000000..8d2ce43
--- /dev/null
+++ b/examples/streaming_web/READMD-zh-tw.md
@@ -0,0 +1,69 @@
+# Streaming Web 範例
+
+本節提供了一個 Streaming Web 應用程序的範例實作，旨在促進即時相機畫面傳輸和更新。此指南提供有關如何使用、配置和了解該應用程序功能的信息。
+
+## 使用方式
+
+1. **安裝依賴項：**
+    ```sh
+    pip install -r requirements.txt
+    ```
+
+2. **啟動伺服器：**
+    ```sh
+    python app.py
+    ```
+
+3. **打開您的網頁瀏覽器並導航至：**
+    ```sh
+    http://localhost:8000
+    ```
+
+## 功能
+
+- **即時流媒體**：顯示即時相機畫面，每5秒自動更新一次。
+- **WebSocket 整合**：利用 WebSocket 進行高效的即時通信。
+- **動態內容加載**：無需刷新頁面即可自動更新相機圖像。
+- **響應式設計**：適應各種屏幕尺寸，提供無縫的用戶體驗。
+- **可定制的佈局**：使用 CSS 調整佈局和樣式。
+
+## 配置
+
+可以通過以下文件配置應用程序：
+
+- **app.py**：啟動伺服器並定義路由的主要應用文件。
+- **routes.py**：定義網頁路由及其相應的處理程序。
+- **sockets.py**：管理 WebSocket 連接和事件。
+- **utils.py**：應用程序中使用的實用函數。
+- **index.js**：處理主頁面動態圖像更新。
+- **camera.js**：管理相機圖像更新。
+- **label.js**：處理基於標籤的 WebSocket 通信和更新。
+- **styles.css**：包含網頁應用程序的樣式，確保響應式和無障礙設計。
+
+## 文件概述
+
+### app.py
+啟動伺服器並設置路由的應用程序主入口。
+
+### routes.py
+定義各種網頁路由及其相應的請求處理程序。
+
+### sockets.py
+管理 WebSocket 連接，處理連接、重新連接和更新事件。
+
+### utils.py
+包含應用程序中使用的實用函數。
+
+### index.js
+使用 jQuery 定期更新主頁面的相機圖像。
+
+### camera.js
+通過刷新圖像源每5秒更新頁面上的相機圖像。
+
+### label.js
+管理 WebSocket 連接，處理當前頁面標籤顯示的更新。
+
+### styles.css
+定義應用程序的樣式，包括響應式設計、強制顏色調整以確保無障礙性以及平滑的圖像過渡效果。
+
+請確保檢查並調整相應文件中的配置設置以適應您的具體需求。
diff --git a/examples/streaming_web/README.md b/examples/streaming_web/README.md
new file mode 100644
index 0000000..ff3a00b
--- /dev/null
+++ b/examples/streaming_web/README.md
@@ -0,0 +1,69 @@
+# Streaming Web example
+
+This section provides an example implementation of a Streaming Web application, designed to facilitate real-time camera feeds and updates. This guide provides information on how to use, configure, and understand the features of this application.
+
+## Usage
+
+1. **Install dependencies:**
+    ```sh
+    pip install -r requirements.txt
+    ```
+
+2. **Run the server:**
+    ```sh
+    python app.py
+    ```
+
+3. **Open your web browser and navigate to:**
+    ```sh
+    http://localhost:8000
+    ```
+
+## Features
+
+- **Real-Time Streaming**: Display real-time camera feeds with automatic updates every 5 seconds.
+- **WebSocket Integration**: Utilises WebSocket for efficient real-time communication.
+- **Dynamic Content Loading**: Automatically updates camera images without refreshing the page.
+- **Responsive Design**: Adapts to various screen sizes for a seamless user experience.
+- **Customisable Layout**: Adjust layout and styles using CSS.
+
+## Configuration
+
+The application can be configured through the following files:
+
+- **app.py**: Main application file that starts the server and defines the routes.
+- **routes.py**: Defines the web routes and their respective handlers.
+- **sockets.py**: Manages WebSocket connections and events.
+- **utils.py**: Utility functions for the application.
+- **index.js**: Handles dynamic image updates for the main page.
+- **camera.js**: Manages the camera image updates.
+- **label.js**: Handles WebSocket communication and updates based on labels.
+- **styles.css**: Contains the styles for the web application, ensuring a responsive and accessible design.
+
+## File Overview
+
+### app.py
+The main entry point of the application that starts the server and sets up routes.
+
+### routes.py
+Defines the various web routes and their respective request handlers.
+
+### sockets.py
+Manages WebSocket connections, handling events such as connection, reconnection, and updates.
+
+### utils.py
+Contains utility functions used across the application for various tasks.
+
+### index.js
+Handles the periodic update of camera images on the main page using jQuery.
+
+### camera.js
+Updates the camera images on the page by refreshing the image source every 5 seconds.
+
+### label.js
+Manages WebSocket connections, handling updates based on the current label displayed on the page.
+
+### styles.css
+Defines the styling for the application, including responsive design, forced color adjustments for accessibility, and smooth image transitions.
+
+Ensure to review and adjust the configuration settings in the respective files to suit your specific requirements.

From 2b55d602b1978760ebd63f48d206bca058e69665 Mon Sep 17 00:00:00 2001
From: yihong1120 <qazsx748596@gmail.com>
Date: Thu, 11 Jul 2024 00:48:28 +0800
Subject: [PATCH 6/6] Add manual

---
 examples/streaming_web/READMD-zh-tw.md | 11 ++++++-----
 examples/streaming_web/README.md       | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/examples/streaming_web/READMD-zh-tw.md b/examples/streaming_web/READMD-zh-tw.md
index 8d2ce43..89d53a9 100644
--- a/examples/streaming_web/READMD-zh-tw.md
+++ b/examples/streaming_web/READMD-zh-tw.md
@@ -4,17 +4,18 @@
 
 ## 使用方式
 
-1. **安裝依賴項：**
+1. **啟動伺服器：**
     ```sh
-    pip install -r requirements.txt
+    python app.py
     ```
 
-2. **啟動伺服器：**
+    或是
+
     ```sh
-    python app.py
+    gunicorn -w 1 -k eventlet -b 127.0.0.1:8000 "examples.streaming_web.app:app"
     ```
 
-3. **打開您的網頁瀏覽器並導航至：**
+2. **打開您的網頁瀏覽器並導航至：**
     ```sh
     http://localhost:8000
     ```
diff --git a/examples/streaming_web/README.md b/examples/streaming_web/README.md
index ff3a00b..ed6a2e6 100644
--- a/examples/streaming_web/README.md
+++ b/examples/streaming_web/README.md
@@ -4,17 +4,18 @@ This section provides an example implementation of a Streaming Web application,
 
 ## Usage
 
-1. **Install dependencies:**
+1. **Run the server:**
     ```sh
-    pip install -r requirements.txt
+    python app.py
     ```
 
-2. **Run the server:**
+    or
+
     ```sh
-    python app.py
+    gunicorn -w 1 -k eventlet -b 127.0.0.1:8000 "examples.streaming_web.app:app"
     ```
 
-3. **Open your web browser and navigate to:**
+2. **Open your web browser and navigate to:**
     ```sh
     http://localhost:8000
     ```