app.py

# app.py
import gradio as gr
from core.visits import get_and_update_visits
from ui.layouts import create_ui

# --- 定義最終版的專業佈景主題 (大幅度調整) ---
professional_theme = gr.themes.Soft(
    # 設定字體
    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=gr.themes.sizes.spacing_md,

).set(
    # --- 全局佈局 ---
    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_background_fill="white",
    block_border_width="0px", # 移除預設邊框
    block_border_color="transparent", # 邊框顏色設為透明
    block_radius="16px",
    block_shadow="0 4px 10px rgba(0, 0, 0, 0.08)", # 更明顯的陰影，創造懸浮感
    
    # --- 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_background_fill="white",
    input_border_color="#dee2e6",
    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",
)


# --- 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()