Update app.py

app.py

@@ -11,7 +11,7 @@ import ast # [新增] 用於安全地解析字典
 # [修復] 將字典定義為一個變數，以避免解析錯誤
 # -------------------------------------------------------------------
 TUTORIAL_BASIC_INITIAL_DICT = {
-    "板塊构造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
+    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
     "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
     "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
 }
@@ -25,7 +25,6 @@ TUTORIAL_CODE_BASIC = textwrap.dedent(f"""
 # 2. 修改 "海嘯" 的解釋。
 # 3. 按下方的 "套用變更" 按鈕。
 # 4. 回到 "Live Demo" 分頁看看你的修改！
-import gradio as gr
 
 # 1. 知識庫 (你的地科字典)
 geo_dict = {TUTORIAL_BASIC_INITIAL_DICT!r}
@@ -34,54 +33,17 @@ geo_dict = {TUTORIAL_BASIC_INITIAL_DICT!r}
 def get_definition(term):
     # geo_dict 會從這個程式碼的 "全域" 範圍內被找到
     return geo_dict.get(term, "查無此名詞")
-
-# --- 以下是 Gradio 啟動介面的程式碼 ---
-# (當你獨立部署此 App 時需要)
-
-# 取得詞條列表
-term_list = list(geo_dict.keys())
-
-# 建立介面
-with gr.Blocks() as demo:
-    gr.Markdown("# 🚀 Level 1: 地科字典")
-    
-    term_input = gr.Dropdown(
-        choices=term_list, 
-        label="請選擇一個地科名詞", 
-        value=term_list[0] if term_list else None
-    )
-    definition_output = gr.Textbox(label="名詞解釋", lines=4, interactive=False)
-    
-    term_input.change(
-        fn=get_definition, 
-        inputs=term_input, 
-        outputs=definition_output
-    )
-    
-    # 網頁載入時，自動顯示第一個
-    if term_list:
-        demo.load(
-            fn=get_definition, 
-            inputs=lambda: term_list[0], 
-            outputs=definition_output
-        )
-
-# demo.launch() # 在這個整合 App 中由主程式控制
 """)
 
 # -------------------------------------------------------------------
 # 範例 1 (基礎) 的動態執行 Wrapper
 # -------------------------------------------------------------------
 def run_basic_code(term, code_string):
-    """
-    在受限環境中執行學生編輯的 Level 1 程式碼
-    """
     local_scope = {}
     try:
         # 在一個受限的環境中執行程式碼
         # 這會定義 geo_dict 和 get_definition
-        # 注意：這裡的沙盒相對寬鬆， Level 2 範例更嚴謹
-        exec(code_string, {"__builtins__": {}, "gradio": gr}, local_scope)
+        exec(code_string, {"__builtins__": {}}, local_scope)
         
         get_definition_func = local_scope.get("get_definition")
         
@@ -105,17 +67,10 @@ TUTORIAL_CODE_ADVANCED = textwrap.dedent("""
 # 3. 按下方的 "套用變更" 按鈕。
 # 4. 回到 "Live Demo" 分頁，搜尋地震看看你的修改！
 
-# --- 匯入函式庫 (主程式已安全載入) ---
-# 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:
         # Folium, Client, UTCDateTime 已經被安全地匯入
-        # 你可以直接使用它們
         client = Client("IRIS")
         endtime = UTCDateTime.now()
         starttime = endtime - (days_ago * 24 * 3600)
@@ -162,58 +117,33 @@ def fetch_and_plot_events(min_mag, days_ago):
                 fill_opacity=0.6
             ).add_to(m)
             
-        # 回傳 Folium 地圖的 HTML 內容
         return m._repr_html_()
 
     except Exception as e:
         return f"<p>發生錯誤：{e}</p>"
-
-# --- 以下是 Gradio 啟動介面的程式碼 ---
-# (當你獨立部署此 App 時需要)
-# with gr.Blocks() as demo:
-#     gr.Markdown("# 🚀 Level 2: 進階地震地圖")
-#     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,
-#         inputs=[mag_slider, days_slider],
-#         outputs=map_output
-#     )
-#
-# demo.launch() # 在這個整合 App 中由主程式控制
 """)
 
 # -------------------------------------------------------------------
 # 範例 2 (進階) 的安全沙盒與動態執行 Wrapper
 # -------------------------------------------------------------------
 def run_advanced_code(min_mag, days_ago, code_string):
-    """
-    在嚴格的受限環境中執行學生編輯的 Level 2 程式碼
-    """
-    # 建立一個安全的 "全域" 環境，只允許必要的模組和內建函式
+    # 建立一個安全的 "全域" 環境，只允許必要的模組
     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, "callable": callable,
-            "isinstance": isinstance, "ValueError": ValueError
+            "True": True, "False": False, "None": None
         },
         "folium": folium,
         "Client": Client,
