Update app.py

app.py

@@ -1,102 +1,94 @@
 import gradio as gr
 
-# --- 教學內容產生函式 ---
-def generate_tutorial_step(step):
-    if step == "🚀 你的任務：星際開發者":
-        return """
-        ## 🚀 你的任務：成為一名星際遠端開發者！
+# --- 將教學內容儲存為字典，方便管理 ---
+TUTORIAL_STEPS = {
+    "🚀 你的任務：星際開發者": """
+    ## 🚀 你的任務：成為一名星際遠端開發者！
 
-        這是一個專為星際開發者準備的模擬訓練。你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。
+    這是一個專為星際開發者準備的模擬訓練。你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。
 
-        **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。
+    **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。
 
-        ### 核心裝備介紹：
-        * **💻 你的駕駛艙 (Windows PC)**：你的操作終點，用來發號施令。
-        * **🧠 泰坦號機甲 (Mac Studio)**：遠在火星的超性能主機，所有繁重運算都在這裡進行。
-        * **🛰️ 量子通訊頻道 (SSH)**：連接你和機甲的超光速安全通道。
-        * **📦 任務模組 (Dev Container)**：一個自給自足的隔離環境，內含任務所需的一切工具與依賴，可隨時安裝或移除。
+    ### 核心裝備介紹：
+    * **💻 你的駕駛艙 (Windows PC)**：你的操作終點，用來發號施令。
+    * **🧠 泰坦號機甲 (Mac Studio)**：遠在火星的超性能主機，所有繁重運算都在這裡進行。
+    * **🛰️ 量子通訊頻道 (SSH)**：連接你和機甲的超光速安全通道。
+    * **📦 任務模組 (Dev Container)**：一個自給自足的隔離環境，內含任務所需的一切工具與依賴，可隨時安裝或移除。
 
-        ---
+    ---
+    <p align="center">
+        <img src="https://huggingface.co/spaces/{你的使用者名}/{專案名}/resolve/main/galaxy.jpg" alt="星際開發者封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
+    </p>
 
-        **星際開發者，準備就緒！**
-        
-        <p align="center">
-            <img src="/file=galaxy.jpg" alt="星際開發者封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
-        </p>
+    準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！
+    """,
+    "第 1 步：啟動泰坦號主機 (Mac Studio)": """
+    ## 第 1 步：啟動泰坦號主機的核心能源 (Mac Studio 設定)
 
-        準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！
-        """
-    elif step == "第 1 步：啟動泰坦號主機 (Mac Studio)":
-        return """
-        ## 第 1 步：啟動泰坦號主機的核心能源 (Mac Studio 設定)
+    在我們能遠端駕駛之前，必須先確保火星基地的「泰坦號」主機已開機並開放遠端連接埠。
 
-        在我們能遠端駕駛之前，必須先確保火星基地的「泰坦號」主機已開機並開放遠端連接埠。
+    ### 1. 安裝反物質引擎 (Docker Desktop)
+    「泰坦號」的動力來源於強大的 Docker 引擎。確保它已經在 Mac Studio 上安裝並啟動。這是運行「任務模組」的基礎。
 
-        ### 1. 安裝反物質引擎 (Docker Desktop)
-        「泰坦號」的動力來源於強大的 Docker 引擎。確保它已經在 Mac Studio 上安裝並啟動。這是運行「任務模組」的基礎。
+    ### 2. 開啟量子通訊埠 (啟用 SSH)
+    這是讓你的駕駛艙能與機甲建立通訊的關鍵。
+    * 在 macOS「系統設定」→ **一般** → **共享**。
+    * 開啟 **遠端登入**（SSH）。
+    * 記下系統顯示的連線位址（主機名稱或 IP 位址）。
 
-        ### 2. 開啟量子通訊埠 (啟用 SSH)
-        這是讓你的駕駛艙能與機甲建立通訊的關鍵。
-        * 在 macOS「系統設定」→ **一般** → **共享**。
-        * 開啟 **遠端登入**（SSH）。
-        * 記下系統顯示的連線位址（主機名稱或 IP 位址）。
+    ```bash
+    # 這是機甲的專屬座標，格式為：艦長名@星際IP位址
+    captain_astro@192.168.1.10
+    ```
 
-        ```bash
-        # 這是機甲的專屬座標，格式為：艦長名@星際IP位址
-        captain_astro@192.168.1.10
-        ```
+    **✅ 確認燈號：** 完成後，「泰坦號」的通訊埠已開啟，隨時準備接收來自地球的指令。
+    """,
+    "第 2 步：校準你的駕駛艙 (Windows PC)": """
+    ## 第 2 步：校準你的駕駛艙操作介面 (Windows PC 設定)
 
