Update app.py

app.py

@@ -2,7 +2,18 @@ import gradio as gr
 import random
 import textwrap # 用於處理程式碼字串的縮排
 
-# [修復] 我們將從外部 .py 檔案讀取教學程式碼，以避免解析錯誤
+# [新增] 匯入範例 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
+
+
+# 從外部 .py 檔案讀取教學程式碼 (用於教學分頁)
 def load_code_from_file(filename):
     try:
         with open(filename, 'r', encoding='utf-8') as f:
@@ -174,7 +185,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
     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">
+            <img id="header-image" src="https://images.pexels.com/photos/220201/pexels-photo-2201.jpeg" alt="Abstract seismic waves banner">
             <h1>地球物理 x Hugging Face 專案展示</h1>
             <p>一個地球物理學家的數位百寶箱：探索一系列由 cwadayi 打造的地震與地科應用！</p>
             """
@@ -208,9 +219,63 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                                     elem_classes="project-button"
                                 )
         
-        # --- Tab 2: AI 創客空間 (學生教學) ---
-        with gr.TabItem("🎓 AI 創客空間", id=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) 設定。")
+
+        # --- [新增] 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="搜尋天數 (過去幾天)"
+                    )
+                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` 中。")
+
+        # --- Tab 4: AI 創客空間 (教學) ---
+        with gr.TabItem("🎓 AI 創客空間", id=3):
+            # (此分頁保持不變，繼續顯示教學文字和程式碼)
             gr.Markdown(
                 """
                 <div style="padding: 1rem 0;">
@@ -219,8 +284,6 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 </div>
                 """
             )
-            
-            # --- Level 1: 基礎教學 ---
             with gr.Accordion("Level 1: 基礎字典 App 📖 (點我展開)", open=True):
                 gr.Markdown(
                     """
@@ -239,18 +302,17 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     </div>
                     """
                 )
-                
                 gr.Code(
                     label="app.py (Level 1 範例)",
                     value=TUTORIAL_CODE_BASIC,
                     language="python",
                     interactive=False
                 )
-                
                 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>
@@ -268,7 +330,6 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     """
                 )
             
-            # --- Level 2: 進階教學 ---
             with gr.Accordion("Level 2: 進階地震地圖 App 🌍 (點我展開)", open=False):
                 gr.Markdown(
                     """
@@ -290,16 +351,11 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     </div>
                     """
                 )
-                
-                # [***** 修復 *****]
-                # 將 language="plaintext" 參數完全移除
                 gr.Code(
                     label="requirements.txt (必備)",
                     value=TUTORIAL_REQUIREMENTS,
-                    # language="plaintext", # <-- 錯誤已修正 (整行刪除)
                     interactive=False
                 )
-                
                 gr.Markdown(
                     """
                     <div style="padding: 1rem 0;">
@@ -308,19 +364,17 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     </div>
                     """
                 )
-                
                 gr.Code(
                     label="app.py (Level 2 範例)",
                     value=TUTORIAL_CODE_ADVANCED,
                     language="python",
                     interactive=False
                 )
-                
                 gr.Markdown(
                     """
                     <div style="padding: 1rem 0;">
                     <h3>Step 4: 部署 App (上傳 2 個檔案)</h3>
-                    <p>這次，你需要上傳 <strong>2 個檔案</strong>到你的 Hugging Face Space：</p>
+                    <p>部署你自己的版本！</p>
                     <ol>
                         <li><code>requirements.txt</code> (包含 `gradio`, `obspy`, `folium` 的清單)</li>
                         <li><code>app.py</code> (包含上面 Level 2 的程式碼)</li>
@@ -332,8 +386,8 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     """
                 )
 
-        # --- Tab 3: 關於 Spaces ---
-        with gr.TabItem("ℹ️ 關於 Spaces", id=2):
+        # --- Tab 5: 關於 Spaces ---
+        with gr.TabItem("ℹ️ 關於 Spaces", id=4):
             with gr.Row(equal_height=True, variant="panel"):
                 with gr.Column():
                     gr.Markdown(
@@ -341,7 +395,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                         ### 什麼是 Hugging Face Spaces？
                         Hugging Face Spaces 是一個由 Hugging Face 提供的免費平台，讓開發者和創作者可以輕鬆地建立、分享和展示他們的機器學習 Demo 或網頁應用程式。
                         
-                        它就像是 AI 應用的「YouTube」！您 Kontext C使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者部署靜態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。
+                        它就像是 AI 應用的「YouTube」！您可以使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者部署靜態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。
                         """
                     )
                 with gr.Column():
@@ -349,7 +403,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                         """
                         ### 🚀 如何部署 Gradio 應用程式？
                         **這本身就是一個 Gradio 應用程式！** 部署它非常簡單：
-                        1. 在 Hugging Face 建立一個新 Space。
+                        1. 在 Hugging Face 建立一個 new Space。
                         2. 選擇 SDK：選擇 **"Gradio"** (這也是預設選項)。
                         3. 建立 Space 後，點選 "Files and versions" 分頁。
                         4. 建立一個名為 `app.py` 的檔案。
@@ -363,7 +417,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
     gr.Markdown(
         """
         <hr>
-        <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face 專案。</p>
+        <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face G專案。</p>
         """
     )