Update app.py

app.py

@@ -1,184 +1,209 @@
 import gradio as gr
 
+# --- 教學內容產生函式 ---
 def generate_tutorial_step(step):
-    if step == "介紹 (Introduction)":
+    if step == "🚀 你的任務：星際開發者":
         return """
-        ## 歡迎來到 VS Code 遠端開發互動式教學！
+        ## 🚀 你的任務：成為一名星際遠端開發者！
 
-        本教學將引導您完成一個非常強大的現代開發流程：**在 Windows 電腦上，透過 VS Code 遠端操作一台 Mac Studio，並在其上運行 Dev Container 進行開發。**
+        歡迎來到艦長訓練模擬器！在這個教學中，你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。
 
-        **這個流程的優勢：**
-        * **發揮硬體性能：** 您的所有運算（編譯、Docker 運行）都在強大的 Mac Studio 上進行。
-        * **保持本機純淨：** 您的 Windows 電腦只需安裝 VS Code，不需安裝任何開發工具鏈 (Python, Node, Docker 等)。
-        * **環境一致性：** Dev Container 確保您的開發環境 100% 可複製、可攜帶。
+        **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。
 
-        👈 請從上面的下拉選單中選擇一個步驟開始。
+        ### 核心裝備介紹：
+        * **💻 你的駕駛艙 (Windows PC):** 你的操作終端，用來發號施令。
+        * **🧠 泰坦號機甲 (Mac Studio):** 遠在火星的超性能主機，所有繁重運算都在這裡進行。
+        * **🛰️ 量子通訊頻道 (SSH):** 連接你和機甲的超光速安全通道。
+        * **📦 任務模組 (Dev Container):** 一個自給自足的隔離環境，內含任務所需的一切工具和零件，可隨時安裝或卸除，不影響機甲本體。
+
+        準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！
         """
-    elif step == "第 1 步：準備 Mac Studio":
+    elif step == "第 1 步：啟動泰坦號主機 (Mac Studio)":
         return """
-        ## 第 1 步：在 Mac Studio 上的設定 (只需做一次)
+        ## 第 1 步：啟動泰坦號主機的核心能源 (Mac Studio 設定)
 
-        首先，我們需要將 Mac Studio 設定成一台安全的「伺服器」。
+        在我們能遠端駕駛之前，必須先確保火星基地的「泰坦號」主機已開機並開放遠端連接埠。
 
-        ### 1. 安裝 Docker Desktop
-        確保您的 Mac Studio 上已經安裝並運行了 [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop/)。這是運行 Dev Container 的基礎。
+        ### 1. 安裝反物質引擎 (Docker Desktop)
+        「泰坦號」的動力來源於強大的 Docker 引擎。確保它已經在 Mac Studio 上安裝並啟動。這是運行「任務模組」的基礎。
 
-        ### 2. 啟用遠端登入 (SSH)
-        這是讓您的 Windows 電腦可以「登入」Mac Studio 的關鍵。
-        * 打開 **系統設定** > **一般** > **共享**。
+        ### 2. 開啟量子通訊埠 (啟用 SSH)
+        這是讓你的駕駛艙能與機甲建立通訊的關鍵。
+        * 在泰坦號的控制台（系統設定）> 一般 > 共享。
         * 找到 **「遠端登入」** 並將其**開啟**。
-        * 系統會顯示您的 SSH 位址，請記下來。它看起來像這樣：
+        * 系統會顯示一串通訊位址，這是機甲在星際網路中的座標。務必記下！
 
         ```bash
-        # 這是您需要記下的重要資訊
-        your_mac_username@192.168.1.10
+        # 這是機甲的專屬座標，格式為：艦長名@星際IP位址
+        captain_astro@192.168.1.10
         ```
-        ![SSH Sharing Pane](https://i.imgur.com/3Q5c6sL.png)
-        *(這是一張示意圖，顯示 macOS 的共享設定介面)*
 
-        **✅ 完成這一步後，您的 Mac Studio 就準備好接受來自 Windows 的遠端連線了。**
+        **✅ 確認燈號：** 完成後，「泰坦號」的通訊埠已開啟，隨時準備接收來自地球的指令。
         """