-        **✅ 確認燈號：** 完成後，「泰坦號」的通訊埠已開啟，隨時準備接收來自地球的指令。
-        """
-    elif step == "第 2 步：校準你的駕駛艙 (Windows PC)":
-        return """
-        ## 第 2 步：校準你的駕駛艙操作介面 (Windows PC 設定)
+    你的 Windows 駕駛艙需要安裝正確的軟體，才能向「泰坦號」發送指令。
 
-        你的 Windows 駕駛艙需要安裝正確的軟體，才能向「泰坦號」發送指令。
+    ### 1. 安裝主控台 (Visual Studio Code)
+    這是你的主操作介面，所有指令都將透過它發出。
 
-        ### 1. 安裝主控台 (Visual Studio Code)
-        這是你的主操作介面，所有指令都將透過它發出。
+    ### 2. 安裝「星際躍遷模組」 (Remote Development 擴充功能)
+    這個模組讓你的主控台具備了超光速通訊和遠端操控的能力。
+    * 在主控台的「擴充功能市集」中搜尋 `Remote Development`。
+    * 安裝由 **Microsoft** 艦隊提供的官方套件。
 
-        ### 2. 安裝「星際躍遷模組」 (Remote Development 擴充功能)
-        這個模組讓你的主控台具備了超光速通訊和遠端操控的能力。
-        * 在主控台的「擴充功能市集」中搜尋 `Remote Development`。
-        * 安裝由 **Microsoft** 艦隊提供的官方套件。
+    **✅ 確認燈號：** 你的駕駛艙現在配備了頂級的遠端操控系統。
+    """,
+    "第 3 步：建立量子通訊 (SSH 連線)": """
+    ## 第 3 步：建立穩定的量子通訊頻道 (SSH 連線)
 
-        **✅ 確認燈號：** 你的駕駛艙現在配備了頂級的遠端操控系統。
-        """
-    elif step == "第 3 步：建立量子通訊 (SSH 連線)":
-        return """
-        ## 第 3 步：建立穩定的量子通訊頻道 (SSH 連線)
+    萬事俱備，是時候連線了！我們要打開一條從地球到火星的即時通訊隧道。
 
-        萬事俱備，是時候連線了！我們要打開一條從地球到火星的即時通訊隧道。
+    1.  **鎖定目標：** 在 VS Code 主控台左側，點擊「遠端總管」圖示。
+    2.  **輸入座標：** 點擊「+」號，輸入你在第 1 步記下的「泰坦號」座標 (`ssh captain_astro@192.168.1.10`)。
+    3.  **執行躍遷！** 點擊目標旁邊的「連接」按鈕，並在提示時輸入「泰坦號」的登入密碼。
 
-        1.  **鎖定目標：** 在 VS Code 主控台左側，點擊「遠端總管」圖示。
-        2.  **輸入座標：** 點擊「+」號，輸入你在第 1 步記下的「泰坦號」座標 (`ssh captain_astro@192.168.1.10`)。
-        3.  **執行躍遷！** 點擊目標旁邊的「連接」按鈕，並在提示時輸入「泰坦號」的登入密碼。
+    **🎉 連線成功！**
+    當你的主控台左下角顯示綠色的 **`SSH: 192.168.1.10`** 時，代表你已成功登入「泰坦號」的駕駛艙！你眼前的一切，都是來自火星的即時畫面。
+    """,
+    "第 4 步：部署任務模組 (Dev Container)": """
+    ## 第 4 步：為泰坦號部署特製的「任務模組」 (Dev Container)
 
-        **🎉 連線成功！**
-        當你的主控台左下角顯示綠色的 **`SSH: 192.168.1.10`** 時，代表你已成功登入「泰坦號」的駕駛艙！你眼前的一切，都是來自火星的即時畫面。
-        """
-    elif step == "第 4 步：部署任務模組 (Dev Container)":
-        return """
-        ## 第 4 步：為泰坦號部署特製的「任務模組」 (Dev Container)
+    現在你已經在機甲內部了。接下來，我們要為這次任務安裝一個標準化的「任務模組」。
 
-        現在你已經在機甲內部了。接下來，我們要為這次任務安裝一個標準化的「任務模組」。
+    1.  **打開機庫：** 在主控台中，打開位於「泰坦號」儲存區的專案資料夾。
+    2.  **呼叫標準化模組：** 按下 `Ctrl + Shift + P`，選擇 `Dev Containers: Add Dev Container Configuration Files...`。
+    3.  **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。
+    4.  **開始安裝！** 主控台會提示你「**Reopen in Container」。點擊它！
 
