Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-# --- 將教學內容儲存為字典，方便管理 ---
+# --- 將教學內容儲存為字典 ---
 TUTORIAL_STEPS = {
     "🚀 你的任務：星際開發者": """
     ## 🚀 你的任務：成為一名星際遠端開發者！
@@ -17,7 +17,7 @@ TUTORIAL_STEPS = {
 
     ---
     <p align="center">
-        <img src="https://huggingface.co/spaces/{你的使用者名}/{專案名}/resolve/main/galaxy.jpg" alt="星際開發者封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
+        <img src="https://huggingface.co/spaces/cwadayi/Dev_container/resolve/main/galaxy.jpg" alt="星際開發者封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
     </p>
 
     準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！
@@ -90,22 +90,15 @@ TUTORIAL_STEPS = {
     """
 }
 
-# --- 測驗答案檢查函式 ---
-def check_quiz_answer(choice):
-    if choice == "在遠端的 Mac Studio 上的 Dev Container 裡":
-        return "✅ **答對了！** 你完全掌握了！你的 Windows 電腦只是一個遙控器，所有的運算和執行都在遠端主機的隔離環境中，這就是這個架構的精髓所在！"
-    else:
-        return "❌ **再想一想...** 記住，你的 Windows 電腦只是駕駛艙，用來發送指令和看螢幕。真正的引擎和機械手臂（程式執行）都在遠端的機甲（Mac Studio）上喔！"
-
 # --- 實際任務案例內容 ---
 CASE_STUDIES = {
-    "地震科學與 AI 預警": """
+    "🌍 地震科學與 AI 預警": """
     ### 任務情境：建構台灣地震 AI 分析與預警系統原型
 
     台灣位於環太平洋地震帶，開發更快速、更準確的地震預警系統至關重要。這項研究需要處理大量的即時地震波形資料，並訓練 AI 模型來預測 P 波到達時間與地震規模。
 
     <p align="center">
-        <img src="https://huggingface.co/spaces/{你的使用者名}/{專案名}/resolve/main/seismic.jpg" alt="地震科學封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
+        <img src="https://huggingface.co/spaces/cwadayi/Dev_container/resolve/main/seismic.jpg" alt="地震科學封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
     </p>
 
     **挑戰：**
@@ -123,7 +116,7 @@ CASE_STUDIES = {
 
     **最終成果：** 打造了一個高效、穩定且可重現的地震科學研究工作流程，讓科學家能專注於演算法和模型本身，這是開發下一代地震預警系統原型的絕佳基礎。
     """,
-    "跨平台 App 開發": """
+    "📱 跨平台 App 開發": """
     ### 任務情境：開發星際通訊 App (Flutter / React Native)
 
     **挑戰：**
@@ -136,7 +129,7 @@ CASE_STUDIES = {
 
     **成果：** 完美解決了跨平台編譯的依賴問題，確保了團隊共享一個統一、高效的開發環境。
     """,
-    "AI 模型訓練": """
+    "🤖 AI 模型訓練": """
     ### 任務情境：訓練識別外星生物的 AI 模型
 
     **挑戰：**
@@ -148,7 +141,7 @@ CASE_STUDIES = {
 
     **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。
     """,
-    "大型網頁後端開發": """
+    "🌐 大型網頁後端開發": """
     ### 任務情境：建構星際貿易站的後端系統
 
     **挑戰：**
@@ -162,6 +155,17 @@ CASE_STUDIES = {
     """
 }
 
+# --- 教學內容產生函式 ---
+def generate_tutorial_step(step):
+    return TUTORIAL_STEPS.get(step, "請從下拉選單選擇一個步驟。")
+
+# --- 測驗答案檢查函式 ---
+def check_quiz_answer(choice):
+    if choice == "在遠端的 Mac Studio 上的 Dev Container 裡":
+        return "✅ **答對了！** 你完全掌握了！你的 Windows 電腦只是一個遙控器，所有的運算和執行都在遠端主機的隔離環境中，這就是這個架構的精髓所在！"
+    else:
+        return "❌ **再想一想...** 記住，你的 Windows 電腦只是駕駛艙，用來發送指令和看螢幕。真正的引擎和機械手臂（程式執行）都在遠端的機甲（Mac Studio）上喔！"
+
 # --- Gradio 應用介面設定 ---
 with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") as demo:
     gr.Markdown(