app.py

import gradio as gr
import random
import textwrap
import folium
from obspy.clients.fdsn import Client
from obspy import UTCDateTime
import ast # 用於安全地解析字典

# -------------------------------------------------------------------
# 範例 1 (基礎) 的預設資料
# -------------------------------------------------------------------
TUTORIAL_BASIC_INITIAL_DICT = {
    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
}

TUTORIAL_CODE_BASIC = textwrap.dedent(f"""
# --- 這是 Level 1 範例的完整程式碼 ---
# 試試看：
# 1. 在 geo_dict 中新增一個你自己的詞條。
# 2. 修改 "海嘯" 的解釋。
# 3. 按下方的 "套用變更" 按鈕。
# 4. 回到 "Live Demo" 分頁看看你的修改！

# 1. 知識庫 (你的地科字典)
geo_dict = {TUTORIAL_BASIC_INITIAL_DICT!r}

# 2. 定義介面函式
def get_definition(term):
    # geo_dict 會從這個程式碼的 "全域" 範圍內被找到
    return geo_dict.get(term, "查無此名詞")
""")

# -------------------------------------------------------------------
# 範例 1 (基礎) 的動態執行 Wrapper
# -------------------------------------------------------------------
def run_basic_code(term, code_string):
    # [***** 修復 *****]
    # 建立一個同時作為 global 和 local 範圍的 scope
    # 這樣在 `exec` 中定義的函式才能找到在同一個 scope 中定義的全域變數
    execution_scope = {"__builtins__": {}} 
    try:
        # [修復] 將 global 和 local 都設置為同一個 execution_scope
        exec(code_string, execution_scope, execution_scope) 
        
        get_definition_func = execution_scope.get("get_definition")
        
        if not callable(get_definition_func):
            return "程式碼錯誤：找不到 `get_definition` 函式。"
            
        # 呼叫學生程式碼中定義的函式
        return get_definition_func(term)
        
    except Exception as e:
        return f"執行時發生錯誤：\n{e}"

# -------------------------------------------------------------------
# 範例 2 (進階) 的預設程式碼
# -------------------------------------------------------------------
TUTORIAL_CODE_ADVANCED = textwrap.dedent("""
# --- 這是 Level 2 範例的完整程式碼 ---
# 試試看：
# 1. 找到 "color = 'green'"，把它改成 "color = 'blue'"。
# 2. 找到 "radius=mag * 1.5"，把它改成 "radius=mag * 3"。
# 3. 按下方的 "套用變更" 按鈕。
# 4. 回到 "Live Demo" 分頁，搜尋地震看看你的修改！

# 1. 定義核心函式：搜尋並繪圖
def fetch_and_plot_events(min_mag, days_ago):
    try:
        # Folium, Client, UTCDateTime 已經被安全地匯入
        client = Client("IRIS")
        endtime = UTCDateTime.now()
        starttime = endtime - (days_ago * 24 * 3600)
        
        catalog = client.get_events(
            starttime=starttime,
            endtime=endtime,
            minmagnitude=min_mag
        )
        
        m = folium.Map(location=[0, 0], zoom_start=2)
        
        if len(catalog) == 0:
            return "<p>在此條件下查無地震資料，請嘗試放寬搜尋條件。</p>"

        for event in catalog:
            origin = event.preferred_origin()
            mag = event.preferred_magnitude().mag
            lat = origin.latitude
            lon = origin.longitude
            depth_km = origin.depth / 1000.0
            
            if depth_km < 70:
                color = "green" # <-- 試著修改這裡！
            elif depth_km < 300:
                color = "orange"
            else:
                color = "red"
            
            popup_html = f'''
            <b>時間:</b> {origin.time.strftime('%Y-%m-%d %H:%M:%S')}<br>
            <b>規模 (M):</b> {mag:.1f}<br>
            <b>深度 (km):</b> {depth_km:.1f}<br>
            <b>位置:</b> ({lat:.2f}, {lon:.2f})
            '''
            
            folium.CircleMarker(
                location=[lat, lon],
                radius=mag * 1.5, # <-- 試著修改這裡！
                popup=folium.Popup(popup_html, max_width=300),
                color=color,
                fill=True,
                fill_color=color,
                fill_opacity=0.6
            ).add_to(m)
            
        return m._repr_html_()

    except Exception as e:
        return f"<p>發生錯誤：{e}</p>"
""")

