Create app.py

app.py

@@ -0,0 +1,184 @@
+import gradio as gr
+
+def generate_tutorial_step(step):
+    if step == "介紹 (Introduction)":
+        return """
+        ## 歡迎來到 VS Code 遠端開發互動式教學！
+
+        本教學將引導您完成一個非常強大的現代開發流程：**在 Windows 電腦上，透過 VS Code 遠端操作一台 Mac Studio，並在其上運行 Dev Container 進行開發。**
+
+        **這個流程的優勢：**
+        * **發揮硬體性能：** 您的所有運算（編譯、Docker 運行）都在強大的 Mac Studio 上進行。
+        * **保持本機純淨：** 您的 Windows 電腦只需安裝 VS Code，不需安裝任何開發工具鏈 (Python, Node, Docker 等)。
+        * **環境一致性：** Dev Container 確保您的開發環境 100% 可複製、可攜帶。
+
+        👈 請從上面的下拉選單中選擇一個步驟開始。
+        """
+    elif step == "第 1 步：準備 Mac Studio":
+        return """
+        ## 第 1 步：在 Mac Studio 上的設定 (只需做一次)
+
+        首先，我們需要將 Mac Studio 設定成一台安全的「伺服器」。
+
+        ### 1. 安裝 Docker Desktop
+        確保您的 Mac Studio 上已經安裝並運行了 [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop/)。這是運行 Dev Container 的基礎。
+
+        ### 2. 啟用遠端登入 (SSH)
+        這是讓您的 Windows 電腦可以「登入」Mac Studio 的關鍵。
+        * 打開 **系統設定** > **一般** > **共享**。
+        * 找到 **「遠端登入」** 並將其**開啟**。
+        * 系統會顯示您的 SSH 位址，請記下來。它看起來像這樣：
+
+        ```bash
+        # 這是您需要記下的重要資訊
+        your_mac_username@192.168.1.10
+        ```
+        ![SSH Sharing Pane](https://i.imgur.com/3Q5c6sL.png)
+        *(這是一張示意圖，顯示 macOS 的共享設定介面)*
+
+        **✅ 完成這一步後，您的 Mac Studio 就準備好接受來自 Windows 的遠端連線了。**
+        """
+    elif step == "第 2 步：準備 Windows 電腦":
+        return """
+        ## 第 2 步：在 Windows 電腦上的設定
+
+        您的 Windows 電腦是您的「操作終端」。我們只需要安裝 VS Code 和一個擴充功能。
+
+        ### 1. 安裝 Visual Studio Code
+        如果尚未安裝，請從官網下載並安裝：[https://code.visualstudio.com/](https://code.visualstudio.com/)
+
+        ### 2. 安裝「Remote Development」擴充套件包
+        這是實現所有魔法的核心工具。
+        * 打開 VS Code。
+        * 點擊左側邊欄的「擴充功能」圖示 (四個方塊)。
+        * 在搜尋框中輸入 `Remote Development`。
+        * 安裝由 **Microsoft** 提供的官方套件包。
+
+        ![Remote Development Extension](https://i.imgur.com/1g8B1gq.png)
+        *(示意圖：在 VS Code 市集中找到此擴充功能)*
+
+        **✅ 完成這一步後，您的 Windows VS Code 就擁有了遠端連線的能力。**
+        """
+    elif step == "第 3 步：建立 SSH 連線":
+        return """
+        ## 第 3 步：從 Windows VS Code 連線到 Mac Studio
+
+        現在，我們要建立起 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 的登入密碼。
+
+        **🎉 成功！**
+        當 VS Code 左下角的綠色標籤顯示 **`SSH: 192.168.1.10`** 時，代表您已成功連線。您現在的操作，都將在遠端的 Mac Studio 上執行。
+
+        ![SSH Status Bar](https://i.imgur.com/u5jJ0f3.png)
+        *(示意圖：VS Code 左下角的狀態列)*
+        """
+    elif step == "第 4 步：啟動 Dev Container":
+        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`**
+
+        這代表您已成功：**從 Windows 進入了運行在 Mac Studio 上的 Dev Container！**
+        """
+    elif step == "最終成果與概念圖":
+        return """
+        ## 最終成果與概念圖
+
+        恭喜您完成了整個設定流程！讓我們用一張圖來總結這個工作模式：
+
+        ```plaintext
+        +------------------------------------------------------------------------------------------------+
+        |  您的 Windows 電腦 (操作終點)                                                                    |
+        |                                                                                                |
+        |   +--------------------------+                                                                 |
+        |   | Visual Studio Code       |                                                                 |
+        |   | (使用者介面 & SSH 客戶端) |                                                                 |
+        |   +--------------------------+                                                                 |
+        |                                                                                                |
+        +-----------------|------------------------------------------------------------------------------+
+                          |
+                          |  SSH 連線 (透過您的區域網路)
+                          |
+        +-----------------|------------------------------------------------------------------------------+
+        |  您的 Mac Studio (運算主機)                                                                      |
+        |                                                                                                |
+        |   +----------------------+     +-------------------------------------------------------------+   |
+        |   | SSH 伺服器           | --> | Docker 引擎                                                 |   |
+        |   | (接收指令)           |     |                                                             |   |
+        |   +----------------------+     |   +-----------------------------------------------------+   |   |
+        |                              |   | Dev Container (您的隔離開發環境)                    |   |   |
+        |                              |   |                                                     |   |   |
+        |                              |   |  - 您的專案程式碼                                     |   |   |
+        |                              |   |  - Python / Node.js 等工具鏈                          |   |   |
+        |                              |   |  - VS Code Server & 擴充功能                          |   |   |
+        |                              |   |                                                     |   |   |
+        |                              |   +-----------------------------------------------------+   |   |
+        |                              +-------------------------------------------------------------+   |
+        |                                                                                                |
+        +------------------------------------------------------------------------------------------------+
+
+        ```
+
+        **簡單來說：** 您的鍵盤和螢幕在 Windows 上，但所有的大腦運算和程式執行都在遠端的 Mac Studio 上的容器裡。
+        """
+    return "請從下拉選單選擇一個步驟。"
+
+# Gradio 應用介面設定
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    gr.Markdown(
+        """
+        # 💻 VS Code 遠端開發互動式教學 🚀
+        ### (Windows 遠端操作 Mac Studio 上的 Dev Container)
+        """
+    )
+    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)
+
+
+if __name__ == "__main__":
+    demo.launch()
+