-    elif step == "第 2 步：準備 Windows 電腦":
+    elif step == "第 2 步：校準你的駕駛艙 (Windows PC)":
         return """
-        ## 第 2 步：在 Windows 電腦上的設定
+        ## 第 2 步：校準你的駕駛艙操作介面 (Windows PC 設定)
+
+        你的 Windows 駕駛艙需要安裝正確的軟體，才能向「泰坦號」發送指令。
+
+        ### 1. 安裝主控台 (Visual Studio Code)
+        這是你的主操作介面，所有指令都將透過它發出。
 
-        您的 Windows 電腦是您的「操作終端」。我們只需要安裝 VS Code 和一個擴充功能。
+        ### 2. 安裝「星際躍遷模組」 (Remote Development 擴充功能)
+        這個模組讓你的主控台具備了超光速通訊和遠端操控的能力��
+        * 在主控台的「擴充功能市集」中搜尋 `Remote Development`。
+        * 安裝由 **Microsoft** 艦隊提供的官方套件。
 
-        ### 1. 安裝 Visual Studio Code
-        如果尚未安裝，請從官網下載並安裝：[https://code.visualstudio.com/](https://code.visualstudio.com/)
+        **✅ 確認燈號：** 你的駕駛艙現在配備了頂級的遠端操控系統。
+        """
+    elif step == "第 3 步：建立量子通訊 (SSH 連線)":
+        return """
+        ## 第 3 步：建立穩定的量子通訊頻道 (SSH 連線)
 
-        ### 2. 安裝「Remote Development」擴充套件包
-        這是實現所有魔法的核心工具。
-        * 打開 VS Code。
-        * 點擊左側邊欄的「擴充功能」圖示 (四個方塊)。
-        * 在搜尋框中輸入 `Remote Development`。
-        * 安裝由 **Microsoft** 提供的官方套件包。
+        萬事俱備，是時候連線了！我們要打開一條從地球到火星的即時通訊隧道。
 
-        ![Remote Development Extension](https://i.imgur.com/1g8B1gq.png)
-        *(示意圖：在 VS Code 市集中找到此擴充功能)*
+        1.  **鎖定目標：** 在 VS Code 主控台左側，點擊「遠端總管」圖示。
+        2.  **輸入座標：** 點擊「+」號，輸入你在第 1 步記下的「泰坦號」座標 (`ssh captain_astro@192.168.1.10`)。
+        3.  **執行躍遷！** 點擊目標旁邊的「連接」按鈕，並在提示時輸入「泰坦號」的登入密碼。
 
-        **✅ 完成這一步後，您的 Windows VS Code 就擁有了遠端連線的能力。**
+        **🎉 連線成功！**
+        當你的主控台左下角顯示綠色的 **`SSH: 192.168.1.10`** 時，代表你已成功登入「泰坦號」的駕駛艙！你眼前的一切，都是來自火星的即時畫面。
         """