-        "UTCDateTime": UTCDateTime,
-        "gr": gr # 允許 Gradio (雖然在這個範例中沒用到，但未來可能有用)
+        "UTCDateTime": UTCDateTime
     }
     
     local_scope = {}
     
     try:
         # 在安全沙盒中執行學生程式碼
-        parsed_code = ast.parse(code_string)
-        exec(compile(parsed_code, "<string>", "exec"), safe_globals, local_scope)
+        exec(code_string, safe_globals, local_scope)
         
         fetch_func = local_scope.get("fetch_and_plot_events")
         
@@ -261,7 +191,6 @@ projects_data = {
 }
 
 def recommend_project():
-    """從所有專案中隨機挑選一個"""
     all_projects = [item for sublist in projects_data.values() for item in sublist]
     recommendation = random.choice(all_projects)
     return f"""
@@ -269,9 +198,6 @@ def recommend_project():
     [**點此立即前往 🚀**]({recommendation['url']})
     """
 
-# -------------------------------------------------------------------
-# 獨立部署範例所需的 requirements.txt 內容
-# -------------------------------------------------------------------
 TUTORIAL_REQUIREMENTS = textwrap.dedent("""
 gradio
 obspy
@@ -434,10 +360,11 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 with gr.TabItem("🚀 Live Demo"):
                     gr.Markdown("在這裡測試你的程式碼！修改「Edit Code」分頁中的內容，按下「套用變更」，然後在這裡查看結果。")
                     
-                    # [修復] Dropdown 的 choices 會由 "套用變更" 按鈕的邏輯動態更新
+                    # [***** 修復 *****]
+                    # 更改了 choices 的來源，不再使用 eval(splitlines())
                     dropdown = gr.Dropdown(
                         label="請選擇一個地科名詞",
-                        choices=list(TUTORIAL_BASIC_INITIAL_DICT.keys()) # 初始選項
+                        choices=list(TUTORIAL_BASIC_INITIAL_DICT.keys()) # <-- 錯誤已修正
                     )
                     output_textbox = gr.Textbox(label="名詞解釋", lines=5, interactive=False)
                 
@@ -457,18 +384,13 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
             
             # 1. "套用變更" 按鈕的邏輯
             def update_basic_code(new_code):
-                """
-                當學生按下「套用變更」時執行：
-                1. 嘗試執行新程式碼
-                2. 如果成功，解析出新的 geo_dict
-                3. 動態更新 Live Demo 分頁中的 Dropdown 選項
-                4. 儲存新的程式碼到 state
-                """
+                # 執行程式碼以檢查是否有語法錯誤
+                # 並動態更新 Dropdown 的選項
                 local_scope = {}
                 try:
                     # [修復] 使用 ast.parse 來檢查語法，然後用 exec 執行
                     parsed_code = ast.parse(new_code)
-                    exec(compile(parsed_code, "<string>", "exec"), {"__builtins__": {}, "gradio": gr}, local_scope)
+                    exec(compile(parsed_code, "<string>", "exec"), {"__builtins__": {}}, local_scope)
                     
                     new_dict = local_scope.get("geo_dict")
                     if not isinstance(new_dict, dict):
@@ -476,7 +398,6 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     
                     # 成功！更新 Dropdown 選項並儲存程式碼
                     new_choices = list(new_dict.keys())
-                    # [關鍵] 回傳一個字典來更新多個元件
                     return {
                         basic_code_state: new_code, # 儲存新程式碼到 state
                         dropdown: gr.Dropdown(choices=new_choices, label="請選擇一個地科名詞"), # 更新 Dropdown
@@ -485,8 +406,8 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 except Exception as e:
                     # 失敗！
                     return {
-                        basic_code_state: basic_code_state, # 保持舊程式碼 (不更新)
-                        dropdown: dropdown, # 保持舊 Dropdown (不更新)
+                        basic_code_state: basic_code_state, # 保持舊程式碼
+                        dropdown: dropdown, # 保持舊 Dropdown
                         apply_msg_basic: gr.Markdown(f"❌ 程式碼錯誤，未套用：\n```\n{e}\n```")
                     }
             
@@ -517,7 +438,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                         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="地震分佈圖", value="<p style='text-align:center; color:grey;'>點擊 '搜尋' 按鈕來載入地圖</p>")
+                    map_output = gr.HTML(label="地震分佈圖")
 
                 with gr.TabItem("✏️ Edit Code"):
                     gr.Markdown("在這裡修改 Python 程式碼，然後按下「套用變更」儲存。")
@@ -535,34 +456,19 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
 
             # 1. "套用變更" 按鈕的邏輯
             def update_advanced_code(new_code):
-                """
-                當學生按下「套用變更」時執行：
-                1. 僅儲存新程式碼到 state
-                2. 提示使用者去按 "搜尋"
-                (我們不在這裡執行，因為執行需要時間，而且需要參數)
-                """
+                # 僅儲存，我們在點擊 "Search" 時才做完整測試
+                apply_msg_advanced.value = "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"
                 return new_code, "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"
 
             apply_btn_advanced.click(
-                fn=update_advanced_code,
+                fn=lambda x: (x, "✅ 變更已儲存！請回到 'Live Demo' 分頁並點擊 '搜尋' 來執行新程式碼。"), # 簡單的儲存
                 inputs=[advanced_code_editor],
                 outputs=[advanced_code_state, apply_msg_advanced]
             )
 
             # 2. "Live Demo" Search 按鈕的邏輯
-            def search_button_click(min_mag, days_ago, code_string):
-                """
-                點擊搜尋時，顯示「載入中」訊息，
-                然後呼叫 run_advanced_code 執行沙盒程式碼
-                """
-                yield "<p style='text-align:center; color:grey;'>🌍 正在從 IRIS 擷取資料並繪製地圖，請稍候...</p>"
-                
-                # 執行學生的程式碼
-                html_result = run_advanced_code(min_mag, days_ago, code_string)
-                yield html_result
-
             search_button.click(
-                fn=search_button_click,
+                fn=run_advanced_code,
                 inputs=[mag_slider, days_slider, advanced_code_state], # [動態] 傳入儲存的程式碼
                 outputs=map_output
             )
@@ -594,17 +500,12 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     </ol>
                     """
                 )