# -------------------------------------------------------------------
# 範例 2 (進階) 的安全沙盒與動態執行 Wrapper
# -------------------------------------------------------------------
def run_advanced_code(min_mag, days_ago, code_string):
    # 建立一個安全的 "全域" 環境，只允許必要的模組
    # 這個設計是正確的，因為函式(fetch_and_plot_events)需要存取
    # 這些 "預先匯入" 的全域模組。
    safe_globals = {
        "__builtins__": {
            "print": print, "Exception": Exception, "len": len, "str": str, 
            "float": float, "int": int, "list": list, "dict": dict, "range": range,
            "True": True, "False": False, "None": None
        },
        "folium": folium,
        "Client": Client,
        "UTCDateTime": UTCDateTime
    }
    
    local_scope = {}
    
    try:
        # 在安全沙盒中執行學生程式碼
        exec(code_string, safe_globals, local_scope)
        
        fetch_func = local_scope.get("fetch_and_plot_events")
        
        if not callable(fetch_func):
            return "<p>程式碼錯誤：找不到 `fetch_and_plot_events` 函式。</p>"
        
        # 呼叫學生程式碼中定義的函式
        return fetch_func(min_mag, days_ago)
        
    except Exception as e:
        return f"<p>執行時發生錯誤：\n{e}</p>"

# -------------------------------------------------------------------
# 專案總覽的資料
# -------------------------------------------------------------------
projects_data = {
    "🌊 地震與波形展示": [
        {"title": "📡 地震目錄搜尋 API", "url": "https://cwadayi-python-app.hf.space/"},
        {"title": "⚠️ 地震預警訊息顯示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_alarm_Taiwan"},
        {"title": "🗺️ PyGMT 震央繪圖展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_gmt_demo_new"},
        {"title": "📈 ObsPy 地震資料處理", "url": "https://huggingface.co/spaces/cwadayi/streamlit_obspy"}
    ],
    "🛰️ 地震監測與資料應用": [
        {"title": "📍 Geiger 法地震定位展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_earthquake_location"},
        {"title": "🔍 地震監測流程 (擷取-撿拾-定位)", "url": "https://huggingface.co/spaces/cwadayi/earthquake_monitoring"},
        {"title": "📊 Google Sheet 資料顯示 (類Grafana)", "url": "https://huggingface.co/spaces/cwadayi/Grafana_like_2"},
        {"title": "🏠 PWS 地震預警顯示", "url": "https://cwadayi-app-show-pws.hf.space/cwa-earthquakes"},
        {"title": "🌍 全球地震顯示 (Streamlit)", "url": "https://huggingface.co/spaces/cwadayi/streamlit"}
    ],
    "💻 資料擷取與 API 應用": [
        {"title": "💬 LINE ROBOT 伺服器", "url": "https://huggingface.co/spaces/cwadayi/LINE-ROBOT"},
        {"title": "🗺️ 震央分佈圖 (MCP-2)", "url": "https://huggingface.co/spaces/cwadayi/MCP-2"},
        {"title": "📥 PWS 資訊擷取", "url": "https://huggingface.co/spaces/cwadayi/MCP-pws"},
        {"title": "🏛️ USGS 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/Usgs_api_gemini"},
        {"title": "🇹🇼 CWA 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/CWA_API_chatgpt5_1"}
    ],
    "🏫 地球物理課程與教材": [
        {"title": "🎓 地球物理課程 (總覽)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_class"},
        {"title": "📗 地物課程網站 (Day1)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day1"},
        {"title": "📘 地物課程網站 (Day2)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day2"},
        {"title": "📏 折射震測展示 (SDD)", "url": "https://huggingface.co/spaces/cwadayi/Refraction_sdd"},
        {"title": "📐 折射震測展示 (Refraction 3)", "url": "https://huggingface.co/spaces/cwadayi/Refraction_3"},
        {"title": "⚖️ 重力異常展示 (Bouguer & Free-air)", "url": "https://huggingface.co/spaces/cwadayi/Gravity"}
    ]
}

