Update app.py

app.py

@@ -1,29 +1,157 @@
 import gradio as gr
 import random
-import textwrap # 用於處理程式碼字串的縮排
+import textwrap
+import folium
+from obspy.clients.fdsn import Client
+from obspy import UTCDateTime
 
-# [新增] 匯入範例 App 的核心功能
-# 感謝步驟 1 & 2 的修改，我們現在可以安全地匯入它們
-try:
-    from tutorial_basic import get_definition, geo_dict
-    from tutorial_advanced import fetch_and_plot_events
-    IMPORTS_SUCCESSFUL = True
-except ImportError as e:
-    print(f"警告：無法匯入範例程式。{e}")
-    IMPORTS_SUCCESSFUL = False
+# -------------------------------------------------------------------
+# 範例 1 (基礎) 的預設程式碼
+# -------------------------------------------------------------------
+TUTORIAL_CODE_BASIC = textwrap.dedent("""
+# --- 這是 Level 1 範例的完整程式碼 ---
+# 試試看：
+# 1. 在 geo_dict 中新增一個你自己的詞條。
+# 2. 修改 "海嘯" 的解釋。
+# 3. 按下方的 "套用變更" 按鈕。
+# 4. 回到 "Live Demo" 分頁看看你的修改！
 
+# 1. 知識庫 (你的地科字典)
+geo_dict = {
+    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
+    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
+    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
+}
+
+# 2. 定義介面函式
+def get_definition(term):
+    # geo_dict 會從這個程式碼的 "全域" 範圍內被找到
+    return geo_dict.get(term, "查無此名詞")
+""")
 
-# 從外部 .py 檔案讀取教學程式碼 (用於教學分頁)
-def load_code_from_file(filename):
+# -------------------------------------------------------------------
+# 範例 1 (基礎) 的動態執行 Wrapper
+# -------------------------------------------------------------------
+def run_basic_code(term, code_string):
+    local_scope = {}
     try:
-        with open(filename, 'r', encoding='utf-8') as f:
-            return f.read()
-    except FileNotFoundError:
-        return f"# 錯誤：找不到範例檔案 {filename}\n# 請確認您已上傳此檔案到 Space。"
+        # 在一個受限的環境中執行程式碼
+        # 這會定義 geo_dict 和 get_definition
+        exec(code_string, {"__builtins__": {}}, local_scope)
+        
+        get_definition_func = local_scope.get("get_definition")
+        
+        if not callable(get_definition_func):
+            return "程式碼錯誤：找不到 `get_definition` 函式。"
+            
+        # 呼叫學生程式碼中定義的函式
+        return get_definition_func(term)
+        
     except Exception as e:
-        return f"# 讀取時發生錯誤：{e}"
+        return f"執行時發生錯誤：\n{e}"
 
-# 1. 專案資料 (帶有 Emoji)
+# -------------------------------------------------------------------
+# 範例 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):
+    # 建立一個安全的 "全域" 環境，只允許必要的模組
+    safe_globals = {
+        "__builtins__": {
+            "print": print, "Exception": Exception, "len": len, "str": str, 
+            "float": float, "int": int, "list": list, "dict": dict, "range": range
+        },
+        "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/"},
@@ -55,30 +183,23 @@ projects_data = {
     ]
 }
 
-# 2. 隨機推薦函式
 def recommend_project():
-    """從所有專案中隨機挑選一個並回傳 Markdown 格式的推薦"""
     all_projects = [item for sublist in projects_data.values() for item in sublist]
     recommendation = random.choice(all_projects)
-    
     return f"""
     ### {recommendation['title']}
-    
     [**點此立即前往 🚀**]({recommendation['url']})
     """
 
-# 3. requirements.txt 範例內容
 TUTORIAL_REQUIREMENTS = textwrap.dedent("""
 gradio
 obspy
 folium
 """)
 