-                # 產生獨立的 Level 1 程式碼 (從範本中擷取)
-                level_1_standalone_code = (
-                    "import gradio as gr\n\n" + 
-                    TUTORIAL_CODE_BASIC.split("# --- 以下是 Gradio 啟動介面的程式碼 ---")[0] + 
-                    "\n" + 
-                    TUTORIAL_CODE_BASIC.split("# (當你獨立部署此 App 時需要)")[1].split("# demo.launch()")[0] +
-                    "\ndemo.launch()"
-                )
                 gr.Code(
-                    label="app.py (Level 1 獨立部署版)",
-                    value=level_1_standalone_code,
+                    label="app.py (Level 1 範例)",
+                    value=TUTORIAL_CODE_BASIC.replace(
+                        "def get_definition(term):", 
+                        "import gradio as gr\n\ndef get_definition(term):\n    global geo_dict"
+                    ) + "\n\ndemo.launch()", # 補上 import 和 launch
                     language="python",
                     interactive=False
                 )
@@ -621,22 +522,12 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 gr.Code(
                     label="requirements.txt (必備)",
                     value=TUTORIAL_REQUIREMENTS,
-                    language="text",
                     interactive=False
                 )
                 gr.Markdown("<h4>2. <code>app.py</code></h4><p>建立 `app.py` 檔案並貼上下面的內容。</p>")
-                # 產生獨立的 Level 2 程式碼 (從範本中擷取)
-                level_2_standalone_code = (
-                    "import gradio as gr\nimport folium\nfrom obspy.clients.fdsn import Client\nfrom obspy import UTCDateTime\n\n" +
-                    TUTORIAL_CODE_ADVANCED.split("# --- 匯入函式庫 (主程式已安全載入) ---")[0] + # (如果TUTORIAL_CODE_ADVANCED有開頭的話)
-                    TUTORIAL_CODE_ADVANCED.split("# --- 以下是 Gradio 啟動介面的程式碼 ---")[0] +
-                    "\n" +
-                    TUTORIAL_CODE_ADVANCED.split("# (當你獨立部署此 App 時需要)")[1].split("# demo.launch()")[0] +
-                    "\ndemo.launch()"
-                )
                 gr.Code(
-                    label="app.py (Level 2 獨立部署版)",
-                    value=level_2_standalone_code,
+                    label="app.py (Level 2 範例)",
+                    value="# --- 匯入函式庫 ---\nimport gradio as gr\nimport folium\nfrom obspy.clients.fdsn import Client\nfrom obspy import UTCDateTime\n\n" + TUTORIAL_CODE_ADVANCED + "\n\ndemo.launch()", # 補上 import 和 launch
                     language="python",
                     interactive=False
                 )
@@ -663,7 +554,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                         3. 建立 Space 後，點選 "Files and versions" 分頁。
                         4. 建立一個名為 `app.py` 的檔案。
                         5. **將這份 Python 程式碼**貼到 `app.py` 中並提交。
-                        6. (進階) 如果你的 App 需要 `obspy` 這樣的額外函式庫，請再建立一個 `requirements.txt` 檔案並列出它們 (就像這個 App 一樣)。
+                        6. (進階) 如果你的 App 需要 `obspy` 這樣的額外函式庫，請再建立一個 `requirements.txt` 檔案並列出它們。
                         7. **完成！** 您的Gradio應用程式將自動建置並上線。
                         """
                     )