Update app.py

app.py

@@ -253,107 +253,140 @@ async def api_transcribe_sync(request: Request):
         )
 
 # ====== Gradio 介面 ======
-with gr.Blocks(theme=gr.themes.Soft(), title="LINE Audio Transcription") as demo:
-    gr.Markdown("# 🎧 LINE Audio Transcription & Summary")
+with gr.Blocks(
+    theme=gr.themes.Soft(),
+    title="LINE Audio Transcription",
+    css="""
+    /* 手機優化樣式 */
+    @media (max-width: 768px) {
+        .gradio-container {
+            padding: 10px !important;
+        }
+        /* 強制單欄布局 */
+        .contain {
+            flex-direction: column !important;
+        }
+        /* 調整按鈕大小 */
+        button {
+            font-size: 16px !important;
+            padding: 12px !important;
+        }
+        /* 調整輸入框 */
+        input, textarea {
+            font-size: 16px !important;
+        }
+        /* Tab 標籤更大更好點擊 */
+        .tabs button {
+            padding: 12px 16px !important;
+            font-size: 15px !important;
+        }
+    }
+    """
+) as demo:
+    gr.Markdown("# 🎧 LINE Audio Transcription")
     
     with gr.Tab("🌐 Web Upload"):
-        gr.Markdown("### Upload audio file directly from browser")
-        with gr.Row():
-            with gr.Column(scale=1):
-                pw_ui = gr.Textbox(label="Password", type="password")
-                file_ui = gr.File(label="Upload Audio File", file_types=["audio"])
-                btn_ui = gr.Button("Start Transcription 🚀", variant="primary", size="lg")
-            with gr.Column(scale=2):
-                status_ui = gr.Textbox(label="Status", interactive=False)
-                transcript_ui = gr.Textbox(label="Transcription Result", lines=10)
-                summary_ui = gr.Textbox(label="AI Summary", lines=6)
+        gr.Markdown("### Upload audio file from browser")
         
-        btn_ui.click(transcribe_ui, [pw_ui, file_ui], [status_ui, transcript_ui, summary_ui])
-    
-    with gr.Tab("📱 API Documentation"):
-        gr.Markdown("""
-        ### 🚀 Synchronous API (Recommended for iPhone Shortcuts)
-        
-        **Endpoint**: `/api/transcribe` (POST)
+        # 手機版:改用單欄布局
+        pw_ui = gr.Textbox(
+            label="Password", 
+            type="password",
+            placeholder="Enter password"
+        )
+        file_ui = gr.File(
+            label="Upload Audio File", 
+            file_types=["audio"]
+        )
+        btn_ui = gr.Button(
+            "Start Transcription 🚀", 
+            variant="primary", 
+            size="lg"
+        )
         
-        ✅ **完全同步** - 直接返回結果,無需輪詢
+        status_ui = gr.Textbox(
+            label="Status", 
+            interactive=False,
+            show_label=True
+        )
+        transcript_ui = gr.Textbox(
+            label="Transcription Result", 
+            lines=8,
+            placeholder="Transcription will appear here...",
+            show_copy_button=True
+        )
+        summary_ui = gr.Textbox(
+            label="AI Summary", 
+            lines=5,
+            placeholder="Summary will appear here...",
+            show_copy_button=True
+        )
         
-        ✅ **穩定可靠** - 不受音檔長度影響,自動等待完成
+        btn_ui.click(
+            transcribe_ui, 
+            inputs=[pw_ui, file_ui], 
+            outputs=[status_ui, transcript_ui, summary_ui]
+        )
+    
+    with gr.Tab("📱 API Info"):
+        gr.Markdown("""
+        ### iPhone Shortcuts Integration
         
-        ---
+        **Endpoint:**
+        ```
+        POST /api/transcribe
+        ```
         
-        #### Request Format (JSON):
+        **Request (JSON):**
         ```json
         {
           "password": "your_password",
-          "file_data": "data:audio/m4a;base64,UklGR...",
+          "file_data": "data:audio/m4a;base64,...",
           "file_name": "recording.m4a"
         }
         ```
         
-        #### Response Format:
+        **Response:**
         ```json
         {
           "status": "success",
-          "transcription": "轉錄內容...",
-          "summary": "摘要內容..."
+          "transcription": "...",
+          "summary": "..."
         }
         ```
         
         ---
         
-        ### 📱 iPhone Shortcuts 設定
-        
-        **動作流程:**
+        ### Key Points
         
-        1. **取得檔案** → 語音檔
-        2. **Base64 編碼**
-        3. **文字** (組合 data URL):
-           ```
-           data:audio/m4a;base64,Base64編碼結果
-           ```
-        4. **字典** (請求本文):
-           - 鍵: `password`, 值: `chou`
-           - 鍵: `file_data`, 值: 上一步的文字
-           - 鍵: `file_name`, 值: `recording.m4a`
-        5. **取得 URL 內容**:
-           - URL: `https://你的網址/api/transcribe`
-           - 方法: `POST`
-           - 標頭: `Content-Type` = `application/json`
-           - 請求本文: 上一步的字典
-           - 請求本文類型: `JSON`
-        6. **從字典取得值**:
-           - 鍵: `transcription` → 轉錄結果
-           - 鍵: `summary` → 摘要
+        ✅ **Fully synchronous** - Returns result directly
         
-        ---
+        ✅ **No polling needed** - Waits until completion
         
-        ### 💡 重要提醒
+        ✅ **Works with any audio length** - Auto-handles long files
         
-        - ✅ 這個端點**完全同步**,會等待轉錄完成後才返回
-        - ✅ 無論音檔多長,都會自動處理完成
-        - ✅ 不需要設定等待時間或輪詢機制
-        - ✅ 直接取得最終結果,不會有 `event_id`
+        ---
         
-        ### 🧪 測試 API
+        ### Shortcuts Setup
         
-        使用 curl 測試:
-        ```bash
-        curl -X POST https://你的網址/api/transcribe \\
-          -H "Content-Type: application/json" \\
-          -d '{
-            "password": "chou",
-            "file_data": "data:audio/m4a;base64,AAAA...",
-            "file_name": "test.m4a"
-          }'
-        ```
+        1. Get file → Your audio
+        2. Base64 encode
+        3. Text: `data:audio/m4a;base64,[encoded]`
+        4. Dictionary:
+           - `password`: `chou`
+           - `file_data`: Step 3 text
+           - `file_name`: `recording.m4a`
+        5. Get URL contents:
+           - URL: `/api/transcribe`
+           - Method: POST
+           - Header: `Content-Type: application/json`
+           - Body: Step 4 dictionary (JSON)
+        6. Get `transcription` and `summary` from response
         """)
     
     gr.Markdown("""
     ---
-    💡 **Supported Formats**: MP4, M4A, MP3, WAV, OGG, WEBM  
-    📦 **Max File Size**: 25MB per chunk (auto-split)  
-    🔒 **Security**: Password-protected
+    💡 **Formats**: MP4, M4A, MP3, WAV, OGG, WEBM | **Max**: 25MB/chunk | 🔒 **Password-protected**
     """)
 
 # ====== 掛載 Gradio 到 FastAPI ======