Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # --- 教學內容產生函式 --- | |
| def generate_tutorial_step(step): | |
| if step == "🚀 你的任務：星際開發者": | |
| return """ | |
| ## 🚀 你的任務：成為一名星際遠端開發者！ | |
| 歡迎來到艦長訓練模擬器！在這個教學中，你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。 | |
| **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。 | |
| ### 核心裝備介紹： | |
| * **💻 你的駕駛艙 (Windows PC):** 你的操作終端，用來發號施令。 | |
| * **🧠 泰坦號機甲 (Mac Studio):** 遠在火星的超性能主機，所有繁重運算都在這裡進行。 | |
| * **🛰️ 量子通訊頻道 (SSH):** 連接你和機甲的超光速安全通道。 | |
| * **📦 任務模組 (Dev Container):** 一個自給自足的隔離環境，內含任務所需的一切工具和零件，可隨時安裝或卸除，不影響機甲本體。 | |
| 準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！ | |
| """ | |
| elif step == "第 1 步：啟動泰坦號主機 (Mac Studio)": | |
| return """ | |
| ## 第 1 步：啟動泰坦號主機的核心能源 (Mac Studio 設定) | |
| 在我們能遠端駕駛之前，必須先確保火星基地的「泰坦號」主機已開機並開放遠端連接埠。 | |
| ### 1. 安裝反物質引擎 (Docker Desktop) | |
| 「泰坦號」的動力來源於強大的 Docker 引擎。確保它已經在 Mac Studio 上安裝並啟動。這是運行「任務模組」的基礎。 | |
| ### 2. 開啟量子通訊埠 (啟用 SSH) | |
| 這是讓你的駕駛艙能與機甲建立通訊的關鍵。 | |
| * 在泰坦號的控制台（系統設定）> 一般 > 共享。 | |
| * 找到 **「遠端登入」** 並將其**開啟**。 | |
| * 系統會顯示一串通訊位址，這是機甲在星際網路中的座標。務必記下！ | |
| ```bash | |
| # 這是機甲的專屬座標，格式為：艦長名@星際IP位址 | |
| captain_astro@192.168.1.10 | |
| ``` | |
| **✅ 確認燈號：** 完成後，「泰坦號」的通訊埠已開啟，隨時準備接收來自地球的指令。 | |
| """ | |
| elif step == "第 2 步：校準你的駕駛艙 (Windows PC)": | |
| return """ | |
| ## 第 2 步：校準你的駕駛艙操作介面 (Windows PC 設定) | |
| 你的 Windows 駕駛艙需要安裝正確的軟體，才能向「泰坦號」發送指令。 | |
| ### 1. 安裝主控台 (Visual Studio Code) | |
| 這是你的主操作介面，所有指令都將透過它發出。 | |
| ### 2. 安裝「星際躍遷模組」 (Remote Development 擴充功能) | |
| 這個模組讓你的主控台具備了超光速通訊和遠端操控的能力。 | |
| * 在主控台的「擴充功能市集」中搜尋 `Remote Development`。 | |
| * 安裝由 **Microsoft** 艦隊提供的官方套件。 | |
| **✅ 確認燈號：** 你的駕駛艙現在配備了頂級的遠端操控系統。 | |
| """ | |
| elif step == "第 3 步：建立量子通訊 (SSH 連線)": | |
| return """ | |
| ## 第 3 步：建立穩定的量子通訊頻道 (SSH 連線) | |
| 萬事俱備，是時候連線了！我們要打開一條從地球到火星的即時通訊隧道。 | |
| 1. **鎖定目標：** 在 VS Code 主控台左側，點擊「遠端總管」圖示。 | |
| 2. **輸入座標：** 點擊「+」號，輸入你在第 1 步記下的「泰坦號」座標 (`ssh captain_astro@192.168.1.10`)。 | |
| 3. **執行躍遷！** 點擊目標旁邊的「連接」按鈕，並在提示時輸入「泰坦號」的登入密碼。 | |
| **🎉 連線成功！** | |
| 當你的主控台左下角顯示綠色的 **`SSH: 192.168.1.10`** 時，代表你已成功登入「泰坦號」的駕駛艙！你眼前的一切，都是來自火星的即時畫面。 | |
| """ | |
| elif step == "第 4 步：部署任務模組 (Dev Container)": | |
| return """ | |
| ## 第 4 步：為泰坦號部署特製的「任務模組」 (Dev Container) | |
| 現在你已經在機甲內部了。接下來，我們要為這次任務安裝一個標準化的「任務模組」。 | |
| 1. **打開機庫：** 在主控台中，打開位於「泰坦號」儲存區的專案資料夾。 | |
| 2. **呼叫標準化模組：** 按下 `Ctrl + Shift + P`，選擇 `Dev Containers: Add Dev Container Configuration Files...`。 | |
| 3. **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3` 或 `Node.js`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。 | |
| 4. **開始安裝！** 主控台會提示你「**Reopen in Container**」。點擊它！ | |
| **🚀 部署完畢！** | |
| 「泰坦號」的機械手臂會自動根據藍圖建造並進入「任務模組」。 | |
| 你的主控台左下角會顯示最終狀態： | |
| **`Dev Container: [模組名稱] on SSH: 192.168.1.10`** | |
| 這代表：**你正坐在地球，透過量子通訊，操作著一台在火星的機甲，而這台機甲正運行著一個完全隔離的特製任務模組。** 未來已來！ | |
| """ | |
| 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）上喔！" | |
| # Gradio 應用介面設定 | |
| with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") as demo: | |
| gr.Markdown( | |
| """ | |
| # 🎮 星際開發者訓練模擬器 🚀 | |
| ### 學習如何從 Windows 駕駛艙，遠端操控 Mac Studio 上的開發環境！ | |
| """ | |
| ) | |
| 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() | |