-    elif step == "第 3 步：建立 SSH 連線":
+    elif step == "第 4 步：部署任務模組 (Dev Container)":
         return """
-        ## 第 3 步：從 Windows VS Code 連線到 Mac Studio
+        ## 第 4 步：為泰坦號部署特製的「任務模組」 (Dev Container)
 
-        現在，我們要建立起 Windows 和 Mac Studio 之間的「橋樑」。
+        現在你已經在機甲內部了。接下來，我們要為這次任務安裝一個標準化的「任務模組」。
 
-        1.  **打開遠端總管：** 在 VS Code 左側邊欄點擊新增的「遠端總管」圖示 (看起來像一個螢幕)。
-        2.  **新增 SSH 目標：**
-            * 在 `SSH` 區塊，點擊「+」號。
-            * 在彈出的輸入框中，輸入您在第 1 步記下的 SSH 位址，例如：`ssh your_mac_username@192.168.1.10`
-            * 選擇預設的 SSH 設定檔儲存。
-        3.  **開始連線：**
-            * 在 SSH 目標列表中找到您剛剛新增的 Mac Studio。
-            * 點擊右側的「連接」圖示。
-            * 一個新的 VS Code 視窗會打開，並要求您輸入 Mac Studio 的登入密碼。
+        1.  **打開機庫：** 在主控台中，打開位於「泰坦號」儲存區的專案資料夾。
+        2.  **呼叫標準化模組：** 按下 `Ctrl + Shift + P`，選擇 `Dev Containers: Add Dev Container Configuration Files...`。
+        3.  **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3` 或 `Node.js`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。
+        4.  **開始安裝！** 主控台會提示你「**Reopen in Container**」。點擊它！
 
-        **🎉 成功！**
-        當 VS Code 左下角的綠色標籤顯示 **`SSH: 192.168.1.10`** 時，代表您已成功連線。您現在的操作，都將在遠端的 Mac Studio 上執行。
+        **🚀 部署完畢！**
+        「泰坦號」的機械手臂會自動根據藍圖建造並進入「任務模組」。
+        
+        你的主控台左下角會顯示最終狀態：
+        **`Dev Container: [模組名稱] on SSH: 192.168.1.10`**
 
-        ![SSH Status Bar](https://i.imgur.com/u5jJ0f3.png)
-        *(示意圖：VS Code 左下角的狀態列)*
+        這代表：**你正坐在地球，透過量子通訊，操作著一台在火星的機甲，而這台機甲正運行著一個完全隔離的特製任務模組。** 未來已來！
         """
-    elif step == "第 4 步：啟動 Dev Container":
+    return "請從下拉選單選擇一個步驟。"
+
+def generate_case_study(case):
+    if case == "案例一：跨平台 App 開發":
         return """
-        ## 第 4 步：在 Mac Studio 上啟動 Dev Container
-
-        連線成功後，我們就可以在遠端的 Mac Studio 上啟動我們的開發環境了。
-
-        1.  **打開專案資料夾：**
-            * 在 VS Code (SSH 模式下) 中，點擊「檔案」>「打開資料夾...」。
-            * 選擇您在 Mac Studio 上的專案資料夾。
-        2.  **加入 Dev Container 設定：**
-            * 按下 `Ctrl + Shift + P` 打開命令面板。
-            * 搜���並選擇 `Dev Containers: Add Dev Container Configuration Files...`。
-            * 根據您的專案類型，選擇一個範本 (例如 `Python 3` 或 `Node.js`)。VS Code 會自動建立 `.devcontainer` 資料夾。
-        3.  **在容器中重新打開！**
-            * 右下角會彈出一個提示，點擊「**Reopen in Container**」。
-
-        **🚀 終極完成！**
-        VS Code 會指示遠端 Mac Studio 上的 Docker 去建立容器。完成後，您的 VS Code 會重新載入。
-        
-        請看左下角的綠色標籤，它現在會顯示：
-        **`Dev Container: [環境名稱] on SSH: 192.168.1.10`**
+        ### 任務情境：開發星際通訊 App (Flutter / React Native)
 
-        這代表您已成功：**從 Windows 進入了運行在 Mac Studio 上的 Dev Container！**
+        **挑戰：**
+        你需要開發一款 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 step == "最終成果與概念圖":
+    elif case == "案例二：AI 模型訓練":
         return """
