diff --git a/examples/streaming_web/READMD-zh-tw.md b/examples/streaming_web/READMD-zh-tw.md
index be27e28..74e44b3 100644
--- a/examples/streaming_web/READMD-zh-tw.md
+++ b/examples/streaming_web/READMD-zh-tw.md
@@ -3,115 +3,71 @@
 
 # 即時串流網頁範例
 
-此部分提供一個即時串流網頁應用程式的實作範例，設計目的是為了實現即時的攝影機串流畫面更新。本指南提供如何使用、配置及瞭解此應用程式的特點與功能。
+本節提供了一個 Streaming Web 應用程序的範例實作，旨在促進即時相機畫面傳輸和更新。此指南提供有關如何使用、配置和了解該應用程序功能的信息。
 
-## 使用方法
+## 使用方式
 
 1. **啟動伺服器：**
     ```sh
     python app.py
     ```
 
-    或者使用 Gunicorn 啟動應用程式，並設定非同步工作執行緒：
+    或是
+
     ```sh
-    gunicorn -w 1 -k eventlet -b 127.0.0.1:8000 "examples.streaming_web.app:app"
+    uvicorn examples.streaming_web.app:sio_app --host 127.0.0.1 --port 8000
     ```
 
-2. **訪問應用程式：**
-   打開網頁瀏覽器，並導向以下網址：
+2. **打開您的網頁瀏覽器並導航至：**
     ```sh
     http://localhost:8000
     ```
 
 ## 功能
 
-- **即時串流**：顯示即時的攝影機畫面，每 5 秒自動更新。
-- **WebSocket 整合**：使用 WebSocket 進行高效的即時通訊。
-- **動態內容加載**：自動更新攝影機圖片，無需重新整理頁面。
-- **響應式設計**：適應不同螢幕尺寸，提供無縫的使用者體驗。
-- **可自定義的佈局**：透過 CSS 調整佈局和樣式，以符合個人需求。
+- **即時流媒體**：顯示即時相機畫面，每5秒自動更新一次。
+- **WebSocket 整合**：利用 WebSocket 進行高效的即時通信。
+- **動態內容加載**：無需刷新頁面即可自動更新相機圖像。
+- **響應式設計**：適應各種屏幕尺寸，提供無縫的用戶體驗。
+- **可定制的佈局**：使用 CSS 調整佈局和樣式。
 
-## 配置和檔案概覽
+## 配置
 
-此應用程式可透過以下關鍵檔案進行自訂和配置：
+可以通過以下文件配置應用程序：
 
-- **app.py**：啟動伺服器並定義路由的主要應用程式檔案。
-- **routes.py**：定義網頁路由及其相應的處理器。
+- **app.py**：啟動伺服器並定義路由的主要應用文件。
+- **routes.py**：定義網頁路由及其相應的處理程序。
 - **sockets.py**：管理 WebSocket 連接和事件。
-- **utils.py**：包含應用程式使用的實用工具函式。
-- **index.js**：處理主頁面中攝影機圖片的動態更新。
-- **camera.js**：管理攝影機畫面的更新。
-- **label.js**：處理 WebSocket 通訊和基於標籤的更新。
-- **styles.css**：包含網頁應用程式的樣式，確保響應式和可存取的設計。
-
-請務必根據環境需求檢查並調整這些檔案中的配置設定。
-
-## Nginx 配置範例
-
-若要使用 Nginx 作為此 FastAPI 應用程式的反向代理，可以參考以下關鍵配置部分。完整的範例配置檔案請參見 `config/` 目錄中的 `nginx_config_example.conf`。
-
-1. **HTTP 重定向至 HTTPS**：將所有 HTTP 請求重定向到 HTTPS，確保安全通訊。
-    ```nginx
-    server {
-        listen 80;
-        server_name yourdomain.com;
-        location / {
-            return 301 https://$server_name$request_uri;
-        }
-    }
-    ```
+- **utils.py**：應用程序中使用的實用函數。
+- **index.js**：處理主頁面動態圖像更新。
+- **camera.js**：管理相機圖像更新。
+- **label.js**：處理基於標籤的 WebSocket 通信和更新。
+- **styles.css**：包含網頁應用程序的樣式，確保響應式和無障礙設計。
 
-2. **HTTPS 配置**：啟用 SSL 憑證並代理靜態文件和 WebSocket 請求。
-    ```nginx
-    server {
-        listen 443 ssl;
-        server_name yourdomain.com;
-
-        # SSL 憑證路徑
-        ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
-        ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
-
-        # 靜態文件
-        location /upload/ {
-            alias /home/youruser/Documents/Construction-Hazard-Detection/static/uploads/;
-            autoindex on;
-            allow all;
-        }
-
-        # WebSocket 配置
-        location /ws/ {
-            proxy_pass http://127.0.0.1:8000;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-            proxy_buffering off;
-            # 傳遞額外的客戶端資訊標頭
-        }
-
-        # 一般 HTTP 代理
-        location / {
-            proxy_pass http://127.0.0.1:8000;
-            # 傳遞客戶端及 SSL 狀態的標頭
-        }
-    }
-    ```
+## 文件概述
+
+### app.py
+啟動伺服器並設置路由的應用程序主入口。
+
+### routes.py
+定義各種網頁路由及其相應的請求處理程序。
+
+### sockets.py
+管理 WebSocket 連接，處理連接、重新連接和更新事件。
 
-3. **SSL 憑證設定**
+### utils.py
+包含應用程序中使用的實用函數。
 
