| <!DOCTYPE html> |
| <html lang="zh-TW"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CWA 次世代地震預警與 AI 代理系統展示平台</title> |
| <link rel="stylesheet" href="index.css"> |
| </head> |
| <body> |
| |
| <div class="dashboard-container"> |
| |
| |
| <aside class="sidebar"> |
| <div class="sidebar-header"> |
| <div class="sidebar-logo"> |
| |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M22 12h-4l-3 9L9 3l-3 9H2"/> |
| </svg> |
| </div> |
| <div class="sidebar-title-container"> |
| <h2>AGY 展示平台</h2> |
| <p>CWA EEW & AI Swarm</p> |
| </div> |
| </div> |
| |
| <nav class="sidebar-menu"> |
| <div class="menu-item active" data-tab="overview"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <rect x="3" y="3" width="7" height="9"/> |
| <rect x="14" y="3" width="7" height="5"/> |
| <rect x="14" y="12" width="7" height="9"/> |
| <rect x="3" y="16" width="7" height="5"/> |
| </svg> |
| 知識庫總覽 |
| </div> |
| <div class="menu-item" data-tab="highlights"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/> |
| </svg> |
| 簡報精選精華 |
| </div> |
| <div class="menu-item" data-tab="viewer"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/> |
| <line x1="7" y1="2" x2="7" y2="22"/> |
| <line x1="17" y1="2" x2="17" y2="22"/> |
| <line x1="2" y1="12" x2="22" y2="12"/> |
| </svg> |
| 投影片展示 |
| </div> |
| <div class="menu-item" data-tab="calculator"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="12" cy="12" r="10"/> |
| <circle cx="12" cy="12" r="6"/> |
| <circle cx="12" cy="12" r="2"/> |
| </svg> |
| 預警盲區模擬 |
| </div> |
| <div class="menu-item" data-tab="swarm"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="18" cy="5" r="3"/> |
| <circle cx="6" cy="12" r="3"/> |
| <circle cx="18" cy="19" r="3"/> |
| <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/> |
| <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/> |
| </svg> |
| AI 代理協作 |
| </div> |
| <div class="menu-item" data-tab="lem"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> |
| <polyline points="3.27 6.96 12 12.01 20.73 6.96"/> |
| <line x1="12" y1="22.08" x2="12" y2="12"/> |
| </svg> |
| 大型地震模型 (LEM) |
| </div> |
| <div class="menu-item" data-tab="search"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="11" cy="11" r="8"/> |
| <line x1="21" y1="21" x2="16.65" y2="16.65"/> |
| </svg> |
| 全文大綱搜尋 |
| </div> |
| <div class="menu-item" data-tab="downloads"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> |
| <polyline points="7 10 12 15 17 10"/> |
| <line x1="12" y1="15" x2="12" y2="3"/> |
| </svg> |
| 簡報下載專區 |
| </div> |
| </nav> |
| |
| <div class="sidebar-footer"> |
| CWA SEISMOLOGY © 2026 |
| </div> |
| </aside> |
| |
| |
| <main class="main-content"> |
| |
| |
| <header class="top-header"> |
| <div class="header-title"> |
| <h3 id="current-tab-title">知識庫總覽</h3> |
| <p id="current-tab-subtitle">展示台灣中央氣象署強震即時警報與 AI 技術整合之演進</p> |
| </div> |
| <div class="header-badge"> |
| <span class="pulse-dot"></span> |
| <span>系統狀態：運作中</span> |
| </div> |
| </header> |
| |
| |
| <div class="viewport-container"> |
| |
| |
| <section id="tab-overview" class="tab-section active"> |
| <div class="grid-container"> |
| |
| <div class="col-12"> |
| <div class="glass-panel card-padding"> |
| <h4 class="section-title">中央氣象署次世代地震測報技術專案</h4> |
| <div class="text-content"> |
| <p>本專案旨在匯整與展示台灣中央氣象署（CWA）地震測報中心在強震即時警報系統（EEW）效能、大規模地震觀測網架構、以及引領次世代地震觀測發展的最新技術。本平台彙整了四大關鍵技術簡報的精華知識，涵蓋從基礎開源框架（Earthworm、Seiscomp、Grafana）到前沿人工智慧技術（大型地震模型 LEM、SeisWav2Vec 2.0 自監督預訓練、以及 AI Agent 協作群組），幫助您全方位、多維度地理解次世代地震測報核心架構。</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-12"> |
| <h4 style="font-size: 16px; font-weight: 800; color: white; margin: 12px 0 8px 0; letter-spacing: 0.5px;">請選擇欲查看的專題簡報：</h4> |
| </div> |
| |
| |
| <div class="col-6"> |
| <div class="glass-panel card-padding ppt-grid-card" onclick="jumpToPresentation('ppt1')"> |
| <span class="ppt-tag">即時監測與架構</span> |
| <h3 class="ppt-title">Real-Time Seismic Data Processing and Monitoring at CWA</h3> |
| <p class="text-content" style="font-size: 13px; min-height: 60px;">探討中央氣象署的全面性地震監測基礎設施，說明如何利用開源監測軟體 Earthworm 與 Seiscomp 進行即時波形處理，並展示結合 Grafana 建構的即時系統狀態、數據延遲與 availability 儀表板。</p> |
| <div class="ppt-info"> |
| <span>投影片數量：26 張</span> |
| <button class="view-btn"> |
| 進入簡報 |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="col-6"> |
| <div class="glass-panel card-padding ppt-grid-card" onclick="jumpToPresentation('ppt2')"> |
| <span class="ppt-tag">效能統計與案例</span> |
| <h3 class="ppt-title">2026年5月 地震預警系統報告</h3> |
| <p class="text-content" style="font-size: 13px; min-height: 60px;">詳細整理 2026 年 5 月 CWA 強震即時警報系統（EEW）的效能，透過 5/1 東部海域地震、5/12 東部海域地震、5/17 埔里地震等三大案例，探討幾何中心定位法誤差、應變盲區、測站觸發率及預估震度準確度。</p> |
| <div class="ppt-info"> |
| <span>投影片數量：17 張</span> |
| <button class="view-btn"> |
| 進入簡報 |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="col-6"> |
| <div class="glass-panel card-padding ppt-grid-card" onclick="jumpToPresentation('ppt3')"> |
| <span class="ppt-tag">AI 代理與大模型</span> |
| <h3 class="ppt-title">AI 代理群與大型語言模型在次世代地震測報之整合與應用</h3> |
| <p class="text-content" style="font-size: 13px; min-height: 60px;">重磅展示 CWA 最先進的科學研究：將語音處理領域 (Wav2Vec 2.0) 遷移至地震波形分析的自監督模型 SeisWav2Vec 2.0 (大型地震模型 LEM)，以及由四大 Agent（預警總管、整合工程師、地震學助教、科學研究員）組成的自動化協作群組架構。</p> |
| <div class="ppt-info"> |
| <span>投影片數量：71 張</span> |
| <button class="view-btn"> |
| 進入簡報 |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="col-6"> |
| <div class="glass-panel card-padding ppt-grid-card" onclick="jumpToPresentation('ppt4')"> |
| <span class="ppt-tag">預警演進與宣導</span> |
| <h3 class="ppt-title">臺灣地震預警系統的演進與發展 (嘉義災防宣導)</h3> |
| <p class="text-content" style="font-size: 13px; min-height: 60px;">回顧台灣強震即時警報的發展歷程與原理，說明 P 波（傳播快、振幅小）與 S 波（傳播慢、震幅大）在預警上的幾何學，展示災防預警發布條件、推播管道（PWS、電視、中小學軟體）及花蓮 M7.2 地震案例。</p> |
| <div class="ppt-info"> |
| <span>投影片數量：50 張</span> |
| <button class="view-btn"> |
| 進入簡報 |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
| |
| |
| <section id="tab-viewer" class="tab-section"> |
| <div class="slide-layout-wrapper"> |
| |
| |
| <div class="glass-panel slide-selector-pane"> |
| <div class="slide-selector-header"> |
| <select id="ppt-select" class="ppt-selector-dropdown"> |
| <option value="ppt1">PPT 1: CWA Real-Time Infrastructure</option> |
| <option value="ppt2">PPT 2: 2026.05 EEW Report</option> |
| <option value="ppt3">PPT 3: AI Swarm & LEM Integration</option> |
| <option value="ppt4">PPT 4: Taiwan EEW Evolution</option> |
| </select> |
| </div> |
| <div id="slide-thumbnails" class="slide-thumbnails-list"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="slide-viewer-pane"> |
| |
| <div class="slide-display-card"> |
| <img id="main-slide-img" src="" alt="Slide View"> |
| <button class="slide-fullscreen-btn" id="btn-fullscreen" title="全螢幕展示"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/> |
| </svg> |
| </button> |
| </div> |
| |
| <div class="slide-viewer-controls"> |
| <button class="nav-btn" id="btn-prev-slide"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> |
| 上一張 |
| </button> |
| <span id="slide-index-indicator" style="font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent-cyan);">Slide 1 / 26</span> |
| <button class="nav-btn" id="btn-next-slide"> |
| 下一張 |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> |
| </button> |
| </div> |
| |
| <div class="glass-panel slide-info-card"> |
| <div class="slide-info-text"> |
| <h5> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg> |
| 投影片文字內容 |
| </h5> |
| <ul id="slide-text-lines"> |
| |
| </ul> |
| </div> |
| <div class="slide-info-takeaway"> |
| <h5> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> |
| 核心知識要點 |
| </h5> |
| <ul id="slide-takeaway-points"> |
| |
| </ul> |
| </div> |
| </div> |
| |
| </div> |
| |
| </div> |
| </section> |
| |
| |
| <section id="tab-calculator" class="tab-section"> |
| <div class="grid-container"> |
| |
| <div class="col-4"> |
| <div class="glass-panel card-padding" style="height: 100%;"> |
| <h4 class="card-title">物理物理參數控制</h4> |
| |
| <div class="input-group"> |
| <div class="input-label"> |
| <span>震源深度 (Depth)</span> |
| <span id="depth-val" class="value-display">15 km</span> |
| </div> |
| <input type="range" min="5" max="100" value="15" id="slider-depth" class="input-slider"> |
| </div> |
|
|
| <div class="input-group"> |
| <div class="input-label"> |
| <span>震央距離 (Epicenter Distance)</span> |
| <span id="dist-val" class="value-display">40 km</span> |
| </div> |
| <input type="range" min="10" max="150" value="40" id="slider-dist" class="input-slider"> |
| </div> |
|
|
| <div class="input-group"> |
| <div class="input-label"> |
| <span>S波平均波速 (S-Wave Velocity)</span> |
| <span id="vs-val" class="value-display">3.5 km/s</span> |
| </div> |
| <input type="range" min="2.5" max="4.5" step="0.1" value="3.5" id="slider-vs" class="input-slider"> |
| </div> |
|
|
| <div class="input-group"> |
| <div class="input-label"> |
| <span>預警解算時效 (Processing Time)</span> |
| <span id="process-val" class="value-display">10.0 s</span> |
| </div> |
| <input type="range" min="5.0" max="25.0" step="0.5" value="10.0" id="slider-process" class="input-slider"> |
| </div> |
|
|
| <div class="calculator-summary-box"> |
| <p class="input-label" style="margin-bottom: 4px;">預估警報黃金時間 (Lead Time)</p> |
| <div id="calc-lead-time" class="lead-time-large-display">1.4<span>秒</span></div> |
| <div id="calc-warning-status" class="warning-status-alert status-safe">警報覆蓋安全區</div> |
| |
| <div style="margin-top: 16px; font-size: 12px; color: var(--text-dark); line-height: 1.5;"> |
| <p><strong>盲區半徑 (Blind Zone Radius)：</strong> <span id="blind-radius-txt" style="color: var(--text-muted); font-weight: bold;">35.0 km</span></p> |
| <p><strong>震源距離 (Hypocenter Distance)：</strong> <span id="hypo-dist-txt" style="color: var(--text-muted); font-weight: bold;">42.7 km</span></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-8"> |
| <div class="glass-panel card-padding"> |
| <div class="card-title"> |
| <span>地震預警波前傳播幾何示意圖 (下半球立體與剖面)</span> |
| <span style="font-size: 11px; font-family: var(--font-mono); color: var(--text-dark);">動態向量演算視窗</span> |
| </div> |
| <div class="blind-zone-canvas-wrapper"> |
| <canvas id="blind-zone-canvas"></canvas> |
| </div> |
| <div class="text-content" style="font-size: 12px; margin-top: 14px;"> |
| <p><strong>學術原理說明：</strong> 預警系統解算地震參數需要一定時間（簡稱「預警解算時效」）。在預警解算完畢前，S波（破壞性切變波）已經從震源向外傳播了一定半徑，這塊無法提早收到警報的圓形區域即為<strong>應變盲區</strong>。盲區半徑等於 <em>解算時間 × S波波速</em>。若測站或城市位於盲區外（震央距大於盲區半徑），將獲得寶貴的警報黃金前置時間。</p> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
| |
| |
| <section id="tab-swarm" class="tab-section"> |
| <div class="grid-container"> |
| |
| <div class="col-8"> |
| <div class="glass-panel card-padding"> |
| <div class="card-title"> |
| <span>EEW 多代理群組 (Swarm) 協作網絡圖</span> |
| <span style="font-size: 11px; font-family: var(--font-mono); color: var(--accent-emerald);">互動點選可查看代理職責</span> |
| </div> |
| <div class="agent-swarm-wrapper"> |
| |
| <canvas id="agent-swarm-canvas"></canvas> |
| |
| |
| <div id="agent-details-overlay" class="agent-card-overlay"> |
| <div id="agent-overlay-icon" class="agent-icon-box" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald);"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/> |
| </svg> |
| </div> |
| <div class="agent-details"> |
| <h4> |
| <span id="agent-overlay-name">my_agent</span> |
| <span id="agent-overlay-role" class="agent-role-badge" style="background: var(--accent-emerald-glow); color: var(--accent-emerald);">預警總管</span> |
| </h4> |
| <p id="agent-overlay-desc">維護監控 Cron、處理異常推播（Telegram）與撰寫每日 EEW 系統運作日報總結。協調 seismo 與 secondary_agent。</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-4"> |
| <div class="glass-panel card-padding" style="height: 100%;"> |
| <h4 class="card-title">EEW 自動化閉環工作流</h4> |
| <div class="text-content" style="font-size: 13.5px;"> |
| <p style="margin-bottom: 14px;">在 PPT 3 報告（第 48-66 頁）中，展示了 CWA 引進的 AI Agent 多代理協作系統。這是一套整合了地震監控、自動化派遣與科研分析的閉環系統：</p> |
| |
| <div style="display: flex; flex-direction: column; gap: 14px; margin-top: 10px;"> |
| <div style="display: flex; gap: 12px; align-items: flex-start;"> |
| <span style="font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); padding: 2px 6px; border-radius: 4px; margin-top: 2px;">01</span> |
| <div> |
| <h6 style="color: white; font-weight: 700; font-size: 13px;">事件偵測與觸發</h6> |
| <p style="font-size: 12px; color: var(--text-dark);">seismo 偵測 CWA 預警系統目錄下的新 `.rep` (Earthquake Report) 報告產出。</p> |
| </div> |
| </div> |
| |
| <div style="display: flex; gap: 12px; align-items: flex-start;"> |
| <span style="font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); padding: 2px 6px; border-radius: 4px; margin-top: 2px;">02</span> |
| <div> |
| <h6 style="color: white; font-weight: 700; font-size: 13px;">跨節點調度派遣</h6> |
| <p style="font-size: 12px; color: var(--text-dark);">secondary_agent 透過 conducter 自動化路由派遣訊息，指派科學計算任務。</p> |
| </div> |
| </div> |
|
|
| <div style="display: flex; gap: 12px; align-items: flex-start;"> |
| <span style="font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); padding: 2px 6px; border-radius: 4px; margin-top: 2px;">03</span> |
| <div> |
| <h6 style="color: white; font-weight: 700; font-size: 13px;">科研分析與繪圖</h6> |
| <p style="font-size: 12px; color: var(--text-dark);">seismo_agent 負責資料轉換成 CSV/JSON，分析時效與延遲，並輸出統計圖表。</p> |
| </div> |
| </div> |
|
|
| <div style="display: flex; gap: 12px; align-items: flex-start;"> |
| <span style="font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); padding: 2px 6px; border-radius: 4px; margin-top: 2px;">04</span> |
| <div> |
| <h6 style="color: white; font-weight: 700; font-size: 13px;">異常通報與日報發布</h6> |
| <p style="font-size: 12px; color: var(--text-dark);">my_agent 整合報告，產出每日摘要，若有異常（如解算時效過慢）則推播 Telegram 告警。</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
| |
| |
| <section id="tab-lem" class="tab-section"> |
| <div class="grid-container"> |
| |
| <div class="col-8"> |
| <div class="glass-panel card-padding"> |
| <h4 class="card-title">SeisWav2Vec 2.0 大型地震模型架構</h4> |
| <div class="text-content" style="font-size: 14px;"> |
| <p>大型地震模型 (Large Earthquake Model, LEM) 是地震監測的新紀元。在 PPT 3 簡報（第 32-47 頁）中，展示了基於 Wav2Vec 2.0 語音對比學習概念的地震學創新應用。透過特徵編碼器 (CNN)、Transformer、遮罩與離散量化編碼器，系統能從無標記的海量連續波形中提取通用的地震波相特徵，並進行微調。</p> |
| |
| <div style="margin: 24px 0; padding: 20px; background: rgba(8, 12, 20, 0.6); border: 1px dashed var(--card-border); border-radius: 12px;"> |
| |
| <div style="display: flex; flex-direction: column; align-items: center; gap: 14px;"> |
| <div style="background: var(--accent-blue-glow); border: 1px solid var(--accent-blue); padding: 10px 16px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; width: 80%; text-align: center; color: #93c5fd;"> |
| 原始地震波形資料輸入 (Seismic Waveform Input) |
| </div> |
| |
| <div style="color: var(--text-dark);">▼</div> |
| |
| <div style="background: var(--accent-cyan-glow); border: 1px solid var(--accent-cyan); padding: 10px 16px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; width: 80%; text-align: center; color: #a5f3fc;"> |
| 特徵編碼器 Feature Encoder (多層一維 CNN) |
| </div> |
| |
| <div style="color: var(--text-dark);">▼</div> |
| |
| <div style="display: flex; justify-content: space-between; width: 80%; gap: 12px;"> |
| <div style="flex: 1; background: rgba(245, 158, 11, 0.1); border: 1px dashed var(--accent-amber); padding: 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; text-align: center; color: #fde68a;"> |
| 遮罩預測 (Masking) |
| </div> |
| <div style="flex: 1; background: rgba(16, 185, 129, 0.1); border: 1px dashed var(--accent-emerald); padding: 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; text-align: center; color: #a7f3d0;"> |
| 離散向量量化器 (Quantization) |
| </div> |
| </div> |
| |
| <div style="color: var(--text-dark);">▼</div> |
| |
| <div style="background: rgba(139, 92, 246, 0.15); border: 1px solid #8b5cf6; padding: 10px 16px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; width: 80%; text-align: center; color: #ddd6fe;"> |
| 上下文編碼器 Context Encoder (12層 Transformer 全局自注意力) |
| </div> |
| |
| <div style="color: var(--text-dark);">▼</div> |
| |
| <div style="background: var(--accent-rose-glow); border: 1px solid var(--accent-rose); padding: 10px 16px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px; width: 80%; text-align: center; color: #fecdd3;"> |
| 任務解碼器與分類任務微調 (P/S 波相辨識、震央距與規模預估) |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-4"> |
| <div class="glass-panel card-padding" style="height: 100%;"> |
| <h4 class="card-title">自監督學習的核心優勢</h4> |
| <div class="text-content" style="font-size: 13px;"> |
| <ul style="list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 10px;"> |
| <li style="position: relative; padding-left: 20px; line-height: 1.5;"> |
| <span style="position: absolute; left: 0; top: 2px; color: var(--accent-cyan); font-weight: bold;">✔</span> |
| <strong style="color: white; display: block; margin-bottom: 4px;">無標註學習 (Self-Supervised)</strong> |
| 無需人工標記正確答案，直接利用數據本身的時序特徵進行學習，極大地解決了「深度學習需要海量標註數據」的傳統瓶頸。 |
| </li> |
| <li style="position: relative; padding-left: 20px; line-height: 1.5;"> |
| <span style="position: absolute; left: 0; top: 2px; color: var(--accent-cyan); font-weight: bold;">✔</span> |
| <strong style="color: white; display: block; margin-bottom: 4px;">學習通用表示 (General Representations)</strong> |
| CNN 特徵編碼器捕獲局部波形，而 12 層 Transformer 捕捉波形全局上下文，提取出地震特有的資訊 Embedding。 |
| </li> |
| <li style="position: relative; padding-left: 20px; line-height: 1.5;"> |
| <span style="position: absolute; left: 0; top: 2px; color: var(--accent-cyan); font-weight: bold;">✔</span> |
| <strong style="color: white; display: block; margin-bottom: 4px;">高效任務微調 (Task Fine-Tuning)</strong> |
| 在預訓練的 Wav2Vec 模型上外接 CNN 解碼器，僅需極少量的標記事件（如 P/S 波相精準到時），即可達到領先（SOTA）的辨識效能。 |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </section> |
| |
| |
| <section id="tab-search" class="tab-section"> |
| <div class="search-container"> |
| <div class="search-input-box"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/> |
| </svg> |
| <input type="text" id="search-input" placeholder="請輸入欲搜尋的關鍵字（如：Earthworm, Grafana, 盲區, 代理, M7.2）..."> |
| </div> |
| |
| <div id="search-results" class="search-results-viewport"> |
| <div class="no-results-view"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> |
| <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/> |
| </svg> |
| <p style="font-size: 14px; font-weight: 600;">請輸入關鍵字以檢索四大簡報共 164 頁的文字大綱</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="tab-highlights" class="tab-section"> |
| <div class="grid-container"> |
| <div class="col-12"> |
| <div class="glass-panel card-padding"> |
| <h4 class="section-title">簡報核心重點與圖表擷取</h4> |
| <p class="text-content" style="margin-bottom: 20px;">本單元為您從 4 份簡報中，挑選出最關鍵的圖表與重要原理說明。每個重點皆附有簡報的重點截圖與文字摘要，您可以點選「定位簡報」來查看該投影片的完整脈絡。</p> |
| |
| |
| <div style="display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;"> |
| <button class="nav-btn active-filter filter-btn" data-filter-cat="all">全部精選</button> |
| <button class="nav-btn filter-btn" data-filter-cat="network">測報架構 & 監測</button> |
| <button class="nav-btn filter-btn" data-filter-cat="eew">預警物理 & 效能</button> |
| <button class="nav-btn filter-btn" data-filter-cat="ai">大型地震模型 & 代理群</button> |
| <button class="nav-btn filter-btn" data-filter-cat="history">地震史 & 案例</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="col-12"> |
| <div id="highlights-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px;"> |
| |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tab-downloads" class="tab-section"> |
| <div class="grid-container"> |
| <div class="col-12"> |
| <div class="glass-panel card-padding"> |
| <h4 class="section-title">原始檔案資訊與下載</h4> |
| <p class="text-content" style="margin-bottom: 24px;">以下為您在本地電腦中儲存的 4 份簡報，點選即可下載或查閱對應檔案大小與內容說明。這些簡報已重構為網頁展示。</p> |
| |
| <div class="download-card"> |
| <div class="download-meta"> |
| <div class="download-icon"> |
| |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> |
| </div> |
| <div class="download-details"> |
| <h5>Real-Time Seismic Data Processing and Monitoring at CWA Current Status and Future Directions.pptx</h5> |
| <p>檔案大小：33.3 MB · 分類：地震觀測網與開源監測架構（JPGU學術報告）</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="download-card"> |
| <div class="download-meta"> |
| <div class="download-icon"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> |
| </div> |
| <div class="download-details"> |
| <h5>202605_地震預警系統報告.pptx</h5> |
| <p>檔案大小：20.0 MB · 分類：地震預警中心 2026年5月 效能與案例統計月報</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="download-card"> |
| <div class="download-meta"> |
| <div class="download-icon"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> |
| </div> |
| <div class="download-details"> |
| <h5>2026_0603_AI 代理群與大型語言模型在次世代地震測報之整合與應用.pptx</h5> |
| <p>檔案大小：103.4 MB · 分類：AI Agent 與自監督預訓練大型地震模型（台北市立大學演講）</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="download-card"> |
| <div class="download-meta"> |
| <div class="download-icon"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> |
| </div> |
| <div class="download-details"> |
| <h5>2026_0612_嘉義災防宣導-臺灣地震預警系統的演進與發展.pptx</h5> |
| <p>檔案大小：150.4 MB · 分類：地震預警宣導、傳播管道、盲區概念與花蓮地震專題報告</p> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| </div> |
| |
| </main> |
| |
| </div> |
|
|
| |
| <div id="lightroom" class="lightroom-modal"> |
| <button class="lightroom-close-btn" id="btn-close-lightroom"> |
| |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> |
| </button> |
| <img id="lightroom-img" src="" alt="Zoomed Slide"> |
| </div> |
|
|
| |
| <script src="slides_data.js"></script> |
| |
| <script src="index.js"></script> |
| </body> |
| </html> |
|
|
