Update app.py

app.py

@@ -3,55 +3,47 @@ import gradio as gr
 from core.visits import get_and_update_visits
 from ui.layouts import create_ui
 
-# --- ✨ 1. 全新定義一個更專業、更美觀的自訂主題 ---
-# 參考您提供的網站設計語言 (顏色、字體、卡片式佈局)
+# --- 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,
+    spacing_size="20px",
+    layout_gap="25px",
 
 ).set(
-    # === 整體佈局 ===
-    # 設定頁面背景色 (淺灰色，用以凸顯卡片)
+    # --- .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. 應用程式啟動邏輯 (維持不變) ---
+# --- 2. 應用程式啟動邏輯 ---
 try:
     count = get_and_update_visits()
     visit_count_html = f"🚀 **總載入次數:** {count}"
@@ -60,7 +52,7 @@ except Exception as e:
     visit_count_html = "🚀 **總載入次數:** N/A"
     print(f"Could not update visit count: {e}")
 
-# --- 3. 建立 UI 時傳入新的佈景主題 ---
+# --- 3. 建立 UI 並傳入佈景主題 ---
 demo = create_ui(visit_count_html, theme=professional_theme)
 
 # --- 4. 啟動應用程式 ---