Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import random
+import textwrap # [新增] 用於處理程式碼字串的縮排
 
 # 1. 專案資料 (帶有 Emoji)
 projects_data = {
@@ -45,7 +46,53 @@ def recommend_project():
     [**點此立即前往 🚀**]({recommendation['url']})
     """
 
-# 3. 自訂 CSS 樣式 (新增 Tab 樣式)
+# 3. [新增] 學生教學範例程式碼 (使用 textwrap.dedent 確保格式正確)
+TUTORIAL_CODE = textwrap.dedent("""
+import gradio as gr
+
+# 1. 知識庫 (你的地科字典)
+geo_dict = {
+    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
+    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
+    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
+}
+
+# 2. 定義介面函式
+def get_definition(term):
+    # 從字典中查找解釋
+    return geo_dict.get(term, "查無此名詞")
+
+# 3. 建立 Gradio 介面
+with gr.Blocks(title="我的地科字典") as demo:
+    gr.Markdown("# 🚀 我的第一個地科 App")
+    gr.Markdown("這是一個由 AI 協助產生的 Gradio 應用程式！")
+    
+    # 輸入元件：下拉式選單
+    dropdown = gr.Dropdown(
+        label="請選擇一個地科名詞",
+        choices=list(geo_dict.keys()) # 選項來自字典的 "key"
+    )
+    
+    # 輸出元件：文字框
+    output_textbox = gr.Textbox(
+        label="名詞解釋",
+        lines=5, # 顯示 5 行的高度
+        interactive=False # 使用者不能編輯
+    )
+    
+    # 4. 綁定互動
+    dropdown.change(
+        fn=get_definition,   # 當下拉選單改變時，呼叫 get_definition 函式
+        inputs=dropdown,     # 輸入是下拉選單的 "值"
+        outputs=output_textbox # 輸出到文字框
+    )
+
+# 5. 啟動 App
+demo.launch()
+""")
+
+
+# 4. 自訂 CSS 樣式
 css = """
 /* 標頭樣式 */
 #main-header {
@@ -77,7 +124,7 @@ css = """
     box-shadow: 0 4px 10px rgba(0,0,0,0.2);
 }
 
-/* [新增] Tab 按鈕美化 */
+/* Tab 按鈕美化 */
 #main-tabs > .tab-buttons > button {
     background-color: #f0f2f5;
     color: #555;
@@ -141,28 +188,16 @@ css = """
 }
 .project-button a:hover { background-color: #2980b9 !important; transform: scale(1.03); }
 
-/* 教學區塊的程式碼樣式 */
-#tutorial-code-block pre {
-    background-color: #2b2b2b;
-    color: #f8f8f2;
-    padding: 1.5rem;
-    border-radius: 10px;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.9rem;
-    line-height: 1.5;
-    white-space: pre-wrap;
-    overflow-x: auto;
-    border: 2px solid #444;
-}
+/* [刪除] 移除了 #tutorial-code-block 的 CSS，因為不再需要 */
 
 /* 頁腳 */
 #footer { text-align: center; color: #777; font-size: 0.9rem; margin-top: 2rem; }
 """
 
-# 4. [優化] 使用 gr.Blocks() 建構介面
+# 5. 使用 gr.Blocks() 建構介面
 with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as demo:
     
-    # 標頭區 (保持不變)
+    # 標頭區
     with gr.Row(elem_id="main-header"):
         gr.Markdown(
             """
@@ -172,12 +207,12 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
             """
         )
     
-    # [優化] 主內容區：改用 Tab 介面
+    # 主內容區：Tab 介面
     with gr.Tabs(elem_id="main-tabs") as tabs:
         
         # --- Tab 1: 專案總覽 ---
         with gr.TabItem("📚 專案總覽", id=0):
-            # 幸運推薦區 (移到此 Tab 頂部)
+            # 幸運推薦區
             gr.Markdown("---")
             with gr.Blocks():
                 gr.Markdown("## ✨ 幸運推薦 ✨")
@@ -202,68 +237,40 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
         
         # --- Tab 2: AI 創客空間 (學生教學) ---
         with gr.TabItem("🎓 AI 創客空間", id=1):
-            # (移除 Accordion 包裝，直接顯示內容)
+            
+            # [修復] 將教學內容拆分為 Markdown 和 Code 元件
+            
+            # (教學文字 - Step 1 & 2)
             gr.Markdown(
                 """
                 <div style="padding: 1rem 0;">
                 <h2>🚀 5 步驟打造你的地科 App！</h2>
                 <p>這是一個教你如何「跟 AI (例如 Gemini) 協作」來快速打造並部署應用程式的SOP：</p>
