Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>地球物理 x Hugging Face 專案展示</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | |
| <style> | |
| /* 1. 基本樣式重設與全域設定 */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Noto Sans TC', sans-serif; | |
| background-color: #f4f7f6; /* 柔和的背景灰 */ | |
| color: #333; | |
| line-height: 1.7; /* 增加行高，提升可讀性 */ | |
| } | |
| /* 2. 標題區 (Header) */ | |
| header { | |
| background: linear-gradient(135deg, #2c3e50, #34495e); /* 深藍色漸層 */ | |
| color: #ffffff; | |
| padding: 4rem 1.5rem; | |
| text-align: center; | |
| border-bottom: 5px solid #1abc9c; /* 亮青色點綴 */ | |
| } | |
| header h1 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 2.8rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.2); | |
| } | |
| header p { | |
| font-size: 1.2rem; | |
| color: #ecf0f1; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* 3. 主內容區 (Main Content) */ | |
| main { | |
| max-width: 1200px; | |
| margin: 3rem auto; | |
| padding: 0 1.5rem; | |
| } | |
| /* 4. 新增：介紹區塊 (Intro Section) */ | |
| .intro-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 3.5rem; /* 與下方專案區塊間距 */ | |
| } | |
| .intro-box { | |
| background: #ffffff; | |
| border-radius: 12px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); | |
| padding: 2rem; | |
| border-top: 5px solid #3498db; /* 藍色頂部邊框 */ | |
| } | |
| .intro-box h3 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 1.5rem; | |
| color: #2c3e50; | |
| margin-bottom: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .intro-box h3 .fa-solid { | |
| color: #3498db; | |
| margin-right: 0.75rem; | |
| } | |
| .intro-box p, .intro-box li { | |
| font-size: 1rem; | |
| color: #444; | |
| margin-bottom: 0.75rem; | |
| } | |
| .intro-box ol { | |
| padding-left: 1.5rem; | |
| } | |
| /* 用於標記程式碼或檔案名稱的樣式 */ | |
| code { | |
| background-color: #eaf2f8; /* 淺藍底色 */ | |
| color: #c0392b; /* 暗紅色文字 */ | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 5px; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| } | |
| /* 5. 專案分區標題 (H2) */ | |
| h2 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 2rem; | |
| color: #34495e; | |
| border-bottom: 3px solid #1abc9c; | |
| padding-bottom: 0.5rem; | |
| margin-bottom: 2rem; | |
| margin-top: 3rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| h2 .fa-solid, h2 .fa-brands { | |
| margin-right: 0.75rem; | |
| color: #1abc9c; | |
| } | |
| /* 6. 卡片容器 (Grid 佈局) */ | |
| .card-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* 7. 專案卡片 (Card) */ | |
| .card { | |
| background: #ffffff; | |
| border-radius: 12px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); | |
| } | |
| .card-content { | |
| flex-grow: 1; | |
| } | |
| .card-icon { | |
| font-size: 2.5rem; | |
| color: #1abc9c; | |
| margin-bottom: 1rem; | |
| } | |
| .card h3 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 1.3rem; | |
| color: #2c3e50; | |
| margin-bottom: 0.75rem; | |
| } | |
| .card p { | |
| font-size: 0.95rem; | |
| margin-bottom: 1.5rem; | |
| flex-grow: 1; | |
| } | |
| .card-link { | |
| display: inline-block; | |
| background-color: #3498db; | |
| color: #ffffff; | |
| text-decoration: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 8px; | |
| font-weight: 700; | |
| text-align: center; | |
| transition: background-color 0.3s ease, transform 0.2s ease; | |
| } | |
| .card-link:hover { | |
| background-color: #2980b9; | |
| transform: scale(1.03); | |
| } | |
| /* 8. 頁腳 (Footer) */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem 1rem; | |
| margin-top: 3rem; | |
| color: #777; | |
| font-size: 0.9rem; | |
| border-top: 1px solid #ddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>地球物理 x Hugging Face 專案展示</h1> | |
| <p>一系列運用 Hugging Face Space 部署的地球科學與地震應用程式，展現資料科學與網路技術的結合。</p> | |
| </header> | |
| <main> | |
| <div class="intro-section"> | |
| <div class="intro-box"> | |
| <h3><i class="fa-solid fa-rocket"></i>什麼是 Hugging Face Spaces？</h3> | |
| <p>Hugging Face Spaces 是一個由 Hugging Face 提供的免費平台，讓開發者和創作者可以輕鬆地建立、分享和展示他們的機器學習 Demo 或網頁應用程式。</p> | |
| <p>它就像是 AI 應用的「YouTube」！您可以使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者像這個頁面一樣，直接部署靜態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。</p> | |
| </div> | |
| <div class="intro-box"> | |
| <h3><i class="fa-solid fa-magic-wand-sparkles"></i>如何部署靜態網頁？</h3> | |
| <p>想部署一個像這樣的靜態網站嗎？超級簡單！</p> | |
| <ol> | |
| <li>在 Hugging Face 建立一個新 Space。</li> | |
| <li>選擇 SDK：選擇 <strong>"Static"</strong>（靜態）。</li> | |
| <li>建立 Space 後，點選 "Files and versions" 分頁。</li> | |
| <li>點選 "Add file" -> "Upload file"，上傳您的 <code>index.html</code> 檔案 (以及任何 CSS/JS 檔案)。</li> | |
| <li>**完成！** 您的網站立刻上線，全球都能訪問。</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <h2><i class="fa-solid fa-wave-square"></i>地震與波形展示</h2> | |
| <div class="card-container"> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-database"></i> | |
| <h3>地震目錄搜尋 API</h3> | |
| <p>提供一個 API 介面，用於查詢地震目錄資料。</p> | |
| </div> | |
| <a href="https://cwadayi-python-app.hf.space/" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-triangle-exclamation"></i> | |
| <h3>地震預警訊息顯示</h3> | |
| <p>即時展示台灣地區的地震預警訊息 (EEW)。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/streamlit_alarm_Taiwan" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-map-location-dot"></i> | |
| <h3>PyGMT 震央繪圖展示</h3> | |
| <p>使用 PyGMT 套件展示如何繪製震央分佈圖。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/streamlit_gmt_demo_new" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-chart-line"></i> | |
| <h3>ObsPy 地震資料處理</h3> | |
| <p>展示使用 ObsPy 搜尋並繪製地震目錄與波形資料。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/streamlit_obspy" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| </div> | |
| <h2><i class="fa-solid fa-satellite-dish"></i>地震監測與資料應用</h2> | |
| <div class="card-container"> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-location-crosshairs"></i> | |
| <h3>Geiger 法地震定位展示</h3> | |
| <p>使用 Geiger's method 進行地震定位的互動式展示。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/streamlit_earthquake_location" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-magnifying-glass-chart"></i> | |
| <h3>地震監測流程</h3> | |
| <p>整合型應用：擷取資料、P/S 波撿拾與定位。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/earthquake_monitoring" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-table-list"></i> | |
| <h3>Google Sheet 資料顯示</h3> | |
| <p>一個類 Grafana 儀表板，用於顯示 Google Sheet 上的資料。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Grafana_like_2" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-house-crack"></i> | |
| <h3>PWS 地震預警顯示</h3> | |
| <p>用於地震預警的 PWS (P-alert) 資料展示介面。</p> | |
| </div> | |
| <a href="https://cwadayi-app-show-pws.hf.space/cwa-earthquakes" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-globe"></i> | |
| <h3>全球地震顯示</h3> | |
| <p>一個 Streamlit 應用程式，用於顯示全球地震活動。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/streamlit" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| </div> | |
| <h2><i class="fa-solid fa-code-pull-request"></i>資料擷取與 API 應用</h2> | |
| <div class="card-container"> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-brands fa-line"></i> | |
| <h3>LINE ROBOT 伺服器</h3> | |
| <p>作為 LINE 聊天機器人後台的伺服器應用。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/LINE-ROBOT" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-earth-asia"></i> | |
| <h3>震央分佈圖 (MCP-2)</h3> | |
| <p>擷取地震資料並繪製震央分佈圖。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/MCP-2" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-cloud-download"></i> | |
| <h3>PWS 資訊擷取</h3> | |
| <p>用於擷取 PWS (P-alert) 相關資訊的應用程式。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/MCP-pws" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-building-columns"></i> | |
| <h3>USGS 地震資料 API</h3> | |
| <p>串接美國地質調查局 (USGS) 的地震 API。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Usgs_api_gemini" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-cloud"></i> | |
| <h3>CWA 地震資料 API</h3> | |
| <p>串接台灣中央氣象署 (CWA) 的地震 API。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/CWA_API_chatgpt5_1" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| </div> | |
| <h2><i class="fa-solid fa-school"></i>地球物理課程與教材</h2> | |
| <div class="card-container"> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-book-open-reader"></i> | |
| <h3>地球物理課程 (總覽)</h3> | |
| <p>地球物理課程的綜合性入口網站或資源頁面。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Geophysics_class" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-person-chalkboard"></i> | |
| <h3>地物課程網站 (Day1)</h3> | |
| <p>地球物理課程第一天的教學內容網站。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Geophysics_day1" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-person-chalkboard"></i> | |
| <h3>地物課程網站 (Day2)</h3> | |
| <p>地球物理課程第二天的教學內容網站。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Geophysics_day2" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-ruler-combined"></i> | |
| <h3>折射震測展示</h3> | |
| <p>用於教學的折射震測原理互動式展示。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Refraction_sdd" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-ruler-horizontal"></i> | |
| <h3>折射震測展示 (2)</h3> | |
| <p>折射震測原理的第二個互動式展示版本。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Refraction_3" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <i class="card-icon fa-solid fa-weight-hanging"></i> | |
| <h3>重力異常展示</h3> | |
| <p>展示布格異常 (Bouguer) 與自由空間異常 (free-air) 的概念。</p> | |
| </div> | |
| <a href="https://huggingface.co/spaces/cwadayi/Gravity" target="_blank" rel="noopener noreferrer" class="card-link"> | |
| <i class="fa-solid fa-arrow-up-right-from-square"></i> 前往應用 | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face 專案。</p> | |
| </footer> | |
| </body> | |
| </html> |