-# 4. 從外部檔案載入教學程式碼
-TUTORIAL_CODE_BASIC = load_code_from_file("tutorial_basic.py")
-TUTORIAL_CODE_ADVANCED = load_code_from_file("tutorial_advanced.py")
-
-# 5. 自訂 CSS 樣式
+# -------------------------------------------------------------------
+# 自訂 CSS
+# -------------------------------------------------------------------
 css = """
 /* 標頭樣式 */
 #main-header {
@@ -178,14 +299,16 @@ css = """
 #footer { text-align: center; color: #777; font-size: 0.9rem; margin-top: 2rem; }
 """
 
-# 6. 使用 gr.Blocks() 建構介面
+# -------------------------------------------------------------------
+# 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-2201.jpeg" alt="Abstract seismic waves banner">
+            <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>
             """
@@ -219,100 +342,140 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                                     elem_classes="project-button"
                                 )
         
-        # --- [新增] Tab 2: 範例 1 (地科字典) ---
+        # --- [升級] Tab 2: 範例 1 (即時編輯) ---
         with gr.TabItem("📖 範例 1: 地科字典", id=1):
-            gr.Markdown("# 🚀 範例 1: 地科字典 (Live Demo)")
-            gr.Markdown("這是在「AI 創客空間」中教學的 Level 1 基礎範例的**即時互動版本**。")
-            if IMPORTS_SUCCESSFUL:
-                # 建立 Level 1 App 的介面
-                dropdown = gr.Dropdown(
-                    label="請選擇一個地科名詞",
-                    choices=list(geo_dict.keys()) # 從匯入的 geo_dict 取得資料
-                )
-                output_textbox = gr.Textbox(
-                    label="名詞解釋",
-                    lines=5,
-                    interactive=False
-                )
-                dropdown.change(
-                    fn=get_definition, # 使用匯入的 get_definition 函式
-                    inputs=dropdown,
-                    outputs=output_textbox
-                )
-            else:
-                gr.Warning("範例 1 載入失敗。請檢查 app.py 的匯入 (import) 設定。")
+            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(eval(TUTORIAL_CODE_BASIC.splitlines()[10].split('=')[1].strip())) 
+                    )
+                    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 的邏輯綁定 ---
+            
+            # 1. "套用變更" 按鈕的邏輯
+            def update_basic_code(new_code):
+                # 執行程式碼以檢查是否有語法錯誤
+                # 並動態更新 Dropdown 的選項
+                local_scope = {}
+                try:
+                    exec(new_code, {"__builtins__": {}}, local_scope)
+                    new_dict = local_scope.get("geo_dict")
+                    if not isinstance(new_dict, dict):
+                         raise ValueError("找不到 `geo_dict` 變數或其不是一個字典。")
+                    
+                    # 成功！更新 Dropdown 選項並儲存程式碼
+                    new_choices = list(new_dict.keys())
+                    return {
+                        basic_code_state: new_code, # 儲存新程式碼到 state
+                        dropdown: gr.Dropdown(choices=new_choices), # 更新 Dropdown
+                        apply_msg_basic: gr.Markdown("✅ 變更已套用！請回到 'Live Demo' 分頁查看。")
+                    }
+                except Exception as e:
+                    # 失敗！
+                    return {
+                        basic_code_state: basic_code_state, # 保持舊程式碼
+                        dropdown: 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]
+            )
 
-        # --- [新增] Tab 3: 範例 2 (地震地圖) ---
+            # 2. "Live Demo" Dropdown 的邏輯
+            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)")
-            gr.Markdown("這是在「AI 創客空間」中教學的 Level 2 進階範例的**即時互動版本**。")
-            if IMPORTS_SUCCESSFUL:
-                # 建立 Level 2 App 的介面
-                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="搜尋天數 (過去幾天)"
+            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 # 更多行
                     )
