app.py

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()