README.md

---
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**