修復前端和後端資料傳輸問題 - 改善錯誤處理和欄位名稱一致性

Dockerfile

@@ -1,7 +1,10 @@
-FROM python:3.10-slim
+FROM python:3.11-slim
 
 WORKDIR /app
 
+# 更新pip到最新版本
+RUN pip install --upgrade pip
+
 # 安裝系統依賴
 RUN apt-get update && apt-get install -y \
     libglib2.0-0 \
@@ -9,7 +12,8 @@ RUN apt-get update && apt-get install -y \
     libxext6 \
     libxrender-dev \
     libgomp1 \
-    libglib2.0-0 \
+    libgl1-mesa-glx \
+    libglib2.0-dev \
     && rm -rf /var/lib/apt/lists/*
 
 # 複製依賴檔案
@@ -22,13 +26,14 @@ RUN pip install --no-cache-dir -r requirements.txt
 COPY . .
 
 # 建立必要目錄
-RUN mkdir -p uploads data/models data/features/keypoints
+RUN mkdir -p uploads data/models data/features/keypoints data/features/optical_flow
 
 # 暴露端口
 EXPOSE 7860
 
 # 設定環境變數
 ENV PYTHONUNBUFFERED=1
+ENV PYTHONDONTWRITEBYTECODE=1
 
 # 啟動命令
 CMD ["python", "app.py"] 

README.md

@@ -5,7 +5,7 @@ colorFrom: blue
 colorTo: green
 sdk: docker
 app_port: 7860
-pinned: boolean
+pinned: false
 duplicated_from: XiaoBai1221/SignView
 ---
 
@@ -13,175 +13,161 @@ duplicated_from: XiaoBai1221/SignView
 
 一個整合的手語辨識系統，支援即時攝像頭辨識、影片上傳處理和 Facebook Messenger Bot 功能。使用 PyTorch 深度學習模型、MediaPipe 特徵提取和 OpenAI GPT 生成自然語句。
 
-## 🚀 快速開始
+## 🌟 主要功能
 
-### HuggingFace Spaces 部署 (推薦)
+### 🖥️ 本地環境
+- **即時攝像頭辨識**: 使用WebSocket進行即時手語辨識
+- **完整功能**: 支援所有功能包括攝像頭、影片上傳、Messenger Bot
 
-1. **Fork 此專案到你的 HuggingFace Spaces**
-2. **設定環境變數**：
-   ```
-   OPENAI_API_KEY=你的OpenAI_API金鑰
-   VERIFY_TOKEN=你的Messenger驗證Token
-   PAGE_ACCESS_TOKEN=你的Facebook頁面存取Token
-   ```
-3. **自動部署** - HuggingFace 會自動建置和部署
+### ☁️ HuggingFace Spaces (雲端環境)
+- **影片上傳辨識**: 拖拽或選擇影片檔案進行辨識
+- **智慧環境檢測**: 自動偵測執行環境並切換適合的功能
+- **Facebook Messenger Bot**: 支援Webhook接收訊息
 
-### 本地開發
+## 🚀 快速開始
 
-```bash
-# 1. 安裝依賴
-pip install -r requirements.txt
+### HuggingFace Spaces 部署
 
-# 2. 設定環境變數
-export OPENAI_API_KEY="你的OpenAI_API金鑰"
-export VERIFY_TOKEN="你的Messenger驗證Token" 
-export PAGE_ACCESS_TOKEN="你的Facebook頁面存取Token"
+1. **訪問 Space**: https://huggingface.co/spaces/XiaoBai1221/SignView
 
-# 3. 啟動應用
-python3 app.py
-```
+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`
 
-```
-Sign-bot/
-├── app.py                    # 🎯 主應用程式 (整合所有功能)
-├── app_config.py            # ⚙️ 配置管理
-├── requirements.txt         # 📦 Python依賴套件
-├── Dockerfile              # 🐳 Docker容器配置
-├── README.md               # 📖 專案文檔
-├── final_review_gate.py    # 🔍 測試腳本
-├── data/                   # 📊 資料目錄
-│   ├── models/            # 🤖 訓練好的模型檔案
-│   │   └── sign_language_model.pth
-│   ├── labels.csv         # 🏷️ 標籤映射檔案
-│   └── features/          # 🎬 訓練特徵資料
-│       ├── keypoints/     # ✋ 關鍵點特徵檔案
-│       └── optical_flow/  # 🌊 光流特徵檔案
-├── templates/             # 🌐 網頁範本
-│   └── index.html        # 首頁範本
-└── uploads/              # 📁 暫時檔案上傳目錄
-```
+### 📱 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`
 
-### 🎯 **整合設計**
-- **統一入口**: 所有功能整合在 `app.py` 單一檔案
-- **環境適配**: 自動檢測本地/雲端環境並調整功能
-- **模組化**: 清晰的類別結構，易於維護
+#### 3. 取得 Page Access Token
+1. 在 Messenger 設定中，找到「存取權杖」
+2. 選擇你的 Facebook 粉絲專頁
+3. 複製產生的 Page Access Token
+4. 將此 token 設為環境變數 `PAGE_ACCESS_TOKEN`
 
-### 🤖 **AI 手語辨識**
-- **深度學習模型**: PyTorch LSTM + Attention 機制
-- **特徵提取**: MediaPipe 提取手部、姿態關鍵點
-- **自然語句生成**: OpenAI GPT-4o-mini 生成流暢句子
-- **支援手語**: 目前支援 eat, fish, like, want 四個手語
+#### 4. 測試 Webhook
+1. 在 Webhook 設定中點擊「測試」
+2. 如果設定正確，應該會看到驗證成功的訊息
 
-### 🌐 **多平台支援**
-- **Web 介面**: 即時攝像頭辨識 + 影片上傳處理
-- **Messenger Bot**: Facebook 整合，自動處理使用者影片
-- **RESTful API**: 提供第三方整合接口
-- **WebSocket**: 即時雙向通訊
+### 🔧 本地開發
 
-### 📱 **使用方式**
+```bash
+# 克隆專案
+git clone https://github.com/your-username/sign-bot.git
+cd sign-bot
 
-#### Web 介面 (本地環境)
-1. 造訪 `http://localhost:7860`
-2. 點擊「開始辨識」使用攝像頭
-3. 或上傳 MP4 影片檔案
+# 安裝依賴
+pip install -r requirements.txt
 
-#### Messenger Bot
-1. 找到你的 Facebook 頁面
-2. 發送手語影片
-3. 系統自動辨識並回傳結果
+# 設定環境變數
+export OPENAI_API_KEY=your_openai_api_key
+export VERIFY_TOKEN=your_verify_token
+export PAGE_ACCESS_TOKEN=your_page_access_token
 
-#### API 呼叫
-```bash
-# 上傳影片進行辨識
-curl -X POST http://localhost:7860/process_video \
-  -F "video=@your_video.mp4" \
-  -F "sender_id=test_user"
+# 啟動應用
+python app.py
 ```
 
-## 🔧 技術架構
+## 📊 支援的手語
 
-### 核心類別
-- **FeatureExtractor**: MediaPipe 特徵提取器
-- **SignLanguageModel**: PyTorch LSTM 神經網絡
-- **VideoSignLanguageRecognizer**: 影片手語辨識器
-- **SignLanguageRecognizer**: 即時手語辨識器
+系統目前支援以下 4 種手語辨識：
+- **eat** (吃)
+- **fish** (魚)  
+- **like** (喜歡)
+- **want** (想要)
 
-### 技術棧
-- **後端**: Flask + SocketIO
-- **AI框架**: PyTorch + MediaPipe
-- **自然語言**: OpenAI GPT-4o-mini
-- **前端**: HTML5 + WebSocket
-- **部署**: HuggingFace Spaces + Docker
+## 🛠️ 技術架構
 
-## 🌍 環境變數
+### 🧠 AI 模型
+- **PyTorch LSTM + Attention**: 深度學習手語辨識模型
+- **MediaPipe**: 手部關鍵點特徵提取
+- **OpenAI GPT-4o-mini**: 自然語句生成
 
-| 變數名稱 | 說明 | 必須 |
-|---------|------|------|
-| `OPENAI_API_KEY` | OpenAI API 金鑰 | ✅ |
-| `VERIFY_TOKEN` | Messenger 驗證 Token | Messenger功能需要 |
-| `PAGE_ACCESS_TOKEN` | Facebook 頁面存取 Token | Messenger功能需要 |
-| `SPACE_ID` | HuggingFace Space ID | 自動設定 |
-| `PORT` | 服務埠號 | 預設 7860 |
+### 🌐 Web 技術
+- **Flask**: Web 框架
+- **WebSocket**: 即時通訊 (本地環境)
+- **Bootstrap**: 響應式 UI 設計
+- **JavaScript**: 前端互動邏輯
 
-## 🎮 API 端點
+### 📱 整合服務
+- **Facebook Messenger API**: 聊天機器人
+- **HuggingFace Spaces**: 雲端部署平台
+- **Docker**: 容器化部署
 
-### Web 路由
-- `GET /` - 主頁面
-- `GET /health` - 健康檢查
-- `POST /process_video` - 影片處理
+## 🔄 Webhook 網址說明
+
+### HuggingFace Spaces 自動產生的網址格式：
+```
+https://[username]-[space-name].hf.space/webhook
+```
 
-### Messenger 整合
-- `GET /webhook` - Webhook 驗證
-- `POST /webhook` - 訊息處理
+### 你的 Webhook 網址：
+```
+https://xiaobai1221-signview.hf.space/webhook
+```
 
-### WebSocket 事件
-- `start_stream` - 開始視頻流
-- `stop_stream` - 停止視頻流
+### 驗證方式：
+- GET 請求用於 Facebook 驗證
+- POST 請求用於接收訊息
 
-## 🚀 部署指南
+## 📋 API 端點
 
-### HuggingFace Spaces
-1. 建立新的 Space (Gradio/Docker)
-2. 上傳所有檔案
-3. 設定環境變數
-4. 自動部署完成
+- `GET /` - 主頁面 (Web 介面)
+- `GET /health` - 健康檢查
+- `GET /webhook` - Facebook Webhook 驗證
+- `POST /webhook` - 接收 Facebook 訊息
+- `POST /process_video` - 影片辨識處理
+- `POST /receive_recognition_result` - 辨識結果接收
 
-### Docker 部署
-```bash
-# 建置映像
-docker build -t sign-language-recognition .
+## 🎯 使用方式
 
-# 執行容器
-docker run -p 7860:7860 \
-  -e OPENAI_API_KEY="你的金鑰" \
-  sign-language-recognition
-```
+### 💻 Web 介面
+1. 訪問 HuggingFace Space 網址
+2. 上傳手語影片檔案
+3. 點擊「開始辨識」
+4. 查看辨識結果和翻譯
 
-## 🎯 使用限制
+### 📱 Messenger Bot
+1. 在 Facebook 找到你的粉絲專頁
+2. 發送訊息或影片
+3. Bot 會自動辨識並回覆結果
 
-- **模型準確度**: 目前為測試版本，準確度可能有限
-- **支援手語**: 僅支援 4 個基礎手語詞彙
-- **攝像頭功能**: 雲端環境不支援，請使用影片上傳
-- **檔案大小**: 影片檔案限制 100MB
+## 🔍 故障排除
 
-## 🔄 未來規劃
+### Webhook 無法連接
+1. 確認 HuggingFace Space 狀態為 "Running"
+2. 檢查環境變數是否正確設定
+3. 確認 Webhook URL 格式正確
 
-- [ ] 增加更多手語詞彙支援
-- [ ] 提升模型準確度
-- [ ] 支援手語語法結構
-- [ ] 加入使用者自訓練功能
-- [ ] 支援多語言介面
+### 辨識結果不準確
+1. 確保影片畫質清晰
+2. 手部動作要完整且明顯
+3. 光線充足，背景簡潔
 
 ## 📞 技術支援
 
-如有問題請透過以下方式聯絡：
-- GitHub Issues
-- 或直接在 HuggingFace Space 留言
+如有問題請聯繫：
+- GitHub Issues: [專案頁面](https://github.com/your-username/sign-bot)
+- Email: your-email@example.com
 
 ---
 
-> **🎉 這是一個整合型手語辨識系統，將所有功能統一整合在 `app.py` 中，提供最佳的使用體驗和部署便利性！** 
+**© 2023 手語辨識整合系統 | 使用 Flask + PyTorch + OpenAI + HuggingFace Spaces** 

app.py

@@ -22,7 +22,13 @@ from flask_socketio import SocketIO, emit
 from openai import OpenAI
 
 # 環境變數設定
-os.environ.setdefault("OPENAI_API_KEY", "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")
+# OpenAI API KEY 應該從環境變數獲取，不要硬編碼
+# 請在 HuggingFace Spaces 設定中添加 OPENAI_API_KEY 環境變數
+
+# 設定環境變數避免權限問題和減少日誌
+os.environ['MPLCONFIGDIR'] = '/tmp/matplotlib'
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'  # 減少TensorFlow日誌
+os.environ['MEDIAPIPE_DISABLE_GPU'] = '1'  # 禁用GPU避免警告
 
 # 環境檢測
 IS_HUGGINGFACE = os.environ.get('SPACE_ID') is not None
@@ -384,8 +390,9 @@ class VideoSignLanguageRecognizer:
 
     def _predict_from_sequence(self, keypoints_sequence):
         """從關鍵點序列進行預測"""
-        # 簡化版預測 - 直接使用整個序列
-        sequence_tensor = torch.FloatTensor(keypoints_sequence).unsqueeze(0).to(self.device)
+        # 優化tensor創建避免效能警告
+        keypoints_array = np.array(keypoints_sequence, dtype=np.float32)
+        sequence_tensor = torch.from_numpy(keypoints_array).unsqueeze(0).to(self.device)
         
         with torch.no_grad():
             outputs = self.model(sequence_tensor)
@@ -412,18 +419,28 @@ class VideoSignLanguageRecognizer:
             return " ".join(word_sequence)
             
         try:
-            prompt = f"我使用手語表達了以下單詞序列: {', '.join(word_sequence)}。請將這些單詞組織成一個有意義、通順的完整句子。"
+            # 優化prompt，要求GPT只回覆簡潔句子
+            prompt = f"手語詞彙: {', '.join(word_sequence)}。請組成一個簡潔的中文句子，只回覆句子內容，不要額外說明。"
             
             response = self.openai_client.chat.completions.create(
                 model="gpt-4o-mini",
                 messages=[
-                    {"role": "system", "content": "你是一個專業的手語翻譯助手。"},
+                    {"role": "system", "content": "你是手語翻譯助手。只回覆簡潔的中文句子，不要額外說明或範例。"},
                     {"role": "user", "content": prompt}
                 ],
-                max_tokens=100
+                max_tokens=50,  # 減少token數量
+                temperature=0.3  # 降低隨機性，更準確
             )
             
-            return response.choices[0].message.content.strip()
+            result = response.choices[0].message.content.strip()
+            # 移除可能的引號和額外文字
+            result = result.replace('"', '').replace("'", '').strip()
+            
+            # 如果結果太長或包含解釋性文字，回退到原詞彙
+            if len(result) > 30 or '例如' in result or '可以' in result:
+                return " ".join(word_sequence)
+                
+            return result
             
         except Exception as e:
             print(f"調用GPT API時出錯: {e}")
@@ -622,18 +639,29 @@ class SignLanguageRecognizer:
             return
             
         try:
-            prompt = f"我使用手語表達了以下單詞序列: {', '.join(self.word_sequence)}。請將這些單詞組織成一個有意義、通順的完整句子。"
+            # 優化prompt，要求GPT只回覆簡潔句子
+            prompt = f"手語詞彙: {', '.join(self.word_sequence)}。請組成一個簡潔的中文句子，只回覆句子內容，不要額外說明。"
             
             response = self.openai_client.chat.completions.create(
                 model="gpt-4o-mini",
                 messages=[
-                    {"role": "system", "content": "你是一個專業的手語翻譯助手。"},
+                    {"role": "system", "content": "你是手語翻譯助手。只回覆簡潔的中文句子，不要額外說明或範例。"},
                     {"role": "user", "content": prompt}
                 ],
-                max_tokens=100
+                max_tokens=50,  # 減少token數量
+                temperature=0.3  # 降低隨機性，更準確
             )
             
-            self.generated_sentence = response.choices[0].message.content.strip()
+            result = response.choices[0].message.content.strip()
+            # 移除可能的引號和額外文字
+            result = result.replace('"', '').replace("'", '').strip()
+            
+            # 如果結果太長或包含解釋性文字，回退到原詞彙
+            if len(result) > 30 or '例如' in result or '可以' in result:
+                self.generated_sentence = " ".join(self.word_sequence)
+            else:
+                self.generated_sentence = result
+                
             self.display_sentence_time = time.time()
             print(f"GPT生成句子: {self.generated_sentence}")
             
@@ -671,8 +699,9 @@ class SignLanguageRecognizer:
         if len(self.keypoints_buffer) < 2:
             return
             
-        keypoints_array = np.array(list(self.keypoints_buffer))
-        keypoints_tensor = torch.FloatTensor(keypoints_array).unsqueeze(0).to(self.device)
+        # 優化tensor創建避免效能警告
+        keypoints_array = np.array(list(self.keypoints_buffer), dtype=np.float32)
+        keypoints_tensor = torch.from_numpy(keypoints_array).unsqueeze(0).to(self.device)
         
         with torch.no_grad():
             outputs = self.model(keypoints_tensor)
@@ -829,13 +858,16 @@ def process_video():
         if video_file.filename == '':
             return jsonify({"status": "error", "message": "沒有選擇檔案"}), 400
         
-        # 儲存檔案
+        # 使用臨時檔案避免權限問題
+        import tempfile
         filename = secure_filename(video_file.filename)
         timestamp = int(time.time())
-        filename = f"{timestamp}_{sender_id}_{filename}"
-        video_path = os.path.join(UPLOAD_FOLDER, filename)
         
-        video_file.save(video_path)
+        # 創建臨時檔案
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.mp4', prefix=f'upload_{sender_id}_') as temp_file:
+            video_path = temp_file.name
+            video_file.save(video_path)
+        
         print(f"📁 影片已儲存：{video_path}")
         
         # 初始化影片辨識器
@@ -843,6 +875,12 @@ def process_video():
         print(f"🔍 模型路徑: {model_path}")
         print(f"🔍 模型檔案是否存在: {os.path.exists(model_path)}")
         
+        if not os.path.exists(model_path):
+            return jsonify({
+                "status": "error", 
+                "message": f"模型檔案不存在: {model_path}"
+            }), 500
+        
         video_recognizer = VideoSignLanguageRecognizer(model_path, threshold=0.5)
         
         # 處理影片
@@ -874,7 +912,9 @@ def process_video():
             
     except Exception as e:
         print(f"處理影片時發生錯誤：{e}")
-        return jsonify({"status": "error", "message": str(e)}), 500
+        import traceback
+        traceback.print_exc()  # 印出完整的錯誤堆疊
+        return jsonify({"status": "error", "message": f"處理影片時發生錯誤: {str(e)}"}), 500
 
 #--------------------
 # Messenger Bot 輔助函數
@@ -944,6 +984,8 @@ def send_message(recipient_id, message_text):
 
 def process_messenger_video(video_url, sender_id):
     """處理來自 Messenger 的影片（HuggingFace 整合版本）"""
+    import tempfile
+    
     try:
         print(f"🎬 開始處理 Messenger 影片：{video_url}")
         
@@ -951,16 +993,18 @@ def process_messenger_video(video_url, sender_id):
         response = requests.get(video_url, stream=True, timeout=30)
         response.raise_for_status()
         
-        # 生成檔案名稱
+        # 使用臨時檔案避免權限問題
         timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
         filename = f"messenger_video_{sender_id}_{timestamp}.mp4"
-        file_path = os.path.join(UPLOAD_FOLDER, filename)
         
-        # 寫入檔案
-        with open(file_path, 'wb') as f:
+        # 創建臨時檔案
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.mp4', prefix=f'messenger_{sender_id}_') as temp_file:
+            file_path = temp_file.name
+            
+            # 寫入檔案
             for chunk in response.iter_content(chunk_size=8192):
                 if chunk:
-                    f.write(chunk)
+                    temp_file.write(chunk)
         
         print(f"✅ 影片下載完成：{file_path}")
         

requirements.txt

@@ -1,12 +1,12 @@
-flask==2.3.2
-flask-socketio==5.3.4
-opencv-python==4.8.0.74
-numpy==1.24.3
-pandas==2.0.3
-torch==2.0.1
-mediapipe==0.10.1
-openai==1.6.1
-requests==2.31.0
-werkzeug==2.3.6
-python-dotenv==1.0.0
-gunicorn==21.2.0 
+flask>=2.3.0,<3.1.0
+flask-socketio>=5.3.0,<6.0.0
+opencv-python-headless>=4.8.0,<5.0.0
+numpy>=1.21.0,<2.0.0
+pandas>=1.5.0,<3.0.0
+torch>=2.0.0,<2.2.0
+mediapipe>=0.10.5
+openai>=1.0.0,<2.0.0
+requests>=2.25.0,<3.0.0
+werkzeug>=2.3.0,<4.0.0
+python-dotenv>=0.19.0
+gunicorn>=20.0.0 

templates/index.html

@@ -43,6 +43,13 @@
             margin-bottom: 20px;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
         }
+        .upload-panel {
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        }
         .btn-primary {
             background-color: #4aa3df;
             border: none;
@@ -51,12 +58,19 @@
             background-color: #e74c3c;
             border: none;
         }
+        .btn-success {
+            background-color: #27ae60;
+            border: none;
+        }
         .btn-primary:hover {
             background-color: #3498db;
         }
         .btn-danger:hover {
             background-color: #c0392b;
         }
+        .btn-success:hover {
+            background-color: #229954;
+        }
         .panel-title {
             color: #4aa3df;
             border-bottom: 1px solid #3a3a3a;
@@ -143,35 +157,114 @@
             color: #7f8c8d;
             font-size: 0.9rem;
         }
+        .environment-indicator {
+            background-color: #3a3a3a;
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 20px;
+            text-align: center;
+            border-left: 4px solid #f39c12;
+        }
+        .upload-area {
+            border: 2px dashed #4aa3df;
+            border-radius: 10px;
+            padding: 30px;
+            text-align: center;
+            margin-bottom: 20px;
+            transition: all 0.3s ease;
+        }
+        .upload-area:hover {
+            border-color: #3498db;
+            background-color: #333;
+        }
+        .upload-area.dragover {
+            border-color: #27ae60;
+            background-color: #2a4d3a;
+        }
+        .progress {
+            background-color: #3a3a3a;
+        }
+        .progress-bar {
+            background-color: #4aa3df;
+        }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1 class="main-title">手語辨識系統</h1>
+        <h1 class="main-title">🤟 手語辨識系統</h1>
+        
+        <!-- 環境指示器 -->
+        <div class="environment-indicator">
+            <strong>🌐 執行環境：</strong><span id="environment-info">檢測中...</span>
+        </div>
         
         <div class="row">
             <div class="col-lg-8">
-                <div class="video-container">
-                    <div id="hand-status" class="camera-status bg-secondary">未偵測</div>
-                    <img id="video-display" src="" alt="即時視頻畫面">
-                </div>
-                
-                <div class="control-panel">
-                    <h4 class="panel-title">控制面板</h4>
-                    <div class="d-flex justify-content-between">
-                        <button id="start-btn" class="btn btn-primary">開始辨識</button>
-                        <button id="stop-btn" class="btn btn-danger" disabled>停止辨識</button>
+                <!-- 即時攝像頭區域 (本地環境) -->
+                <div id="camera-section" style="display: none;">
+                    <div class="video-container">
+                        <div id="hand-status" class="camera-status bg-secondary">未偵測</div>
+                        <img id="video-display" src="" alt="即時視頻畫面">
+                    </div>
+                    
+                    <div class="control-panel">
+                        <h4 class="panel-title">📹 即時攝像頭辨識</h4>
+                        <div class="d-flex justify-content-between">
+                            <button id="start-btn" class="btn btn-primary">開始辨識</button>
+                            <button id="stop-btn" class="btn btn-danger" disabled>停止辨識</button>
+                        </div>
+                    </div>
+                    
+                    <div class="word-sequence">
+                        <h4 class="panel-title">單詞序列</h4>
+                        <div id="word-sequence-display" class="fs-5">尚無偵測結果</div>
+                    </div>
+                    
+                    <div class="sentence-result">
+                        <h4 class="panel-title">翻譯結果</h4>
+                        <div id="sentence-display" class="fs-5">等待手語輸入完成...</div>
                     </div>
                 </div>
                 
-                <div class="word-sequence">
-                    <h4 class="panel-title">單詞序列</h4>
-                    <div id="word-sequence-display" class="fs-5">尚無偵測結果</div>
-                </div>
-                
-                <div class="sentence-result">
-                    <h4 class="panel-title">翻譯結果</h4>
-                    <div id="sentence-display" class="fs-5">等待手語輸入完成...</div>
+                <!-- 影片上傳區域 (雲端環境) -->
+                <div id="upload-section">
+                    <div class="upload-panel">
+                        <h4 class="panel-title">📁 影片上傳辨識</h4>
+                        <div class="upload-area" id="upload-area">
+                            <div id="upload-content">
+                                <i class="fas fa-cloud-upload-alt" style="font-size: 3rem; color: #4aa3df; margin-bottom: 15px;"></i>
+                                <p class="mb-3">拖拽影片檔案到此處，或點擊選擇檔案</p>
+                                <input type="file" id="video-file" accept="video/*" style="display: none;">
+                                <button class="btn btn-primary" onclick="document.getElementById('video-file').click()">選擇影片檔案</button>
+                                <p class="mt-2 text-muted">支援格式：MP4, AVI, MOV, WMV</p>
+                            </div>
+                            <div id="upload-progress" style="display: none;">
+                                <div class="progress mb-3">
+                                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
+                                </div>
+                                <p id="upload-status">上傳中...</p>
+                            </div>
+                        </div>
+                        
+                        <div id="video-preview" style="display: none;">
+                            <video id="preview-video" controls style="width: 100%; border-radius: 10px; margin-bottom: 15px;"></video>
+                            <div class="d-flex justify-content-between">
+                                <button id="process-video-btn" class="btn btn-success">🚀 開始辨識</button>
+                                <button id="clear-video-btn" class="btn btn-danger">🗑️ 清除影片</button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 結果顯示區域 (雲端環境) -->
+                    <div class="word-sequence">
+                        <h4 class="panel-title">辨識結果</h4>
+                        <div id="word-sequence-display" class="fs-5">尚無辨識結果</div>
+                    </div>
+                    
+                    <div class="sentence-result">
+                        <h4 class="panel-title">翻譯結果</h4>
+                        <div id="sentence-display" class="fs-5">等待影片上傳...</div>
+                    </div>
                 </div>
             </div>
             
@@ -194,6 +287,22 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // 環境檢測
+            const isHuggingFace = window.location.hostname.includes('hf.space') || window.location.hostname.includes('huggingface.co');
+            const environmentInfo = document.getElementById('environment-info');
+            const cameraSection = document.getElementById('camera-section');
+            const uploadSection = document.getElementById('upload-section');
+            
+            if (isHuggingFace) {
+                environmentInfo.innerHTML = '☁️ HuggingFace Spaces (雲端) - 使用影片上傳功能';
+                cameraSection.style.display = 'none';
+                uploadSection.style.display = 'block';
+            } else {
+                environmentInfo.innerHTML = '💻 本地環境 - 支援即時攝像頭辨識';
+                cameraSection.style.display = 'block';
+                uploadSection.style.display = 'none';
+            }
+            
             // 獲取DOM元素
             const videoDisplay = document.getElementById('video-display');
             const startBtn = document.getElementById('start-btn');
@@ -205,50 +314,231 @@
             const sentenceDisplay = document.getElementById('sentence-display');
             const handStatus = document.getElementById('hand-status');
             
-            // 連接Socket.IO
-            const socket = io();
+            // 影片上傳相關元素
+            const uploadArea = document.getElementById('upload-area');
+            const videoFile = document.getElementById('video-file');
+            const uploadContent = document.getElementById('upload-content');
+            const uploadProgress = document.getElementById('upload-progress');
+            const videoPreview = document.getElementById('video-preview');
+            const previewVideo = document.getElementById('preview-video');
+            const processVideoBtn = document.getElementById('process-video-btn');
+            const clearVideoBtn = document.getElementById('clear-video-btn');
             
-            // 連接事件
-            socket.on('connect', function() {
-                console.log('已連接到伺服器');
-            });
+            // 連接Socket.IO (僅本地環境)
+            let socket = null;
+            if (!isHuggingFace) {
+                socket = io();
+            }
             
-            // 接收幀更新
-            socket.on('update_frame', function(data) {
-                // 更新視頻顯示
-                videoDisplay.src = `data:image/jpeg;base64,${data.image}`;
+            // Socket.IO 連接事件 (僅本地環境)
+            if (socket) {
+                socket.on('connect', function() {
+                    console.log('已連接到伺服器');
+                });
+                
+                // 接收幀更新
+                socket.on('update_frame', function(data) {
+                    // 更新視頻顯示
+                    videoDisplay.src = `data:image/jpeg;base64,${data.image}`;
+                    
+                    // 更新狀態
+                    updateStatus(data.status);
+                });
+                
+                // 開始按鈕點擊事件
+                startBtn.addEventListener('click', function() {
+                    socket.emit('start_stream', {}, function(response) {
+                        if (response.status === 'success') {
+                            startBtn.disabled = true;
+                            stopBtn.disabled = false;
+                            resultLabel.textContent = '等待偵測...';
+                            resultConfidence.textContent = '信心度: 0%';
+                        } else {
+                            alert('啟動失敗: ' + (response.message || '未知錯誤'));
+                        }
+                    });
+                });
                 
-                // 更新狀態
-                updateStatus(data.status);
-            });
+                // 停止按鈕點擊事件
+                stopBtn.addEventListener('click', function() {
+                    socket.emit('stop_stream', {}, function(response) {
+                        if (response.status === 'success') {
+                            startBtn.disabled = false;
+                            stopBtn.disabled = true;
+                            resultLabel.textContent = '未開始';
+                            resultConfidence.textContent = '信心度: 0%';
+                            handStatus.textContent = '未偵測';
+                            handStatus.className = 'camera-status bg-secondary';
+                        }
+                    });
+                });
+            }
             
-            // 開始按鈕點擊事件
-            startBtn.addEventListener('click', function() {
-                socket.emit('start_stream', {}, function(response) {
-                    if (response.status === 'success') {
-                        startBtn.disabled = true;
-                        stopBtn.disabled = false;
-                        resultLabel.textContent = '等待偵測...';
-                        resultConfidence.textContent = '信心度: 0%';
-                    } else {
-                        alert('啟動失敗: ' + (response.message || '未知錯誤'));
+            // 影片上傳功能 (雲端環境)
+            if (isHuggingFace) {
+                // 拖拽上傳
+                uploadArea.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                    uploadArea.classList.add('dragover');
+                });
+                
+                uploadArea.addEventListener('dragleave', function(e) {
+                    e.preventDefault();
+                    uploadArea.classList.remove('dragover');
+                });
+                
+                uploadArea.addEventListener('drop', function(e) {
+                    e.preventDefault();
+                    uploadArea.classList.remove('dragover');
+                    const files = e.dataTransfer.files;
+                    if (files.length > 0) {
+                        handleVideoFile(files[0]);
                     }
                 });
-            });
-            
-            // 停止按鈕點擊事件
-            stopBtn.addEventListener('click', function() {
-                socket.emit('stop_stream', {}, function(response) {
-                    if (response.status === 'success') {
-                        startBtn.disabled = false;
-                        stopBtn.disabled = true;
-                        resultLabel.textContent = '未開始';
-                        resultConfidence.textContent = '信心度: 0%';
-                        handStatus.textContent = '未偵測';
-                        handStatus.className = 'camera-status bg-secondary';
+                
+                // 檔案選擇
+                videoFile.addEventListener('change', function(e) {
+                    if (e.target.files.length > 0) {
+                        handleVideoFile(e.target.files[0]);
+                    }
+                });
+                
+                // 處理影片檔案
+                function handleVideoFile(file) {
+                    if (!file.type.startsWith('video/')) {
+                        alert('請選擇影片檔案！');
+                        return;
+                    }
+                    
+                    // 顯示預覽
+                    const url = URL.createObjectURL(file);
+                    previewVideo.src = url;
+                    uploadContent.style.display = 'none';
+                    videoPreview.style.display = 'block';
+                    
+                    // 儲存檔案供後續處理
+                    window.selectedVideoFile = file;
+                }
+                
+                // 處理影片按鈕
+                processVideoBtn.addEventListener('click', function() {
+                    if (!window.selectedVideoFile) {
+                        alert('請先選擇影片檔案！');
+                        return;
                     }
+                    
+                    uploadVideo(window.selectedVideoFile);
+                });
+                
+                // 清除影片按鈕
+                clearVideoBtn.addEventListener('click', function() {
+                    previewVideo.src = '';
+                    uploadContent.style.display = 'block';
+                    videoPreview.style.display = 'none';
+                    videoFile.value = '';
+                    window.selectedVideoFile = null;
+                    
+                    // 重置結果顯示
+                    resultLabel.textContent = '未開始';
+                    resultConfidence.textContent = '信心度: 0%';
+                    probabilitiesContainer.innerHTML = '';
                 });
-            });
+                
+                // 上傳影片函數
+                function uploadVideo(file) {
+                    const formData = new FormData();
+                    formData.append('video', file);
+                    
+                    // 顯示進度
+                    uploadProgress.style.display = 'block';
+                    processVideoBtn.disabled = true;
+                    
+                    const xhr = new XMLHttpRequest();
+                    
+                    xhr.upload.addEventListener('progress', function(e) {
+                        if (e.lengthComputable) {
+                            const percentComplete = (e.loaded / e.total) * 100;
+                            document.querySelector('.progress-bar').style.width = percentComplete + '%';
+                            document.getElementById('upload-status').textContent = `上傳中... ${percentComplete.toFixed(1)}%`;
+                        }
+                    });
+                    
+                    xhr.addEventListener('load', function() {
+                        if (xhr.status === 200) {
+                            try {
+                                const response = JSON.parse(xhr.responseText);
+                                displayVideoResult(response);
+                            } catch (e) {
+                                console.error('解析回應失敗:', e);
+                                alert('處理回應時發生錯誤！');
+                            }
+                        } else {
+                            try {
+                                const errorResponse = JSON.parse(xhr.responseText);
+                                alert('影片處理失敗: ' + (errorResponse.message || '未知錯誤'));
+                            } catch (e) {
+                                alert('影片處理失敗！HTTP狀態: ' + xhr.status);
+                            }
+                        }
+                        uploadProgress.style.display = 'none';
+                        processVideoBtn.disabled = false;
+                    });
+                    
+                    xhr.addEventListener('error', function() {
+                        console.error('網路錯誤');
+                        alert('網路連接失敗，請檢查網路連接後重試！');
+                        document.getElementById('upload-status').textContent = '網路錯誤';
+                        uploadProgress.style.display = 'none';
+                        processVideoBtn.disabled = false;
+                    });
+                    
+                    xhr.addEventListener('timeout', function() {
+                        console.error('請求超時');
+                        alert('請求超時，請重試！影片可能太大或處理時間過長。');
+                        document.getElementById('upload-status').textContent = '請求超時';
+                        uploadProgress.style.display = 'none';
+                        processVideoBtn.disabled = false;
+                    });
+                    
+                    xhr.open('POST', '/process_video');
+                    xhr.timeout = 120000; // 設定 2 分鐘超時
+                    xhr.send(formData);
+                }
+                
+                // 顯示影片辨識結果
+                function displayVideoResult(result) {
+                    console.log('收到辨識結果:', result);
+                    
+                    if (result.status === 'success') {
+                        // 使用後端實際回傳的欄位名稱
+                        resultLabel.textContent = result.recognition_result || '辨識完成';
+                        resultConfidence.textContent = `信心度: ${(result.confidence * 100).toFixed(1)}%`;
+                        
+                        // 顯示單詞序列
+                        if (result.word_sequence && result.word_sequence.length > 0) {
+                            wordSequenceDisplay.textContent = result.word_sequence.join(' ');
+                        } else {
+                            wordSequenceDisplay.textContent = result.recognition_result || '無單詞序列';
+                        }
+                        
+                        // 顯示生成的句子
+                        if (result.generated_sentence) {
+                            sentenceDisplay.textContent = result.generated_sentence;
+                        } else {
+                            sentenceDisplay.textContent = result.recognition_result || '無生成句子';
+                        }
+                        
+                        // 更新狀態顯示
+                        document.getElementById('upload-status').textContent = '辨識完成！';
+                        document.querySelector('.progress-bar').style.width = '100%';
+                        
+                    } else {
+                        console.error('辨識失敗:', result);
+                        alert('影片辨識失敗: ' + (result.message || result.error || '未知錯誤'));
+                        document.getElementById('upload-status').textContent = '辨識失敗';
+                    }
+                }
+            }
             
             // 更新所有狀態顯示
             function updateStatus(status) {