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.