Update app.py

app.py

@@ -160,17 +160,160 @@ def clear_all():
     pdf_text = ""
     return "", "", ""
 
+# 自定義 CSS 樣式 - 藍紫色主題
+custom_css = """
+/* 主要容器背景 */
+.gradio-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    min-height: 100vh;
+}
+
+/* 隱藏 Gradio footer 和 logo */
+footer { display: none !important; }
+.gradio-container footer { display: none !important; }
+div[class*="footer"] { display: none !important; }
+div[class*="Footer"] { display: none !important; }
+.gr-footer { display: none !important; }
+
+/* 標籤頁樣式 */
+.tab-nav {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 15px !important;
+    backdrop-filter: blur(10px) !important;
+    margin-bottom: 20px !important;
+}
+
+.tab-nav button {
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    margin: 5px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+
+.tab-nav button:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+    transform: translateY(-2px) !important;
+}
+
+.tab-nav button.selected {
+    background: rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 卡片樣式 */
+.block {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 20px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    backdrop-filter: blur(10px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    margin: 10px 0 !important;
+    padding: 20px !important;
+}
+
+/* 按鈕樣式 */
+.btn {
+    background: linear-gradient(45deg, #667eea, #764ba2) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 15px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+}
+
+.btn:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+}
+
+.btn-secondary {
+    background: linear-gradient(45deg, #a8a8a8, #6c757d) !important;
+    box-shadow: 0 4px 15px rgba(168, 168, 168, 0.4) !important;
+}
+
+.btn-secondary:hover {
+    box-shadow: 0 6px 20px rgba(168, 168, 168, 0.6) !important;
+}
+
+/* 輸入框樣式 */
+.gr-textbox, .gr-file, .gr-radio {
+    border-radius: 15px !important;
+    border: 2px solid rgba(102, 126, 234, 0.3) !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-textbox:focus, .gr-file:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
+}
+
+/* 標題樣式 */
+h1, h2, h3 {
+    color: white !important;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
+    font-weight: 700 !important;
+}
+
+/* Markdown 內容樣式 */
+.markdown {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
+    margin: 10px 0 !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 進度條樣式 */
+.progress {
+    background: linear-gradient(45deg, #667eea, #764ba2) !important;
+    border-radius: 10px !important;
+}
+
+/* 滾動條樣式 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #5a6fd8, #6a4190);
+}
+
+/* 動畫效果 */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.block {
+    animation: fadeIn 0.6s ease-out !important;
+}
+"""
+
 # 創建 Gradio 介面
 with gr.Blocks(
     title="PDF 摘要助手",
-    css="""
-    /* 隱藏 Gradio footer 和 logo */
-    footer { display: none !important; }
-    .gradio-container footer { display: none !important; }
-    div[class*="footer"] { display: none !important; }
-    div[class*="Footer"] { display: none !important; }
-    .gr-footer { display: none !important; }
-    """
+    css=custom_css,
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="purple",
+        neutral_hue="slate",
+    )
 ) as demo:
     
     gr.Markdown("""
@@ -197,41 +340,47 @@ with gr.Blocks(
         api_key_input = gr.Textbox(
             label="🔑 輸入 OpenAI API Key", 
             type="password",
-            placeholder="請輸入您的 OpenAI API Key (sk-...)"
+            placeholder="請輸入您的 OpenAI API Key (sk-...)",
+            elem_classes=["gr-textbox"]
         )
-        api_key_btn = gr.Button("確認 API Key", variant="primary")
+        api_key_btn = gr.Button("確認 API Key", variant="primary", elem_classes=["btn"])
         api_key_status = gr.Textbox(
             label="📊 API 狀態", 
             interactive=False, 
-            value="🔄 等待設定 API Key..."
+            value="🔄 等待設定 API Key...",
+            elem_classes=["gr-textbox"]
         )
         
         gr.Markdown("### 模型選擇")
         model_choice = gr.Radio(
-            ["gpt-4", "gpt-4.1", "gpt-4.5"], 
+            ["gpt-3.5-turbo", "gpt-4", "gpt-4-turbo"], 
             label="🤖 選擇 AI 模型", 
-            value="gpt-4"
+            value="gpt-4",
+            elem_classes=["gr-radio"]
         )
         model_status = gr.Textbox(
             label="🎯 模型狀態", 
             interactive=False, 
-            value="✅ 已選擇：gpt-4"
+            value="✅ 已選擇：gpt-4",
+            elem_classes=["gr-textbox"]
         )
 
     with gr.Tab("📄 PDF 摘要"):
         gr.Markdown("### 文件上傳與摘要生成")
         pdf_upload = gr.File(
             label="📁 上傳 PDF 文件", 
-            file_types=[".pdf"]
+            file_types=[".pdf"],
+            elem_classes=["gr-file"]
         )
         with gr.Row():
-            summary_btn = gr.Button("🔄 生成摘要", variant="primary")
-            clear_btn = gr.Button("🗑️ 清除資料", variant="secondary")
+            summary_btn = gr.Button("🔄 生成摘要", variant="primary", elem_classes=["btn"])
+            clear_btn = gr.Button("🗑️ 清除資料", variant="secondary", elem_classes=["btn", "btn-secondary"])
         
         summary_output = gr.Textbox(
             label="📋 PDF 摘要", 
             lines=15,
-            placeholder="上傳 PDF 文件並點擊「生成摘要」按鈕，AI 將為您分析文檔內容..."
+            placeholder="上傳 PDF 文件並點擊「生成摘要」按鈕，AI 將為您分析文檔內容...",
+            elem_classes=["gr-textbox"]
         )
 
     with gr.Tab("❓ 智能問答"):
@@ -239,14 +388,16 @@ with gr.Blocks(
         question_input = gr.Textbox(
             label="💭 請輸入您的問題", 
             lines=3,
-            placeholder="例如：這份文件的主要結論是什麼？文中提到的關鍵數據有哪些？"
+            placeholder="例如：這份文件的主要結論是什麼？文中提到的關鍵數據有哪些？",
+            elem_classes=["gr-textbox"]
         )
-        question_btn = gr.Button("📤 送出問題", variant="primary")
+        question_btn = gr.Button("📤 送出問題", variant="primary", elem_classes=["btn"])
         
         answer_output = gr.Textbox(
             label="🤖 AI 回答", 
             lines=12,
-            placeholder="請先上傳並生成 PDF 摘要，然後輸入問題，AI 將基於文檔內容為您提供回答..."
+            placeholder="請先上傳並生成 PDF 摘要，然後輸入問題，AI 將基於文檔內容為您提供回答...",
+            elem_classes=["gr-textbox"]
         )
         
         gr.Markdown("""
@@ -257,7 +408,7 @@ with gr.Blocks(
         - 文件中提到的建議有哪些？
         """)
 
-    # 事件綁定 - 保持原有的簡單方式
+    # 事件綁定
     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)
     
@@ -273,5 +424,7 @@ with gr.Blocks(
 if __name__ == "__main__":
     demo.launch(
         show_error=True,
-        share=False
-    ) 
+        share=True,
+        server_name="0.0.0.0",
+        server_port=7860
+    )