Spaces:
Sleeping
Sleeping
| 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 | |
| ``` | |
|  | |
| *(這是一張示意圖，顯示 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** 提供的官方套件包。 | |
|  | |
| *(示意圖：在 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 上執行。 | |
|  | |
| *(示意圖：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() | |