-        1.  **打開機庫：** 在主控台中，打開位於「泰坦號」儲存區的專案資料夾。
-        2.  **呼叫標準化模組：** 按下 `Ctrl + Shift + P`，選擇 `Dev Containers: Add Dev Container Configuration Files...`。
-        3.  **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。
-        4.  **開始安裝！** 主控台會提示你「**Reopen in Container**」。點擊它！
+    **🚀 部署完畢！**
+    「泰坦號」的機械手臂會自動根據藍圖建造並進入「任務模組」。
 
-        **🚀 部署完畢！**
-        「泰坦���」的機械手臂會自動根據藍圖建造並進入「任務模組」。
-        
-        你的主控台左下角會顯示最終狀態：
-        **`Dev Container: [模組名稱] on SSH: 192.168.1.10`**
+    你的主控台左下角會顯示最終狀態：
+    **`Dev Container: [模組名稱] on SSH: 192.168.1.10`**
 
-        這代表：**你正坐在地球，透過量子通訊，操作著一台在火星的機甲，而這台機甲正運行著一個完全隔離的特製任務模組。** 未來已來！
-        """
-    return "請從下拉選單選擇一個步驟。"
+    這代表：**你正坐在地球，透過量子通訊，操作著一台在火星的機甲，而這台機甲正運行著一個完全隔離的特製任務模組。** 未來已來！
+    """
+}
 
 # --- 測驗答案檢查函式 ---
 def check_quiz_answer(choice):
@@ -105,6 +97,71 @@ def check_quiz_answer(choice):
     else:
         return "❌ **再想一想...** 記住，你的 Windows 電腦只是駕駛艙，用來發送指令和看螢幕。真正的引擎和機械手臂（程式執行）都在遠端的機甲（Mac Studio）上喔！"
 
