README.md

metadata

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
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. 如果設定正確，應該會看到驗證成功的訊息

🔧 本地開發

# 克隆專案
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: 專案頁面
• Email: your-email@example.com

---

© 2023 手語辨識整合系統 | 使用 Flask + PyTorch + OpenAI + HuggingFace Spaces