Update app.py

app.py

@@ -3,48 +3,82 @@ import gradio as gr
 from core.visits import get_and_update_visits
 from ui.layouts import create_ui
 
-# --- Corrected theme definition ---
+# --- 定義最終版的專業佈景主題 (大幅度調整) ---
 professional_theme = gr.themes.Soft(
-    # Set font
+    # 設定字體
     font=gr.themes.GoogleFont("Noto Sans TC"),
     
-    # Set color hues
-    primary_hue=gr.themes.colors.teal,
-    secondary_hue=gr.themes.colors.cyan,
-    neutral_hue="slate",
+    # 設定色調
+    primary_hue=gr.themes.colors.teal, # 主要顏色 (藍綠)
+    secondary_hue=gr.themes.colors.cyan, # 次要顏色 (青色)
+    neutral_hue="slate", # 中性色調 (石板灰)
     
-    # Set component radius and spacing
+    # 設定元件圓角與間距
     radius_size=gr.themes.sizes.radius_md,
-    
-    # ✨ CORRECTED: Replaced the string "20px" with a valid theme size object
     spacing_size=gr.themes.sizes.spacing_md,
 
 ).set(
-    # --- The .set() method is for colors and styles ---
-    # Body/App Background
-    body_background_fill="#f8f9fa",
+    # --- 全局佈局 ---
+    body_background_fill="#f8f9fa", # 淺灰色背景
+
+    # --- ✨ 新增: 隱藏 Gradio 預設的頂部應用標題和分享按鈕 ---
+    # 這樣我們就可以用 gr.Markdown 自行定義頂部標題
+    block_title_text_color="transparent", # 隱藏 Block 標題文字
+    block_title_background_fill="transparent", # 隱藏 Block 標題背景
+    panel_background_fill="#f8f9fa", # 確保頂部區域與 body 背景一致
 
-    # Block/Card Styling
+    # --- 卡片/區塊樣式 (與圖片中白色區塊一致) ---
     block_background_fill="white",
-    block_border_width="1px",
-    block_border_color="#dee2e6",
+    block_border_width="0px", # 移除預設邊框
+    block_border_color="transparent", # 邊框顏色設為透明
     block_radius="16px",
-    block_shadow="0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05)",
+    block_shadow="0 4px 10px rgba(0, 0, 0, 0.08)", # 更明顯的陰影，創造懸浮感
     
-    # Button Styling
-    button_primary_background_fill="#005f73",
-    button_primary_background_fill_hover="#0a9396",
+    # --- Tab 樣式調整 (使其更像導覽列按鈕) ---
+    tabs_border_width="0px", # 移除 Tab 容器的邊框
+    tabs_border_color="transparent",
+    
+    # 未選中的 Tab 標籤
+    button_secondary_background_fill="transparent", # 透明背景
+    button_secondary_background_fill_hover="rgba(0, 0, 0, 0.05)", # hover 時淺灰
+    button_secondary_text_color="#6c757d", # 次要文字色 (淺灰)
+    button_secondary_text_color_hover="#005f73", # hover 時主文字色
+    button_secondary_border_width="0px", # 移除邊框
+    button_secondary_border_color="transparent",
+    button_secondary_radius="8px", # 略微圓角
+
+    # 選中的 Tab 標籤 (活動狀態)
+    button_primary_background_fill="transparent", # 透明背景
+    button_primary_background_fill_hover="transparent",
+    button_primary_text_color="#005f73", # 主文字色
+    button_primary_border_width="0px",
+    button_primary_border_color="transparent",
+    button_primary_radius="8px",
+    # ✨ 新增: 在選中的 Tab 下方模擬一個高亮條
+    # 這部分需要透過 CSS 或 Gradio 的進階設定來達成，這裡先用文字顏色變化模擬
+    # 實際上需要更複雜的 `class_name` 和自訂 CSS 才能實現圖片中的下劃線效果
+    # 為了簡化，這裡主要透過顏色和背景來模擬視覺效果
+
+    # --- 按鈕樣式 (例如「執行程式碼」按鈕) ---
+    button_primary_background_fill="#005f73", # 深藍綠
+    button_primary_background_fill_hover="#0a9396", # 較亮的藍綠
     button_primary_text_color="white",
+    button_primary_border_radius="8px",
     
-    # Input Textbox Styling
+    # --- 輸入框樣式 ---
     input_background_fill="white",
     input_border_color="#dee2e6",
-    input_shadow="*shadow_drop",
+    input_shadow="0 1px 3px rgba(0, 0, 0, 0.08)", # 較輕的陰影
     input_border_width="1.5px",
+    input_radius="8px",
+    
+    # --- 其他細節 ---
+    link_text_color="#0a9396", # 連結顏色
+    link_text_color_hover="#005f73",
 )
 
 
-# --- Application startup logic (unchanged) ---
+# --- 2. 應用程式啟動邏輯 (維持不變) ---
 try:
     count = get_and_update_visits()
     visit_count_html = f"🚀 **總載入次數:** {count}"
@@ -53,10 +87,9 @@ except Exception as e:
     visit_count_html = "🚀 **總載入次數:** N/A"
     print(f"Could not update visit count: {e}")
 
-# --- Create UI with the corrected theme ---
+# --- 3. 建立 UI 並傳入佈景主題 ---
 demo = create_ui(visit_count_html, theme=professional_theme)
 
-# --- Launch the application ---
+# --- 4. 啟動應用程式 ---
 if __name__ == "__main__":
     demo.launch()
-