Update app.py

app.py

@@ -260,25 +260,44 @@ with gr.Blocks(
     /* 手機優化樣式 */
     @media (max-width: 768px) {
         .gradio-container {
-            padding: 10px !important;
+            padding: 8px !important;
         }
-        /* 強制單欄布局 */
-        .contain {
-            flex-direction: column !important;
+        /* 限制檔案上傳區塊高度 */
+        .file-upload {
+            max-height: 180px !important;
         }
-        /* 調整按鈕大小 */
+        /* 限制圖示大小 */
+        .file-upload svg, .file-upload img {
+            max-width: 80px !important;
+            max-height: 80px !important;
+        }
+        /* 調整按鈕 */
         button {
             font-size: 16px !important;
-            padding: 12px !important;
+            padding: 14px !important;
+            margin: 8px 0 !important;
+        }
+        /* Tab 標籤 */
+        .tabs button {
+            padding: 10px 14px !important;
+            font-size: 14px !important;
+        }
+        /* 標題更緊湊 */
+        h1 {
+            font-size: 24px !important;
+            margin: 10px 0 !important;
+        }
+        h3 {
+            font-size: 16px !important;
+            margin: 8px 0 !important;
         }
-        /* 調整輸入框 */
+        /* 輸入框 */
         input, textarea {
             font-size: 16px !important;
         }
-        /* Tab 標籤更大更好點擊 */
-        .tabs button {
-            padding: 12px 16px !important;
-            font-size: 15px !important;
+        /* 減少內邊距 */
+        .block {
+            padding: 8px !important;
         }
     }
     """
@@ -286,40 +305,46 @@ with gr.Blocks(
     gr.Markdown("# 🎧 LINE Audio Transcription")
     
     with gr.Tab("🌐 Web Upload"):
-        gr.Markdown("### Upload audio file from browser")
+        gr.Markdown("### Upload audio from browser")
         
-        # 手機版:改用單欄布局
         pw_ui = gr.Textbox(
             label="Password", 
             type="password",
-            placeholder="Enter password"
+            placeholder="Enter password",
+            scale=1
         )
         file_ui = gr.File(
             label="Upload Audio File", 
-            file_types=["audio"]
+            file_types=["audio"],
+            file_count="single",
+            scale=1,
+            elem_classes=["file-upload"]
         )
         btn_ui = gr.Button(
-            "Start Transcription 🚀", 
+            "🚀 Start Transcription", 
             variant="primary", 
-            size="lg"
+            size="lg",
+            scale=1
         )
         
         status_ui = gr.Textbox(
             label="Status", 
             interactive=False,
-            show_label=True
+            scale=1
         )
         transcript_ui = gr.Textbox(
-            label="Transcription Result", 
-            lines=8,
+            label="Transcription", 
+            lines=6,
             placeholder="Transcription will appear here...",
-            show_copy_button=True
+            show_copy_button=True,
+            scale=1
         )
         summary_ui = gr.Textbox(
-            label="AI Summary", 
-            lines=5,
+            label="Summary", 
+            lines=4,
             placeholder="Summary will appear here...",
-            show_copy_button=True
+            show_copy_button=True,
+            scale=1
         )
         
         btn_ui.click(
@@ -328,16 +353,13 @@ with gr.Blocks(
             outputs=[status_ui, transcript_ui, summary_ui]
         )
     
-    with gr.Tab("📱 API Info"):
+    with gr.Tab("📱 API"):
         gr.Markdown("""
-        ### iPhone Shortcuts Integration
+        ### iPhone Shortcuts
         
-        **Endpoint:**
-        ```
-        POST /api/transcribe
-        ```
+        **Endpoint:** `POST /api/transcribe`
         
-        **Request (JSON):**
+        **Request:**
         ```json
         {
           "password": "your_password",
@@ -357,36 +379,32 @@ with gr.Blocks(
         
         ---
         
-        ### Key Points
-        
-        ✅ **Fully synchronous** - Returns result directly
-        
-        ✅ **No polling needed** - Waits until completion
-        
-        ✅ **Works with any audio length** - Auto-handles long files
+        ✅ Fully synchronous  
+        ✅ No polling needed  
+        ✅ Works with any audio length
         
         ---
         
-        ### Shortcuts Setup
+        **Setup Steps:**
         
-        1. Get file → Your audio
+        1. Get file → Audio
         2. Base64 encode
         3. Text: `data:audio/m4a;base64,[encoded]`
-        4. Dictionary:
+        4. Dictionary with 3 text fields:
            - `password`: `chou`
-           - `file_data`: Step 3 text
+           - `file_data`: Step 3
            - `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
+           - Body: Step 4 (JSON)
+        6. Get `transcription` & `summary`
         """)
     
     gr.Markdown("""
     ---
-    💡 **Formats**: MP4, M4A, MP3, WAV, OGG, WEBM | **Max**: 25MB/chunk | 🔒 **Password-protected**
+    💡 **Formats:** MP4, M4A, MP3, WAV, OGG, WEBM | **Max:** 25MB/chunk | 🔒 Password-protected
     """)
 
 # ====== 掛載 Gradio 到 FastAPI ======