Update app.py

app.py

@@ -4,11 +4,21 @@ import textwrap
 import folium
 from obspy.clients.fdsn import Client
 from obspy import UTCDateTime
+import ast # [新增] 用於安全地解析字典
 
 # -------------------------------------------------------------------
-# 範例 1 (基礎) 的預設程式碼
+# 範例 1 (基礎) 的預設資料
+# [修復] 將字典定義為一個變數，以避免解析錯誤
 # -------------------------------------------------------------------
-TUTORIAL_CODE_BASIC = textwrap.dedent("""
+TUTORIAL_BASIC_INITIAL_DICT = {
+    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
+    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
+    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
+}
+
+# [修復] 使用 f-string 將字典注入教學程式碼中
+# 我們使用 repr() 來確保字串是有效的 Python 格式
+TUTORIAL_CODE_BASIC = textwrap.dedent(f"""
 # --- 這是 Level 1 範例的完整程式碼 ---
 # 試試看：
 # 1. 在 geo_dict 中新增一個你自己的詞條。
@@ -17,11 +27,7 @@ TUTORIAL_CODE_BASIC = textwrap.dedent("""
 # 4. 回到 "Live Demo" 分頁看看你的修改！
 
 # 1. 知識庫 (你的地科字典)
-geo_dict = {
-    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
-    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
-    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
-}
+geo_dict = {TUTORIAL_BASIC_INITIAL_DICT!r}
 
 # 2. 定義介面函式
 def get_definition(term):
@@ -125,7 +131,8 @@ 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
+            "float": float, "int": int, "list": list, "dict": dict, "range": range,
+            "True": True, "False": False, "None": None
         },
         "folium": folium,
         "Client": Client,
@@ -352,10 +359,12 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
             with gr.Tabs():
                 with gr.TabItem("🚀 Live Demo"):
                     gr.Markdown("在這裡測試你的程式碼！修改「Edit Code」分頁中的內容，按下「套用變更」，然後在這裡查看結果。")
+                    
+                    # [***** 修復 *****]
+                    # 更改了 choices 的來源，不再使用 eval(splitlines())
                     dropdown = gr.Dropdown(
                         label="請選擇一個地科名詞",
-                        # [動態] 選項會根據學生程式碼動態生成
-                        choices=list(eval(TUTORIAL_CODE_BASIC.splitlines()[10].split('=')[1].strip())) 
+                        choices=list(TUTORIAL_BASIC_INITIAL_DICT.keys()) # <-- 錯誤已修正
                     )
                     output_textbox = gr.Textbox(label="名詞解釋", lines=5, interactive=False)
                 
@@ -379,7 +388,10 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 # 並動態更新 Dropdown 的選項
                 local_scope = {}
                 try:
-                    exec(new_code, {"__builtins__": {}}, local_scope)
+                    # [修復] 使用 ast.parse 來檢查語法，然後用 exec 執行
+                    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` 變數或其不是一個字典。")
@@ -388,7 +400,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     new_choices = list(new_dict.keys())
                     return {
                         basic_code_state: new_code, # 儲存新程式碼到 state
-                        dropdown: gr.Dropdown(choices=new_choices), # 更新 Dropdown
+                        dropdown: gr.Dropdown(choices=new_choices, label="請選擇一個地科名詞"), # 更新 Dropdown
                         apply_msg_basic: gr.Markdown("✅ 變更已套用！請回到 'Live Demo' 分頁查看。")
                     }
                 except Exception as e:
@@ -490,7 +502,10 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 )
                 gr.Code(
                     label="app.py (Level 1 範例)",
-                    value=TUTORIAL_CODE_BASIC.replace("get_definition(term):", "def get_definition(term):\n    global geo_dict"), # 修正範例程式碼中的 scope
+                    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
                 )
@@ -512,14 +527,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                 gr.Markdown("<h4>2. <code>app.py</code></h4><p>建立 `app.py` 檔案並貼上下面的內容。</p>")
                 gr.Code(
                     label="app.py (Level 2 範例)",
-                    value=TUTORIAL_CODE_ADVANCED.replace("# 1. 定義核心函式", 
-"""# --- 匯入函式庫 ---
-import gradio as gr
-import folium
-from obspy.clients.fdsn import Client
-from obspy import UTCDateTime
-
-# 1. 定義核心函式"""), # 補上 import
+                    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
                 )