-   若要使用 SSL 保護伺服器，可以使用 Let's Encrypt 提供的免費 SSL 憑證。建議步驟如下：
+### index.js
+使用 jQuery 定期更新主頁面的相機圖像。
 
-   - **安裝 Certbot**：使用 Certbot 來自動處理 SSL 憑證的安裝和續期。
-   - **取得 SSL 憑證**：使用您的網域名稱運行 Certbot 以創建 SSL 憑證：
-     ```sh
-     sudo certbot --nginx -d yourdomain.com
-     ```
-   - **設置自動續期**：Certbot 會自動處理憑證的續期，您可以新增 Cron 排程定期檢查：
-     ```sh
-     0 12 * * * /usr/bin/certbot renew --quiet
-     ```
+### camera.js
+通過刷新圖像源每5秒更新頁面上的相機圖像。
 
-此配置確保 Nginx 伺服器的安全性，並自動管理 SSL 憑證。
+### label.js
+管理 WebSocket 連接，處理當前頁面標籤顯示的更新。
 
-## 其他注意事項
+### styles.css
+定義應用程序的樣式，包括響應式設計、強制顏色調整以確保無障礙性以及平滑的圖像過渡效果。
 
-欲進一步自訂應用程式，請參考 `examples/streaming_web` 資料夾並根據專案需求調整檔案。此程式碼具有模組化設計，允許您更新或替換組件，以適應擴展性和維護性需求。
+請確保檢查並調整相應文件中的配置設置以適應您的具體需求。
diff --git a/examples/streaming_web/README.md b/examples/streaming_web/README.md
index 92df657..c1720d3 100644
--- a/examples/streaming_web/README.md
+++ b/examples/streaming_web/README.md
@@ -12,106 +12,62 @@ This section provides an example implementation of a Streaming Web application,
     python app.py
     ```
 
-    Alternatively, use Gunicorn to start the application with an asynchronous worker:
+    or
+
     ```sh
