Update app.py

app.py

@@ -3,93 +3,79 @@ 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"),
     
-    # 設定色調
-    primary_hue=gr.themes.colors.teal, # 主要顏色 (藍綠)
-    secondary_hue=gr.themes.colors.cyan, # 次要顏色 (青色)
-    neutral_hue="slate", # 中性色調 (石板灰)
+    # Set color hues
+    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,
     spacing_size=gr.themes.sizes.spacing_md,
 
 ).set(
-    # --- 全局佈局 ---
-    body_background_fill="#f8f9fa", # 淺灰色背景
+    # === Global Layout ===
+    body_background_fill="#f8f9fa",
+    panel_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="0px", # 移除預設邊框
-    block_border_color="transparent", # 邊框顏色設為透明
+    block_border_width="0px",
+    block_border_color="transparent",
     block_radius="16px",
-    block_shadow="0 4px 10px rgba(0, 0, 0, 0.08)", # 更明顯的陰影，創造懸浮感
+    block_shadow="0 4px 10px rgba(0, 0, 0, 0.08)",
     
-    # --- Tab 樣式調整 (使其更像導覽列按鈕) ---
-    tabs_border_width="0px", # 移除 Tab 容器的邊框
+    # === Tab Styling ===
+    tabs_border_width="0px",
     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", # 移除邊框
+    # Unselected Tabs
+    button_secondary_background_fill="transparent",
+    button_secondary_background_fill_hover="rgba(0, 0, 0, 0.05)",
+    button_secondary_text_color="#6c757d",
+    button_secondary_text_color_hover="#005f73",
+    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_secondary_radius="8px",
+    
+    # --- ✨ CORRECTED: Removed the conflicting/repeated block for selected tabs ---
+    # The 'button_primary' styles below will now apply to BOTH selected tabs and primary buttons.
+    
+    # === Primary Button Styling ===
+    button_primary_background_fill="#005f73",
+    button_primary_background_fill_hover="#0a9396",
     button_primary_text_color="white",
-    button_primary_border_radius="8px",
+    button_primary_radius="8px",
     
-    # --- 輸入框樣式 ---
+    # === Input Textbox Styling ===
     input_background_fill="white",
     input_border_color="#dee2e6",
-    input_shadow="0 1px 3px rgba(0, 0, 0, 0.08)", # 較輕的陰影
+    input_shadow="0 1px 3px rgba(0, 0, 0, 0.08)",
     input_border_width="1.5px",
     input_radius="8px",
     
-    # --- 其他細節 ---
-    link_text_color="#0a9396", # 連結顏色
+    # --- Other details ---
+    link_text_color="#0a9396",
     link_text_color_hover="#005f73",
 )
 
 
-# --- 2. 應用程式啟動邏輯 (維持不變) ---
+# --- Application startup logic (unchanged) ---
 try:
     count = get_and_update_visits()
-    visit_count_html = f"🚀 **總載入次數:** {count}"
+    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 並傳入佈景主題 ---
+# --- Create UI with the corrected theme ---
 demo = create_ui(visit_count_html, theme=professional_theme)
 
-# --- 4. 啟動應用程式 ---
+# --- Launch the application ---
 if __name__ == "__main__":
     demo.launch()