Create app.py

app.py

@@ -0,0 +1,160 @@
+import gradio as gr
+
+# 1. 定義所有專案資料
+# 我們使用 Python 字典來組織所有分類和連結
+projects_data = {
+    "🌊 地震與波形展示": [
+        {"title": "地震目錄搜尋 API", "url": "https://cwadayi-python-app.hf.space/"},
+        {"title": "地震預警訊息顯示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_alarm_Taiwan"},
+        {"title": "PyGMT 震央繪圖展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_gmt_demo_new"},
+        {"title": "ObsPy 地震資料處理", "url": "https://huggingface.co/spaces/cwadayi/streamlit_obspy"}
+    ],
+    "🛰️ 地震監測與資料應用": [
+        {"title": "Geiger 法地震定位展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_earthquake_location"},
+        {"title": "地震監測流程", "url": "https://huggingface.co/spaces/cwadayi/earthquake_monitoring"},
+        {"title": "Google Sheet 資料顯示", "url": "https://huggingface.co/spaces/cwadayi/Grafana_like_2"},
+        {"title": "PWS 地震預警顯示", "url": "https://cwadayi-app-show-pws.hf.space/cwa-earthquakes"},
+        {"title": "全球地震顯示", "url": "https://huggingface.co/spaces/cwadayi/streamlit"}
+    ],
+    "💻 資料擷取與 API 應用": [
+        {"title": "LINE ROBOT 伺服器", "url": "https://huggingface.co/spaces/cwadayi/LINE-ROBOT"},
+        {"title": "震央分佈圖 (MCP-2)", "url": "https://huggingface.co/spaces/cwadayi/MCP-2"},
+        {"title": "PWS 資訊擷取", "url": "https://huggingface.co/spaces/cwadayi/MCP-pws"},
+        {"title": "USGS 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/Usgs_api_gemini"},
+        {"title": "CWA 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/CWA_API_chatgpt5_1"}
+    ],
+    "🏫 地球物理課程與教材": [
+        {"title": "地球物理課程 (總覽)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_class"},
+        {"title": "地物課程網站 (Day1)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day1"},
+        {"title": "地物課程網站 (Day2)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day2"},
+        {"title": "折射震測展示", "url": "https://huggingface.co/spaces/cwadayi/Refraction_sdd"},
+        {"title": "折射震測展示 (2)", "url": "https://huggingface.co/spaces/cwadayi/Refraction_3"},
+        {"title": "重力異常展示", "url": "https://huggingface.co/spaces/cwadayi/Gravity"}
+    ]
+}
+
+# 2. 自訂 CSS 樣式
+# 這裡我們模仿 V1 靜態頁面的標頭樣式，並美化按鈕
+css = """
+/* 模仿 V1 靜態頁面的標頭 */
+#main-header {
+    background: linear-gradient(135deg, #2c3e50, #34495e);
+    padding: 2rem 1.5rem;
+    border-bottom: 5px solid #1abc9c;
+}
+#main-header h1 {
+    font-size: 2.8rem;
+    font-weight: 700;
+    color: #ffffff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    margin-bottom: 0.5rem;
+    text-align: center;
+}
+#main-header p {
+    font-size: 1.2rem;
+    color: #ecf0f1;
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+/* 美化專案標題 */
+.project-title h3 {
+    margin: 0;
+    padding: 0.5rem 0; /* 讓標題和按鈕垂直置中 */
+    font-size: 1.2rem;
+    color: #2c3e50;
+}
+
+/* 美化連結按鈕 */
+.project-button a {
+    background-color: #3498db !important;
+    color: #ffffff !important;
+    border-radius: 8px !important;
+    transition: background-color 0.3s ease, transform 0.2s ease !important;
+}
+.project-button a:hover {
+    background-color: #2980b9 !important;
+    transform: scale(1.03);
+}
+
+/* 頁腳樣式 */
+#footer {
+    text-align: center;
+    color: #777;
+    font-size: 0.9rem;
+    margin-top: 2rem;
+}
+"""
+
+# 3. 使用 gr.Blocks() 建構介面
+with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as demo:
+    
+    # 標頭區
+    # 我們使用 gr.Markdown 來渲染 HTML 標籤，並用 elem_id 套用 CSS
+    with gr.Row(elem_id="main-header"):
+        gr.Markdown(
+            """
+            <h1>地球物理 x Hugging Face 專案展示</h1>
+            <p>一系列運用 Hugging Face Space 部署的地球科學與地震應用程式，展現資料科學與網路技術的結合。</p>
+            """
+        )
+    
+    # 介紹區
+    with gr.Accordion("🚀 關於 Hugging Face Spaces (點我展開)", open=False):
+        with gr.Row():
+            with gr.Column():
+                gr.Markdown(
+                    """
+                    ### 什麼是 Hugging Face Spaces？
+                    Hugging Face Spaces 是一個由 Hugging Face 提供的免費平台，讓開發者和創作者可以輕鬆地建立、分享和展示他們的機器學習 Demo 或網頁應用程式。
+                    
+                    它就像是 AI 應用的「YouTube」！您可以使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者部署靜態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。
+                    """
+                )
+            with gr.Column():
+                gr.Markdown(
+                    """
+                    ### 🚀 如何部署 Gradio 應用程式？
+                    **這本身就是一個 Gradio 應用程式！** 部署它非常簡單：
+                    1. 在 Hugging Face 建立一個新 Space。
+                    2. 選擇 SDK：選擇 **"Gradio"** (這也是預設選項)。
+                    3. 建立 Space 後，點選 "Files and versions" 分頁。
+                    4. 建立一個名為 `app.py` 的檔案。
+                    5. **將這份 Python 程式碼**貼到 `app.py` 中並提交。
+                    6. **完成！** 您的Gradio應用程式將自動建置並上線。
+                    """
+                )
+                
+    # 專案列表區
+    gr.Markdown("## 專案列表")
+    
+    # 動態生成所有專案
+    for category, items in projects_data.items():
+        # 每個分類都是一個可折疊的 Accordion
+        with gr.Accordion(category, open=True):
+            for item in items:
+                # 每一橫列代表一個專案
+                with gr.Row():
+                    # 左側：專案標題
+                    with gr.Column(scale=4):
+                        gr.Markdown(f"### {item['title']}", elem_classes="project-title")
+                    # 右側：連結按鈕
+                    with gr.Column(scale=1):
+                        gr.Button(
+                            "前往應用 ↗", 
+                            link=item['url'], 
+                            elem_classes="project-button"
+                        )
+
+    # 頁腳
+    gr.Markdown(
+        """
+        ---
+        <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face 專案。</p>
+        """
+    )
+
+# 4. 啟動應用程式
+if __name__ == "__main__":
+    demo.launch()