Update app.py

app.py

@@ -1,46 +1,68 @@
-# app.py
-import gradio as gr
-from core.visits import get_and_update_visits
-from ui.layouts import create_ui
-
-# --- 1. Define a new custom theme for better aesthetics ---
-custom_theme = gr.themes.Soft(
-    primary_hue="blue",
-    secondary_hue="cyan",
-    neutral_hue="slate",
-    spacing_size=gr.themes.sizes.spacing_md,
-    radius_size=gr.themes.sizes.radius_md,
-).set(
-    # Custom colors
-    body_background_fill="#F0F4F8",
-    block_background_fill="white",
-    block_border_width="1px",
-    block_shadow="*shadow_drop_lg",
-    
-    # Custom button style
-    button_primary_background_fill="*primary_500",
-    button_primary_background_fill_hover="*primary_400",
-    button_primary_text_color="white",
-
-    # --- ✨ ADDED: Style for input textbox to make it more visible ---
-    input_background_fill="white",
-    input_border_color="*neutral_200",
-    input_shadow="*shadow_drop",
-    input_border_width="1.5px", # Slightly thicker border
-)
-
-# --- 2. Update site visit count on startup ---
-try:
-    count = get_and_update_visits()
-    visit_count_html = f"🚀 **總載入次數:** {count}"
-    print(f"Application loaded. Total visits: {count}")
-except Exception as e:
-    visit_count_html = "🚀 **總載入次數:** N/A"
-    print(f"Could not update visit count: {e}")
-
-# --- 3. Create the main UI, passing both dynamic content and the new theme ---
-demo = create_ui(visit_count_html, theme=custom_theme)
-
-# --- 4. Launch the application ---
-if __name__ == "__main__":
-    demo.launch()
+# app.py
+import gradio as gr
+from core.visits import get_and_update_visits
+from ui.layouts import create_ui
+
+# --- ✨ 1. 全新定義一個更專業、更美觀的自訂主題 ---
+# 參考您提供的網站設計語言 (顏色、字體、卡片式佈局)
+professional_theme = gr.themes.Soft(
+    # 設定字體為 Noto Sans TC
+    font=gr.themes.GoogleFont("Noto Sans TC"),
+    
+    # 參考網站的藍綠色系設定主色調
+    primary_hue=gr.themes.colors.teal,
+    secondary_hue=gr.themes.colors.cyan,
+    neutral_hue="slate",
+    
+    # 調整元件的圓角大小，使其更現代
+    radius_size=gr.themes.sizes.radius_md,
+
+).set(
+    # === 整體佈局 ===
+    # 設定頁面背景色 (淺灰色，用以凸顯卡片)
+    body_background_fill="#f8f9fa",
+
+    # === 卡片/區塊樣式 (核心) ===
+    # 設定所有區塊 (如 Tab、Group) 的背景為純白
+    block_background_fill="white",
+    # 設定卡片的邊框
+    block_border_width="1px",
+    block_border_color="#dee2e6",
+    # 設定卡片的圓角
+    block_radius="16px",
+    # 設定卡片的陰影，創造懸浮感
+    block_shadow="0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05)",
+    
+    # === 按鈕樣式 ===
+    # 設定主按鈕的背景色 (深藍綠色)
+    button_primary_background_fill="#005f73",
+    button_primary_background_fill_hover="#0a9396",
+    button_primary_text_color="white",
+    
+    # === 輸入框樣式 ===
+    input_background_fill="white",
+    input_border_color="#dee2e6",
+    input_shadow="*shadow_drop",
+    input_border_width="1.5px",
+
+    # === 間距 ===
+    spacing_size="20px", # 元件間的基礎間距
+    layout_gap="25px",   # 區塊間的間距
+)
+
+
+# --- 2. 應用程式啟動邏輯 (維持不變) ---
+try:
+    count = get_and_update_visits()
+    visit_count_html = f"🚀 **總載入次數:** {count}"
+    print(f"Application loaded. Total visits: {count}")
+except Exception as e:
+    visit_count_html = "🚀 **總載入次數:** N/A"
+    print(f"Could not update visit count: {e}")
+
+# --- 3. 建立 UI 時傳入新的佈景主題 ---
+demo = create_ui(visit_count_html, theme=professional_theme)
+
+# --- 4. 啟動應用程式 ---
+if __name__ == "__main__":
+    demo.launch()