Update app.py

app.py

@@ -230,11 +230,18 @@ with gr.Blocks(
         outline: none !important;
     }
     
-    /* 按鈕樣式 - 修復點擊問題 */
+    /* 按鈕樣式 - 強力修復所有按鈕 */
     button, 
     .gr-button,
     input[type="submit"],
-    input[type="button"] {
+    input[type="button"],
+    #summary-button,
+    #clear-button,
+    #question-button,
+    #api-key-button,
+    #model-button,
+    .action-button,
+    [data-testid*="button"] {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
         border: none !important;
         border-radius: 12px !important;
@@ -246,17 +253,29 @@ with gr.Blocks(
         box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
         cursor: pointer !important;
         pointer-events: auto !important;
-        z-index: 1000 !important;
+        z-index: 9999 !important;
         position: relative !important;
         display: inline-block !important;
         min-height: 44px !important;
         line-height: normal !important;
+        width: auto !important;
+        min-width: 120px !important;
+        text-align: center !important;
+        user-select: none !important;
+        margin: 10px 5px !important;
     }
     
     button:hover, 
     .gr-button:hover,
     input[type="submit"]:hover,
-    input[type="button"]:hover {
+    input[type="button"]:hover,
+    #summary-button:hover,
+    #clear-button:hover,
+    #question-button:hover,
+    #api-key-button:hover,
+    #model-button:hover,
+    .action-button:hover,
+    [data-testid*="button"]:hover {
         transform: translateY(-2px) !important;
         box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
         background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
@@ -265,7 +284,14 @@ with gr.Blocks(
     button:active, 
     .gr-button:active,
     input[type="submit"]:active,
-    input[type="button"]:active {
+    input[type="button"]:active,
+    #summary-button:active,
+    #clear-button:active,
+    #question-button:active,
+    #api-key-button:active,
+    #model-button:active,
+    .action-button:active,
+    [data-testid*="button"]:active {
         transform: translateY(0px) !important;
         box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4) !important;
     }
@@ -273,27 +299,44 @@ with gr.Blocks(
     /* 次要按鈕樣式 */
     button[data-testid*="secondary"],
     .gr-button.secondary,
-    button.secondary {
+    button.secondary,
+    #clear-button,
+    #model-button,
+    .secondary-btn,
+    button[variant="secondary"] {
         background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
     }
     
     button[data-testid*="secondary"]:hover,
     .gr-button.secondary:hover,
-    button.secondary:hover {
+    button.secondary:hover,
+    #clear-button:hover,
+    #model-button:hover,
+    .secondary-btn:hover,
+    button[variant="secondary"]:hover {
         background: linear-gradient(135deg, #e081e9 0%, #e3455a 100%) !important;
     }
     
     /* 修復 Gradio 特定的按鈕容器 */
+    .gr-form,
     .gr-form > div,
     .gr-button-group,
-    div[data-testid="button"] {
+    div[data-testid="button"],
+    div[data-testid*="button"] {
         pointer-events: auto !important;
-        z-index: 999 !important;
+        z-index: 9998 !important;
     }
     
-    /* 確保按鈕內的文字可點擊 */
+    /* 確保按鈕內的文字和圖標不會阻擋點擊 */
     button span,
-    .gr-button span {
+    button svg,
+    button i,
+    .gr-button span,
+    .gr-button svg,
+    .gr-button i,
+    .action-button span,
+    .action-button svg,
+    .action-button i {
         pointer-events: none !important;
         user-select: none !important;
     }
@@ -381,29 +424,115 @@ with gr.Blocks(
     </style>
     <script>
     document.addEventListener('DOMContentLoaded', function() {
-        // 確保所有按鈕都可以點擊
-        function fixButtons() {
-            const buttons = document.querySelectorAll('button, input[type="submit"], input[type="button"]');
-            buttons.forEach(btn => {
-                btn.style.pointerEvents = 'auto';
-                btn.style.cursor = 'pointer';
-                btn.style.zIndex = '1000';
-                btn.style.position = 'relative';
+        console.log('開始修復按鈕...');
+        
+        // 強力修復所有按鈕
+        function fixAllButtons() {
+            // 所有可能的按鈕選擇器
+            const selectors = [
+                'button',
+                'input[type="submit"]', 
+                'input[type="button"]',
+                '.gr-button',
+                '[data-testid*="button"]',
+                '#summary-button',
+                '#clear-button', 
+                '#question-button',
+                '#api-key-button',
+                '#model-button',
+                '.action-button',
+                '.primary-btn',
+                '.secondary-btn'
+            ];
+            
+            let buttonCount = 0;
+            selectors.forEach(selector => {
+                const elements = document.querySelectorAll(selector);
+                elements.forEach(btn => {
+                    if (btn) {
+                        // 強制設定樣式
+                        btn.style.pointerEvents = 'auto';
+                        btn.style.cursor = 'pointer';
+                        btn.style.zIndex = '9999';
+                        btn.style.position = 'relative';
+                        btn.style.display = 'inline-block';
+                        btn.style.minHeight = '44px';
+                        btn.style.minWidth = '120px';
+                        btn.style.padding = '15px 30px';
+                        btn.style.borderRadius = '12px';
+                        btn.style.border = 'none';
+                        btn.style.fontWeight = '600';
+                        btn.style.fontSize = '16px';
+                        btn.style.color = 'white';
+                        btn.style.userSelect = 'none';
+                        btn.style.margin = '10px 5px';
+                        btn.style.textAlign = 'center';
+                        
+                        // 設定背景色
+                        if (btn.id === 'clear-button' || 
+                            btn.id === 'model-button' || 
+                            btn.classList.contains('secondary-btn')) {
+                            btn.style.background = 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)';
+                        } else {
+                            btn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+                        }
+                        
+                        // 移除可能阻止點擊的屬性
+                        btn.removeAttribute('disabled');
+                        
+                        // 確保子元素不會阻止點擊
+                        const children = btn.querySelectorAll('*');
+                        children.forEach(child => {
+                            child.style.pointerEvents = 'none';
+                            child.style.userSelect = 'none';
+                        });
+                        
+                        buttonCount++;
+                    }
+                });
             });
+            
+            console.log(`修復了 ${buttonCount} 個按鈕`);
         }
         
-        // 初始修復
-        fixButtons();
+        // 立即修復
+        fixAllButtons();
         
-        // 定期檢查並修復新出現的按鈕
-        setInterval(fixButtons, 1000);
+        // 每秒檢查一次
+        setInterval(fixAllButtons, 1000);
         
         // 監聽 DOM 變化
-        const observer = new MutationObserver(fixButtons);
+        const observer = new MutationObserver(function(mutations) {
+            let shouldFix = false;
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(function(node) {
+                        if (node.nodeType === 1) { // 元素節點
+                            if (node.tagName === 'BUTTON' || 
+                                node.querySelector && node.querySelector('button')) {
+                                shouldFix = true;
+                            }
+                        }
+                    });
+                }
+            });
+            
+            if (shouldFix) {
+                setTimeout(fixAllButtons, 100);
+            }
+        });
+        
         observer.observe(document.body, { 
             childList: true, 
-            subtree: true 
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style', 'class']
         });
+        
+        // 添加全域點擊事件監聽
+        document.addEventListener('click', function(e) {
+            console.log('點擊事件:', e.target);
+        }, true);
     });
     </script>
     <style>
@@ -470,6 +599,13 @@ with gr.Blocks(
                         placeholder="請輸入您的 OpenAI API Key (sk-...)",
                         elem_classes="api-input"
                     )
+                    # 添加確認按鈕
+                    api_key_btn = gr.Button(
+                        "✅ 確認設定 API Key",
+                        variant="primary",
+                        elem_id="api-key-button",
+                        elem_classes="action-button primary-btn"
+                    )
                     api_key_status = gr.Textbox(
                         label="📊 API 連接狀態", 
                         interactive=False,
@@ -484,6 +620,13 @@ with gr.Blocks(
                         value="gpt-4",
                         elem_classes="model-selector"
                     )
+                    # 添加模型確認按鈕
+                    model_btn = gr.Button(
+                        "🎯 確認選擇模型",
+                        variant="secondary", 
+                        elem_id="model-button",
+                        elem_classes="action-button secondary-btn"
+                    )
                     model_status = gr.Textbox(
                         label="🎯 當前模型", 
                         interactive=False,
@@ -491,8 +634,17 @@ with gr.Blocks(
                         elem_classes="status-display"
                     )
             
-            # 添加測試按鈕
-            gr.HTML("<div style='margin: 20px 0; padding: 15px; background: rgba(102, 126, 234, 0.1); border-radius: 10px;'><strong>💡 提示：</strong> 設定完成後，請前往「PDF 處理」頁面上傳文件開始使用！</div>")
+            # 添加使用說明
+            gr.HTML("""
+            <div style='margin: 20px 0; padding: 15px; background: rgba(102, 126, 234, 0.1); border-radius: 10px;'>
+                <strong>📋 使用步驟：</strong>
+                <ol style='margin: 10px 0; padding-left: 20px;'>
+                    <li>輸入您的 OpenAI API Key 並點擊「確認設定」</li>
+                    <li>選擇 AI 模型並點擊「確認選擇」</li>
+                    <li>前往「PDF 處理」頁面上傳文件開始使用！</li>
+                </ol>
+            </div>
+            """)
     
         with gr.Tab("📄 PDF 處理", elem_classes="pdf-tab"):
             gr.Markdown("### 📁 文件上傳與摘要生成")
@@ -509,12 +661,14 @@ with gr.Blocks(
                         summary_btn = gr.Button(
                             "🔄 開始生成摘要", 
                             variant="primary",
-                            elem_classes="primary-btn"
+                            elem_id="summary-button",
+                            elem_classes="action-button primary-btn"
                         )
                         clear_btn = gr.Button(
                             "🗑️ 清除所有資料", 
                             variant="secondary",
-                            elem_classes="secondary-btn"
+                            elem_id="clear-button", 
+                            elem_classes="action-button secondary-btn"
                         )
                 
                 with gr.Column():
@@ -538,7 +692,8 @@ with gr.Blocks(
                     question_btn = gr.Button(
                         "📤 發送問題", 
                         variant="primary",
-                        elem_classes="primary-btn"
+                        elem_id="question-button",
+                        elem_classes="action-button primary-btn"
                     )
                     
                     gr.Markdown("""
@@ -558,11 +713,22 @@ with gr.Blocks(
                     )
     
     # 事件處理器
+    # API Key 設定事件
+    api_key_btn.click(set_api_key, inputs=api_key_input, outputs=api_key_status)
     api_key_input.submit(set_api_key, inputs=api_key_input, outputs=api_key_status)
+    
+    # 模型選擇事件
+    model_btn.click(set_model, inputs=model_choice, outputs=model_status)
     model_choice.change(set_model, inputs=model_choice, outputs=model_status)
+    
+    # PDF 處理事件
     summary_btn.click(generate_summary, inputs=pdf_upload, outputs=summary_output)
+    
+    # 問答事件
     question_btn.click(ask_question, inputs=question_input, outputs=answer_output)
     question_input.submit(ask_question, inputs=question_input, outputs=answer_output)
+    
+    # 清除功能
     clear_btn.click(clear_all, outputs=[summary_output, question_input, answer_output])
 
 if __name__ == "__main__":