def recommend_project():
    all_projects = [item for sublist in projects_data.values() for item in sublist]
    recommendation = random.choice(all_projects)
    return f"""
    ### {recommendation['title']}
    [**點此立即前往 🚀**]({recommendation['url']})
    """

TUTORIAL_REQUIREMENTS = textwrap.dedent("""
gradio
obspy
folium
""")

# -------------------------------------------------------------------
# 自訂 CSS
# -------------------------------------------------------------------
css = """
/* 標頭樣式 */
#main-header {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    padding: 2rem 1.5rem;
    border-bottom: 5px solid #1abc9c;
}
#main-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    margin-bottom: 0.5rem;
    text-align: center;
}
#main-header p {
    font-size: 1.2rem;
    color: #ecf0f1;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
#header-image {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Tab 按鈕美化 */
#main-tabs > .tab-buttons > button {
    background-color: #f0f2f5;
    color: #555;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin: 0 5px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}
#main-tabs > .tab-buttons > button:hover:not(.selected) {
    background-color: #e8e8e8;
    border-color: #ccc;
    transform: translateY(-2px);
}
#main-tabs > .tab-buttons > button.selected {
    background-color: #1abc9c !important;
    color: white !important;
    border-color: #1abc9c !important;
    box-shadow: 0 4px 10px rgba(22, 160, 133, 0.3);
}

/* 推薦按鈕 */
#recommend-button {
    background: linear-gradient(135deg, #1abc9c, #16a085);
    color: white !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}
#recommend-button:hover {
    background: linear-gradient(135deg, #16a085, #1abc9c);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(22, 160, 133, 0.4);
}

/* 推薦輸出框 */
#recommend-output {
    border: 2px dashed #1abc9c;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    background-color: #f8fdfc;
}
#recommend-output h3 { margin-top: 0.5rem; margin-bottom: 1.2rem; color: #2c3e50; font-size: 1.4rem; }
#recommend-output a { font-size: 1.1rem; font-weight: bold; color: #2980b9; text-decoration: none; transition: color 0.3s ease; }
#recommend-output a:hover { color: #3498db; text-decoration: underline; }

/* 專案標題 */
.project-title h3 { margin: 0; padding: 0.5rem 0; font-size: 1.2rem; color: #2c3e50; }

/* 專案按鈕 */
.project-button a {
    background-color: #3498db !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}
.project-button a:hover { background-color: #2980b9 !important; transform: scale(1.03); }

/* 頁腳 */
#footer { text-align: center; color: #777; font-size: 0.9rem; margin-top: 2rem; }
"""

