Update app.py

app.py

@@ -163,88 +163,304 @@ with gr.Blocks(
     theme=gr.themes.Soft(), 
     title="PDF 摘要助手",
     css="""
+    /* 全域樣式 */
     .gradio-container {
         max-width: 1200px !important;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        min-height: 100vh;
     }
+    
+    /* 主要內容區域 */
+    .main-content {
+        background: rgba(255, 255, 255, 0.95) !important;
+        border-radius: 20px !important;
+        margin: 20px !important;
+        padding: 30px !important;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
+        backdrop-filter: blur(10px) !important;
+    }
+    
+    /* 標題樣式 */
+    .main-header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        -webkit-background-clip: text !important;
+        -webkit-text-fill-color: transparent !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%);
+        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;
+    }
+    
+    .tab-nav button.selected {
+        background: white !important;
+        color: #764ba2 !important;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
+    }
+    
+    /* 輸入框樣式 */
+    .gr-textbox input, .gr-textbox textarea {
+        border: 2px solid #e0e6ff !important;
+        border-radius: 12px !important;
+        padding: 15px !important;
+        font-size: 16px !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .gr-textbox input:focus, .gr-textbox textarea:focus {
+        border-color: #667eea !important;
+        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
+        outline: none !important;
+    }
+    
+    /* 按鈕樣式 */
+    .gr-button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        border: none !important;
+        border-radius: 12px !important;
+        color: white !important;
+        font-weight: 600 !important;
+        padding: 15px 30px !important;
+        font-size: 16px !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
+    }
+    
+    .gr-button:hover {
+        transform: translateY(-3px) !important;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
+    }
+    
+    .gr-button.secondary {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
+    }
+    
+    /* 文件上傳區域 */
+    .gr-file {
+        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;
+    }
+    
+    .gr-file:hover {
+        background: rgba(102, 126, 234, 0.1) !important;
+        border-color: #764ba2 !important;
+    }
+    
+    /* 單選按鈕樣式 */
+    .gr-radio {
+        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;
     }
-    """
-) as demo:
-    gr.Markdown("""
-    # 📄 PDF 摘要 & 問答助手
     
-    🚀 **歡迎使用 PDF 智能分析工具！**
+    .footer {
+        display: none !important;
+    }
+    
+    /* 隱藏底部所有元素 */
+    div[class*="footer"], 
+    div[class*="Footer"],
+    .gr-footer,
+    footer {
+        display: none !important;
+    }
     
-    這個工具可以幫助您：
-    - 📋 自動生成 PDF 文檔摘要
-    - 🤖 基於文檔內容回答問題  
-    - 💡 快速理解長篇文檔的核心內容
+    /* 頁面動畫 */
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
     
-    ⚠️ **使用前請先在「設定」頁面輸入您的 OpenAI API Key**
+    .gr-panel {
+        animation: fadeInUp 0.6s ease-out !important;
+    }
     
-    ---
-    """)
+    /* 響應式設計 */
+    @media (max-width: 768px) {
+        .gradio-container {
+            margin: 10px !important;
+        }
+        
+        .main-content {
+            padding: 20px !important;
+            margin: 10px !important;
+        }
+        
+        .main-header {
+            font-size: 2em !important;
+        }
+    }
+    """
+) as demo:
+    with gr.Column(elem_classes="main-content"):
+        gr.Markdown("""
+        <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;">
+            <h3 style="color: #667eea; margin-bottom: 15px;">🚀 歡迎使用 PDF 智能分析工具！</h3>
+            <div style="display: flex; justify-content: space-around; flex-wrap: wrap; margin: 20px 0;">
+                <div style="margin: 10px; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); min-width: 200px;">
+                    <div style="font-size: 24px; margin-bottom: 10px;">📋</div>
+                    <strong>智能摘要生成</strong><br>
+                    <span style="color: #666;">自動分析 PDF 內容並生成結構化摘要</span>
+                </div>
+                <div style="margin: 10px; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); min-width: 200px;">
+                    <div style="font-size: 24px; margin-bottom: 10px;">🤖</div>
+                    <strong>AI 問答系統</strong><br>
+                    <span style="color: #666;">基於文檔內容回答您的問題</span>
+                </div>
+                <div style="margin: 10px; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); min-width: 200px;">
+                    <div style="font-size: 24px; margin-bottom: 10px;">💡</div>
+                    <strong>快速理解</strong><br>
+                    <span style="color: #666;">快速掌握長篇文檔的核心內容</span>
+                </div>
+            </div>
+            <div style="background: rgba(255, 193, 7, 0.1); padding: 15px; border-radius: 10px; border-left: 4px solid #ffc107; margin-top: 20px;">
+                <strong style="color: #e65100;">⚠️ 重要提醒：</strong> 使用前請先在「🔧 設定」頁面輸入您的 OpenAI API Key
+            </div>
+        </div>
+        """)
     
-    with gr.Tab("🔧 設定"):
-        with gr.Row():
-            with gr.Column():
-                api_key_input = gr.Textbox(
-                    label="🔑 輸入 OpenAI API Key", 
-                    type="password",
-                    placeholder="請輸入您的 OpenAI API Key"
-                )
-                api_key_status = gr.Textbox(
-                    label="API 狀態", 
-                    interactive=False,
-                    value="等待設定 API Key..."
-                )
-            
-            with gr.Column():
-                model_choice = gr.Radio(
-                    ["gpt-4", "gpt-4.1", "gpt-4.5"], 
-                    label="🤖 選擇模型",
-                    value="gpt-4"
-                )
-                model_status = gr.Textbox(
-                    label="模型狀態", 
-                    interactive=False,
-                    value="✅ 模型已選擇：gpt-4"
-                )
+        with gr.Tab("🔧 設定", elem_classes="settings-tab"):
+            gr.Markdown("### ⚙️ 基本設定")
+            with gr.Row():
+                with gr.Column():
+                    api_key_input = gr.Textbox(
+                        label="🔑 輸入 OpenAI API Key", 
+                        type="password",
+                        placeholder="請輸入您的 OpenAI API Key (sk-...)",
+                        elem_classes="api-input"
+                    )
+                    api_key_status = gr.Textbox(
+                        label="📊 API 連接狀態", 
+                        interactive=False,
+                        value="🔄 等待設定 API Key...",
+                        elem_classes="status-display"
+                    )
+                
+                with gr.Column():
+                    model_choice = gr.Radio(
+                        ["gpt-4", "gpt-4.1", "gpt-4.5"], 
+                        label="🤖 選擇 AI 模型",
+                        value="gpt-4",
+                        elem_classes="model-selector"
+                    )
+                    model_status = gr.Textbox(
+                        label="🎯 當前模型", 
+                        interactive=False,
+                        value="✅ 已選擇：gpt-4",
+                        elem_classes="status-display"
+                    )
     
-    with gr.Tab("📄 PDF 處理"):
-        with gr.Row():
-            with gr.Column():
-                pdf_upload = gr.File(
-                    label="📁 上傳 PDF 文件",
-                    file_types=[".pdf"]
-                )
-                with gr.Row():
-                    summary_btn = gr.Button("🔄 生成摘要", variant="primary")
-                    clear_btn = gr.Button("🗑️ 清除資料", variant="secondary")
-            
-            with gr.Column():
-                summary_output = gr.Textbox(
-                    label="📋 PDF 摘要",
-                    lines=15,
-                    placeholder="上傳 PDF 文件並點擊 '生成摘要' 按鈕"
-                )
+        with gr.Tab("📄 PDF 處理", elem_classes="pdf-tab"):
+            gr.Markdown("### 📁 文件上傳與摘要生成")
+            with gr.Row():
+                with gr.Column():
+                    pdf_upload = gr.File(
+                        label="📎 選擇 PDF 文件",
+                        file_types=[".pdf"],
+                        elem_classes="file-upload"
+                    )
+                    gr.Markdown("**支援格式**：PDF 文件 (建議 < 10MB)")
+                    
+                    with gr.Row():
+                        summary_btn = gr.Button(
+                            "🔄 開始生成摘要", 
+                            variant="primary",
+                            elem_classes="primary-btn"
+                        )
+                        clear_btn = gr.Button(
+                            "🗑️ 清除所有資料", 
+                            variant="secondary",
+                            elem_classes="secondary-btn"
+                        )
+                
+                with gr.Column():
+                    summary_output = gr.Textbox(
+                        label="📋 AI 生成的文檔摘要",
+                        lines=15,
+                        placeholder="📄 上傳 PDF 文件並點擊「開始生成摘要」按鈕，AI 將為您分析文檔內容...",
+                        elem_classes="summary-output"
+                    )
     
-    with gr.Tab("❓ 問答"):
-        with gr.Row():
-            with gr.Column():
-                question_input = gr.Textbox(
-                    label="💬 請輸入您的問題",
-                    placeholder="例如：這份文件的主要結論是什麼？"
-                )
-                question_btn = gr.Button("📤 送出問題", variant="primary")
-            
-            with gr.Column():
-                answer_output = gr.Textbox(
-                    label="🤖 AI 回答",
-                    lines=10,
-                    placeholder="AI 回答將顯示在這裡"
-                )
+        with gr.Tab("❓ 智能問答", elem_classes="qa-tab"):
+            gr.Markdown("### 💬 基於文檔內容的 AI 問答")
+            with gr.Row():
+                with gr.Column():
+                    question_input = gr.Textbox(
+                        label="💭 請輸入您的問題",
+                        placeholder="例如：這份文件的主要結論是什麼？文中提到的關鍵數據有哪些？",
+                        lines=3,
+                        elem_classes="question-input"
+                    )
+                    question_btn = gr.Button(
+                        "📤 發送問題", 
+                        variant="primary",
+                        elem_classes="primary-btn"
+                    )
+                    
+                    gr.Markdown("""
+                    **💡 問題範例：**
+                    - 這份文件討論的主要議題是什麼？
+                    - 文中有哪些重要的統計數據？
+                    - 作者的主要觀點和結論是什麼？
+                    - 文件中提到的建議有哪些？
+                    """)
+                
+                with gr.Column():
+                    answer_output = gr.Textbox(
+                        label="🤖 AI 智能回答",
+                        lines=12,
+                        placeholder="🤖 請先上傳並生成 PDF 摘要，然後在左側輸入問題，AI 將基於文檔內容為您提供詳細回答...",
+                        elem_classes="answer-output"
+                    )
     
     # 事件處理器
     api_key_input.submit(set_api_key, inputs=api_key_input, outputs=api_key_status)