Update app.py

app.py

@@ -6,7 +6,7 @@ def generate_tutorial_step(step):
         return """
         ## 🚀 你的任務：成為一名星際遠端開發者！
 
-        歡迎來到艦長訓練模擬器！在這個教學中，你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。
+        這是一個專為星際開發者準備的模擬訓練。你將扮演一名坐在地球指揮艙（Windows 電腦）的艦長，遠端駕駛一台駐紮在火星基地、性能超群的「泰坦號」機甲（Mac Studio）。
 
         **你的目標：** 在不離開舒適駕駛艙的情況下，為「泰坦號」安裝一個特製的「任務模組」（Dev Container），讓它能夠執行複雜的開發任務。
 
@@ -16,6 +16,14 @@ def generate_tutorial_step(step):
         * **🛰️ 量子通訊頻道 (SSH):** 連接你和機甲的超光速安全通道。
         * **📦 任務模組 (Dev Container):** 一個自給自足的隔離環境，內含任務所需的一切工具和零件，可隨時安裝或卸除，不影響機甲本體。
 
+        ---
+        **星際開發者，準備就緒！**
+        
+        """ + """
+        <p align="center">
+            <img src="file/galaxy.jpg" alt="星際開發者封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
+        </p>
+        """ + """
         準備好了嗎，艦長？請從下拉選單中選擇你的第一個訓練科目！
         """
     elif step == "第 1 步：啟動泰坦號主機 (Mac Studio)":
@@ -122,6 +130,9 @@ with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") a
             )
             tutorial_output = gr.Markdown()
             step_selector.change(fn=generate_tutorial_step, inputs=step_selector, outputs=tutorial_output)
+            # 在應用啟動時，也讓介紹頁顯示圖片
+            demo.load(fn=generate_tutorial_step, inputs=step_selector, outputs=tutorial_output, queue=False)
+
 
         with gr.TabItem("🛰️ 實際任務案例", id=1):
             gr.Markdown("理論學習完畢，來看看「泰坦號」機甲在真實的星際任務中能發揮什麼作用。")
@@ -131,29 +142,27 @@ with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") a
                         """
                         ### 任務情境：建構台灣地震 AI 分析與預警系統原型
 
+                        台灣位於環太平洋地震帶，開發更快速、更準確的地震預警系統至關重要。這項研究需要處理大量的即時地震波形資料，並訓練 AI 模型來預測 P 波到達時間與地震規模。
+
+                        """ + """
+                        <p align="center">
+                            <img src="file/seismic.jpg" alt="地震科學封面圖" style="width:100%; max-width: 800px; border-radius: 8px;">
+                        </p>
+                        """ + """
                         **挑戰：**
-                        台灣位於環太平洋地震帶，開發更快速、更準確的地震預警系統至關重要。這項研究需要處理大量的即時地震波形資料，並訓練 AI 模型來預測 P 波到達時間與地震規模。這個過程有三大挑戰：
                         1.  **環境複雜：** 地震科學研究需要用到 `Obspy`, `Scipy`, `Pandas` 等大量科學計算庫，版本之間互相依賴，在本機上設定非常耗時且容易出錯。
                         2.  **運算密集：** 處理原始地震波資料（濾波、去噪）和訓練深度學習模型（如 CNN）需要強大的 CPU 和 GPU 運算能力。
                         3.  **研究再現性：** 確保研究團隊的每個人，甚至未來的自己，都能重現完全相同的實驗結果，這在科學研究中至關重要。
 
                         **解決方案：**
-                        1.  **建立「地震分析任務模組」(Dev Container)：**
-                            * 在 `.devcontainer/Dockerfile` 中，精確地定義作業系統、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 服務。
-                            * 透過 Port Forwarding，在 Windows 的瀏覽器上打開 Jupyter Notebook，撰寫程式碼、繪製圖表，並提交一個需要運行數小時的模型訓練任務。
-                            * 任務在遠端的「泰坦號」上全力運行，科學家自己的 Windows 電腦資源完全不受影響，可以繼續撰寫論文或進行其他工作。
-
-                        **最終成果：** 打造了一個高效、穩定且可重現的地震科學研究工作流程，讓科學家能專注於演算法和模型本身，而不是耗費心力在處理軟硬體環境問題上。這是開發下一代地震預警系統原型的絕佳基礎。
+                        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 電腦資源完全不受影響。
+
+                        **最終成果：** 打造了一個高效、穩定且可重現的地震科學研究工作流程，讓科學家能專注於演算法和模型本身，這是開發下一代地震預警系統原型的絕佳基礎。
                         """
                     )
                 with gr.TabItem("📱 案例二：跨平台 App 開發", id=3):
@@ -216,8 +225,11 @@ with gr.Blocks(theme=gr.themes.Soft(), title="星際開發者訓練模擬器") a
             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_tutorial_step, inputs=step_selector, outputs=tutorial_output, queue=False) # 確保初始載入
+    demo.load(fn=generate_case_study, inputs=case_tabs.select(value="🌍 案例一：地震科學與 AI 預警"), outputs=gr.Markdown(), queue=False)
+
 
 if __name__ == "__main__":
     demo.launch()
+