-    gunicorn -w 1 -k eventlet -b 127.0.0.1:8000 "examples.streaming_web.app:app"
+    uvicorn examples.streaming_web.app:sio_app --host 127.0.0.1 --port 8000
     ```
 
-2. **Access the application:**
-   Open your web browser and navigate to:
+2. **Open your web browser and navigate to:**
     ```sh
     http://localhost:8000
     ```
 
 ## Features
 
-- **Real-Time Streaming**: Displays real-time camera feeds with automatic updates every 5 seconds.
+- **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 page refresh.
+- **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**: Modify layout and styles using CSS for a tailored appearance.
+- **Customisable Layout**: Adjust layout and styles using CSS.
 
-## Configuration and File Overview
+## Configuration
 
-The application can be customised and configured via the following key files:
+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 web routes and their respective handlers.
+- **routes.py**: Defines the web routes and their respective handlers.
 - **sockets.py**: Manages WebSocket connections and events.
-- **utils.py**: Contains utility functions for the application.
-- **index.js**: Handles dynamic image updates on the main page.
+- **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 label-based updates.
-- **styles.css**: Contains the styles for the web application, ensuring responsive and accessible design.
-
-Ensure to review and adjust configuration settings in these files as necessary for your environment.
+- **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.
 
-## Nginx Configuration Example
+## File Overview
 
-To use Nginx as a reverse proxy for this FastAPI application, you may refer to the following key configuration parts. For a complete example configuration file, see `nginx_config_example.conf` in the `config/` directory.
+### app.py
+The main entry point of the application that starts the server and sets up routes.
 
-1. **HTTP Redirect to HTTPS**: Redirect all HTTP requests to HTTPS for secure communication.
-    ```nginx
-    server {
-        listen 80;
-        server_name yourdomain.com;
-        location / {
-            return 301 https://$server_name$request_uri;
-        }
-    }
-    ```
+### routes.py
+Defines the various web routes and their respective request handlers.
 
-2. **HTTPS Configuration**: Enables SSL certificates and proxies static files and WebSocket requests.
-    ```nginx
-    server {
-        listen 443 ssl;
-        server_name yourdomain.com;
-
-        # SSL certificate paths
-        ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
-        ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
-
-        # Static files
-        location /upload/ {
-            alias /home/youruser/Documents/Construction-Hazard-Detection/static/uploads/;
-            autoindex on;
-            allow all;
-        }
-
-        # WebSocket configuration
-        location /ws/ {
-            proxy_pass http://127.0.0.1:8000;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-            proxy_buffering off;
-            # Additional headers to forward client information
-        }
-
-        # General HTTP proxy
-        location / {
-            proxy_pass http://127.0.0.1:8000;
-            # Forward headers for client and SSL status
-        }
-    }
-    ```
+### sockets.py
+Manages WebSocket connections, handling events such as connection, reconnection, and updates.
 
-3. **SSL Certificate Setup**
+### utils.py
+Contains utility functions used across the application for various tasks.
 
-   To secure the server with SSL, a free SSL certificate from Let's Encrypt can be used. Here are the recommended steps:
+### index.js
+Handles the periodic update of camera images on the main page using jQuery.
 
-   - **Install Certbot**: Use Certbot to handle automatic SSL certificate installation and renewal.
-   - **Obtain SSL Certificates**: Run Certbot with your domain name to create SSL certificates:
-     ```sh
-     sudo certbot --nginx -d yourdomain.com
-     ```
-   - **Set Up Automatic Renewal**: Certbot handles automatic renewal; however, you can add a Cron job to check periodically:
-     ```sh
-     0 12 * * * /usr/bin/certbot renew --quiet
-     ```
+### camera.js
+Updates the camera images on the page by refreshing the image source every 5 seconds.
 
-This setup ensures secure, automatic SSL management for the Nginx server.
+### label.js
+Manages WebSocket connections, handling updates based on the current label displayed on the page.
 
-## Additional Notes
+### styles.css
+Defines the styling for the application, including responsive design, forced color adjustments for accessibility, and smooth image transitions.
 
-For further customisation, refer to the `examples/streaming_web` folder and adjust files as per project needs. The code is modular, allowing you to update or replace components for scalability and maintenance.
+Ensure to review and adjust the configuration settings in the respective files to suit your specific requirements.
diff --git a/examples/streaming_web/app.py b/examples/streaming_web/app.py
index 334e6a4..3bce52d 100644
--- a/examples/streaming_web/app.py
+++ b/examples/streaming_web/app.py
@@ -1,42 +1,73 @@
 from __future__ import annotations
 
-import os
+from collections.abc import AsyncGenerator
+from contextlib import asynccontextmanager
 
-import redis
-from dotenv import load_dotenv
-from flask import Flask
-from flask_cors import CORS
-from flask_limiter import Limiter
-from flask_limiter.util import get_remote_address
-from flask_socketio import SocketIO
+import socketio
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi_limiter import FastAPILimiter
 
 from .routes import register_routes
 from .sockets import register_sockets
+from .utils import redis_manager
 
-load_dotenv()
 
-# Redis configuration
-redis_host: str = os.getenv('redis_host') or 'localhost'
-redis_port: int = int(os.getenv('redis_port') or 6379)
-redis_password: str | None = os.getenv('redis_password') or None
+@asynccontextmanager
+async def lifespan(app: FastAPI) -> AsyncGenerator[None]:
+    """
+    Initialises resources at startup and performs cleanup on shutdown.
 
-# Connect to Redis
-r = redis.StrictRedis(
-    host=redis_host,
-    port=redis_port,
-    password=redis_password,
-    decode_responses=False,
+    Args:
+        app (FastAPI): The FastAPI application instance.
+
+    Yields:
+        None
+    """
+    # Initialises rate limiter with the Redis client
+    await FastAPILimiter.init(redis_manager.client)
+    try:
+        yield
+    finally:
+        # Cleanup code: Closes the Redis connection after application shutdown
+        await redis_manager.client.close()
+        print('Redis connection closed.')
+
+
+# Create the FastAPI application with a lifespan manager for setup and cleanup
+app = FastAPI(lifespan=lifespan)
+
+# Add CORS middleware to allow cross-origin requests
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=['*'],
+    allow_credentials=True,
+    allow_methods=['*'],
+    allow_headers=['*'],
 )
 
-app = Flask(__name__)
-CORS(app)  # Allow cross-origin requests from any domain
-# Allow all origins for WebSocket connections
-socketio = SocketIO(app, cors_allowed_origins='*')
-limiter = Limiter(key_func=get_remote_address)
+# Mount the static files directory to serve static assets
+app.mount(
+    '/static',
+    StaticFiles(directory='examples/streaming_web/static'),
+    name='static',
+)
 
+# Initialise Socket.IO server with ASGI support
+sio = socketio.AsyncServer(async_mode='asgi')
+sio_app = socketio.ASGIApp(sio, app)
 
-register_routes(app, limiter, r)
-register_sockets(socketio, r)
+# Register application routes and Socket.IO events
+register_routes(app)
+register_sockets(sio, redis_manager)
 
+# Run the application using Uvicorn ASGI server
 if __name__ == '__main__':
-    socketio.run(app, host='127.0.0.1', port=8000, debug=False)
+    import uvicorn
+    uvicorn.run(
+        'examples.streaming_web.app:sio_app',
+        host='127.0.0.1',
+        port=8000,
+        log_level='info',
+    )
diff --git a/examples/streaming_web/routes.py b/examples/streaming_web/routes.py
index 684beec..7dd8b43 100644
--- a/examples/streaming_web/routes.py
+++ b/examples/streaming_web/routes.py
@@ -1,86 +1,201 @@
 from __future__ import annotations
 
-from flask import abort
-from flask import Flask
-from flask import make_response
-from flask import render_template
-from flask import Response
-from flask_limiter import Limiter
-
-from .utils import get_image_data
-from .utils import get_labels
-
-
-def register_routes(app: Flask, limiter: Limiter, r) -> None:
-    @app.route('/')
-    @limiter.limit('60 per minute')
-    def index() -> str:
-        """
-        Serve the index page with a dynamic list of labels from Redis.
-
-        Returns:
-            str: The rendered 'index.html' page.
-        """
-        labels = get_labels(r)
-        return render_template('index.html', labels=labels)
-
-    @app.route('/label/<label>', methods=['GET'])
-    @limiter.limit('60 per minute')
-    def label_page(label: str) -> str:
-        """
-        Serve a page for each label, displaying images under that label.
-
-        Args:
-            label (str): The label/category of the images.
-
-        Returns:
-            str: The rendered 'label.html' page for the specific label.
-        """
-        image_data = get_image_data(r, label)
-        return render_template(
-            'label.html', label=label, image_data=image_data,
+from pathlib import Path
+from typing import Any
+
+from fastapi import APIRouter
+from fastapi import Depends
+from fastapi import HTTPException
+from fastapi import Request
+from fastapi import UploadFile
+from fastapi import WebSocket
+from fastapi import WebSocketDisconnect
+from fastapi.responses import JSONResponse
+from fastapi_limiter.depends import RateLimiter
+from starlette.templating import Jinja2Templates
+
+from .utils import redis_manager
+from .utils import Utils
+
+# Create an API router for defining routes
+router = APIRouter()
+templates = Jinja2Templates(
+    directory='examples/streaming_web/templates',
+)
+
+
+def register_routes(app: Any) -> None:
+    """
+    Registers the API router with the FastAPI application.
+
+    Args:
+        app (Any): The FastAPI application instance.
+    """
+    app.include_router(router)
+
+
+@router.get('/', dependencies=[Depends(RateLimiter(times=60, seconds=60))])
+async def index(request: Request) -> Jinja2Templates.TemplateResponse:
+    """
+    Renders the index page with available labels from Redis.
+
+    Args:
+        request (Request): The HTTP request object.
+
+    Returns:
+        TemplateResponse: The rendered HTML template for the index page,
+            containing available labels.
+    """
+    try:
+        # Retrieve available labels from Redis
+        labels = await redis_manager.get_labels()
+    except Exception as e:
+        # Raise HTTP 500 error if labels cannot be fetched
+        raise HTTPException(
+            status_code=500, detail=f"Failed to fetch labels: {str(e)}",
         )
-
-    @app.route('/image/<label>/<filename>.png')
-    @limiter.limit('60 per minute')
-    def image(label: str, filename: str) -> Response:
-        """
-        Serve an image file from Redis.
-
-        Args:
-            label (str): The label/category of the image.
-            filename (str): The filename of the image.
-
-        Returns:
-            Response: The image file as a response.
-        """
-        redis_key = f"{label}_{filename}"
-        img_encoded = r.get(redis_key)
-
-        if img_encoded is None:
-            abort(404, description='Resource not found')
-
-        response = make_response(img_encoded)
-        response.headers.set('Content-Type', 'image/png')
-        response.headers['Cache-Control'] = (
-            'no-cache, no-store, must-revalidate'
+    # Render and return the index template with the fetched labels
+    return templates.TemplateResponse(
+        'index.html',
+        {
+            'request': request,
+            'labels': labels,
+        },
+    )
+
+
+@router.get(
+    '/label/{label}',
+    dependencies=[Depends(RateLimiter(times=6000, seconds=6000))],
+)
+async def label_page(
+    request: Request,
+    label: str,
+) -> Jinja2Templates.TemplateResponse:
+    """
+    Renders the page for a specific label with available labels from Redis.
+
+    Args:
+        request (Request): The HTTP request object.
+        label (str): The label identifier to display on the page.
+
+    Returns:
+        TemplateResponse: The rendered HTML template for the label page
+            with available labels.
+    """
+    try:
+        # Retrieve available labels from Redis
+        labels = await redis_manager.get_labels()
+        # Check if the requested label is present in the available labels
+        if label not in labels:
+            raise HTTPException(
+                status_code=404, detail=f"Label '{label}' not found",
+            )
+    except Exception as e:
+        # Raise HTTP 500 error if labels cannot be fetched
+        raise HTTPException(
+            status_code=500, detail=f"Failed to fetch labels: {str(e)}",
+        )
+    # Render and return the label template with the fetched labels
+    return templates.TemplateResponse(
+        'label.html',
+        {
+            'request': request,
+            'label': label,
+            'labels': labels,
+        },
+    )
+
+
+@router.websocket('/ws/label/{label}')
+async def websocket_label_stream(websocket: WebSocket, label: str) -> None:
+    """
+    Establishes a WebSocket connection to stream updated frames
+    for a specific label.
+
+    Args:
+        websocket (WebSocket): The WebSocket connection object.
+        label (str): The label identifier for the frame stream.
+    """
+    await websocket.accept()
+    try:
+        # Fetch Redis keys associated with the label
+        keys = await redis_manager.get_keys_for_label(label)
+        # Check if there are any keys associated with the label
+        if not keys:
+            await websocket.send_json({
+                'error': f"No keys found for label '{label}'",
+            })
+            await websocket.close()
+            return
+
+        # Initialise last message IDs for each key in the stream
+        last_ids: dict[str, str] = {key: '0' for key in keys}
+
+        while True:
+            # Fetch the latest frames for each key in the specified label
+            updated_data = await redis_manager.fetch_latest_frames(last_ids)
+            if updated_data:
+                # Send the updated frames to the WebSocket client
+                await Utils.send_frames(websocket, label, updated_data)
+    except WebSocketDisconnect:
+        # Handle WebSocket disconnection gracefully
+        print('WebSocket disconnected')
+    except Exception as e:
+        # Log unexpected errors
+        print(f"Unexpected error: {e}")
+    finally:
+        # Final message on WebSocket closure
+        print('WebSocket connection closed')
+
+
+@router.post('/webhook')
+async def webhook(request: Request) -> JSONResponse:
+    """
+    Processes incoming webhook requests by logging the request body.
+
+    Args:
+        request (Request): The HTTP request containing the webhook payload.
+
+    Returns:
+        JSONResponse: A JSON response indicating the status of the request.
+    """
+    # Retrieve and log the webhook request body
+    body = await request.json()
+    print(body)
+    # Respond with a JSON status message
+    return JSONResponse(content={'status': 'ok'})
+
+# Uncomment and use the following endpoint for file uploads if needed
+
+
+@router.post('/upload')
+async def upload_file(file: UploadFile) -> JSONResponse:
+    """
+    Saves an uploaded file to the designated upload folder
+    and returns its accessible URL.
+
+    Args:
+        file (UploadFile): The file to upload.
+
+    Returns:
+        JSONResponse: A JSON response containing the URL of the uploaded file.
+    """
+    UPLOAD_FOLDER = Path('static/uploads')
+    UPLOAD_FOLDER.mkdir(parents=True, exist_ok=True)
+
+    # 检查 filename 是否为 None
+    if not file.filename:
+        raise HTTPException(status_code=400, detail='Filename is missing')
+
+    file_path = UPLOAD_FOLDER / file.filename
+    try:
+        with open(file_path, 'wb') as buffer:
+            buffer.write(await file.read())
+    except PermissionError as e:
+        raise HTTPException(
+            status_code=500, detail=f"Failed to save file: {str(e)}",
         )
-        response.headers['Pragma'] = 'no-cache'
-        response.headers['Expires'] = '0'
-
-        return response
-
-    @app.route('/camera/<label>/<camera_id>')
-    @limiter.limit('60 per minute')
-    def camera_page(label: str, camera_id: str) -> str:
-        """
-        Serve a page for viewing the camera stream.
-
-        Args:
-            label (str): The label/category of the camera.
-            camera_id (str): The specific ID of the camera to view.
 
-        Returns:
-            str: The rendered 'camera.html' page for the specific camera.
-        """
-        return render_template('camera.html', label=label, camera_id=camera_id)
+    url = f"https://yihong-server.mooo.com/static/uploads/{file.filename}"
+    return JSONResponse(content={'url': url})
diff --git a/examples/streaming_web/sockets.py b/examples/streaming_web/sockets.py
index 88bcd3f..1e7c8ad 100644
--- a/examples/streaming_web/sockets.py
+++ b/examples/streaming_web/sockets.py
@@ -2,56 +2,77 @@
 
 from typing import Any
 
-from flask_socketio import emit
-from flask_socketio import SocketIO
+import socketio
 
-from .utils import get_image_data
-from .utils import get_labels
 
+def register_sockets(sio: socketio.AsyncServer, redis_manager: Any) -> None:
+    """
+    Registers Socket.IO event handlers
+    for connection, disconnection, and errors.
+
+    Args:
+        sio (socketio.AsyncServer): The Socket.IO server instance.
+        redis_manager (Any): The RedisManager instance for Redis operations.
+    """
 
-def register_sockets(socketio: SocketIO, r: Any) -> None:
-    @socketio.on('connect')
-    def handle_connect() -> None:
+    @sio.event
+    async def connect(sid: str, environ: dict) -> None:
         """
-        Handle client connection to the WebSocket.
+        Handles new client connections by emitting a welcome message
+        and starting the background task for image updates.
+
+        Args:
+            sid (str): The session ID of the connected client.
+            environ (dict): The environment dictionary for the connection.
         """
-        emit('message', {'data': 'Connected'})
-        socketio.start_background_task(update_images, socketio, r)
+        await sio.emit('message', {'data': 'Connected'}, room=sid)
+        sio.start_background_task(update_images, sio, redis_manager)
 
-    @socketio.on('disconnect')
-    def handle_disconnect() -> None:
+    @sio.event
+    async def disconnect(sid: str) -> None:
         """
-        Handle client disconnection from the WebSocket.
+        Handles client disconnections by logging the event.
+
+        Args:
+            sid (str): The session ID of the disconnected client.
         """
         print('Client disconnected')
 
-    @socketio.on('error')
-    def handle_error(e: Exception) -> None:
+    @sio.event
+    async def error(sid: str, e: Exception) -> None:
         """
-        Handle errors in WebSocket communication.
+        Handles errors by logging the exception details.
 
         Args:
-            e (Exception): The exception that occurred.
+            sid (str): The session ID of the client experiencing the error.
+            e (Exception): The exception raised during the event.
         """
         print(f"Error: {str(e)}")
 
 
-def update_images(socketio: SocketIO, r: Any) -> None:
+async def update_images(sio: socketio.AsyncServer, redis_manager: Any) -> None:
     """
-    Update images every 10 seconds by scanning Redis
-    and emitting updates to clients.
+    Background task to update images for all labels at a set interval. Emits
+    updated images to connected clients for each label.
 
     Args:
-        socketio (SocketIO): The SocketIO instance.
-        r (Any): The Redis connection.
+        sio (socketio.AsyncServer): The Socket.IO server instance.
+        redis_manager (Any): The RedisManager instance to interact with Redis.
     """
     while True:
         try:
-            socketio.sleep(10)
-            labels = get_labels(r)
+            # Waits for 1 seconds before updating images
+            await sio.sleep(1)
+
+            # Fetches all labels from Redis
+            labels = await redis_manager.get_labels()
+
             for label in labels:
-                image_data = get_image_data(r, label)
-                socketio.emit(
+                # Fetches image data for each label
+                image_data = await redis_manager.fetch_latest_frames(label)
+
+                # Emits updated image data to all clients
+                await sio.emit(
                     'update',
                     {
                         'label': label,
@@ -60,5 +81,6 @@ def update_images(socketio: SocketIO, r: Any) -> None:
                     },
                 )
         except Exception as e:
+            # Logs any exceptions that occur during the update process
             print(f"Error updating images: {str(e)}")
             break
diff --git a/examples/streaming_web/static/css/styles.css b/examples/streaming_web/static/css/styles.css
index 5198d01..f4a1abd 100644
--- a/examples/streaming_web/static/css/styles.css
+++ b/examples/streaming_web/static/css/styles.css
@@ -1,3 +1,4 @@
+
 body {
     font-family: Arial, sans-serif;
     margin: 0;
diff --git a/examples/streaming_web/static/js/label.js b/examples/streaming_web/static/js/label.js
index 53a0db9..44761d6 100644
--- a/examples/streaming_web/static/js/label.js
+++ b/examples/streaming_web/static/js/label.js
@@ -6,47 +6,27 @@ $(document).ready(() => {
  * Initialize the WebSocket connection and set up event handlers.
  */
 function initializeWebSocket() {
-    const protocol = getWebSocketProtocol();
-    if (!isSocketIODefined()) return;
-
-    const socket = createWebSocketConnection(protocol);
-
+    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
     const currentPageLabel = getCurrentPageLabel();
 
-    setupSocketEventHandlers(socket, currentPageLabel);
-}
+    const socket = new WebSocket(`${protocol}${window.location.host}/ws/label/${currentPageLabel}`);
 
-/**
- * Get the appropriate WebSocket protocol based on the current page protocol.
- * @returns {string} The WebSocket protocol ('ws://' or 'wss://').
- */
-function getWebSocketProtocol() {
-    return window.location.protocol === 'https:' ? 'wss://' : 'ws://';
-}
+    socket.onopen = () => {
+        console.log('WebSocket connected!');
+    };
 
-/**
- * Check if Socket.IO is defined.
- * @returns {boolean} True if Socket.IO is defined, false otherwise.
- */
-function isSocketIODefined() {
-    if (typeof io === 'undefined') {
-        showError('Socket.IO is not defined. Please ensure it is included in your HTML.');
-        return false;
-    }
-    return true;
-}
+    socket.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        handleUpdate(data, currentPageLabel);
+    };
 
-/**
- * Create a WebSocket connection with reconnection strategy.
- * @param {string} protocol - The WebSocket protocol ('ws://' or 'wss://').
- * @returns {Object} The WebSocket connection instance.
- */
-function createWebSocketConnection(protocol) {
-    return io.connect(protocol + document.domain + ':' + location.port, {
-        transports: ['websocket'],
-        reconnectionAttempts: 5,   // Maximum of 5 reconnection attempts
-        reconnectionDelay: 2000    // Reconnection interval of 2000 milliseconds
-    });
+    socket.onerror = (error) => {
+        console.error('WebSocket error:', error);
+    };
+
+    socket.onclose = () => {
+        console.log('WebSocket closed');
+    };
 }
 
 /**
@@ -54,125 +34,54 @@ function createWebSocketConnection(protocol) {
  * @returns {string} The label of the current page.
  */
 function getCurrentPageLabel() {
-    return $('h1').text();  // Assuming the <h1> tag contains the current label name
+    return $('h1').text();
 }
 
 /**
- * Set up WebSocket event handlers.
- * @param {Object} socket - The WebSocket connection instance.
- * @param {string} currentPageLabel - The label of the current page.
- */
-function setupSocketEventHandlers(socket, currentPageLabel) {
-    socket.on('connect', () => {
-        debugLog('WebSocket connected!');
-    });
-
-    socket.on('connect_error', (error) => {
-        debugLog('WebSocket connection error:', error);
-    });
-
-    socket.on('reconnect_attempt', () => {
-        debugLog('Attempting to reconnect...');
-    });
-
-    socket.on('update', (data) => {
-        handleUpdate(data, currentPageLabel);
-    });
-}
-
-/**
- * Handle WebSocket updates
+ * Handle WebSocket updates for multiple images.
  * @param {Object} data - The received data
  * @param {string} currentPageLabel - The label of the current page
  */
 function handleUpdate(data, currentPageLabel) {
-    // Check if the received data is applicable to the current page's label
     if (data.label === currentPageLabel) {
-        debugLog('Received update for current label:', data.label);
-        updateCameraGrid(data);
+        console.log('Received update for current label:', data.label);
+        updateCameraGrid(data.images); // 更新為處理多鏡頭影像
     } else {
-        debugLog('Received update for different label:', data.label);
+        console.log('Received update for different label:', data.label);
     }
 }
 
 /**
- * Update the camera grid
- * @param {Object} data - The data containing images and names
+ * Update the camera grid with new images for multiple cameras.
+ * @param {Array} images - The array of images with key and base64 data.
  */
-function updateCameraGrid(data) {
-    const fragment = document.createDocumentFragment();
-    data.images.forEach((image, index) => {
-        const cameraData = {
-            image: image,
-            imageName: data.image_names[index],
-            label: data.label
-        };
-        const cameraDiv = createCameraDiv(cameraData);
-        fragment.appendChild(cameraDiv);
+function updateCameraGrid(images) {
+    images.forEach((cameraData) => {
+        // 檢查是否已經存在相同的 image_name
+        const existingCameraDiv = $(`.camera h2:contains(${cameraData.key.split('_').pop()})`).closest('.camera');
+
+        if (existingCameraDiv.length > 0) {
+            // 更新現有的圖像
+            existingCameraDiv.find('img').attr('src', `data:image/png;base64,${cameraData.image}`);
+        } else {
+            // 如果沒有相同的 image_name，則創建新的圖區
+            const cameraDiv = createCameraDiv(cameraData);
+            $('.camera-grid').append(cameraDiv);
+        }
     });
-    $('.camera-grid').empty().append(fragment);
 }
 
 /**
- * Create a camera div element
+ * Create a camera div element.
  * @param {Object} cameraData - The data for creating the camera div
- * @param {string} cameraData.image - The image data
- * @param {string} cameraData.imageName - The image name
- * @param {string} cameraData.label - The label name
  * @returns {HTMLElement} - The div element containing the image and title
  */
-function createCameraDiv({ image, imageName, label }) {
+function createCameraDiv(cameraData) {
     const cameraDiv = $('<div>').addClass('camera');
-    const title = $('<h2>').text(imageName);
-    const img = $('<img>').attr('src', `data:image/png;base64,${image}`).attr('alt', `${label} image`);
+    // 只保留 _ 之後的部分作為標題
+    const titleText = cameraData.key.split('_').pop();
+    const title = $('<h2>').text(titleText);
+    const img = $('<img>').attr('src', `data:image/png;base64,${cameraData.image}`).attr('alt', `${cameraData.key} image`);
     cameraDiv.append(title).append(img);
     return cameraDiv[0];
 }
-
-/**
- * Log messages for debugging purposes
- * @param  {...any} messages - The messages to log
- */
-function debugLog(...messages) {
-    if (isDevelopmentEnvironment()) {
-        logToConsole(...messages);
-    }
-}
-
-/**
- * Show error messages.
- * @param {string} message - The error message to display.
- */
-function showError(message) {
-    if (isDevelopmentEnvironment()) {
-        logErrorToConsole(message);
-    }
-}
-
-/**
- * Log messages to the console.
- * @param  {...any} messages - The messages to log.
- */
-function logToConsole(...messages) {
-    if (typeof console !== 'undefined') {
-        console.log(...messages);
-    }
-}
-
-/**
- * Log error messages to the console.
- * @param {string} message - The error message to log.
- */
-function logErrorToConsole(message) {
-    if (typeof console !== 'undefined') {
-        console.error(message);
-    }
-}
-
-/**
- * Check if the current environment is development.
- * @returns {boolean} True if the current environment is development, false otherwise.
- */
-function isDevelopmentEnvironment() {
-    return typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development';
-}
diff --git a/examples/streaming_web/templates/index.html b/examples/streaming_web/templates/index.html
index d5d0da9..07e30a5 100644
--- a/examples/streaming_web/templates/index.html
+++ b/examples/streaming_web/templates/index.html
@@ -1,30 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<title>Camera Streams</title>
-<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-<style>
-    .camera a {
-        display: block;
-        text-decoration: none;
-        color: inherit; /* 保持鏈接顏色與普通文字一致 */
-        height: 100%; /* 讓鏈接填滿整個容器 */
-    }
-</style>
+    <meta charset="UTF-8">
+    <title>Camera Streams</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/styles.css') }}">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <style>
+        .camera a {
+            display: block;
+            text-decoration: none;
+            color: inherit; /* 保持鏈接顏色與普通文字一致 */
+            height: 100%; /* 讓鏈接填滿整個容器 */
+        }
+    </style>
 </head>
 <body>
-<h1>Camera Labels</h1>
-<div class="camera-grid">
-    {% for label in labels %}
-    <div class="camera">
-        <a href="/label/{{ label }}">
-            <h2>{{ label }}</h2>
-            <p>View {{ label }}</p>
-        </a>
+    <h1>Camera Labels</h1>
+    <div class="camera-grid">
+        {% for label in labels %}
+        <div class="camera">
+            <a href="/label/{{ label }}">
+                <h2>{{ label }}</h2>
+                <p>View {{ label }}</p>
+            </a>
+        </div>
+        {% endfor %}
     </div>
-    {% endfor %}
-</div>
 </body>
 </html>
diff --git a/examples/streaming_web/templates/label.html b/examples/streaming_web/templates/label.html
index 9fc20ee..152bc36 100644
--- a/examples/streaming_web/templates/label.html
+++ b/examples/streaming_web/templates/label.html
@@ -4,10 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ label | e }}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/styles.css') }}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.min.js"></script>
-    <script src="{{ url_for('static', filename='js/label.js') }}"></script>
+    <script src="{{ url_for('static', path='js/label.js') }}"></script>
 </head>
 <body>
     <h1>{{ label | e }}</h1>
diff --git a/examples/streaming_web/utils.py b/examples/streaming_web/utils.py
index 936840e..8f546ad 100644
--- a/examples/streaming_web/utils.py
+++ b/examples/streaming_web/utils.py
@@ -1,68 +1,171 @@
 from __future__ import annotations
 
 import base64
-from functools import lru_cache
+import os
+import re
 
-import redis
+import redis.asyncio as redis
+from dotenv import load_dotenv
+from fastapi import WebSocket
 
+# Load environment variables
+load_dotenv()
 
-@lru_cache(maxsize=1024)
-def encode_image(image: bytes) -> str:
-    """
-    Encode the image data to a base64 string,
-    with caching to optimize performance.
-
-    Args:
-        image (bytes): The image data in bytes.
 
-    Returns:
-        str: The base64 encoded string of the image.
+class RedisManager:
     """
-    return base64.b64encode(image).decode('utf-8')
-
-
-def get_labels(r: redis.Redis) -> list[str]:
+    Manages asynchronous Redis operations for fetching labels, keys,
+    and image data.
     """
-    Retrieve and decode unique labels from Redis keys, excluding 'test'.
-
-    Args:
-        r (redis.Redis): The Redis connection.
 
-    Returns:
-        list: Sorted list of unique labels.
+    def __init__(
+        self, redis_host: str, redis_port: int, redis_password: str,
+    ) -> None:
+        """
+        Initialises RedisManager with Redis configuration details.
+
+        Args:
+            redis_host (str): The Redis server hostname.
+            redis_port (int): The Redis server port.
+            redis_password (str): The Redis password for authentication.
+        """
+        self.redis_host = redis_host
+        self.redis_port = redis_port
+        self.redis_password = redis_password
+
+        # Connect to Redis (asynchronous)
+        self.client = redis.Redis(
+            host=self.redis_host,
+            port=self.redis_port,
+            password=self.redis_password,
+            decode_responses=False,
+        )
+
+    async def get_labels(self) -> list[str]:
+        """
+        Fetches unique label and stream_name combinations from Redis keys.
+
+        Returns:
+            list[str]: A sorted list of unique label-stream_name combinations.
+        """
+        cursor = 0
+        labels: set[str] = set()
+
+        while True:
+            # Scan Redis for keys and decode them to UTF-8
+            cursor, keys = await self.client.scan(cursor=cursor)
+            decoded_keys = [
+                key.decode('utf-8', errors='ignore')
+                for key in keys
+            ]
+
+            # Match and extract unique label and stream_name
+            for key in decoded_keys:
+                match = re.match(
+                    r'stream_frame:([\w\x80-\xFF]+)_([\w\x80-\xFF]+)', key,
+                )
+                if match:
+                    label, stream_name = match.groups()
+                    labels.add(f"{label}")
+
+            if cursor == 0:  # Exit loop if scan cursor has reached the end
+                break
+
+        return sorted(labels)
+
+    async def get_keys_for_label(self, label: str) -> list[str]:
+        """
+        Retrieves Redis keys that match a given label-stream_name pattern.
+
+        Args:
+            label (str): The label-stream_name combination to search for.
+
+        Returns:
+            list[str]: A list of Redis keys associated with the given label.
+        """
+        cursor = 0
+        matching_keys: list[str] = []
+
+        while True:
+            cursor, keys = await self.client.scan(
+                cursor=cursor, match=f"stream_frame:{label}_*",
+            )
+            matching_keys.extend(
+                key.decode('utf-8')
+                for key in keys
+                if key.decode('utf-8').startswith('stream_frame:')
+            )
+
+            if cursor == 0:  # Exit loop if scan cursor has reached the end
+                break
+
+        return sorted(matching_keys)
+
+    async def fetch_latest_frames(
+        self, last_ids: dict[str, str],
+    ) -> list[dict[str, str]]:
+        """
+        Fetches only the latest frame for each Redis stream.
+
+        Args:
+            last_ids (dict[str, str]): A dictionary mapping stream names to
+                their last read message ID.
+
+        Returns:
+            list[dict[str, str]]: A list of dictionaries
+                with updated frame data for each stream.
+        """
+        updated_data = []
+
+        for key, last_id in last_ids.items():
+            messages = await self.client.xrevrange(key, count=1)
+            if not messages:
+                continue
+
+            message_id, data = messages[0]
+            last_ids[key] = message_id  # Update to the latest message ID
+            frame_data = data.get(b'frame')
+            if frame_data:
+                image = base64.b64encode(frame_data).decode('utf-8')
+                updated_data.append(
+                    {'key': key.split('_')[-1], 'image': image},
+                )
+
+        return updated_data
+
+
+class Utils:
     """
-    cursor, keys = r.scan()
-    decoded_keys = [key.decode('utf-8') for key in keys]
-    labels = {
-        key.split('_')[0]
-        for key in decoded_keys
-        if key.count('_') == 1
-        and not key.startswith('_')
-        and not key.endswith('_')
-        and key.split('_')[0] != 'test'
-    }
-    return sorted(labels)
-
-
-def get_image_data(r: redis.Redis, label: str) -> list[tuple[str, str]]:
+    Contains utility methods for processing and sending frame data.
     """
-    Retrieve and process image data for a specific label.
-
-    Args:
-        r (redis.Redis): The Redis connection.
-        label (str): The label/category of the images.
-
-    Returns:
-        list: List of tuples containing base64 encoded images and their names.
-    """
-    cursor, keys = r.scan(match=f"{label}_*")
-    image_data = []
-
-    for key in keys:
-        image = r.get(key)
-        if image is not None:
-            encoded_image = encode_image(image)
-            image_name = key.decode('utf-8').split('_')[1]
-            image_data.append((encoded_image, image_name))
 
-    return sorted(image_data, key=lambda x: x[1])
+    @staticmethod
+    async def send_frames(
+        websocket: WebSocket,
+        label: str,
+        updated_data: list[dict[str, str]],
+    ) -> None:
+        """
+        Sends the latest frames to the WebSocket client.
+
+        Args:
+            websocket (WebSocket): The WebSocket connection object.
+            label (str): The label associated with the frames.
+            updated_data (list[dict[str, str]]): The latest frames to be sent.
+        """
+        await websocket.send_json({
+            'label': label,
+            'images': updated_data,
+        })
+
+
+# Define Redis connection settings and initialise RedisManager
+# redis_host = os.getenv('REDIS_HOST')
+# redis_port = os.getenv('REDIS_PORT')
+# redis_password = os.getenv('REDIS_PASSWORD')
+
+redis_host = os.getenv('REDIS_HOST')
+redis_port = os.getenv('REDIS_PORT')
+redis_password = os.getenv('REDIS_PASSWORD')
+
+redis_manager = RedisManager(redis_host, redis_port, redis_password)