-                search_button = gr.Button("搜尋並繪製地圖 🌍", variant="primary")
-                map_output = gr.HTML(label="地震分佈圖")
-                search_button.click(
-                    fn=fetch_and_plot_events, # 使用匯入的 fetch_and_plot_events 函式
-                    inputs=[mag_slider, days_slider],
-                    outputs=map_output
-                )
-            else:
-                gr.Warning("範例 2 載入失敗。請檢查 app.py 的匯入 (import) 設定，並確認 `obspy` 和 `folium` 已在 `requirements.txt` 中。")
+                    apply_btn_advanced = gr.Button("套用變更", variant="primary")
+                    apply_msg_advanced = gr.Markdown("")
+            
+            # --- 範例 2 的邏輯綁定 ---
+
+            # 1. "套用變更" 按鈕的邏輯
+            def update_advanced_code(new_code):
+                # 僅儲存，我們在點擊 "Search" 時才做完整測試
+                apply_msg_advanced.value = "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"
+                return new_code, "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"
+
+            apply_btn_advanced.click(
+                fn=lambda x: (x, "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"), # 簡單的儲存
+                inputs=[advanced_code_editor],
+                outputs=[advanced_code_state, apply_msg_advanced]
+            )
+
+            # 2. "Live Demo" Search 按鈕的邏輯
+            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>
+                <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=True):
-                gr.Markdown(
-                    """
-                    <div style="padding: 1rem 0;">
-                    <h3>Step 1: 點子發想 🧠</h3>
-                    <p>先想一個簡單的點子。例如：「我想做一個查詢『地科名詞』的字典！」</p>
-                    
-                    <h3>Step 2: 詠唱 AI 咒語 🧙</h3>
-                    <p>打開你最愛的 AI 助手，對它說出清晰的指令 (Prompt)，例如：</p>
-                    <blockquote>
-                    "請幫我用 Python 和 Gradio 寫一個簡單的應用。我需要一個下拉式選單，選項有「板塊構造」、「地震波」、「海嘯」。當我選擇一個選項時，下方要顯示對應的中文解釋。請給我完整的 `app.py` 程式碼。"
-                    </blockquote>
-                    
-                    <h3>Step 3: 取得程式碼 📜</h3>
-                    <p>AI 會給你一份完整的程式碼。下面這份就是 AI 可能會產生的答案，你可以直接複製它來進行下一步！</p>
-                    </div>
-                    """
-                )
-                gr.Code(
-                    label="app.py (Level 1 範例)",
-                    value=TUTORIAL_CODE_BASIC,
-                    language="python",
-                    interactive=False
-                )
+            with gr.Accordion("Level 1: 基礎字典 App 📖 (點我展開)", open=False):
+                gr.Markdown("### 部署你自己的版本：")
                 gr.Markdown(
                     """
-                    <div style="padding: 1rem 0;">
-                    <h3>Step 4: 部署到 Space 🚀</h3>
-                    <p>部署你自己的版本！</p>
                     <ol>
                         <li>到 Hugging Face 網站，點選你的頭像，選擇 <strong>"New Space"</strong>。</li>
                         <li>為你的 Space 命名 (例如: <code>my-geo-dictionary</code>)。</li>
@@ -320,35 +483,25 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                         <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>將上面 "Step 3" 的整段程式碼，完整貼到 `app.py` 的編輯器中。</strong></li>
+                        <li><strong>將下面的整段程式碼，完整貼到 `app.py` 的編輯器中。</strong></li>
                         <li>點擊 "Commit new file" (提交檔案)。</li>
                     </ol>
-                    
-                    <h3>Step 5: 恭喜你！🎉</h3>
-                    <p>等待幾分鐘，Hugging Face 會自動幫你把 App "建置" (Building) 起來。當你看到 "Running" 狀態時，恭喜你！你的第一個地科 App 已經上線了！</p>
-                    </div>
                     """
                 )
+                gr.Code(
+                    label="app.py (Level 1 範例)",
+                    value=TUTORIAL_CODE_BASIC.replace("get_definition(term):", "def get_definition(term):\n    global geo_dict"), # 修正範例程式碼中的 scope
+                    language="python",
+                    interactive=False
+                )
             
             with gr.Accordion("Level 2: 進階地震地圖 App 🌍 (點我展開)", open=False):
