Spaces:
Sleeping
Sleeping
File size: 10,089 Bytes
82b8e8f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
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()
|