Add manual

examples/YOLOv8_server_api/README-zh-tw.md

@@ -65,5 +65,3 @@
 - **security.py**：實現安全功能。
 
 請確保檢查並調整 `config.py` 中的配置設置以適應您的具體需求。
-
-歡迎通過在 GitHub 存儲庫提交問題或拉取請求來為本項目做出貢獻。

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
+定義應用程序的樣式，包括響應式設計、強制顏色調整以確保無障礙性以及平滑的圖像過渡效果。
+
+請確保檢查並調整相應文件中的配置設置以適應您的具體需求。

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.