-        ## 最終成果與概念圖
-
-        恭喜您完成了整個設定流程！讓我們用一張圖來總結這個工作模式：
-
-        ```plaintext
-        +------------------------------------------------------------------------------------------------+
-        |  您的 Windows 電腦 (操作終點)                                                                    |
-        |                                                                                                |
-        |   +--------------------------+                                                                 |
-        |   | Visual Studio Code       |                                                                 |
-        |   | (使用者介面 & SSH 客戶端) |                                                                 |
-        |   +--------------------------+                                                                 |
-        |                                                                                                |
-        +-----------------|------------------------------------------------------------------------------+
-                          |
-                          |  SSH 連線 (透過您的區域網路)
-                          |
-        +-----------------|------------------------------------------------------------------------------+
-        |  您的 Mac Studio (運算主機)                                                                      |
-        |                                                                                                |
-        |   +----------------------+     +-------------------------------------------------------------+   |
-        |   | SSH 伺服器           | --> | Docker 引擎                                                 |   |
-        |   | (接收指令)           |     |                                                             |   |
-        |   +----------------------+     |   +-----------------------------------------------------+   |   |
-        |                              |   | Dev Container (您的隔離開發環境)                    |   |   |
-        |                              |   |                                                     |   |   |
-        |                              |   |  - 您的專案程式碼                                     |   |   |
-        |                              |   |  - Python / Node.js 等工具鏈                          |   |   |
-        |                              |   |  - VS Code Server & 擴充功能                          |   |   |
-        |                              |   |                                                     |   |   |
-        |                              |   +-----------------------------------------------------+   |   |
-        |                              +-------------------------------------------------------------+   |
-        |                                                                                                |
-        +------------------------------------------------------------------------------------------------+
+        ### 任務情境：訓練識別外星生物的 AI 模型
 
-        ```
+        **挑戰：**
+        你是一名 AI 科學家，你的 Windows 駕駛艙性能有限，無法快速訓練複雜的深度學習模型。但火星基地的「泰坦號」（Mac Studio）搭載了為 AI 加速的「神經網路核心」（Neural Engine），非常適合執行這類任務。
 
-        **簡單來說：** 您的鍵盤和螢幕在 Windows 上，但所有的大腦運算和程式執行都在遠端的 Mac Studio 上的容器裡。
+        **解決方案：**
+        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 介面。
+
+        **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。實現了「輕客戶端，重雲端運算」的專業工作模式。
         """
-    return "請從下拉選單選擇一個步驟。"
+    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）上喔！"
 
 # Gradio 應用介面設定
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") as demo:
     gr.Markdown(
         """
-        # 💻 VS Code 遠端開發互動式教學 🚀
-        ### (Windows 遠端操作 Mac Studio 上的 Dev Container)
+        # 🎮 星際開發者訓練模擬器 🚀
+        ### 學習如何從 Windows 駕駛艙，遠端操控 Mac Studio 上的開發環境！
         """
     )
-    gr.Markdown("這是一個模擬教學，引導您了解整個設定與工作流程。請從下面的下拉選單中選擇您想學習的步驟。")
-
-    step_selector = gr.Dropdown(
-        [
-            "介紹 (Introduction)",
-            "第 1 步：準備 Mac Studio",
-            "第 2 步：準備 Windows 電腦",
-            "第 3 步：建立 SSH 連線",
-            "第 4 步：啟動 Dev Container",
-            "最終成果與概念圖",
-        ],
-        label="選擇教學步驟",
-        value="介紹 (Introduction)"
-    )
-
-    step_output = gr.Markdown()
-
-    step_selector.change(fn=generate_tutorial_step, inputs=step_selector, outputs=step_output)
-    
-    # 應用啟動時，預先載入第一頁的內容
-    demo.load(fn=generate_tutorial_step, inputs=step_selector, outputs=step_output)
 
+    with gr.Tabs() as tabs:
+        with gr.TabItem("🚀 互動式教學", id=0):
+            gr.Markdown("歡迎來到艦長訓練模擬器！請從下面的下拉選單中選擇您的訓練科目，一步步學習如何成為一名合格的星際開發者。")
+            step_selector = gr.Dropdown(
+                [
+                    "🚀 你的任務：星際開發者",
+                    "第 1 步：啟動泰坦號主機 (Mac Studio)",
+                    "第 2 步：校準你的駕駛艙 (Windows PC)",
+                    "第 3 步：建立量子通訊 (SSH 連線)",
+                    "第 4 步：部署任務模組 (Dev Container)",
+                ],
+                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("理論學習完畢，來看看「泰坦號」機甲在真實的星際任務中能發揮什麼作用。")
+            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):
+            gr.Markdown("完成訓練後，讓我們來個快速測驗，檢驗你的學習成果！")
+            quiz_question = gr.Radio(
+                [
+                    "在我的 Windows 電腦上",
+                    "在遠端的 Mac Studio 的 macOS 系統裡",
+                    "在遠端的 Mac Studio 上的 Dev Container 裡"
+                ],
+                label="❓ 當你設定好一切並在 VS Code 終端機中執行 `npm install` 時，這個指令真正在哪裡執行？"
+            )
+            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()
-