File size: 37,680 Bytes
bbfeecb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 | <!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">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="sidebar-logo">
<!-- Waveform Icon -->
<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 Content Area -->
<main class="main-content">
<!-- Top Header -->
<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>
<!-- Viewport View Sections -->
<div class="viewport-container">
<!-- ================= OVERVIEW TAB ================= -->
<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>
<!-- PPT Cards -->
<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>
<!-- ================= VIEWER TAB ================= -->
<section id="tab-viewer" class="tab-section">
<div class="slide-layout-wrapper">
<!-- Left Thumbnails Sidebar Pane -->
<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">
<!-- Dynamic thumbnails will load here -->
</div>
</div>
<!-- Right Core Slide Viewer Pane -->
<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">
<!-- Text lines will render here dynamically -->
</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">
<!-- Key notes parsed will render here -->
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ================= CALCULATOR TAB ================= -->
<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>
<!-- ================= SWARM TAB ================= -->
<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 for agent graph -->
<canvas id="agent-swarm-canvas"></canvas>
<!-- Floating Overlay panel for selected agent -->
<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>
<!-- ================= LEM TAB ================= -->
<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;">
<!-- Mermaid-like CSS representation of model -->
<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>
<!-- ================= SEARCH TAB ================= -->
<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>
<!-- ================= HIGHLIGHTS TAB ================= -->
<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>
<!-- Category Filters -->
<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>
<!-- Highlights Grid -->
<div class="col-12">
<div id="highlights-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px;">
<!-- Cards will render here -->
</div>
</div>
</div>
</section>
<!-- ================= DOWNLOADS TAB ================= -->
<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">
<!-- File 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>
<!-- lightbox modal for full screen view -->
<div id="lightroom" class="lightroom-modal">
<button class="lightroom-close-btn" id="btn-close-lightroom">
<!-- Close Icon -->
<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>
<!-- Load Slides Data -->
<script src="slides_data.js"></script>
<!-- Load App Logic -->
<script src="index.js"></script>
</body>
</html>
|