+                gr.Markdown("### 部署你自己的版本：")
                 gr.Markdown(
                     """
-                    <div style="padding: 1rem 0;">
-                    <h3>Step 1 & 2: 進階點子與咒語 🧙</h3>
-                    <p>Level 1 太簡單了？來挑戰更專業的！</p>
-                    <p><strong>新點子：</strong>「我想做一個互動地圖，顯示全球最近的地震。使用者可以自訂最小規模和搜尋天數。」</p>
-                    <blockquote>
-                    <strong>AI 咒語範例：</strong> "請幫我用 Gradio 寫一個 App。我需要兩個滑桿 (Slider) 讓使用者輸入「最小規模」和「搜尋天數」。按下按鈕後，程式應使用 `obspy` 函式庫的 `Client` 搜尋 IRIS FDSN 的地震資料，然後使用 `folium` 函式庫將這些地震繪製在一個互動地圖上。地圖應顯示在 Gradio 介面中。"
-                    </blockquote>
-                    
-                    <h3>[極度重要] Step 3.5: 告訴 Space 你需要新工具 (<code>requirements.txt</code>)</h3>
-                    <p>因為這個 App 需要 `obspy` 和 `folium` 這兩個 Python 函式庫 (Gradio 預設沒有安裝)，我們必須建立一個檔案來告訴 Hugging Face Space：</p>
-                    <ol>
-                        <li>在你的 Space 頁面，點選 "Files and versions" -> "Add file" -> "Create new file"。</li>
-                        <li>將檔案命名為 <strong><code>requirements.txt</code></strong> (必須是這個名字！)。</li>
-                        <li>將下面的三行文字貼到檔案中：</li>
-                    </ol>
-                    </div>
+                    <p>這次你需要上傳 <strong>2 個檔案</strong>到你自己的 Hugging Face Space：</p>
+                    <h4>1. <code>requirements.txt</code></h4>
+                    <p>建立這個檔案並貼上下面的內容，告訴 Hugging Face 你需要 `obspy` 和 `folium`。</p>
                     """
                 )
                 gr.Code(
@@ -356,35 +509,20 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     value=TUTORIAL_REQUIREMENTS,
                     interactive=False
                 )
-                gr.Markdown(
-                    """
-                    <div style="padding: 1rem 0;">
-                    <h3>Step 3.6: 取得進階程式碼 📜</h3>
-                    <p>AI 會給你一份更複雜的 `app.py` 程式碼，就像下面這份：</p>
-                    </div>
-                    """
-                )
+                gr.Markdown("<h4>2. <code>app.py</code></h4><p>建立 `app.py` 檔案並貼上下面的內容。</p>")
                 gr.Code(
                     label="app.py (Level 2 範例)",
-                    value=TUTORIAL_CODE_ADVANCED,
+                    value=TUTORIAL_CODE_ADVANCED.replace("# 1. 定義核心函式", 
+"""# --- 匯入函式庫 ---
+import gradio as gr
+import folium
+from obspy.clients.fdsn import Client
+from obspy import UTCDateTime
+
+# 1. 定義核心函式"""), # 補上 import
                     language="python",
                     interactive=False
                 )
-                gr.Markdown(
-                    """
-                    <div style="padding: 1rem 0;">
-                    <h3>Step 4: 部署 App (上傳 2 個檔案)</h3>
-                    <p>部署你自己的版本！</p>
-                    <ol>
-                        <li><code>requirements.txt</code> (包含 `gradio`, `obspy`, `folium` 的清單)</li>
-                        <li><code>app.py</code> (包含上面 Level 2 的程式碼)</li>
-                    </ol>
-                    
-                    <h3>Step 5: 恭喜！你已晉升！🎉</h3>
-                    <p>Hugging Face 偵測到 `requirements.txt` 後，會自動安裝 `obspy` 和 `folium`。建置完成後 (可能需要幾分鐘)，你將擁有一個專業級的地科應用程式！</spp>
-                    </div>
-                    """
-                )
 
         # --- Tab 5: 關於 Spaces ---
         with gr.TabItem("ℹ️ 關於 Spaces", id=4):
@@ -417,7 +555,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
     gr.Markdown(
         """
         <hr>
-        <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face G專案。</p>
+        <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face 專案。</p>
         """
     )