feat: 初始化 Whisper 語音轉文字 Web 應用

- 整合 faster-whisper 模型進行語音轉錄
- Flask 後端 API 處理音訊檔案上傳與轉錄
- 蘋果風格極簡前端介面（Bento Grid 佈局）
- OpenCC 簡繁轉換，支援繁體中文輸出
- 支援多種音訊格式：MP3, WAV, OGG, FLAC, M4A, WebM

.gitignore

@@ -0,0 +1,39 @@
+# Virtual environment
+.venv/
+venv/
+env/
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+*.egg-info/
+dist/
+build/
+
+# Uploads
+uploads/*
+!uploads/.gitkeep
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Environment variables
+.env
+.env.local
+
+# Models (downloaded automatically)
+*.bin
+*.pt

README.md

@@ -0,0 +1,200 @@
+# 🎙️ Whisper 語音轉文字服務
+
+基於 OpenAI Whisper large-v3 turbo 模型的語音轉文字 Web 應用。使用 faster-whisper 優化版本，提供快速、準確的語音識別服務。
+
+## ✨ 功能特點
+
+- 🚀 快速轉錄：使用優化的 faster-whisper 引擎
+- 🌍 多語言支持：支持中文、英文、日文、韓文等多種語言
+- 🎯 自動語言檢測：無需手動指定語言
+- 📊 分段顯示：提供時間戳和文字分段
+- 🎨 美觀界面：現代化的 Web UI
+- 📁 拖放上傳：支持拖放文件上傳
+
+## 📋 系統需求
+
+- Python 3.11+
+- uv (Python 包管理器)
+- 至少 4GB 可用內存
+- 支持的音頻格式：MP3, WAV, OGG, FLAC, M4A, WebM
+
+## 🚀 快速開始
+
+### 1. 安裝依賴
+
+虛擬環境和依賴已經設置完成，如需重新安裝：
+
+```bash
+# 創建虛擬環境
+uv venv
+
+# 安裝依賴
+uv pip install faster-whisper flask flask-cors
+```
+
+### 2. 啟動服務
+
+使用提供的啟動腳本：
+
+```bash
+./start.sh
+```
+
+或手動啟動：
+
+```bash
+# 激活虛擬環境
+source .venv/bin/activate
+
+# 啟動應用
+python app.py
+```
+
+### 3. 訪問應用
+
+在瀏覽器中打開：
+```
+http://localhost:5000
+```
+
+## 📖 使用說明
+
+1. **上傳音頻**
+   - 點擊上傳區域選擇文件
+   - 或直接拖放音頻文件到上傳區域
+
+2. **設置選項**
+   - **語言**：選擇音頻語言或留空自動檢測
+   - **束搜索大小**：數值越大精度越高但速度越慢（推薦使用 5）
+
+3. **開始轉錄**
+   - 點擊「開始轉錄」按鈕
+   - 首次使用會自動下載模型（約 1.7GB）
+   - 等待轉錄完成
+
+4. **查看結果**
+   - 完整文字：所有轉錄內容
+   - 分段詳情：帶時間戳的文字片段
+
+## 🔧 配置說明
+
+### 修改服務端口
+
+編輯 `app.py` 文件的最後一行：
+
+```python
+app.run(debug=True, host='0.0.0.0', port=5000)  # 修改 port 值
+```
+
+### 調整模型精度
+
+在 `app.py` 中修改 `load_model()` 函數：
+
+```python
+# 選項: "float16", "int8", "int8_float16"
+model = WhisperModel("dropbox-dash/faster-whisper-large-v3-turbo", compute_type="int8")
+```
+
+- `float16`：最高精度，速度較慢，內存佔用大
+- `int8`：平衡精度和速度（推薦）
+- `int8_float16`：較快速度，略低精度
+
+### 文件大小限制
+
+編輯 `app.py` 中的配置：
+
+```python
+MAX_FILE_SIZE = 100 * 1024 * 1024  # 100MB，根據需要調整
+```
+
+## 📁 項目結構
+
+```
+faster_whisper/
+├── .venv/              # 虛擬環境
+├── app.py              # Flask 後端應用
+├── templates/
+│   └── index.html      # 前端界面
+├── uploads/            # 臨時文件存儲
+├── start.sh            # 啟動腳本
+└── README.md           # 說明文檔
+```
+
+## 🔌 API 端點
+
+### POST /api/transcribe
+
+轉錄音頻文件
+
+**請求參數：**
+- `audio` (file): 音頻文件
+- `language` (string, 可選): 語言代碼（如 "zh", "en"）
+- `beam_size` (int, 可選): 束搜索大小（默認 5）
+
+**響應示例：**
+```json
+{
+  "success": true,
+  "language": "zh",
+  "duration": 120.5,
+  "full_text": "完整的轉錄文字...",
+  "segments": [
+    {
+      "start": 0.0,
+      "end": 3.5,
+      "text": "第一段文字"
+    }
+  ]
+}
+```
+
+### GET /api/health
+
+檢查服務狀態
+
+**響應示例：**
+```json
+{
+  "status": "ok",
+  "model_loaded": true
+}
+```
+
+## ⚠️ 注意事項
+
+1. **首次運行**：首次轉錄時會自動下載模型（約 1.7GB），請確保網絡連接穩定
+2. **內存需求**：運行時至少需要 4GB 可用內存
+3. **文件清理**：上傳的臨時文件會在轉錄後自動刪除
+4. **GPU 加速**：如有 NVIDIA GPU，faster-whisper 會自動使用 CUDA 加速
+
+## 🐛 常見問題
+
+### Q: 模型下載失敗？
+A: 檢查網絡連接，或手動從 Hugging Face 下載模型並放置到本地。
+
+### Q: 內存不足？
+A: 使用 `compute_type="int8"` 降低內存佔用，或處理較短的音頻片段。
+
+### Q: 轉錄速度慢？
+A:
+- 降低 `beam_size` 值
+- 使用 `compute_type="int8"`
+- 如有 GPU，確保 CUDA 已正確安裝
+
+### Q: 支持哪些語言？
+A: Whisper 支持 99 種語言，常見的包括：中文、英文、日文、韓文、西班牙文、法文、德文等。
+
+## 📚 參考資料
+
+- [Faster Whisper GitHub](https://github.com/systran/faster-whisper)
+- [OpenAI Whisper](https://github.com/openai/whisper)
+- [Model on Hugging Face](https://huggingface.co/dropbox-dash/faster-whisper-large-v3-turbo)
+- [CTranslate2 Documentation](https://opennmt.net/CTranslate2/)
+
+## 📄 授權
+
+MIT License
+
+## 🤝 貢獻
+
+歡迎提交 Issue 和 Pull Request！

app.py

@@ -0,0 +1,139 @@
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from faster_whisper import WhisperModel
+from opencc import OpenCC
+import os
+import tempfile
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+CORS(app)
+
+# 配置
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'mp3', 'wav', 'ogg', 'flac', 'm4a', 'webm'}
+MAX_FILE_SIZE = 100 * 1024 * 1024  # 100MB
+
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# 全局模型變數
+model = None
+
+# OpenCC 轉換器（簡體轉繁體台灣）
+cc_s2tw = OpenCC('s2tw')  # 簡體到繁體（台灣）
+cc_s2twp = OpenCC('s2twp')  # 簡體到繁體（台灣）含常用詞彙轉換
+
+
+def convert_to_traditional(text, use_phrases=True):
+    """將簡體中文轉換為繁體中文（台灣）"""
+    if use_phrases:
+        return cc_s2twp.convert(text)
+    return cc_s2tw.convert(text)
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def load_model():
+    """延迟加载模型"""
+    global model
+    if model is None:
+        print("正在加载 Whisper 模型...")
+        model = WhisperModel("dropbox-dash/faster-whisper-large-v3-turbo", compute_type="int8")
+        print("模型加载完成！")
+    return model
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/transcribe', methods=['POST'])
+def transcribe():
+    try:
+        # 檢查是否有檔案
+        if 'audio' not in request.files:
+            return jsonify({'error': '沒有上傳檔案'}), 400
+
+        file = request.files['audio']
+
+        if file.filename == '':
+            return jsonify({'error': '沒有選擇檔案'}), 400
+
+        if not allowed_file(file.filename):
+            return jsonify({'error': f'不支援的檔案格式。支援的格式: {", ".join(ALLOWED_EXTENSIONS)}'}), 400
+
+        # 獲取參數
+        language = request.form.get('language', None)
+        beam_size = int(request.form.get('beam_size', 5))
+        to_traditional = request.form.get('to_traditional', 'true').lower() == 'true'
+
+        # 儲存臨時檔案
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(UPLOAD_FOLDER, filename)
+        file.save(filepath)
+
+        try:
+            # 載入模型並轉錄
+            whisper_model = load_model()
+
+            # 使用 initial_prompt 引導輸出繁體中文
+            initial_prompt = "以下是普通話的轉錄內容。" if language == 'zh' else None
+
+            segments, info = whisper_model.transcribe(
+                filepath,
+                language=language if language else None,
+                beam_size=beam_size,
+                vad_filter=True,
+                initial_prompt=initial_prompt
+            )
+
+            # 收集結果
+            results = []
+            full_text = ""
+
+            for segment in segments:
+                text = segment.text.strip()
+
+                # 如果是中文且啟用繁體轉換
+                if to_traditional and info.language == 'zh':
+                    text = convert_to_traditional(text)
+
+                segment_data = {
+                    'start': round(segment.start, 2),
+                    'end': round(segment.end, 2),
+                    'text': text
+                }
+                results.append(segment_data)
+                full_text += text + " "
+
+            # 刪除臨時檔案
+            os.remove(filepath)
+
+            return jsonify({
+                'success': True,
+                'language': info.language,
+                'duration': round(info.duration, 2),
+                'full_text': full_text.strip(),
+                'segments': results
+            })
+
+        except Exception as e:
+            # 清理臨時檔案
+            if os.path.exists(filepath):
+                os.remove(filepath)
+            raise e
+
+    except Exception as e:
+        return jsonify({'error': f'轉錄失敗: {str(e)}'}), 500
+
+@app.route('/api/health', methods=['GET'])
+def health():
+    return jsonify({'status': 'ok', 'model_loaded': model is not None})
+
+if __name__ == '__main__':
+    print("=" * 50)
+    print("Whisper 語音轉文字服務")
+    print("=" * 50)
+    print("服務將在 http://localhost:5000 啟動")
+    print("首次轉錄時會自動下載模型，請耐心等待...")
+    print("=" * 50)
+    app.run(debug=True, host='0.0.0.0', port=5000)

requirements.txt

@@ -0,0 +1,4 @@
+faster-whisper==1.2.1
+flask==3.1.2
+flask-cors==6.0.1
+opencc-python-reimplemented==0.1.7

start.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+echo "========================================"
+echo "  Whisper 語音轉文字服務啟動腳本"
+echo "========================================"
+echo ""
+
+# 激活虛擬環境
+echo "正在激活虛擬環境..."
+source .venv/bin/activate
+
+# 檢查依賴
+if ! python -c "import faster_whisper" 2>/dev/null; then
+    echo "錯誤: faster_whisper 未安裝"
+    echo "請運行: uv pip install faster-whisper flask flask-cors"
+    exit 1
+fi
+
+echo "虛擬環境已激活"
+echo ""
+echo "啟動 Flask 服務器..."
+echo "服務地址: http://localhost:5000"
+echo ""
+echo "按 Ctrl+C 停止服務"
+echo "========================================"
+echo ""
+
+# 啟動應用
+python app.py

templates/index.html

@@ -0,0 +1,876 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whisper 語音轉文字</title>
+    <style>
+        :root {
+            --primary: #0071e3;
+            --primary-hover: #0077ed;
+            --text-primary: #1d1d1f;
+            --text-secondary: #86868b;
+            --bg-primary: #ffffff;
+            --bg-secondary: #f5f5f7;
+            --bg-tertiary: #fbfbfd;
+            --border: #d2d2d7;
+            --border-light: #e8e8ed;
+            --success: #34c759;
+            --error: #ff3b30;
+            --radius-sm: 12px;
+            --radius-md: 16px;
+            --radius-lg: 24px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+            background: var(--bg-secondary);
+            min-height: 100vh;
+            color: var(--text-primary);
+            line-height: 1.5;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .page {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 60px 24px;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 48px;
+        }
+
+        .header h1 {
+            font-size: 48px;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+            margin-bottom: 12px;
+        }
+
+        .header p {
+            font-size: 19px;
+            color: var(--text-secondary);
+            font-weight: 400;
+        }
+
+        /* Bento Grid */
+        .bento-grid {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            gap: 16px;
+        }
+
+        .bento-card {
+            background: var(--bg-primary);
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .bento-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+        }
+
+        /* Upload Card - Large */
+        .upload-card {
+            grid-column: span 8;
+            min-height: 320px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .upload-area {
+            flex: 1;
+            border: 2px dashed var(--border);
+            border-radius: var(--radius-md);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background: var(--bg-tertiary);
+        }
+
+        .upload-area:hover {
+            border-color: var(--primary);
+            background: rgba(0, 113, 227, 0.02);
+        }
+
+        .upload-area.dragover {
+            border-color: var(--primary);
+            background: rgba(0, 113, 227, 0.05);
+        }
+
+        .upload-area.has-file {
+            border-style: solid;
+            border-color: var(--success);
+            background: rgba(52, 199, 89, 0.05);
+        }
+
+        .upload-icon {
+            width: 48px;
+            height: 48px;
+            color: var(--text-secondary);
+            margin-bottom: 16px;
+            transition: color 0.2s ease;
+        }
+
+        .upload-area:hover .upload-icon {
+            color: var(--primary);
+        }
+
+        .upload-area.has-file .upload-icon {
+            color: var(--success);
+        }
+
+        .upload-title {
+            font-size: 17px;
+            font-weight: 500;
+            margin-bottom: 6px;
+        }
+
+        .upload-subtitle {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .file-info {
+            display: none;
+            margin-top: 20px;
+            padding: 16px;
+            background: var(--bg-secondary);
+            border-radius: var(--radius-sm);
+        }
+
+        .file-info.active {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .file-icon {
+            width: 20px;
+            height: 20px;
+            color: var(--primary);
+        }
+
+        .file-name {
+            font-size: 14px;
+            font-weight: 500;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .file-remove {
+            width: 20px;
+            height: 20px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .file-remove:hover {
+            color: var(--error);
+        }
+
+        #fileInput {
+            display: none;
+        }
+
+        /* Settings Card */
+        .settings-card {
+            grid-column: span 4;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .card-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.02em;
+            margin-bottom: 20px;
+        }
+
+        .card-label-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-group label {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text-primary);
+        }
+
+        select {
+            appearance: none;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius-sm);
+            padding: 12px 40px 12px 16px;
+            font-size: 15px;
+            font-family: inherit;
+            color: var(--text-primary);
+            cursor: pointer;
+            transition: border-color 0.2s ease;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+        }
+
+        select:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+
+        select:hover {
+            border-color: var(--text-secondary);
+        }
+
+        /* Action Card */
+        .action-card {
+            grid-column: span 12;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 24px 32px;
+        }
+
+        .action-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+
+        .action-info-icon {
+            width: 20px;
+            height: 20px;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: var(--primary);
+            color: white;
+            padding: 14px 28px;
+            border: none;
+            border-radius: 980px;
+            font-size: 15px;
+            font-weight: 500;
+            font-family: inherit;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(:disabled) {
+            background: var(--primary-hover);
+            transform: scale(1.02);
+        }
+
+        .btn:disabled {
+            background: var(--border);
+            cursor: not-allowed;
+        }
+
+        .btn-icon {
+            width: 18px;
+            height: 18px;
+        }
+
+        /* Loading State */
+        .loading {
+            display: none;
+            grid-column: span 12;
+            text-align: center;
+            padding: 48px;
+        }
+
+        .loading.active {
+            display: block;
+        }
+
+        .spinner {
+            width: 32px;
+            height: 32px;
+            border: 3px solid var(--border-light);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin: 0 auto 16px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .loading-text {
+            font-size: 15px;
+            color: var(--text-secondary);
+        }
+
+        /* Error State */
+        .error-card {
+            display: none;
+            grid-column: span 12;
+            background: rgba(255, 59, 48, 0.08);
+            border: 1px solid rgba(255, 59, 48, 0.2);
+            padding: 20px 24px;
+        }
+
+        .error-card.active {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .error-icon {
+            width: 20px;
+            height: 20px;
+            color: var(--error);
+            flex-shrink: 0;
+        }
+
+        .error-text {
+            font-size: 14px;
+            color: var(--error);
+        }
+
+        /* Result Section */
+        .result-section {
+            display: none;
+            margin-top: 32px;
+        }
+
+        .result-section.active {
+            display: block;
+        }
+
+        .result-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 16px;
+        }
+
+        .result-title {
+            font-size: 24px;
+            font-weight: 600;
+        }
+
+        .result-meta {
+            display: flex;
+            gap: 24px;
+        }
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .meta-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        .result-grid {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            gap: 16px;
+        }
+
+        /* Transcript Card */
+        .transcript-card {
+            grid-column: span 8;
+        }
+
+        .transcript-content {
+            font-size: 17px;
+            line-height: 1.7;
+            color: var(--text-primary);
+            white-space: pre-wrap;
+        }
+
+        /* Segments Card */
+        .segments-card {
+            grid-column: span 4;
+            max-height: 480px;
+            overflow-y: auto;
+        }
+
+        .segments-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .segment-item {
+            padding: 16px;
+            background: var(--bg-secondary);
+            border-radius: var(--radius-sm);
+            transition: background 0.2s ease;
+        }
+
+        .segment-item:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .segment-time {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--primary);
+            margin-bottom: 6px;
+            font-variant-numeric: tabular-nums;
+        }
+
+        .segment-time-icon {
+            width: 12px;
+            height: 12px;
+        }
+
+        .segment-text {
+            font-size: 14px;
+            color: var(--text-primary);
+            line-height: 1.5;
+        }
+
+        /* Scrollbar */
+        .segments-card::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .segments-card::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .segments-card::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 3px;
+        }
+
+        /* Responsive */
+        @media (max-width: 968px) {
+            .upload-card,
+            .settings-card,
+            .transcript-card,
+            .segments-card {
+                grid-column: span 12;
+            }
+
+            .header h1 {
+                font-size: 36px;
+            }
+
+            .segments-card {
+                max-height: none;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .page {
+                padding: 32px 16px;
+            }
+
+            .header h1 {
+                font-size: 28px;
+            }
+
+            .header p {
+                font-size: 16px;
+            }
+
+            .bento-card {
+                padding: 24px;
+            }
+
+            .action-card {
+                flex-direction: column;
+                gap: 16px;
+            }
+
+            .action-info {
+                text-align: center;
+            }
+
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="page">
+        <header class="header">
+            <h1>語音轉文字</h1>
+            <p>上傳音訊檔案，取得精準的文字轉錄</p>
+        </header>
+
+        <div class="bento-grid">
+            <!-- Upload Card -->
+            <div class="bento-card upload-card">
+                <div class="upload-area" id="uploadArea">
+                    <svg class="upload-icon" id="uploadIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                        <polyline points="17 8 12 3 7 8"/>
+                        <line x1="12" y1="3" x2="12" y2="15"/>
+                    </svg>
+                    <p class="upload-title" id="uploadTitle">點按或拖放檔案至此處</p>
+                    <p class="upload-subtitle">支援 MP3、WAV、OGG、FLAC、M4A、WebM</p>
+                    <input type="file" id="fileInput" accept="audio/*">
+                </div>
+                <div class="file-info" id="fileInfo">
+                    <svg class="file-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M9 18V5l12-2v13"/>
+                        <circle cx="6" cy="18" r="3"/>
+                        <circle cx="18" cy="16" r="3"/>
+                    </svg>
+                    <span class="file-name" id="fileName"></span>
+                    <svg class="file-remove" id="fileRemove" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </div>
+            </div>
+
+            <!-- Settings Card -->
+            <div class="bento-card settings-card">
+                <div class="card-label">
+                    <svg class="card-label-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                    </svg>
+                    設定
+                </div>
+                <div class="form-group">
+                    <label for="language">語言</label>
+                    <select id="language">
+                        <option value="">自動偵測</option>
+                        <option value="zh">中文</option>
+                        <option value="en">English</option>
+                        <option value="ja">日本語</option>
+                        <option value="ko">한국어</option>
+                        <option value="es">Espanol</option>
+                        <option value="fr">Francais</option>
+                        <option value="de">Deutsch</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="beamSize">精確度</label>
+                    <select id="beamSize">
+                        <option value="1">快速</option>
+                        <option value="3">標準</option>
+                        <option value="5" selected>平衡</option>
+                        <option value="8">精確</option>
+                        <option value="10">最高</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="toTraditional">中文輸出</label>
+                    <select id="toTraditional">
+                        <option value="true" selected>繁體中文</option>
+                        <option value="false">保持原樣</option>
+                    </select>
+                </div>
+            </div>
+
+            <!-- Action Card -->
+            <div class="bento-card action-card">
+                <div class="action-info">
+                    <svg class="action-info-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"/>
+                        <path d="M12 16v-4"/>
+                        <path d="M12 8h.01"/>
+                    </svg>
+                    <span id="actionInfoText">選擇檔案後即可開始轉錄</span>
+                </div>
+                <button class="btn" id="transcribeBtn" disabled>
+                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="5 3 19 12 5 21 5 3"/>
+                    </svg>
+                    開始轉錄
+                </button>
+            </div>
+
+            <!-- Loading State -->
+            <div class="bento-card loading" id="loading">
+                <div class="spinner"></div>
+                <p class="loading-text">正在處理音訊，請稍候</p>
+            </div>
+
+            <!-- Error State -->
+            <div class="bento-card error-card" id="error">
+                <svg class="error-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"/>
+                    <line x1="12" y1="8" x2="12" y2="12"/>
+                    <line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+                <span class="error-text" id="errorText"></span>
+            </div>
+        </div>
+
+        <!-- Result Section -->
+        <section class="result-section" id="result">
+            <div class="result-header">
+                <h2 class="result-title">轉錄結果</h2>
+                <div class="result-meta">
+                    <div class="meta-item">
+                        <svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M2 12h20"/>
+                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+                        </svg>
+                        <span id="detectedLanguage">-</span>
+                    </div>
+                    <div class="meta-item">
+                        <svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"/>
+                            <polyline points="12 6 12 12 16 14"/>
+                        </svg>
+                        <span id="duration">-</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="result-grid">
+                <div class="bento-card transcript-card">
+                    <div class="card-label">
+                        <svg class="card-label-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+                            <polyline points="14 2 14 8 20 8"/>
+                            <line x1="16" y1="13" x2="8" y2="13"/>
+                            <line x1="16" y1="17" x2="8" y2="17"/>
+                            <line x1="10" y1="9" x2="8" y2="9"/>
+                        </svg>
+                        完整內容
+                    </div>
+                    <div class="transcript-content" id="fullText"></div>
+                </div>
+
+                <div class="bento-card segments-card">
+                    <div class="card-label">
+                        <svg class="card-label-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="8" y1="6" x2="21" y2="6"/>
+                            <line x1="8" y1="12" x2="21" y2="12"/>
+                            <line x1="8" y1="18" x2="21" y2="18"/>
+                            <line x1="3" y1="6" x2="3.01" y2="6"/>
+                            <line x1="3" y1="12" x2="3.01" y2="12"/>
+                            <line x1="3" y1="18" x2="3.01" y2="18"/>
+                        </svg>
+                        時間軸
+                    </div>
+                    <div class="segments-list" id="segments"></div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <script>
+        const uploadArea = document.getElementById('uploadArea');
+        const uploadIcon = document.getElementById('uploadIcon');
+        const uploadTitle = document.getElementById('uploadTitle');
+        const fileInput = document.getElementById('fileInput');
+        const fileInfo = document.getElementById('fileInfo');
+        const fileName = document.getElementById('fileName');
+        const fileRemove = document.getElementById('fileRemove');
+        const transcribeBtn = document.getElementById('transcribeBtn');
+        const actionInfoText = document.getElementById('actionInfoText');
+        const loading = document.getElementById('loading');
+        const result = document.getElementById('result');
+        const error = document.getElementById('error');
+        const errorText = document.getElementById('errorText');
+
+        let selectedFile = null;
+
+        // Upload area click
+        uploadArea.addEventListener('click', () => fileInput.click());
+
+        // File selection
+        fileInput.addEventListener('change', (e) => {
+            handleFile(e.target.files[0]);
+        });
+
+        // Drag and drop
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            handleFile(e.dataTransfer.files[0]);
+        });
+
+        // Remove file
+        fileRemove.addEventListener('click', (e) => {
+            e.stopPropagation();
+            clearFile();
+        });
+
+        function handleFile(file) {
+            if (!file) return;
+
+            selectedFile = file;
+            fileName.textContent = file.name;
+            fileInfo.classList.add('active');
+            uploadArea.classList.add('has-file');
+            uploadTitle.textContent = '檔案已選取';
+
+            // Update upload icon to checkmark
+            uploadIcon.innerHTML = '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>';
+
+            transcribeBtn.disabled = false;
+            actionInfoText.textContent = '準備就緒，可開始轉錄';
+
+            result.classList.remove('active');
+            error.classList.remove('active');
+        }
+
+        function clearFile() {
+            selectedFile = null;
+            fileInput.value = '';
+            fileName.textContent = '';
+            fileInfo.classList.remove('active');
+            uploadArea.classList.remove('has-file');
+            uploadTitle.textContent = '點按或拖放檔案至此處';
+
+            // Reset upload icon
+            uploadIcon.innerHTML = '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>';
+
+            transcribeBtn.disabled = true;
+            actionInfoText.textContent = '選擇檔案後即可開始轉錄';
+        }
+
+        // Transcribe button
+        transcribeBtn.addEventListener('click', async () => {
+            if (!selectedFile) return;
+
+            const formData = new FormData();
+            formData.append('audio', selectedFile);
+            formData.append('language', document.getElementById('language').value);
+            formData.append('beam_size', document.getElementById('beamSize').value);
+            formData.append('to_traditional', document.getElementById('toTraditional').value);
+
+            transcribeBtn.disabled = true;
+            loading.classList.add('active');
+            result.classList.remove('active');
+            error.classList.remove('active');
+
+            try {
+                const response = await fetch('/api/transcribe', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    displayResult(data);
+                } else {
+                    showError(data.error || '轉錄失敗');
+                }
+            } catch (err) {
+                showError('網路錯誤：' + err.message);
+            } finally {
+                loading.classList.remove('active');
+                transcribeBtn.disabled = false;
+            }
+        });
+
+        function displayResult(data) {
+            const langMap = {
+                'zh': '中文',
+                'en': 'English',
+                'ja': '日本語',
+                'ko': '한국어',
+                'es': 'Espanol',
+                'fr': 'Francais',
+                'de': 'Deutsch'
+            };
+
+            document.getElementById('detectedLanguage').textContent = langMap[data.language] || data.language.toUpperCase();
+            document.getElementById('duration').textContent = formatDuration(data.duration);
+            document.getElementById('fullText').textContent = data.full_text;
+
+            const segmentsDiv = document.getElementById('segments');
+            segmentsDiv.innerHTML = '';
+
+            data.segments.forEach(segment => {
+                const segmentDiv = document.createElement('div');
+                segmentDiv.className = 'segment-item';
+                segmentDiv.innerHTML = `
+                    <div class="segment-time">
+                        <svg class="segment-time-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"/>
+                            <polyline points="12 6 12 12 16 14"/>
+                        </svg>
+                        ${formatTime(segment.start)} - ${formatTime(segment.end)}
+                    </div>
+                    <div class="segment-text">${segment.text}</div>
+                `;
+                segmentsDiv.appendChild(segmentDiv);
+            });
+
+            result.classList.add('active');
+            actionInfoText.textContent = '轉錄完成';
+        }
+
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        function formatDuration(seconds) {
+            if (seconds < 60) {
+                return `${Math.round(seconds)} 秒`;
+            }
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.round(seconds % 60);
+            return `${mins} 分 ${secs} 秒`;
+        }
+
+        function showError(message) {
+            errorText.textContent = message;
+            error.classList.add('active');
+        }
+    </script>
+</body>
+</html>