Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # --- 將教學內容儲存為字典 --- | |
| TUTORIAL_STEPS = { | |
| "🚀 你的任務：星際開發者": """ | |
| ## 🚀 你的任務：成為一名星際遠端開發者！ | |
| 這是一個專為星際開發者準備的模擬訓練。你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。 | |
| **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。 | |
| ### 核心裝備介紹： | |
| * **💻 你的駕駛艙 (Windows PC)**：你的操作終點，用來發號施令。 | |
| * **🧠 泰坦號機甲 (Mac Studio)**：遠在火星的超性能主機，所有繁重運算都在這裡進行。 | |
| * **🛰️ 量子通訊頻道 (SSH)**：連接你和機甲的超光速安全通道。 | |
| * **📦 任務模組 (Dev Container)**：一個自給自足的隔離環境，內含任務所需的一切工具與依賴，可隨時安裝或移除。 | |
| --- | |
| <p align="center"> | |
| <img src="https://huggingface.co/spaces/cwadayi/Dev_container/resolve/main/galaxy.jpg" alt="星際開發者封面圖" style="width:100%; max-width: 800px; border-radius: 8px;"> | |
| </p> | |
| 準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！ | |
| """, | |
| "第 1 步：啟動泰坦號主機 (Mac Studio)": """ | |
| ## 第 1 步：啟動泰坦號主機的核心能源 (Mac Studio 設定) | |
| 在我們能遠端駕駛之前，必須先確保火星基地的「泰坦號」主機已開機並開放遠端連接埠。 | |
| ### 1. 安裝反物質引擎 (Docker Desktop) | |
| 「泰坦號」的動力來源於強大的 Docker 引擎。確保它已經在 Mac Studio 上安裝並啟動。這是運行「任務模組」的基礎。 | |
| ### 2. 開啟量子通訊埠 (啟用 SSH) | |
| 這是讓你的駕駛艙能與機甲建立通訊的關鍵。 | |
| * 在 macOS「系統設定」→ **一般** → **共享**。 | |
| * 開啟 **遠端登入**（SSH）。 | |
| * 記下系統顯示的連線位址（主機名稱或 IP 位址）。 | |
| ```bash | |
| # 這是機甲的專屬座標，格式為：艦長名@星際IP位址 | |
| captain_astro@192.168.1.10 | |
| ``` | |
| **✅ 確認燈號：** 完成後，「泰坦號」的通訊埠已開啟，隨時準備接收來自地球的指令。 | |
| """, | |
| "第 2 步：校準你的駕駛艙 (Windows PC)": """ | |
| ## 第 2 步：校準你的駕駛艙操作介面 (Windows PC 設定) | |
| 你的 Windows 駕駛艙需要安裝正確的軟體，才能向「泰坦號」發送指令。 | |
| ### 1. 安裝主控台 (Visual Studio Code) | |
| 這是你的主操作介面，所有指令都將透過它發出。 | |
| ### 2. 安裝「星際躍遷模組」 (Remote Development 擴充功能) | |
| 這個模組讓你的主控台具備了超光速通訊和遠端操控的能力。 | |
| * 在主控台的「擴充功能市集」中搜尋 `Remote Development`。 | |
| * 安裝由 **Microsoft** 艦隊提供的官方套件。 | |
| **✅ 確認燈號：** 你的駕駛艙現在配備了頂級的遠端操控系統。 | |
| """, | |
| "第 3 步：建立量子通訊 (SSH 連線)": """ | |
| ## 第 3 步：建立穩定的量子通訊頻道 (SSH 連線) | |
| 萬事俱備，是時候連線了！我們要打開一條從地球到火星的即時通訊隧道。 | |
| 1. **鎖定目標：** 在 VS Code 主控台左側，點擊「遠端總管」圖示。 | |
| 2. **輸入座標：** 點擊「+」號，輸入你在第 1 步記下的「泰坦號」座標 (`ssh captain_astro@192.168.1.10`)。 | |
| 3. **執行躍遷！** 點擊目標旁邊的「連接」按鈕，並在提示時輸入「泰坦號」的登入密碼。 | |
| **🎉 連線成功！** | |
| 當你的主控台左下角顯示綠色的 **`SSH: 192.168.1.10`** 時，代表你已成功登入「泰坦號」的駕駛艙！你眼前的一切，都是來自火星的即時畫面。 | |
| """, | |
| "第 4 步：部署任務模組 (Dev Container)": """ | |
| ## 第 4 步：為泰坦號部署特製的「任務模組」 (Dev Container) | |
| 現在你已經在機甲內部了。接下來，我們要為這次任務安裝一個標準化的「任務模組」。 | |
| 1. **打開機庫：** 在主控台中，打開位於「泰坦號」儲存區的專案資料夾。 | |
| 2. **呼叫標準化模組：** 按下 `Ctrl + Shift + P`，選擇 `Dev Containers: Add Dev Container Configuration Files...`。 | |
| 3. **選擇模組藍圖：** 根據你的任務需求（例如 `Python 3`），選擇一個預設的藍圖。系統會自動生成安裝說明書 (`.devcontainer` 資料夾)。 | |
| 4. **開始安裝！** 主控台會提示你「**Reopen in Container」。點擊它！ | |
| **🚀 部署完畢！** | |
| 「泰坦號」的機械手臂會自動根據藍圖建造並進入「任務模組」。 | |
| 你的主控台左下角會顯示最終狀態： | |
| **`Dev Container: [模組名稱] on SSH: 192.168.1.10`** | |
| 這代表：**你正坐在地球，透過量子通訊，操作著一台在火星的機甲，而這台機甲正運行著一個完全隔離的特製任務模組。** 未來已來！ | |
| """ | |
| } | |
| # --- 實際任務案例內容 --- | |
| CASE_STUDIES = { | |
| "🌍 地震科學與 AI 預警": """ | |
| ### 任務情境：建構台灣地震 AI 分析與預警系統原型 | |
| 台灣位於環太平洋地震帶，開發更快速、更準確的地震預警系統至關重要。這項研究需要處理大量的即時地震波形資料，並訓練 AI 模型來預測 P 波到達時間與地震規模。 | |
| <p align="center"> | |
| <img src="https://huggingface.co/spaces/cwadayi/Dev_container/resolve/main/seismic.jpg" alt="地震科學封面圖" style="width:100%; max-width: 800px; border-radius: 8px;"> | |
| </p> | |
| **挑戰：** | |
| 1. **環境複雜：** 地震科學研究需要用到 `Obspy`, `Scipy`, `Pandas` 等大量科學計算庫，版本之間互相依賴，在本機上設定非常耗時且容易出錯。 | |
| 2. **運算密集：** 處理原始地震波資料（濾波、去噪）和訓練深度學習模型（如 CNN）需要強大的 CPU 和 GPU 運算能力。 | |
| 3. **研究再現性：** 確保研究團隊的每個人，甚至未來的自己，都能重現完全相同的實驗結果，這在科學研究中至關重要。 | |
| **解決方案：** | |
| 1. **建立「地震分析任務模組」(Dev Container)：** 精確地定義作業系統、Python 版本，並安裝**特定版本**的 `Obspy`, `TensorFlow-Metal` (Apple Silicon GPU 加速版), `Jupyter Lab` 等所有工具。 | |
| * **成果：** 團隊任何人（無論用 Windows/Mac）只需一鍵「Reopen in Container」，就能獲得一個完全一致、立即可用的地震科學研究環境。 | |
| 2. **利用「泰坦號」(Mac Studio) 的超性能核心：** 強大的 CPU 用於高速處理 P-Alert 等來源的即時地震波資料；GPU/神經網路核心透過 `TensorFlow-Metal` 加速 AI 模型的訓練過程；龐大的統一記憶體讓載入大型歷史地震資料集時不會有效能瓶頸。 | |
| 3. **艦長 (研究員) 的工作流程：** 科學家在他的 Windows 駕駛艙中，透過 VS Code SSH 連線到「泰坦號」，進入「地震分析任務模組」，並在裡面啟動 Jupyter Lab 服務。所有運算都在遠端的「泰坦號」上全力運行，科學家自己的 Windows 電腦資源完全不受影響。 | |
| **最終成果：** 打造了一個高效、穩定且可重現的地震科學研究工作流程，讓科學家能專注於演算法和模型本身，這是開發下一代地震預警系統原型的絕佳基礎。 | |
| """, | |
| "📱 跨平台 App 開發": """ | |
| ### 任務情境：開發星際通訊 App (Flutter / React Native) | |
| **挑戰：** | |
| 你需要開發一款 App，必須同時能在「安卓星系」和「蘋果星系」的裝置上運行。然而，要為「蘋果星系」編譯 App，**必須**使用蘋果的星際鑄造廠（macOS 上的 Xcode）。 | |
| **解決方案：** | |
| 1. **指定「泰坦號」(Mac Studio) 為官方鑄造廠。** | |
| 2. **建立一個 Dev Container 藍圖**，裡面包含 Flutter/React Native SDK、安卓 SDK 和所有開發工具。 | |
| 3. **團隊協作：** 所有成員都透過 SSH 連接到「泰坦號」上的同一個 Dev Container 環境進行開發和安卓版測試。當需要編譯蘋果版時，可以直接在「泰坦號」的 macOS 環境中執行 Xcode build 指令。 | |
| **成果：** 完美解決了跨平台編譯的依賴問題，確保了團隊共享一個統一、高效的開發環境。 | |
| """, | |
| "🤖 AI 模型訓練": """ | |
| ### 任務情境：訓練識別外星生物的 AI 模型 | |
| **挑戰：** | |
| 你的 Windows 駕駛艙性能有限，無法快速訓練複雜的深度學習模型。但「泰坦號」（Mac Studio）搭載了為 AI 加速的「神經網路核心」（Neural Engine）。 | |
| **解決方案：** | |
| 1. **建立一個 AI 專用的 Dev Container 藍圖**，預先安裝好 TensorFlow (Metal 加速版)、PyTorch、Jupyter Lab 等。 | |
| 2. **遠端工作流程：** 你在 Windows 上撰寫程式碼，但所有的模型訓練和數據處理**都在「泰坦號」上利用其強大的硬體執行**。 | |
| **成果：** 你可以利用遠端超強的硬體資源，而不需要花大錢升級自己的本地電腦。 | |
| """, | |
| "🌐 大型網頁後端開發": """ | |
| ### 任務情境：建構星際貿易站的後端系統 | |
| **挑戰：** | |
| 專案包含多個微服務、資料庫和快取，全部用 Docker Compose 編排。團隊成員的電腦作業系統各不相同。 | |
| **解決方案：** | |
| 1. **在專案中建立一個 Dev Container**，其設定檔 (`devcontainer.json`) 指向 `docker-compose.yml` 檔案。 | |
| 2. **一鍵啟動：** 當團隊成員在容器中打開專案時，整個複雜的後端環境會被一鍵完整啟動。 | |
| **成果：** 新人加入專案的準備時間從半天縮短到 15 分鐘，徹底消除了因本機環境差異導致的 bug。 | |
| """ | |
| } | |
| # --- 教學內容產生函式 --- | |
| def generate_tutorial_step(step): | |
| return TUTORIAL_STEPS.get(step, "請從下拉選單選擇一個步驟。") | |
| # --- 測驗答案檢查函式 --- | |
| 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( | |
| list(TUTORIAL_STEPS.keys()), | |
| 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("理論學習完畢，來看看「泰坦號」機甲在真實的星際任務中能發揮什麼作用。") | |
| with gr.Tabs() as case_tabs: | |
| for title, content in CASE_STUDIES.items(): | |
| with gr.TabItem(title, id=title): | |
| gr.Markdown(content) | |
| with gr.TabItem("🧠 知識小測驗", id=6): | |
| gr.Markdown("完成訓練後，讓我們來個快速測驗，檢驗你的學習成果！") | |
| quiz_question = gr.Radio( | |
| [ | |
| "在我的 Windows 電腦上", | |
| "在遠端的 Mac Studio 的 macOS 系統裡", | |
| "在遠端的 Mac Studio 上的 Dev Container 裡" | |
| ], | |
| label="❓ 當你設定好一切並在 VS Code 終端機中執行 `pip install obspy` 時，這個指令真正在哪裡執行？" | |
| ) | |
| 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, queue=False) | |
| if __name__ == "__main__": | |
| demo.launch() | |