Update app.py

app.py

@@ -163,21 +163,26 @@ with gr.Blocks(
     theme=gr.themes.Soft(), 
     title="PDF 摘要助手",
     css="""
-    /* 全域樣式 */
+    /* 修復頁面大小問題 */
     .gradio-container {
-        max-width: 1200px !important;
+        max-width: none !important;
+        width: 100% !important;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-        min-height: 100vh;
+        min-height: 100vh !important;
+        padding: 0 !important;
+        margin: 0 !important;
     }
     
-    /* 主要內容區域 */
+    /* 主要內容區域 - 修復大小問題 */
     .main-content {
         background: rgba(255, 255, 255, 0.95) !important;
         border-radius: 20px !important;
-        margin: 20px !important;
+        margin: 20px auto !important;
         padding: 30px !important;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
         backdrop-filter: blur(10px) !important;
+        max-width: 1400px !important;
+        width: calc(100% - 40px) !important;
     }
     
     /* 標題樣式 */
@@ -185,58 +190,48 @@ with gr.Blocks(
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
         -webkit-background-clip: text !important;
         -webkit-text-fill-color: transparent !important;
+        background-clip: text !important;
         text-align: center !important;
         font-size: 2.5em !important;
         font-weight: bold !important;
         margin-bottom: 20px !important;
     }
     
-    /* 分頁導航 */
-    .tab-nav {
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
-        border-radius: 15px 15px 0 0 !important;
-        padding: 10px !important;
-    }
-    
-    .tab-nav button {
-        background: rgba(255, 255, 255, 0.2) !important;
-        color: white !important;
-        border: none !important;
-        border-radius: 10px !important;
-        margin: 0 5px !important;
-        padding: 12px 24px !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    .tab-nav button:hover {
-        background: rgba(255, 255, 255, 0.3) !important;
-        transform: translateY(-2px) !important;
+    /* 分頁導航 - 修復點擊問題 */
+    .gradio-tabs {
+        border-radius: 15px !important;
+        overflow: hidden !important;
     }
     
-    .tab-nav button.selected {
+    .gradio-tabitem {
+        padding: 25px !important;
         background: white !important;
-        color: #764ba2 !important;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
+        border-radius: 0 0 15px 15px !important;
     }
     
-    /* 輸入框樣式 */
-    .gr-textbox input, .gr-textbox textarea {
+    /* 輸入框樣式 - 修復交互問題 */
+    input[type="text"], 
+    input[type="password"], 
+    textarea {
         border: 2px solid #e0e6ff !important;
         border-radius: 12px !important;
         padding: 15px !important;
         font-size: 16px !important;
         transition: all 0.3s ease !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
     }
     
-    .gr-textbox input:focus, .gr-textbox textarea:focus {
+    input[type="text"]:focus, 
+    input[type="password"]:focus, 
+    textarea:focus {
         border-color: #667eea !important;
         box-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
         outline: none !important;
     }
     
-    /* 按鈕樣式 */
-    .gr-button {
+    /* 按鈕樣式 - 修復點擊問題 */
+    button {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
         border: none !important;
         border-radius: 12px !important;
@@ -246,101 +241,111 @@ with gr.Blocks(
         font-size: 16px !important;
         transition: all 0.3s ease !important;
         box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
+        cursor: pointer !important;
+        pointer-events: auto !important;
+        z-index: 100 !important;
+        position: relative !important;
     }
     
-    .gr-button:hover {
-        transform: translateY(-3px) !important;
+    button:hover {
+        transform: translateY(-2px) !important;
         box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
     }
     
-    .gr-button.secondary {
+    button:active {
+        transform: translateY(0px) !important;
+    }
+    
+    /* 次要按鈕 */
+    button.secondary,
+    button[variant="secondary"] {
         background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
     }
     
     /* 文件上傳區域 */
-    .gr-file {
+    .file-upload-area {
         border: 3px dashed #667eea !important;
         border-radius: 15px !important;
         background: rgba(102, 126, 234, 0.05) !important;
         padding: 40px !important;
         text-align: center !important;
         transition: all 0.3s ease !important;
+        min-height: 120px !important;
     }
     
-    .gr-file:hover {
+    .file-upload-area:hover {
         background: rgba(102, 126, 234, 0.1) !important;
         border-color: #764ba2 !important;
     }
     
-    /* 單選按鈕樣式 */
-    .gr-radio {
+    /* 單選按鈕容器 */
+    .radio-group {
         background: rgba(102, 126, 234, 0.05) !important;
         border-radius: 12px !important;
         padding: 20px !important;
-    }
-    
-    /* 卡片樣式 */
-    .gr-panel {
-        background: rgba(255, 255, 255, 0.9) !important;
-        border-radius: 15px !important;
-        border: 1px solid rgba(102, 126, 234, 0.2) !important;
-        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
-        padding: 25px !important;
         margin: 10px 0 !important;
     }
     
-    /* 隱藏 Gradio logo */
-    .gradio-container footer {
-        display: none !important;
+    /* 輸出文本區域 */
+    .output-text {
+        background: #f8f9ff !important;
+        border: 1px solid #e0e6ff !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
+        min-height: 200px !important;
     }
     
-    .footer {
+    /* 隱藏 Gradio logo 和 footer */
+    footer,
+    .gradio-container footer,
+    div[class*="footer"],
+    div[class*="Footer"],
+    .gr-footer {
         display: none !important;
     }
     
-    /* 隱藏底部所有元素 */
-    div[class*="footer"], 
-    div[class*="Footer"],
-    .gr-footer,
-    footer {
-        display: none !important;
+    /* 修復響應式問題 */
+    .gr-row {
+        display: flex !important;
+        gap: 20px !important;
+        width: 100% !important;
     }
     
-    /* 頁面動畫 */
-    @keyframes fadeInUp {
-        from {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
+    .gr-column {
+        flex: 1 !important;
+        min-width: 0 !important;
     }
     
-    .gr-panel {
-        animation: fadeInUp 0.6s ease-out !important;
+    /* 確保所有元素可以正常交互 */
+    * {
+        pointer-events: auto !important;
     }
     
     /* 響應式設計 */
     @media (max-width: 768px) {
-        .gradio-container {
-            margin: 10px !important;
-        }
-        
         .main-content {
-            padding: 20px !important;
             margin: 10px !important;
+            padding: 20px !important;
+            width: calc(100% - 20px) !important;
         }
         
         .main-header {
-            font-size: 2em !important;
+            font-size: 1.8em !important;
+        }
+        
+        .gr-row {
+            flex-direction: column !important;
+        }
+        
+        button {
+            width: 100% !important;
+            margin: 5px 0 !important;
         }
     }
     """
 ) as demo:
     with gr.Column(elem_classes="main-content"):
-        gr.Markdown("""
+        gr.HTML("""
         <div class="main-header">📄 PDF 摘要 & 問答助手</div>
         
         <div style="text-align: center; margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border-radius: 15px; border-left: 5px solid #667eea;">