Update app.py

app.py

@@ -11,7 +11,7 @@ def generate_tutorial_step(step):
         **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。
 
         ### 核心裝備介紹：
-        * **💻 你的駕駛艙 (Windows PC):** 你的操作終端，用來發號施令。
+        * **💻 你的駕駛艙 (Windows PC):** 你的操作終點，用來發號施令。
         * **🧠 泰坦號機甲 (Mac Studio):** 遠在火星的超性能主機，所有繁重運算都在這裡進行。
         * **🛰️ 量子通訊頻道 (SSH):** 連接你和機甲的超光速安全通道。
         * **📦 任務模組 (Dev Container):** 一個自給自足的隔離環境，內含任務所需的一切工具和零件，可隨時安裝或卸除，不影響機甲本體。
@@ -77,7 +77,7 @@ def generate_tutorial_step(step):
 
         1.  **打開機庫：** 在主控台中，打開位於「泰坦號」儲存區的專案資料夾。
         2.  **呼叫標準化模組：** 按下 `Ctrl + Shift + P`，選擇 `Dev Containers: Add Dev Container Configuration Files...`。
-        3.  **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3` 或 `Node.js`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。
+        3.  **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。
         4.  **開始安裝！** 主控台會提示你「**Reopen in Container**」。點擊它！
 
         **🚀 部署完畢！**
@@ -90,65 +90,14 @@ def generate_tutorial_step(step):
         """
     return "請從下拉選單選擇一個步驟。"
 
-def generate_case_study(case):
-    if case == "案例一：跨平台 App 開發":
-        return """
-        ### 任務情境：開發星際通訊 App (Flutter / React Native)
-
-        **挑戰：**
-        你需要開發一款 App，必須同時能在「安卓星系」和「蘋果星系」的裝置上運行。你的團隊成員有的用 Windows 駕駛艙，有的用 Mac 駕駛艙。然而，要為「蘋果星系」編譯 App，**必須**使用蘋果的星際鑄造廠（macOS 上的 Xcode）。
-
-        **解決方案：**
-        1.  **指定「泰坦號」(Mac Studio) 為官方鑄造廠。**
-        2.  **建立一個 Dev Container 藍圖**，裡面包含 Flutter/React Native SDK、安卓 SDK 和所有開發工具。
-        3.  **團隊協作：**
-            * 所有成員（無論用 Windows 還是 Mac）都透過 SSH 連接到「泰坦號」上的同一個 Dev Container 環境進行開發和安卓版測試。
-            * 當需要編譯蘋果版時，可以直接在「泰坦號」的 macOS 環境中執行 Xcode build 指令，因為所有程式碼和設定都已經在主機上了。
-
-        **成果：** 完美解決了跨平台編譯的依賴問題。團隊共享一個統一、高效的開發環境，避免了「在我的星球上可以跑」的窘境。
-        """
-    elif case == "案例二：AI 模型訓練":
-        return """
-        ### 任務情境：訓練識別外星生物的 AI 模型
-
-        **挑戰：**
-        你是一名 AI 科學家，你的 Windows 駕駛艙性能有限，無法快速訓練複雜的深度學習模型。但火星基地的「泰坦號」（Mac Studio）搭載了為 AI 加速的「神經網路核心」（Neural Engine），非常適合執行這類任務。
-
-        **解決方案：**
-        1.  **建立一個 AI 專用的 Dev Container 藍圖**，裡面預先安裝好 TensorFlow (Metal 加速版)、PyTorch、Jupyter Lab 和所有 Python 數據科學庫。
-        2.  **遠端工作流程：**
-            * 你在你的 Windows 駕駛艙上，透過 VS Code SSH 連線到「泰坦號」。
-            * 啟動 AI 任務模組 (Dev Container)。
-            * 你在 VS Code 裡撰寫 Python 程式碼，但所有的模型訓練和數據處理**都在「泰坦號」上利用其強大的硬體執行**。
-            * 你可以透過 Port Forwarding，在 Windows 的瀏覽器上直接訪問運行在「泰坦號」容器裡的 Jupyter Lab 介面。
-
-        **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。實現了「輕客戶端，重雲端運算」的專業工作模式。
-        """
-    elif case == "案例三：大型網頁後端開發":
-        return """
-        ### 任務情境：建構星際貿易站的後端系統
-
-        **挑戰：**
-        你在一個國際團隊中，負責一個複雜的後端專案。這個專案包含多個微服務（使用者、商品、訂單）、一個 PostgreSQL 資料庫、一個 Redis 快取，全部都用 Docker Compose 進行編排。團隊成員的電腦作業系統各不相同。
-
-        **解決方案：**
-        1.  **在專案中建立一個 Dev Container**，其設定檔 (`devcontainer.json`) 指向 `docker-compose.yml` 檔案。
-        2.  **一���啟動：**
-            * 當任何團隊成員（無論用什麼作業系統）用 VS Code 在容器中打開這個專案時，Dev Container 會自動運行 `docker-compose up`。
-            * 整個包含多個服務的複雜後端環境會被完整地一鍵啟動。
-            * VS Code 會自動進入主要的「API 服務」容器中，讓開發者可以立即開始寫程式和偵錯。
-
-        **成果：** 新人加入專案的準備時間從半天縮短到 15 分鐘。徹底消除了因本機環境差異導致的 bug，確保了開發、測試和最終生產環境的高度一致性。
-        """
-    return "請選擇一個案例。"
-
+# --- 測驗答案檢查函式 ---
 def check_quiz_answer(choice):
     if choice == "在遠端的 Mac Studio 上的 Dev Container 裡":
         return "✅ **答對了！** 你完全掌握了！你的 Windows 電腦只是一個遙控器，所有的運算和執行都在遠端主機的隔離環境中，這就是這個架構的精髓所在！"
     else:
-        return "❌ **再想一想...** 記住，你的 Windows 電腦只是駕駛艙，用來發送指令和看螢幕。真正的引擎和機械手臂（程式執行）都在遠端的機甲（Mac Studio）上喔！"
+        return "❌ **再想一 new想...** 記住，你的 Windows 電腦只是駕駛艙，用來發送指令和看螢幕。真正的引擎和機械手臂（程式執行）都在遠端的機甲（Mac Studio）上喔！"
 
-# Gradio 應用介面設定
+# --- Gradio 應用介面設定 ---
 with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") as demo:
     gr.Markdown(
         """
@@ -176,19 +125,85 @@ with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") a
 
         with gr.TabItem("🛰️ 實際任務案例", id=1):
             gr.Markdown("理論學習完畢，來看看「泰坦號」機甲在真實的星際任務中能發揮什麼作用。")
-            case_selector = gr.Radio(
-                [
-                    "案例一：跨平台 App 開發",
-                    "案例二：AI 模型訓練",
-                    "案例三：大型網頁後端開發",
-                ],
-                label="選擇任務情境",
-                value="案例一：跨平台 App 開發"
-            )
-            case_output = gr.Markdown()
-            case_selector.change(fn=generate_case_study, inputs=case_selector, outputs=case_output)
-            
-        with gr.TabItem("🧠 知識小測驗", id=2):
+            with gr.Tabs() as case_tabs:
+                with gr.TabItem("🌍 案例一：地震科學與 AI 預警", id=2):
+                    gr.Markdown(
+                        """
+                        ### 任務情境：建構台灣地震 AI 分析與預警系統原型
+
+                        **挑戰：**
+                        台灣位於環太平洋地震帶，開發更快速、更準確的地震預警系統至關重要。這項研究需要處理大量的即時地震波形資料，並訓練 AI 模型來預測 P 波到達時間與地震規模。這個過程有三大挑戰：
+                        1.  **環境複雜：** 地震科學研究需要用到 `Obspy`, `Scipy`, `Pandas` 等大量科學計算庫，版本之間互相依賴，在本機上設定非常耗時且容易出錯。
+                        2.  **運算密集：** 處理原始地震波資料（濾波、去噪）和訓練深度學習模型（如 CNN）需要強大的 CPU 和 GPU 運算能力。
+                        3.  **研究再現性：** 確保研究團隊的每個人，甚至未來的自己，都能重現完全相同的實驗結果，這在科學研究中至關重要。
+
+                        **解決方案：**
+                        1.  **建立「地震分析任務模組」(Dev Container)：**
+                            * 在 `.devcontainer/Dockerfile` 中，精確地定義作業系統、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 服務。
+                            * 透過 Port Forwarding，在 Windows 的瀏覽器上打開 Jupyter Notebook，撰寫程式碼、繪製圖表，並提交一個需要運行數小時的模型訓練任務。
+                            * 任務在遠端的「泰坦號」上全力運行，科學家自己的 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 上撰寫程式碼，但所有的模型訓練和數據處理**都在「泰坦號」上利用其強大的硬體執行**。
+
+                        **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。
+                        """
+                    )
+                with gr.TabItem("🌐 案例四：大型網頁後端開發", id=5):
+                    gr.Markdown(
+                        """
+                        ### 任務情境：建構星際貿易站的後端系統
+
+                        **挑戰：**
+                        專案包含多個微服務、資料庫和快取，全部用 Docker Compose 編排。團隊成員的電腦作業系統各不相同。
+
+                        **解決方案：**
+                        1.  **在專案中建立一個 Dev Container**，其設定檔 (`devcontainer.json`) 指向 `docker-compose.yml` 檔案。
+                        2.  **一鍵啟動：** 當團隊成員在容器中打開專案時，整個複雜的後端環境會被一鍵完整啟動。
+
+                        **成果：** 新人加入專案的準備時間從半天縮短到 15 分鐘，徹底消除了因本機環境差異導致的 bug。
+                        """
+                    )
+
+        with gr.TabItem("🧠 知識小測驗", id=6):
             gr.Markdown("完成訓練後，讓我們來個快速測驗，檢驗你的學習成果！")
             quiz_question = gr.Radio(
                 [
@@ -196,14 +211,13 @@ with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") a
                     "在遠端的 Mac Studio 的 macOS 系統裡",
                     "在遠端的 Mac Studio 上的 Dev Container 裡"
                 ],
-                label="❓ 當你設定好一切並在 VS Code 終端機中執行 `npm install` 時，這個指令真正在哪裡執行？"
+                label="❓ 當你設定好一切並在 VS Code 終端機中執行 `pip install obspy` 時，這個指令真正在哪裡執行？"
             )
             quiz_feedback = gr.Markdown()
             quiz_question.change(fn=check_quiz_answer, inputs=quiz_question, outputs=quiz_feedback)
 
-    # 應用啟動時，預先載入內容
+    # 應用啟動時，預先載入教學第一頁
     demo.load(fn=generate_tutorial_step, inputs=step_selector, outputs=tutorial_output)
-    demo.load(fn=generate_case_study, inputs=case_selector, outputs=case_output)
 
 if __name__ == "__main__":
     demo.launch()