+# --- 實際任務案例內容 ---
+CASE_STUDIES = {
+    "地震科學與 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;">
+    </p>
+
+    **挑戰：**
+    1.  **環境複雜：** 地震科學研究需要用到 `Obspy`, `Scipy`, `Pandas` 等大量科學計算庫，版本之間互相依賴，在本機上設定非常耗時且容易出錯。
+    2.  **運算密集：** 處理原始地震波資料（濾波、去噪）和訓練深度學習模型（如 CNN）需要強大的 CPU 和 GPU 運算能力。
+    3.  **研究再現性：** 確保研究團隊的每個人，甚至未來的自己，都能重現完全相同的實驗結果，這在科學研究中至關重要。
+
+    **解決方案：**
+    1.  **建立「地震分析任務模組」(Dev Container)：** 精確地定義作業系統、Python 版本，並安裝**特定版本**的 `Obspy`, `TensorFlow-Metal` (Apple Silicon GPU 加速版), `Jupyter Lab` 等所有工具。
+        * **成果：** 團隊任何人（無論用 Windows/Mac）只需一鍵「Reopen in Container」，就能獲得一個完全一致、立即可用的地震科學研究環境。
+
+    2.  **利用「泰坦號」(Mac Studio) 的超性能核心：** 強大的 CPU 用於高速處理 P-Alert 等來源的即時地震波資料；GPU/神經網路核心透過 `TensorFlow-Metal` 加速 AI 模型的訓練過程；龐大的統一記憶體讓載入大型歷史地震資料集時不會有效能瓶頸。
+
+    3.  **艦長 (研究員) 的工作流程：** 科學家在他的 Windows 駕駛艙中，透過 VS Code SSH 連線到「泰坦號」，進入「地震分析任務模組」，並在裡面啟動 Jupyter Lab 服務。所有運算都在遠端的「泰坦號」上全力運行，科學家自己的 Windows 電腦資源完全不受影響。
+
+    **最終成果：** 打造了一個高效、穩定且可重現的地震科學研究工作流程，讓科學家能專注於演算法和模型本身，這是開發下一代地震預警系統原型的絕佳基礎。
+    """,
+    "跨平台 App 開發": """
+    ### 任務情境：開發星際通訊 App (Flutter / React Native)
+
+    **挑戰：**
+    你需要開發一款 App，必須同時能在「安卓星系」和「蘋果星系」的裝置上運行。然而，要為「蘋果星系」編譯 App，**必須**使用蘋果的星際鑄造廠（macOS 上的 Xcode）。
+
+    **解決方案：**
+    1.  **指定「泰坦號」(Mac Studio) 為官方鑄造廠。**
+    2.  **建立一個 Dev Container 藍圖**，裡面包含 Flutter/React Native SDK、安卓 SDK 和所有開發工具。
+    3.  **團隊協作：** 所有成員都透過 SSH 連接到「泰坦號」上的同一個 Dev Container 環境進行開發和安卓版測試。當需要編譯蘋果版時，可以直接在「泰坦號」的 macOS 環境中執行 Xcode build 指令。
+
+    **成果：** 完美解決了跨平台編譯的依賴問題，確保了團隊共享一個統一、高效的開發環境。
+    """,
+    "AI 模型訓練": """
+    ### 任務情境：訓練識別外星生物的 AI 模型
+
+    **挑戰：**
+    你的 Windows 駕駛艙性能有限，無法快速訓練複雜的深度學習模型。但「泰坦號」（Mac Studio）搭載了為 AI 加速的「神經網路核心」（Neural Engine）。
+
+    **解決方案：**
+    1.  **建立一個 AI 專用的 Dev Container 藍圖**，預先安裝好 TensorFlow (Metal 加速版)、PyTorch、Jupyter Lab 等。
+    2.  **遠端工作流程：** 你在 Windows 上撰寫程式碼，但所有的模型訓練和數據處理**都在「泰坦號」上利用其強大的硬體執行**。
+
+    **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。
+    """,
+    "大型網頁後端開發": """
+    ### 任務情境：建構星際貿易站的後端系統
+
+    **挑戰：**
+    專案包含多個微服務、資料庫和快取，全部用 Docker Compose 編排。團隊成員的電腦作業系統各不相同。
+
+    **解決方案：**
+    1.  **在專案中建立一個 Dev Container**，其設定檔 (`devcontainer.json`) 指向 `docker-compose.yml` 檔案。
+    2.  **一鍵啟動：** 當團隊成員在容器中打開專案時，整個複雜的後端環境會被一鍵完整啟動。
+
+    **成果：** 新人加入專案的準備時間從半天縮短到 15 分鐘，徹底消除了因本機環境差異導致的 bug。
+    """
+}
+
 # --- Gradio 應用介面設定 ---
 with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") as demo:
     gr.Markdown(
@@ -118,95 +175,19 @@ with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") a
         with gr.TabItem("🚀 互動式教學", id=0):
             gr.Markdown("歡迎來到艦長訓練模擬器！請從下面的下拉選單中選擇您的訓練科目，一步步學習如何成為一名合格的星際開發者。")
             step_selector = gr.Dropdown(
-                [
-                    "🚀 你的任務：星際開發者",
-                    "第 1 步：啟動泰坦號主機 (Mac Studio)",
-                    "第 2 步：校準你的駕駛艙 (Windows PC)",
-                    "第 3 步：建立量子通訊 (SSH 連線)",
-                    "第 4 步：部署任務模組 (Dev Container)",
-                ],
+                list(TUTORIAL_STEPS.keys()),
                 label="選擇訓練科目",
                 value="🚀 你的任務：星際開發者"
             )
             tutorial_output = gr.Markdown()
             step_selector.change(fn=generate_tutorial_step, inputs=step_selector, outputs=tutorial_output)
-            
+
         with gr.TabItem("🛰️ 實際任務案例", id=1):
             gr.Markdown("理論學習完畢，來看看「泰坦號」機甲在真實的星際任務中能發揮什麼作用。")
             with gr.Tabs() as case_tabs:
-                with gr.TabItem("🌍 案例一：地震科學與 AI 預警", id=2):
-                    gr.Markdown(
-                        """
-                        ### 任務情境：建構台灣地震 AI 分析與預警系統原型
-
-                        台灣位於環太平洋地震帶，開發更快速、更準確的地震預警系統至關重要。這項研究需要處理大量的即時地震波形資料，並訓練 AI 模型來預測 P 波到達時間與地震規模。
-
-                        <p align="center">
-                            <img src="/file=seismic.jpg" alt="地震科學封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
-                        </p>
-                        
-                        **挑戰：**
-                        1.  **環境複雜：** 地震科學研究需要用到 `Obspy`, `Scipy`, `Pandas` 等大量科學計算庫，版本之間互相依賴，在本機上設定非常耗時且容易出錯。
-                        2.  **運算密集：** 處理原始地震波資料（濾波、去噪）和訓練深度學習模型（如 CNN）需要強大的 CPU 和 GPU 運算能力。
-                        3.  **研究再現性：** 確保研究團隊的每個人，甚至未來的自己，都能重現完全相同的實驗結果，這在科學研究中至關重要。
-
-                        **解決方案：**
-                        1.  **建立「地震分析任務模組」(Dev Container)：** 精確地定義作業系統、Python 版本，並安裝**特定版本**的 `Obspy`, `TensorFlow-Metal` (Apple Silicon GPU 加速版), `Jupyter Lab` 等所有工具。
-                            * **成果：** 團隊任何人（無論用 Windows/Mac）只需一鍵「Reopen in Container」，就能獲得一個完全一致、立即可用的地震科學研究環境。
-
-                        2.  **利用「泰坦號」(Mac Studio) 的超性能核心：** 強大的 CPU 用於高速處理 P-Alert 等來源的即時地震波資料；GPU/神經網路核心透過 `TensorFlow-Metal` 加速 AI 模型的訓練過程；龐大的統一記憶體讓載入大型歷史地震資料集時不會有效能瓶頸。
-
-                        3.  **艦長 (研究員) 的工作流程：** 科學家在他的 Windows 駕駛艙中，透過 VS Code SSH 連線到「泰坦號」，進入「地震分析任務模組」，並在裡面啟動 Jupyter Lab 服務。所有運算都在遠端的「泰坦號」上全力運行，科學家自己的 Windows 電腦資源完全不受影響。
-
-                        **最終成果：** 打造了一個高效、穩定且可重現的地震科學研究工作流程，��科學家能專注於演算法和模型本身，這是開發下一代地震預警系統原型的絕佳基礎。
-                        """
-                    )
-                with gr.TabItem("📱 案例二：跨平台 App 開發", id=3):
-                    gr.Markdown(
-                        """
-                        ### 任務情境：開發星際通訊 App (Flutter / React Native)
-
-                        **挑戰：**
-                        你需要開發一款 App，必須同時能在「安卓星系」和「蘋果星系」的裝置上運行。然而，要為「蘋果星系」編譯 App，**必須**使用蘋果的星際鑄造廠（macOS 上的 Xcode）。
-
-                        **解決方案：**
-                        1.  **指定「泰坦號」(Mac Studio) 為官方鑄造廠。**
-                        2.  **建立一個 Dev Container 藍圖**，裡面包含 Flutter/React Native SDK、安卓 SDK 和所有開發工具。
-                        3.  **團隊協作：** 所有成員都透過 SSH 連接到「泰坦號」上的同一個 Dev Container 環境進行開發和安卓版測試。當需要編譯蘋果版時，可以直接在「泰坦號」的 macOS 環境中執行 Xcode build 指令。
-
-                        **成果：** 完美解決了跨平台編譯的依賴問題，確保了團隊共享一個統一、高效的開發環境。
-                        """
-                    )
-                with gr.TabItem("🤖 案例三：AI 模型訓練", id=4):
-                    gr.Markdown(
-                        """
-                        ### 任務情境：訓練識別外星生物的 AI 模型
-
-                        **挑戰：**
-                        你的 Windows 駕駛艙性能有限，無法快速訓練複雜的深度學習模型。但「泰坦號」（Mac Studio）搭載了為 AI 加速的「神經網路核心」（Neural Engine）。
-
-                        **解決方案：**
-                        1.  **建立一個 AI 專用的 Dev Container 藍圖**，預先安裝好 TensorFlow (Metal 加速版)、PyTorch、Jupyter Lab 等。
-                        2.  **遠端工作流程：** 你在 Windows 上撰寫程式碼，但所有的模型訓練和數據處理**都在「泰TAN號」上利用其強大的硬體執行**。
-
-                        **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。
-                        """
-                    )
-                with gr.TabItem("🌐 案例四：大型網頁後端開發", id=5):
-                    gr.Markdown(
-                        """
-                        ### 任務情境：建構星際貿易站的後端系統
-
-                        **挑戰：**
-                        專案包含多個微服務、資料庫和快取，全部用 Docker Compose 編排。團隊成員的電腦作業系統各不相同。
-
-                        **解決方案：**
-                        1.  **在專案中建立一個 Dev Container**，其設定檔 (`devcontainer.json`) 指向 `docker-compose.yml` 檔案。
-                        2.  **一鍵啟動：** 當團隊成員在容器中打開專案時，整個複雜的後端環境會被一鍵完整啟動。
-
-                        **成果：** 新人加入專案的準備時間從半天縮短到 15 分鐘，徹底消除了因本機環境差異導致的 bug。
-                        """
-                    )
+                for title, content in CASE_STUDIES.items():
+                    with gr.TabItem(title, id=title):
+                        gr.Markdown(content)
 
         with gr.TabItem("🧠 知識小測驗", id=6):
             gr.Markdown("完成訓練後，讓我們來個快速測驗，檢驗你的學習成果！")