Update app.py

app.py

@@ -2,6 +2,16 @@ import gradio as gr
 import random
 import textwrap # 用於處理程式碼字串的縮排
 
+# [修復] 我們將從外部 .py 檔案讀取教學程式碼，以避免解析錯誤
+def load_code_from_file(filename):
+    try:
+        with open(filename, 'r', encoding='utf-8') as f:
+            return f.read()
+    except FileNotFoundError:
+        return f"# 錯誤：找不到範例檔案 {filename}\n# 請確認您已上傳此檔案到 Space。"
+    except Exception as e:
+        return f"# 讀取時發生錯誤：{e}"
+
 # 1. 專案資料 (帶有 Emoji)
 projects_data = {
     "🌊 地震與波形展示": [
@@ -46,160 +56,18 @@ def recommend_project():
     [**點此立即前往 🚀**]({recommendation['url']})
     """
 
-# 3. 教學範例程式碼 (Level 1 - 基礎)
-TUTORIAL_CODE_BASIC = textwrap.dedent("""
-import gradio as gr
-
-# 1. 知識庫 (你的地科字典)
-geo_dict = {
-    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
-    "地震波 (Seismic Wave)": "地震時從震源向四面方方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
-    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
-}
-
-# 2. 定義介面函式
-def get_definition(term):
-    return geo_dict.get(term, "查無此名詞")
-
-# 3. 建立 Gradio 介面
-with gr.Blocks(title="我的地科字典") as demo:
-    gr.Markdown("# 🚀 我的第一個地科 App (Level 1)")
-    
-    dropdown = gr.Dropdown(
-        label="請選擇一個地科名詞",
-        choices=list(geo_dict.keys())
-    )
-    
-    output_textbox = gr.Textbox(
-        label="名詞解釋",
-        lines=5,
-        interactive=False
-    )
-    
-    dropdown.change(
-        fn=get_definition,
-        inputs=dropdown,
-        outputs=output_textbox
-    )
-
-demo.launch()
-""")
-
-# 4. [新增] requirements.txt 範例內容
+# 3. requirements.txt 範例內容
 TUTORIAL_REQUIREMENTS = textwrap.dedent("""
 gradio
 obspy
 folium
 """)
 
-# 5. [新增] 教學範例程式碼 (Level 2 - 進階)
-TUTORIAL_CODE_ADVANCED = textwrap.dedent("""
-import gradio as gr
-import folium
-from obspy.clients.fdsn import Client
-from obspy import UTCDateTime
-
-# 1. 定義核心函式：搜尋並繪圖
-def fetch_and_plot_events(min_mag, days_ago):
-    try:
-        # 設定 FDSN 客戶端 (IRIS)
-        client = Client("IRIS")
-        
-        # 設定時間
-        endtime = UTCDateTime.now()
-        starttime = endtime - (days_ago * 24 * 3600)
-        
-        # 搜尋地震目錄
-        catalog = client.get_events(
-            starttime=starttime,
-            endtime=endtime,
-            minmagnitude=min_mag
-        )
-        
-        # 建立 Folium 地圖
-        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)
-            
-        # [關鍵] 將 Folium 地圖物件轉換為 HTML 字串
-        return m._repr_html_()
-
-    except Exception as e:
-        return f"<p>發生錯誤：{e}</p>"
-
-# 2. 建立 Gradio 介面
-with gr.Blocks(title="進階地震地圖") as demo:
-    gr.Markdown("# 🚀 我的進階地科 App (Level 2)")
-    gr.Markdown("使用 ObsPy 從 IRIS FDSN 搜尋即時地震資料，並用 Folium 繪製互動式地圖。")
-    
-    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")
-    
-    # 輸出元件：使用 gr.HTML 來渲染 Folium 地圖
-    map_output = gr.HTML(label="地震分佈圖")
-    
-    # 3. 綁定互動
-    search_button.click(
-        fn=fetch_and_plot_events,
-        inputs=[mag_slider, days_slider],
-        outputs=map_output
-    )
-
-demo.launch()
-""")
-
+# 4. [修復] 從外部檔案載入教學程式碼
+TUTORIAL_CODE_BASIC = load_code_from_file("tutorial_basic.py")
+TUTORIAL_CODE_ADVANCED = load_code_from_file("tutorial_advanced.py")
 
-# 6. 自訂 CSS 樣式
+# 5. 自訂 CSS 樣式
 css = """
 /* 標頭樣式 */
 #main-header {
@@ -299,7 +167,7 @@ css = """
 #footer { text-align: center; color: #777; font-size: 0.9rem; margin-top: 2rem; }
 """
 
-# 7. 使用 gr.Blocks() 建構介面
+# 6. 使用 gr.Blocks() 建構介面
 with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as demo:
     
     # 標頭區
@@ -400,7 +268,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     """
                 )
             
-            # --- [新增] Level 2: 進階教學 ---
+            # --- Level 2: 進階教學 ---
             with gr.Accordion("Level 2: 進階地震地圖 App 🌍 (點我展開)", open=False):
                 gr.Markdown(
                     """
@@ -497,13 +365,13 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
         """
     )
     
-    # 8. 綁定按鈕點擊事件
+    # 7. 綁定按鈕點擊事件
     recommend_btn.click(
         fn=recommend_project,
         inputs=None,
         outputs=recommend_out
     )
 
-# 9. 啟動應用程式
+# 8. 啟動應用程式
 if __name__ == "__main__":
     demo.launch()