# -------------------------------------------------------------------
# Gradio 應用程式主體
# -------------------------------------------------------------------
with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as demo:
    
    # 標頭區
    with gr.Row(elem_id="main-header"):
        gr.Markdown(
            """
            <img id="header-image" src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg" alt="Abstract seismic waves banner">
            <h1>地球物理 x Hugging Face 專案展示</h1>
            <p>一個地球物理學家的數位百寶箱：探索一系列由 cwadayi 打造的地震與地科應用！</p>
            """
        )
    
    # 主內容區：Tab 介面
    with gr.Tabs(elem_id="main-tabs") as tabs:
        
        # --- Tab 1: 專案總覽 ---
        with gr.TabItem("📚 專案總覽", id=0):
            # 幸運推薦區
            gr.Markdown("---")
            with gr.Blocks():
                gr.Markdown("## ✨ 幸運推薦 ✨")
                recommend_btn = gr.Button("不知道從何逛起？ 點我隨機推薦一個專案！", elem_id="recommend-button")
                recommend_out = gr.Markdown("點擊上方按鈕，讓我為您挑選一個有趣的專案！", elem_id="recommend-output")
            gr.Markdown("---")

            # 專案列表區
            gr.Markdown("## 🗂️ 專案列表")
            for category, items in projects_data.items():
                with gr.Accordion(category, open=True):
                    for item in items:
                        with gr.Row(variant="panel", equal_height=True):
                            with gr.Column(scale=4):
                                gr.Markdown(f"### {item['title']}", elem_classes="project-title")
                            with gr.Column(scale=1, min_width=150):
                                gr.Button(
                                    "前往應用 ↗", 
                                    link=item['url'], 
                                    elem_classes="project-button"
                                )
        
        # --- Tab 2: 範例 1 (即時編輯) ---
        with gr.TabItem("📖 範例 1: 地科字典", id=1):
            gr.Markdown("# 🚀 範例 1: 地科字典 (Live Demo & Editor)")
            
            basic_code_state = gr.State(value=TUTORIAL_CODE_BASIC)
            
            with gr.Tabs():
                with gr.TabItem("🚀 Live Demo"):
                    gr.Markdown("在這裡測試你的程式碼！修改「Edit Code」分頁中的內容，按下「套用變更」，然後在這裡查看結果。")
                    
                    dropdown = gr.Dropdown(
                        label="請選擇一個地科名詞",
                        choices=list(TUTORIAL_BASIC_INITIAL_DICT.keys()) # 從預設字典載入
                    )
                    output_textbox = gr.Textbox(label="名詞解釋", lines=5, interactive=False)
                
                with gr.TabItem("✏️ Edit Code"):
                    gr.Markdown("在這裡修改 Python 程式碼，然後按下「套用變更」儲存。")
                    basic_code_editor = gr.Code(
                        label="app.py (Level 1 範例)",
                        value=TUTORIAL_CODE_BASIC,
                        language="python",
                        interactive=True,
                        lines=20
                    )
                    apply_btn_basic = gr.Button("套用變更", variant="primary")
                    apply_msg_basic = gr.Markdown("")
            
            # --- 範例 1 的邏輯綁定 ---
            
            def update_basic_code(new_code):
                local_scope = {}
                try:
                    parsed_code = ast.parse(new_code)
                    exec(compile(parsed_code, "<string>", "exec"), {"__builtins__": {}}, local_scope)
                    
                    new_dict = local_scope.get("geo_dict")
                    if not isinstance(new_dict, dict):
                         raise ValueError("找不到 `geo_dict` 變數或其不是一個字典。")
                    
                    new_choices = list(new_dict.keys())
                    return {
                        basic_code_state: new_code,
                        dropdown: gr.Dropdown(choices=new_choices, label="請選擇一個地科名詞"), 
                        apply_msg_basic: gr.Markdown("✅ 變更已套用！請回到 'Live Demo' 分頁查看。")
                    }
                except Exception as e:
                    # 保持原狀，並顯示錯誤
                    return {
                        basic_code_state: basic_code_state, 
                        dropdown: dropdown, 
                        apply_msg_basic: gr.Markdown(f"❌ 程式碼錯誤，未套用：\n```\n{e}\n```")
                    }
            
            apply_btn_basic.click(
                fn=update_basic_code,
                inputs=[basic_code_editor],
                outputs=[basic_code_state, dropdown, apply_msg_basic]
            )

            dropdown.change(
                fn=run_basic_code,
                inputs=[dropdown, basic_code_state], 
                outputs=output_textbox
            )

        # --- Tab 3: 範例 2 (即時編輯) ---
        with gr.TabItem("🌍 範例 2: 地震地圖", id=2):
            gr.Markdown("# 🚀 範例 2: 進階地震地圖 (Live Demo & Editor)")
            
            advanced_code_state = gr.State(value=TUTORIAL_CODE_ADVANCED)
            
            with gr.Tabs():
                with gr.TabItem("🚀 Live Demo"):
                    gr.Markdown("在這裡測試你的程式碼！修改「Edit Code」分頁中的內容，按下「套用變更」，然後在這裡點擊「搜尋」。")
                    with gr.Row():
                        mag_slider = gr.Slider(minimum=4.0, maximum=8.0, value=5.0, step=0.1, label="最小地震規模 (M)")
                        days_slider = gr.Slider(minimum=1, maximum=30, value=7, step=1, label="搜尋天數 (過去幾天)")
                    search_button = gr.Button("搜尋並繪製地圖 🌍", variant="primary")
                    map_output = gr.HTML(label="地震分佈圖")

                with gr.TabItem("✏️ Edit Code"):
                    gr.Markdown("在這裡修改 Python 程式碼，然後按下「套用變更」儲存。")
                    advanced_code_editor = gr.Code(
                        label="app.py (Level 2 範例)",
                        value=TUTORIAL_CODE_ADVANCED,
                        language="python",
                        interactive=True,
                        lines=40
                    )
                    apply_btn_advanced = gr.Button("套用變更", variant="primary")
                    apply_msg_advanced = gr.Markdown("")
            
            # --- 範例 2 的邏輯綁定 ---

            def update_advanced_code(new_code):
                # 僅儲存，我們在點擊 "Search" 時才做完整測試
                return new_code, "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"

            apply_btn_advanced.click(
                fn=update_advanced_code,
                inputs=[advanced_code_editor],
                outputs=[advanced_code_state, apply_msg_advanced]
            )

            search_button.click(
                fn=run_advanced_code,
                inputs=[mag_slider, days_slider, advanced_code_state], 
                outputs=map_output
            )

        # --- Tab 4: AI 創客空間 (教學) ---
        with gr.TabItem("🎓 AI 創客空間", id=3):
            gr.Markdown(
                """
                <div style="padding: 1rem 0;">
                <h2>🚀 打造你自己的地科 App！</h2>
                <p>這是一個教你如何「跟 AI (例如 Gemini) 協作」來快速打造並部署應用程式的SOP：</p>
                <p><strong>最好的學習方式就是動手修改！</strong> 請前往「範例 1」和「範例 2」分頁中的 <strong>"✏️ Edit Code"</strong> 標籤，直接修改程式碼並查看即時結果！</p>
                </div>
                """
            )
            with gr.Accordion("Level 1: 基礎字典 App 📖 (點我展開)", open=False):
                gr.Markdown("### 部署你自己的版本：")
                gr.Markdown(
                    """
                    <ol>
                        <li>到 Hugging Face 網站，點選你的頭像，選擇 <strong>"New Space"</strong>。</li>
                        <li>為你的 Space 命名 (例如: <code>my-geo-dictionary</code>)。</li>
                        <li>在 "Space SDK" 中選擇 <strong>"Gradio"</strong> (很重要！)。</li>
                        <li>點擊 "Create Space"。</li>
                        <li>在你的 Space 頁面，點選 "Files and versions" -> "Add file" -> "Create new file"。</li>
                        <li>將檔案命名為 <strong><code>app.py</code></strong> (必須是這個名字！)。</li>
                        <li><strong>將下面的整段程式碼，完整貼到 `app.py` 的編輯器中。</strong></li>
                        <li>點擊 "Commit new file" (提交檔案)。</li>
                    </ol>
                    """
                )
                
                # [修復] 修正教學程式碼，使其可以獨立運作
                standalone_basic_code = (
                    "import gradio as gr\n\n" +
                    TUTORIAL_CODE_BASIC +
                    "\n\nwith gr.Blocks() as demo:\n" +
                    "    gr.Markdown('# 🚀 我的第一個地科 App (Level 1)')\n" +
                    "    dropdown = gr.Dropdown(label='請選擇一個地科名詞', choices=list(geo_dict.keys()))\n" +
                    "    output_textbox = gr.Textbox(label='名詞解釋', lines=5, interactive=False)\n" +
                    "    dropdown.change(fn=get_definition, inputs=dropdown, outputs=output_textbox)\n\n" +
                    "demo.launch()\n"
                )
                gr.Code(
                    label="app.py (Level 1 範例)",
                    value=standalone_basic_code,
                    language="python",
                    interactive=False
                )
            
            with gr.Accordion("Level 2: 進階地震地圖 App 🌍 (點我展開)", open=False):
                gr.Markdown("### 部署你自己的版本：")
                gr.Markdown(
                    """
                    <p>這次你需要上傳 <strong>2 個檔案</strong>到你自己的 Hugging Face Space：</p>
                    <h4>1. <code>requirements.txt</code></h4>
                    <p>建立這個檔案並貼上下面的內容，告訴 Hugging Face 你需要 `obspy` 和 `folium`。</p>
                    """
                )
                gr.Code(
                    label="requirements.txt (必備)",
                    value=TUTORIAL_REQUIREMENTS,
                    interactive=False
                )
                gr.Markdown("<h4>2. <code>app.py</code></h4><p>建立 `app.py` 檔案並貼上下面的內容。</p>")
                
                # [修復] 修正教學程式碼，使其可以獨立運作
                standalone_advanced_code = (
                    "import gradio as gr\nimport folium\nfrom obspy.clients.fdsn import Client\nfrom obspy import UTCDateTime\n\n" +
                    TUTORIAL_CODE_ADVANCED +
                    "\n\nwith gr.Blocks() as demo:\n" +
                    "    gr.Markdown('# 🚀 我的進階地科 App (Level 2)')\n" +
                    "    gr.Markdown('使用 ObsPy 從 IRIS FDSN 搜尋即時地震資料，並用 Folium 繪製互動式地圖。')\n" +
                    "    with gr.Row():\n" +
                    "        mag_slider = gr.Slider(minimum=4.0, maximum=8.0, value=5.0, step=0.1, label='最小地震規模 (M)')\n" +
                    "        days_slider = gr.Slider(minimum=1, maximum=30, value=7, step=1, label='搜尋天數 (過去幾天)')\n" +
                    "    search_button = gr.Button('搜尋並繪製地圖 🌍', variant='primary')\n" +
                    "    map_output = gr.HTML(label='地震分佈圖')\n" +
                    "    search_button.click(fn=fetch_and_plot_events, inputs=[mag_slider, days_slider], outputs=map_output)\n\n" +
                    "demo.launch()\n"
                )
                gr.Code(
                    label="app.py (Level 2 範例)",
                    value=standalone_advanced_code,
                    language="python",
                    interactive=False
                )

        # --- Tab 5: 關於 Spaces ---
        with gr.TabItem("ℹ️ 關於 Spaces", id=4):
            with gr.Row(equal_height=True, variant="panel"):
                with gr.Column():
                    gr.Markdown(
                        """
                        ### 什麼是 Hugging Face Spaces？
                        Hugging Face Spaces 是一個由 Hugging Face 提供的免費平台，讓開發者和創作者可以輕鬆地建立、分享和展示他們的機器學習 Demo 或網頁應用程式。
                        
                        它就像是 AI 應用的「YouTube」！您可以使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者部署靜態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。
                        """
                    )
                with gr.Column():
                    gr.Markdown(
                        """
                        ### 🚀 如何部署 Gradio 應用程式？
                        **這本身就是一個 Gradio 應用程式！** 部署它非常簡單：
                        1. 在 Hugging Face 建立一個 new Space。
                        2. C選擇 SDK：選擇 **"Gradio"** (這也是預設選項)。
                        3. 建立 Space 後，點選 "Files and versions" 分頁。
                        4. 建立一個名為 `app.py` 的檔案。
                        5. **將這份 Python 程式碼**貼到 `app.py` 中並提交。
                        6. (進階) 如果你的 App 需要 `obspy` 這樣的額外函式庫，請再建立一個 `requirements.txt` 檔案並列出它們。
                        7. **完成！** 您的Gradio應用程式將自動建置並上線。
                        """
                    )

    # 頁腳
    gr.Markdown(
        """
        <hr>
        <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face 專案。</p>
        """
    )
    
    # 7. 綁定按鈕點擊事件
    recommend_btn.click(
        fn=recommend_project,
        inputs=None,
        outputs=recommend_out
    )

# 8. 啟動應用程式
if __name__ == "__main__":
    demo.launch()