-                
                 <hr style="margin: 1.5rem 0;">
-                
                 <h3>Step 1: 點子發想 🧠</h3>
                 <p>先想一個簡單的點子。例如：「我想做一個查詢『地科名詞』的字典！」</p>
-                
                 <h3>Step 2: 詠唱 AI 咒語 🧙</h3>
                 <p>打開你最愛的 AI 助手，對它說出清晰的指令 (Prompt)，例如：</p>
                 <blockquote>
                 "請幫我用 Python 和 Gradio 寫一個簡單的應用。我需要一個下拉式選單，選項有「板塊構造」、「地震波」、「海嘯」。當我選擇一個選項時，下方要顯示對應的中文解釋。請給我完整的 `app.py` 程式碼。"
                 </blockquote>
-                
-                <h3>Step 3: 取得程式碼 📜</h3>
-                <p>AI 會給你一份完整的程式碼。下面這份就是 AI 可能會產生的答案，你可以直接複製它來進行下一步！</p>
-                
-                <div id="tutorial-code-block">
-                <pre>
-import gradio as gr
-
-# 1. 知識庫 (你的地科字典)
-geo_dict = {
-    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
-    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
-    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
-}
-
-# 2. 定義介面函式
-def get_definition(term):
-    return geo_dict.get(term, "查無此名詞")
-
-# 3. 建立 Gradio 介面
-with gr.Blocks(title="我的地科字典") as demo:
-    gr.Markdown("# 🚀 我的第一個地科 App")
-    gr.Markdown("這是一個由 AI 協助產生的 Gradio 應用程式！")
-    
-    dropdown = gr.Dropdown(
-        label="請選擇一個地科名詞",
-        choices=list(geo_dict.keys())
-    )
-    
-    output_textbox = gr.Textbox(
-        label="名詞解釋",
-        lines=5,
-        interactive=False
-    )
-    
-    dropdown.change(
-        fn=get_definition,
-        inputs=dropdown,
-        outputs=output_textbox
-    )
-
-demo.launch()
-                </pre>
                 </div>
-                
+                """
+            )
+            
+            # (教學程式碼 - Step 3)
+            # [修復] 使用 gr.Code 元件取代原本的 <pre> 標籤
+            gr.Code(
+                label="Step 3: 取得程式碼 📜 (app.py 範例)",
+                value=TUTORIAL_CODE,
+                language="python",
+                interactive=False # 讓它不可編輯
+            )
+            
+            # (教學文字 - Step 4 & 5)
+            gr.Markdown(
+                """
+                <div style="padding: 1rem 0;">
                 <h3>Step 4: 部署到 Space 🚀</h3>
                 <p>這是最神奇的一步！</p>
                 <ol>
@@ -279,14 +286,12 @@ demo.launch()
                 
                 <h3>Step 5: 恭喜你！🎉</h3>
                 <p>等待幾分鐘，Hugging Face 會自動幫你把 App "建置" (Building) 起來。當你看到 "Running" 狀態時，恭喜你！你的第一個地科 App 已經上線，全世界都可以透過網址來使用了！</p>
-                
                 </div>
                 """
             )
 
         # --- Tab 3: 關於 Spaces ---
         with gr.TabItem("ℹ️ 關於 Spaces", id=2):
-             # (移除 Accordion 包裝，直接顯示內容)
             with gr.Row(equal_height=True, variant="panel"):
                 with gr.Column():
                     gr.Markdown(
@@ -311,7 +316,7 @@ demo.launch()
                         """
                     )
 
-    # 頁腳 (放置在 Tabs 之外，保持恆定)
+    # 頁腳
     gr.Markdown(
         """
         <hr>
@@ -319,13 +324,13 @@ demo.launch()
         """
     )
     
-    # 5. 綁定按鈕點擊事件 (保持不變)
+    # 6. 綁定按鈕點擊事件
     recommend_btn.click(
         fn=recommend_project,
         inputs=None,
         outputs=recommend_out
     )
 
-# 6. 啟動應用程式
+# 7. 啟動應用程式
 if __name__ == "__main__":
     demo.launch()