Spaces:
Sleeping
Sleeping
| title: SignView - 手語辨識整合系統 | |
| emoji: 🤟 | |
| colorFrom: blue | |
| colorTo: green | |
| sdk: docker | |
| app_port: 7860 | |
| pinned: false | |
| duplicated_from: XiaoBai1221/SignView | |
| # 手語辨識整合系統 (Sign Language Recognition System) | |
| 一個整合的手語辨識系統，支援即時攝像頭辨識、影片上傳處理和 Facebook Messenger Bot 功能。使用 PyTorch 深度學習模型、MediaPipe 特徵提取和 OpenAI GPT 生成自然語句。 | |
| ## 🌟 主要功能 | |
| ### 🖥️ 本地環境 | |
| - **即時攝像頭辨識**: 使用WebSocket進行即時手語辨識 | |
| - **完整功能**: 支援所有功能包括攝像頭、影片上傳、Messenger Bot | |
| ### ☁️ HuggingFace Spaces (雲端環境) | |
| - **影片上傳辨識**: 拖拽或選擇影片檔案進行辨識 | |
| - **智慧環境檢測**: 自動偵測執行環境並切換適合的功能 | |
| - **Facebook Messenger Bot**: 支援Webhook接收訊息 | |
| ## 🚀 快速開始 | |
| ### HuggingFace Spaces 部署 | |
| 1. **訪問 Space**: https://huggingface.co/spaces/XiaoBai1221/SignView | |
| 2. **設定環境變數** (在 Space Settings 中): | |
| ``` | |
| OPENAI_API_KEY=your_openai_api_key_here | |
| VERIFY_TOKEN=your_messenger_verify_token | |
| PAGE_ACCESS_TOKEN=your_facebook_page_access_token | |
| ``` | |
| 3. **Facebook Messenger Bot Webhook 設定**: | |
| - **Webhook URL**: `https://xiaobai1221-signview.hf.space/webhook` | |
| - **驗證Token**: 使用你設定的 `VERIFY_TOKEN` | |
| - **訂閱事件**: `messages`, `messaging_postbacks` | |
| ### 📱 Facebook Messenger Bot 設定步驟 | |
| #### 1. 創建 Facebook 應用程式 | |
| 1. 前往 [Facebook Developers](https://developers.facebook.com/) | |
| 2. 創建新應用程式，選擇「商業」類型 | |
| 3. 添加「Messenger」產品 | |
| #### 2. 設定 Webhook | |
| 1. 在 Messenger 設定中，找到「Webhooks」 | |
| 2. 點擊「設定 Webhooks」 | |
| 3. 填入以下資訊： | |
| - **回調 URL**: `https://xiaobai1221-signview.hf.space/webhook` | |
| - **驗證權杖**: 你的自訂驗證token (設為環境變數 `VERIFY_TOKEN`) | |
| - **訂閱欄位**: 勾選 `messages` 和 `messaging_postbacks` | |
| #### 3. 取得 Page Access Token | |
| 1. 在 Messenger 設定中，找到「存取權杖」 | |
| 2. 選擇你的 Facebook 粉絲專頁 | |
| 3. 複製產生的 Page Access Token | |
| 4. 將此 token 設為環境變數 `PAGE_ACCESS_TOKEN` | |
| #### 4. 測試 Webhook | |
| 1. 在 Webhook 設定中點擊「測試」 | |
| 2. 如果設定正確，應該會看到驗證成功的訊息 | |
| ### 🔧 本地開發 | |
| ```bash | |
| # 克隆專案 | |
| git clone https://github.com/your-username/sign-bot.git | |
| cd sign-bot | |
| # 安裝依賴 | |
| pip install -r requirements.txt | |
| # 設定環境變數 | |
| export OPENAI_API_KEY=your_openai_api_key | |
| export VERIFY_TOKEN=your_verify_token | |
| export PAGE_ACCESS_TOKEN=your_page_access_token | |
| # 啟動應用 | |
| python app.py | |
| ``` | |
| ## 📊 支援的手語 | |
| 系統目前支援以下 4 種手語辨識： | |
| - **eat** (吃) | |
| - **fish** (魚) | |
| - **like** (喜歡) | |
| - **want** (想要) | |
| ## 🛠️ 技術架構 | |
| ### 🧠 AI 模型 | |
| - **PyTorch LSTM + Attention**: 深度學習手語辨識模型 | |
| - **MediaPipe**: 手部關鍵點特徵提取 | |
| - **OpenAI GPT-4o-mini**: 自然語句生成 | |
| ### 🌐 Web 技術 | |
| - **Flask**: Web 框架 | |
| - **WebSocket**: 即時通訊 (本地環境) | |
| - **Bootstrap**: 響應式 UI 設計 | |
| - **JavaScript**: 前端互動邏輯 | |
| ### 📱 整合服務 | |
| - **Facebook Messenger API**: 聊天機器人 | |
| - **HuggingFace Spaces**: 雲端部署平台 | |
| - **Docker**: 容器化部署 | |
| ## 🔄 Webhook 網址說明 | |
| ### HuggingFace Spaces 自動產生的網址格式： | |
| ``` | |
| https://[username]-[space-name].hf.space/webhook | |
| ``` | |
| ### 你的 Webhook 網址： | |
| ``` | |
| https://xiaobai1221-signview.hf.space/webhook | |
| ``` | |
| ### 驗證方式： | |
| - GET 請求用於 Facebook 驗證 | |
| - POST 請求用於接收訊息 | |
| ## 📋 API 端點 | |
| - `GET /` - 主頁面 (Web 介面) | |
| - `GET /health` - 健康檢查 | |
| - `GET /webhook` - Facebook Webhook 驗證 | |
| - `POST /webhook` - 接收 Facebook 訊息 | |
| - `POST /process_video` - 影片辨識處理 | |
| - `POST /receive_recognition_result` - 辨識結果接收 | |
| ## 🎯 使用方式 | |
| ### 💻 Web 介面 | |
| 1. 訪問 HuggingFace Space 網址 | |
| 2. 上傳手語影片檔案 | |
| 3. 點擊「開始辨識」 | |
| 4. 查看辨識結果和翻譯 | |
| ### 📱 Messenger Bot | |
| 1. 在 Facebook 找到你的粉絲專頁 | |
| 2. 發送訊息或影片 | |
| 3. Bot 會自動辨識並回覆結果 | |
| ## 🔍 故障排除 | |
| ### Webhook 無法連接 | |
| 1. 確認 HuggingFace Space 狀態為 "Running" | |
| 2. 檢查環境變數是否正確設定 | |
| 3. 確認 Webhook URL 格式正確 | |
| ### 辨識結果不準確 | |
| 1. 確保影片畫質清晰 | |
| 2. 手部動作要完整且明顯 | |
| 3. 光線充足，背景簡潔 | |
| ## 📞 技術支援 | |
| 如有問題請聯繫： | |
| - GitHub Issues: [專案頁面](https://github.com/your-username/sign-bot) | |
| - Email: your-email@example.com | |
| --- | |
| **© 2023 手語辨識整合系統 | 使用 Flask + PyTorch + OpenAI + HuggingFace Spaces** |