feat: initial clean LFS commit of showcase

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,18 @@
+---
+title: agy
+emoji: 🌋
+colorFrom: blue
+colorTo: red
+sdk: static
+pinned: false
+---
+
+# CWA Seismic Warning & AI Agent Swarm Showcase (AGY)
+
+This Hugging Face Space showcases Taiwan's Central Weather Administration (CWA) next-generation seismic monitoring and earthquake warning technologies. It presents four key PowerPoint documents through an interactive, premium dark-mode web application featuring:
+
+1. **Slide Showcase Viewer**: Side-by-side slide viewing with extracted text outlines and key takeaways.
+2. **Blind Zone & Warning Lead Time Simulator**: Interactive physics calculations for travel times and warning zones.
+3. **AI Agent Swarm Flow Diagram**: Dynamic interactive visualization of CWA multi-agent automation loops.
+4. **大型地震模型 (LEM) Panel**: Context and details for the Wav2Vec 2.0-adapted SeisWav2Vec self-supervised deep learning model.
+5. **Universal Keyword Search Indexer**: Search through all 164 slides text content instantly.

index.css

@@ -0,0 +1,1070 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+TC:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --bg-color: #080c14;
+  --card-bg: rgba(16, 22, 36, 0.7);
+  --card-border: rgba(255, 255, 255, 0.08);
+  --text-main: #f1f5f9;
+  --text-muted: #94a3b8;
+  --text-dark: #64748b;
+  
+  /* Accent Colors */
+  --accent-cyan: #06b6d4;
+  --accent-cyan-glow: rgba(6, 182, 212, 0.15);
+  --accent-blue: #3b82f6;
+  --accent-blue-glow: rgba(59, 130, 246, 0.15);
+  --accent-amber: #f59e0b;
+  --accent-amber-glow: rgba(245, 158, 11, 0.15);
+  --accent-emerald: #10b981;
+  --accent-emerald-glow: rgba(16, 185, 129, 0.15);
+  --accent-rose: #f43f5e;
+  --accent-rose-glow: rgba(244, 63, 94, 0.15);
+  
+  --font-sans: 'Outfit', 'Noto Sans TC', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  
+  --sidebar-width: 280px;
+  --header-height: 70px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  font-family: var(--font-sans);
+  min-height: 100vh;
+  display: flex;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: rgba(8, 12, 20, 0.5);
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.2);
+  border-radius: 99px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-cyan);
+}
+
+/* Glassmorphism Panel styles */
+.glass-panel {
+  background: var(--card-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--card-border);
+  border-radius: 16px;
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-panel:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+/* Main Dashboard Layout */
+.dashboard-container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: radial-gradient(circle at 50% 0%, #0e1726 0%, #05080f 100%);
+}
+
+/* Sidebar Navigation */
+.sidebar {
+  width: var(--sidebar-width);
+  height: 100%;
+  background: rgba(10, 15, 26, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid var(--card-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+}
+
+.sidebar-header {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.sidebar-logo {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
+}
+
+.sidebar-logo svg {
+  width: 22px;
+  height: 22px;
+  color: white;
+}
+
+.sidebar-title-container h2 {
+  font-size: 18px;
+  font-weight: 900;
+  letter-spacing: 0.5px;
+  background: linear-gradient(to right, #00f2fe, #4facfe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.sidebar-title-container p {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  margin-top: 1px;
+}
+
+.sidebar-menu {
+  flex: 1;
+  padding: 20px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 12px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.menu-item svg {
+  width: 18px;
+  height: 18px;
+  transition: transform 0.2s ease;
+}
+
+.menu-item:hover {
+  color: var(--text-main);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.menu-item:hover svg {
+  transform: translateX(2px);
+}
+
+.menu-item.active {
+  color: #white;
+  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
+  border-color: rgba(6, 182, 212, 0.3);
+  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.05);
+}
+
+.menu-item.active svg {
+  color: var(--accent-cyan);
+}
+
+.sidebar-footer {
+  padding: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 11px;
+  color: var(--text-dark);
+  text-align: center;
+  font-family: var(--font-mono);
+}
+
+/* App Main Body */
+.main-content {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Header */
+.top-header {
+  height: var(--header-height);
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(10, 15, 26, 0.3);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.header-title h3 {
+  font-size: 18px;
+  font-weight: 800;
+  color: white;
+}
+
+.header-title p {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.header-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(6, 182, 212, 0.1);
+  border: 1px solid rgba(6, 182, 212, 0.2);
+  padding: 6px 14px;
+  border-radius: 99px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-cyan);
+}
+
+.header-badge span.pulse-dot {
+  width: 8px;
+  height: 8px;
+  background-color: var(--accent-cyan);
+  border-radius: 50%;
+  box-shadow: 0 0 10px var(--accent-cyan);
+  animation: pulse-ring 2s infinite;
+}
+
+/* Scrollable Viewport Container */
+.viewport-container {
+  flex: 1;
+  padding: 32px;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* Tab Sections */
+.tab-section {
+  display: none;
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.tab-section.active {
+  display: block;
+}
+
+/* Grid Systems */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 24px;
+}
+
+.col-12 { grid-column: span 12; }
+.col-8 { grid-column: span 8; }
+.col-6 { grid-column: span 6; }
+.col-4 { grid-column: span 4; }
+
+@media (max-width: 1024px) {
+  .col-8, .col-6, .col-4 {
+    grid-column: span 12;
+  }
+}
+
+/* General CSS components */
+h4.section-title {
+  font-size: 20px;
+  font-weight: 800;
+  margin-bottom: 24px;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+h4.section-title::before {
+  content: '';
+  width: 4px;
+  height: 20px;
+  background: linear-gradient(to bottom, var(--accent-cyan), var(--accent-blue));
+  border-radius: 2px;
+  display: inline-block;
+}
+
+/* CSS Cards */
+.card-padding {
+  padding: 24px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.text-content {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-muted);
+}
+
+.text-content p {
+  margin-bottom: 12px;
+}
+
+/* Overview Dashboard Components */
+.ppt-grid-card {
+  height: 100%;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+}
+
+.ppt-grid-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
+  opacity: 0.7;
+}
+
+.ppt-grid-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(6, 182, 212, 0.3);
+  box-shadow: 0 15px 30px -10px rgba(6, 182, 212, 0.15);
+}
+
+.ppt-tag {
+  display: inline-block;
+  padding: 4px 10px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  font-family: var(--font-mono);
+}
+
+.ppt-grid-card:nth-child(2) .ppt-tag {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+}
+.ppt-grid-card:nth-child(3) .ppt-tag {
+  background: rgba(245, 158, 11, 0.1);
+  border-color: rgba(245, 158, 11, 0.2);
+  color: #fbbf24;
+}
+.ppt-grid-card:nth-child(4) .ppt-tag {
+  background: rgba(244, 63, 94, 0.1);
+  border-color: rgba(244, 63, 94, 0.2);
+  color: #f87171;
+}
+
+.ppt-title {
+  font-size: 15px;
+  font-weight: 800;
+  color: white;
+  line-height: 1.4;
+  margin-bottom: 12px;
+  min-height: 42px;
+}
+
+.ppt-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text-dark);
+  font-family: var(--font-mono);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 12px;
+  margin-top: 8px;
+}
+
+.view-btn {
+  background: transparent;
+  border: none;
+  color: var(--accent-cyan);
+  font-size: 13px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.view-btn:hover {
+  color: var(--text-main);
+}
+
+/* Slide Viewer System */
+.slide-layout-wrapper {
+  display: flex;
+  gap: 24px;
+  height: calc(100vh - 160px);
+}
+
+.slide-selector-pane {
+  width: 250px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.slide-selector-header {
+  padding: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.ppt-selector-dropdown {
+  width: 100%;
+  background: rgba(8, 12, 20, 0.8);
+  border: 1px solid var(--card-border);
+  color: white;
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  outline: none;
+}
+
+.slide-thumbnails-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.thumb-item {
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.thumb-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.thumb-item.active {
+  background: rgba(6, 182, 212, 0.06);
+  border-color: rgba(6, 182, 212, 0.3);
+}
+
+.thumb-num {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.thumb-title {
+  font-size: 12px;
+  color: var(--text-main);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slide-viewer-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 20px;
+}
+
+.slide-display-card {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #020408;
+  border-radius: 16px;
+  border: 1px solid var(--card-border);
+}
+
+.slide-display-card img {
+  max-width: 95%;
+  max-height: 95%;
+  object-contain: fit;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
+  border-radius: 4px;
+  transition: transform 0.3s ease;
+  cursor: zoom-in;
+}
+
+.slide-fullscreen-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(16, 22, 36, 0.8);
+  border: 1px solid var(--card-border);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 5;
+  transition: all 0.2s ease;
+}
+
+.slide-fullscreen-btn:hover {
+  background: var(--accent-cyan);
+  border-color: var(--accent-cyan);
+}
+
+.slide-info-card {
+  height: 200px;
+  display: flex;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.slide-info-text {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.slide-info-takeaway {
+  width: 300px;
+  padding: 20px;
+  overflow-y: auto;
+  background: rgba(8, 12, 20, 0.3);
+}
+
+.slide-info-card h5 {
+  font-size: 14px;
+  font-weight: 800;
+  color: white;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.slide-info-card ul {
+  list-style: none;
+}
+
+.slide-info-card li {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  margin-bottom: 8px;
+  position: relative;
+  padding-left: 14px;
+}
+
+.slide-info-card li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 7px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--accent-cyan);
+}
+
+.slide-viewer-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(16, 22, 36, 0.5);
+  border: 1px solid var(--card-border);
+  padding: 10px 20px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.nav-btn {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--card-border);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+}
+
+.nav-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.nav-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Simulator System (Blind Zone warning lead time calculator) */
+.input-group {
+  margin-bottom: 20px;
+}
+
+.input-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.input-label span.value-display {
+  color: var(--accent-cyan);
+  font-family: var(--font-mono);
+  font-weight: 700;
+}
+
+.input-slider {
+  width: 100%;
+  height: 6px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 99px;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  accent-color: var(--accent-cyan);
+}
+
+.calculator-summary-box {
+  background: rgba(6, 182, 212, 0.04);
+  border: 1px solid rgba(6, 182, 212, 0.15);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 24px;
+}
+
+.lead-time-large-display {
+  font-size: 48px;
+  font-weight: 900;
+  color: var(--accent-cyan);
+  font-family: var(--font-mono);
+  text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.lead-time-large-display span {
+  font-size: 20px;
+  font-weight: 700;
+  margin-left: 4px;
+  text-shadow: none;
+}
+
+.warning-status-alert {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 800;
+  padding: 8px 12px;
+  border-radius: 8px;
+  margin-top: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-safe {
+  background: rgba(16, 185, 129, 0.15);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  color: #34d399;
+}
+
+.status-blind {
+  background: rgba(244, 63, 94, 0.15);
+  border: 1px solid rgba(244, 63, 94, 0.3);
+  color: #f87171;
+}
+
+/* Blind zone graphics */
+.blind-zone-canvas-wrapper {
+  width: 100%;
+  height: 380px;
+  background: #020408;
+  border-radius: 12px;
+  border: 1px solid var(--card-border);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blind-zone-canvas-wrapper canvas {
+  width: 100%;
+  height: 100%;
+}
+
+/* Agent Swarm System Visualizer */
+.agent-swarm-wrapper {
+  position: relative;
+  width: 100%;
+  height: 480px;
+  background: #020408;
+  border-radius: 16px;
+  border: 1px solid var(--card-border);
+  overflow: hidden;
+  cursor: grab;
+}
+
+.agent-card-overlay {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  right: 24px;
+  background: rgba(10, 15, 26, 0.9);
+  border: 1px solid var(--card-border);
+  border-radius: 14px;
+  padding: 20px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  z-index: 10;
+}
+
+.agent-icon-box {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+}
+
+.agent-details h4 {
+  font-size: 15px;
+  font-weight: 800;
+  color: white;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.agent-details h4 span.agent-role-badge {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.agent-details p {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+/* Search engine layout */
+.search-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: calc(100vh - 160px);
+}
+
+.search-input-box {
+  position: relative;
+  width: 100%;
+}
+
+.search-input-box input {
+  width: 100%;
+  background: rgba(16, 22, 36, 0.7);
+  border: 1px solid var(--card-border);
+  color: white;
+  padding: 16px 20px 16px 54px;
+  border-radius: 14px;
+  font-size: 15px;
+  font-weight: 600;
+  outline: none;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.search-input-box input:focus {
+  border-color: var(--accent-cyan);
+  box-shadow: 0 0 20px var(--accent-cyan-glow);
+}
+
+.search-input-box svg {
+  position: absolute;
+  top: 17px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+  color: var(--text-muted);
+}
+
+.search-results-viewport {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.search-result-card {
+  display: flex;
+  gap: 20px;
+  cursor: pointer;
+}
+
+.search-result-card:hover {
+  border-color: rgba(6, 182, 212, 0.3);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.result-image-box {
+  width: 160px;
+  height: 100px;
+  background: #020408;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.result-image-box img {
+  max-width: 95%;
+  max-height: 95%;
+  object-fit: contain;
+}
+
+.result-content-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.result-meta {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--accent-cyan);
+  margin-bottom: 6px;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.result-snippet {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.no-results-view {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-dark);
+}
+
+.no-results-view svg {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+/* Fullscreen lightroom modal */
+.lightroom-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(2, 4, 8, 0.95);
+  backdrop-filter: blur(12px);
+  z-index: 1000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+  animation: fadeIn 0.2s ease-out forwards;
+}
+
+.lightroom-modal img {
+  max-width: 95vw;
+  max-height: 90vh;
+  object-fit: contain;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
+  border-radius: 6px;
+}
+
+.lightroom-close-btn {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(16, 22, 36, 0.8);
+  border: 1px solid var(--card-border);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.lightroom-close-btn:hover {
+  background: var(--accent-rose);
+  border-color: var(--accent-rose);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse-ring {
+  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.5); }
+  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
+}
+
+/* Download Center */
+.download-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  transition: all 0.2s ease;
+}
+
+.download-card:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.download-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.download-icon {
+  width: 42px;
+  height: 42px;
+  background: rgba(59, 130, 246, 0.15);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-blue);
+  flex-shrink: 0;
+}
+
+.download-details h5 {
+  font-size: 14px;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 2px;
+}
+
+.download-details p {
+  font-size: 12px;
+  color: var(--text-dark);
+}
+
+.download-action-btn {
+  background: var(--accent-blue);
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+
+.download-action-btn:hover {
+  background: #2563eb;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}

index.html

@@ -0,0 +1,629 @@
+<!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 &copy; 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>

index.js

@@ -0,0 +1,908 @@
+// Application Entry State
+let currentPptId = "ppt1";
+let currentSlideIndex = 0; // 0-indexed index inside the selected PPT's slides list
+let searchIndex = [];
+
+// DOM Elements
+const menuItems = document.querySelectorAll(".menu-item");
+const tabSections = document.querySelectorAll(".tab-section");
+const tabTitleEl = document.getElementById("current-tab-title");
+const tabSubtitleEl = document.getElementById("current-tab-subtitle");
+
+const pptSelectEl = document.getElementById("ppt-select");
+const slideThumbnailsEl = document.getElementById("slide-thumbnails");
+const mainSlideImgEl = document.getElementById("main-slide-img");
+const slideIndexIndicatorEl = document.getElementById("slide-index-indicator");
+const btnPrevSlide = document.getElementById("btn-prev-slide");
+const btnNextSlide = document.getElementById("btn-next-slide");
+const slideTextLinesEl = document.getElementById("slide-text-lines");
+const slideTakeawayEl = document.getElementById("slide-takeaway-points");
+const btnFullscreen = document.getElementById("btn-fullscreen");
+
+const lightroomEl = document.getElementById("lightroom");
+const lightroomImgEl = document.getElementById("lightroom-img");
+const btnCloseLightroom = document.getElementById("btn-close-lightroom");
+
+// Calculator inputs
+const sliderDepth = document.getElementById("slider-depth");
+const sliderDist = document.getElementById("slider-dist");
+const sliderVs = document.getElementById("slider-vs");
+const sliderProcess = document.getElementById("slider-process");
+
+const valDepth = document.getElementById("depth-val");
+const valDist = document.getElementById("dist-val");
+const valVs = document.getElementById("vs-val");
+const valProcess = document.getElementById("process-val");
+
+const calcLeadTimeEl = document.getElementById("calc-lead-time");
+const calcWarningStatusEl = document.getElementById("calc-warning-status");
+const txtBlindRadius = document.getElementById("blind-radius-txt");
+const txtHypoDist = document.getElementById("hypo-dist-txt");
+const blindZoneCanvas = document.getElementById("blind-zone-canvas");
+
+// Search inputs
+const searchInput = document.getElementById("search-input");
+const searchResults = document.getElementById("search-results");
+
+// Tab configuration
+const tabMeta = {
+  overview: { title: "知識庫總覽", subtitle: "展示台灣中央氣象署強震即時警報與 AI 技術整合之演進" },
+  highlights: { title: "簡報精選精華", subtitle: "彙整四大簡報最關鍵的核心圖表與重要原理，支援一鍵定位簡報脈絡" },
+  viewer: { title: "投影片展示", subtitle: "逐頁瀏覽 4 份核心簡報精華、提取文字與高畫質圖片" },
+  calculator: { title: "預警盲區模擬", subtitle: "互動式物理參數計算，深入理解應變盲區與警報前置時間的幾何關係" },
+  swarm: { title: "AI 代理協作", subtitle: "解析 2026 年 CWA 強震即時警報系統中多代理群組自動化閉環工作流" },
+  lem: { title: "大型地震模型 (LEM)", subtitle: "介紹以 Wav2Vec 2.0 為基座演化的次世代地震自監督深度學習模型 SeisWav2Vec" },
+  search: { title: "全文大綱搜尋", subtitle: "高效檢索四大簡報共 164 頁的文字內容，快速定位知識點" },
+  downloads: { title: "簡報下載專區", subtitle: "查閱本地原始 PPTX 簡報大小與詳細檔案路徑資訊" }
+};
+
+// Initialize Application
+window.addEventListener("DOMContentLoaded", () => {
+  initNavigation();
+  initSlideViewer();
+  initCalculator();
+  initSwarmVisualizer();
+  initSearchEngine();
+  initLightroom();
+  initHighlights();
+});
+
+// 1. Navigation Controller
+function initNavigation() {
+  menuItems.forEach(item => {
+    item.addEventListener("click", () => {
+      const tabId = item.getAttribute("data-tab");
+      
+      // Update sidebar state
+      menuItems.forEach(mi => mi.classList.remove("active"));
+      item.classList.add("active");
+      
+      // Update viewport state
+      tabSections.forEach(section => {
+        section.classList.remove("active");
+        if (section.id === `tab-${tabId}`) {
+          section.classList.add("active");
+        }
+      });
+      
+      // Update header titles
+      const meta = tabMeta[tabId] || { title: "展示平台", subtitle: "" };
+      tabTitleEl.textContent = meta.title;
+      tabSubtitleEl.textContent = meta.subtitle;
+      
+      // Special canvas re-draw on tab visibility
+      if (tabId === "calculator") {
+        setTimeout(drawBlindZone, 100);
+      } else if (tabId === "swarm") {
+        setTimeout(drawSwarm, 100);
+      }
+    });
+  });
+}
+
+function jumpToTab(tabId) {
+  const item = document.querySelector(`.menu-item[data-tab="${tabId}"]`);
+  if (item) item.click();
+}
+
+function jumpToPresentation(pptId, slideNum = 1) {
+  currentPptId = pptId;
+  pptSelectEl.value = pptId;
+  currentSlideIndex = slideNum - 1;
+  renderSlidesList();
+  jumpToTab("viewer");
+}
+
+// 2. Slide Showcase Controller
+function initSlideViewer() {
+  pptSelectEl.addEventListener("change", (e) => {
+    currentPptId = e.target.value;
+    currentSlideIndex = 0;
+    renderSlidesList();
+  });
+  
+  btnPrevSlide.addEventListener("click", () => {
+    if (currentSlideIndex > 0) {
+      currentSlideIndex--;
+      updateActiveSlide();
+    }
+  });
+  
+  btnNextSlide.addEventListener("click", () => {
+    const pptData = slidesData.find(p => p.id === currentPptId);
+    if (pptData && currentSlideIndex < pptData.slides.length - 1) {
+      currentSlideIndex++;
+      updateActiveSlide();
+    }
+  });
+  
+  renderSlidesList();
+}
+
+function renderSlidesList() {
+  const pptData = slidesData.find(p => p.id === currentPptId);
+  if (!pptData) return;
+  
+  slideThumbnailsEl.innerHTML = "";
+  pptData.slides.forEach((slide, idx) => {
+    const thumb = document.createElement("div");
+    thumb.className = `thumb-item ${idx === currentSlideIndex ? 'active' : ''}`;
+    thumb.setAttribute("data-index", idx);
+    
+    // Find slide title or summary
+    let titleStr = slide.title || (slide.text && slide.text[0]) || `Slide ${slide.slideNumber}`;
+    if (titleStr.length > 22) {
+      titleStr = titleStr.substring(0, 20) + "...";
+    }
+    
+    thumb.innerHTML = `
+      <span class="thumb-num">Slide ${slide.slideNumber}</span>
+      <span class="thumb-title" title="${slide.title || ''}">${titleStr}</span>
+    `;
+    
+    thumb.addEventListener("click", () => {
+      currentSlideIndex = idx;
+      updateActiveSlide();
+    });
+    
+    slideThumbnailsEl.appendChild(thumb);
+  });
+  
+  updateActiveSlide();
+}
+
+function updateActiveSlide() {
+  const pptData = slidesData.find(p => p.id === currentPptId);
+  if (!pptData) return;
+  
+  const slide = pptData.slides[currentSlideIndex];
+  if (!slide) return;
+  
+  // Update main display image
+  mainSlideImgEl.src = slide.image;
+  
+  // Highlight active thumbnail and scroll into view smoothly
+  const thumbs = slideThumbnailsEl.querySelectorAll(".thumb-item");
+  thumbs.forEach((t, idx) => {
+    t.classList.remove("active");
+    if (idx === currentSlideIndex) {
+      t.classList.add("active");
+      t.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  });
+  
+  // Update indicators
+  slideIndexIndicatorEl.textContent = `Slide ${slide.slideNumber} / ${pptData.slidesCount}`;
+  
+  // Update disabled buttons
+  btnPrevSlide.disabled = currentSlideIndex === 0;
+  btnNextSlide.disabled = currentSlideIndex === pptData.slides.length - 1;
+  
+  // Render slide texts
+  slideTextLinesEl.innerHTML = "";
+  if (slide.text && slide.text.length > 0) {
+    slide.text.forEach(line => {
+      const li = document.createElement("li");
+      li.textContent = line;
+      slideTextLinesEl.appendChild(li);
+    });
+  } else {
+    const li = document.createElement("li");
+    li.textContent = "(此頁投影片無主要大綱文字，可能為全圖表展示)";
+    li.style.color = "var(--text-dark)";
+    li.style.fontStyle = "italic";
+    slideTextLinesEl.appendChild(li);
+  }
+  
+  // Generate key terms or takeaways dynamically based on slide content
+  slideTakeawayEl.innerHTML = "";
+  const takeaways = generateTakeaways(slide, pptData.id);
+  takeaways.forEach(p => {
+    const li = document.createElement("li");
+    li.textContent = p;
+    slideTakeawayEl.appendChild(li);
+  });
+}
+
+function generateTakeaways(slide, pptId) {
+  const points = [];
+  const textJoined = (slide.text || []).join(" ").toLowerCase();
+  const title = (slide.title || "").toLowerCase();
+  
+  if (pptId === "ppt1") {
+    if (textJoined.includes("earthworm")) points.push("Earthworm：USGS 開源地震處理模組化系統，為全球實時監控基準。");
+    if (textJoined.includes("seiscomp")) points.push("SeisComP：先進地震圖形界面與定位波相拾取平台。");
+    if (textJoined.includes("grafana")) points.push("Grafana 觀測：即時視覺化海底觀測網水壓計、波形延遲及預警推播狀態。");
+    if (textJoined.includes("ebear")) points.push("eBEAR：CWA 自行開發的 Earthworm Alert Reporting 自動速報系統。");
+    if (textJoined.includes("docker")) points.push("容器化部署：CWA EEW 與 Seiscomp 已打包為 Docker 映像檔上傳 Docker Hub。");
+  } else if (pptId === "ppt2") {
+    if (textJoined.includes("pws")) points.push("PWS：災防告警細胞廣播發布範疇統計（如 M6.1 地震第一報與第二報範圍）。");
+    if (textJoined.includes("幾何中心")) points.push("定位法：幾何中心法在早期預警解算中對震央與震度有誤差修正之探討。");
+    if (textJoined.includes("盲區") || textJoined.includes("應變")) points.push("應變盲區：最快解算耗時乘以 S 波平均波速（3.5 km/s），該範圍內無警報前置時間。");
+    if (textJoined.includes("觸發")) points.push("測站觸發率：針對特定震源以半徑搜索，排除共站干擾計算實時觸發比例。");
+  } else if (pptId === "ppt3") {
+    if (textJoined.includes("agent") || textJoined.includes("代理")) points.push("AI Agent Swarm：my_agent, seismo, seismo_agent, secondary_agent 四協同代理職責分工。");
+    if (textJoined.includes("wav2vec") || textJoined.includes("lem")) points.push("SeisWav2Vec 2.0：對比學習 Wav2Vec 結構遷移至地震波形，自監督預訓練模型。");
+    if (textJoined.includes("transformer")) points.push("Transformer 上下文：12 層注意力機制學習特徵的全局上下文，無標記資料自學習。");
+    if (textJoined.includes("telegram")) points.push("Telegram 通訊：整合 my_agent 自動推送 eew_health、異常日誌及 daily_report。");
+  } else if (pptId === "ppt4") {
+    if (textJoined.includes("p波") || textJoined.includes("s波")) points.push("強震預警原理：利用傳播快速的 P 縱波推算震級，趕在破壞性 S 橫波抵達前告警。");
+    if (textJoined.includes("電視") || textJoined.includes("推播")) points.push("多元傳播管道：國家級警報、電視台即時插播、中小學預警軟體及手機 APP 四大網絡。");
+    if (textJoined.includes("花蓮")) points.push("花蓮 M7.2 案例：回顧強震預警警報實際發送實例、各縣市震度與警報時效。");
+  }
+  
+  if (points.length === 0) {
+    points.push("地震預警核心知識：解析地震波傳播時序與即時資料串流。");
+    points.push("技術重點：結合自動化解算模型，縮減預警盲區以求減災。");
+  }
+  
+  return points;
+}
+
+// 3. Lightroom Lightbox Modal
+function initLightroom() {
+  mainSlideImgEl.addEventListener("click", () => {
+    lightroomImgEl.src = mainSlideImgEl.src;
+    lightroomEl.style.display = "flex";
+  });
+  
+  lightroomEl.addEventListener("click", () => {
+    lightroomEl.style.display = "none";
+  });
+  
+  btnCloseLightroom.addEventListener("click", (e) => {
+    e.stopPropagation();
+    lightroomEl.style.display = "none";
+  });
+}
+
+// 4. Blind Zone & Lead Time Warning Simulator
+function initCalculator() {
+  const updateCalculator = () => {
+    const depth = parseFloat(sliderDepth.value);
+    const dist = parseFloat(sliderDist.value);
+    const vs = parseFloat(sliderVs.value);
+    const processTime = parseFloat(sliderProcess.value);
+    
+    // Display value update
+    valDepth.textContent = `${depth} km`;
+    valDist.textContent = `${dist} km`;
+    valVs.textContent = `${vs.toFixed(1)} km/s`;
+    valProcess.textContent = `${processTime.toFixed(1)} s`;
+    
+    // Geometry math
+    const hypoDist = Math.sqrt(dist*dist + depth*depth);
+    const sTravelTime = hypoDist / vs;
+    const leadTime = sTravelTime - processTime;
+    
+    // Blind zone radius (ground distance when S-wave wavefront intersects ground surface at the processing time)
+    // S-wave path distance at processing time: s_path = processTime * vs
+    // If path is less than focal depth, S-wave hasn't even reached the ground surface directly above epicenter.
+    let blindRadius = 0;
+    const sPath = processTime * vs;
+    if (sPath > depth) {
+      blindRadius = Math.sqrt(sPath*sPath - depth*depth);
+    }
+    
+    // Render text
+    txtHypoDist.textContent = `${hypoDist.toFixed(1)} km`;
+    txtBlindRadius.textContent = blindRadius > 0 ? `${blindRadius.toFixed(1)} km` : "0 km (未傳抵地表)";
+    
+    if (leadTime > 0) {
+      calcLeadTimeEl.innerHTML = `${leadTime.toFixed(1)}<span>秒</span>`;
+      calcLeadTimeEl.style.color = "var(--accent-cyan)";
+      calcWarningStatusEl.textContent = "警報覆蓋安全區";
+      calcWarningStatusEl.className = "warning-status-alert status-safe";
+    } else {
+      calcLeadTimeEl.innerHTML = `0.0<span>秒</span>`;
+      calcLeadTimeEl.style.color = "var(--accent-rose)";
+      calcWarningStatusEl.textContent = "處於預警盲區內";
+      calcWarningStatusEl.className = "warning-status-alert status-blind";
+    }
+    
+    // Save to window state for canvas redraw
+    window.calcState = { depth, dist, vs, processTime, hypoDist, blindRadius, leadTime };
+    drawBlindZone();
+  };
+  
+  sliderDepth.addEventListener("input", updateCalculator);
+  sliderDist.addEventListener("input", updateCalculator);
+  sliderVs.addEventListener("input", updateCalculator);
+  sliderProcess.addEventListener("input", updateCalculator);
+  
+  updateCalculator();
+}
+
+function drawBlindZone() {
+  const canvas = blindZoneCanvas;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  
+  // Set resolution based on DPI
+  const dpr = window.devicePixelRatio || 1;
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  ctx.scale(dpr, dpr);
+  
+  const w = rect.width;
+  const h = rect.height;
+  ctx.clearRect(0, 0, w, h);
+  
+  const state = window.calcState;
+  if (!state) return;
+  
+  // Drawing coordinates mapping
+  // Earth surface is a horizontal line at y = 100
+  const ySurface = 80;
+  // Center is epicenter at x = w / 2 - 100
+  const xEpicenter = w / 2 - 80;
+  
+  // Scale pixels: 1 km = 2 pixels
+  const scale = 2.0;
+  
+  // Draw Earth crust layer
+  ctx.fillStyle = "rgba(10, 15, 26, 0.4)";
+  ctx.fillRect(0, ySurface, w, h - ySurface);
+  
+  // Draw ground line
+  ctx.strokeStyle = "#475569";
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(0, ySurface);
+  ctx.lineTo(w, ySurface);
+  ctx.stroke();
+  
+  // Epicenter
+  ctx.fillStyle = "#94a3b8";
+  ctx.beginPath();
+  ctx.arc(xEpicenter, ySurface, 4, 0, 2*Math.PI);
+  ctx.fill();
+  
+  // Hypocenter (Earthquake Focus)
+  const yFocus = ySurface + state.depth * scale;
+  ctx.fillStyle = "var(--accent-rose)";
+  ctx.beginPath();
+  ctx.arc(xEpicenter, yFocus, 6, 0, 2*Math.PI);
+  ctx.fill();
+  
+  // Glow for Hypocenter
+  const gradientFocus = ctx.createRadialGradient(xEpicenter, yFocus, 2, xEpicenter, yFocus, 18);
+  gradientFocus.addColorStop(0, "rgba(244, 63, 94, 0.6)");
+  gradientFocus.addColorStop(1, "rgba(244, 63, 94, 0)");
+  ctx.fillStyle = gradientFocus;
+  ctx.beginPath();
+  ctx.arc(xEpicenter, yFocus, 18, 0, 2*Math.PI);
+  ctx.fill();
+  
+  // Target Station (user epicenter distance)
+  const xStation = xEpicenter + state.dist * scale;
+  ctx.fillStyle = state.leadTime > 0 ? "var(--accent-cyan)" : "var(--accent-rose)";
+  ctx.beginPath();
+  ctx.arc(xStation, ySurface, 5, 0, 2*Math.PI);
+  ctx.fill();
+  
+  // Label for target
+  ctx.fillStyle = "white";
+  ctx.font = "bold 11px sans-serif";
+  ctx.fillText("目標觀測點", xStation - 25, ySurface - 12);
+  
+  // Wavefront propagation circle
+  // S-wave wavefront path distance
+  const rSwave = state.processTime * state.vs * scale;
+  ctx.strokeStyle = "rgba(245, 158, 11, 0.4)";
+  ctx.lineWidth = 1.5;
+  ctx.setLineDash([4, 3]);
+  ctx.beginPath();
+  ctx.arc(xEpicenter, yFocus, rSwave, 0, 2*Math.PI);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  
+  // P-wave wavefront path (approx 1.73x faster than S-wave)
+  const rPwave = state.processTime * state.vs * 1.73 * scale;
+  ctx.strokeStyle = "rgba(6, 182, 212, 0.25)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.arc(xEpicenter, yFocus, rPwave, 0, 2*Math.PI);
+  ctx.stroke();
+  
+  // Shaded Blind Zone on surface
+  const rBlindPx = state.blindRadius * scale;
+  if (rBlindPx > 0) {
+    ctx.fillStyle = "rgba(244, 63, 94, 0.15)";
+    ctx.fillRect(xEpicenter - rBlindPx, ySurface, rBlindPx * 2, h - ySurface);
+    
+    // Draw surface indicator for blind zone
+    ctx.strokeStyle = "var(--accent-rose)";
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(xEpicenter - rBlindPx, ySurface);
+    ctx.lineTo(xEpicenter + rBlindPx, ySurface);
+    ctx.stroke();
+    
+    // Blind Zone Label
+    ctx.fillStyle = "var(--accent-rose)";
+    ctx.font = "bold 11px sans-serif";
+    ctx.fillText(`預警盲區半徑: ${state.blindRadius.toFixed(1)} km`, xEpicenter - 65, ySurface + 24);
+  }
+  
+  // S-wave wavefront intersection with ground
+  ctx.fillStyle = "var(--accent-amber)";
+  const intersectDist = state.processTime * state.vs;
+  if (intersectDist > state.depth) {
+    const xIntersectLeft = xEpicenter - rBlindPx;
+    const xIntersectRight = xEpicenter + rBlindPx;
+    ctx.beginPath();
+    ctx.arc(xIntersectLeft, ySurface, 4, 0, 2*Math.PI);
+    ctx.arc(xIntersectRight, ySurface, 4, 0, 2*Math.PI);
+    ctx.fill();
+  }
+  
+  // Draw ray from Hypocenter to target station
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.15)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(xEpicenter, yFocus);
+  ctx.lineTo(xStation, ySurface);
+  ctx.stroke();
+  
+  // Annotations
+  ctx.fillStyle = "var(--text-dark)";
+  ctx.font = "10px sans-serif";
+  ctx.fillText("震央 (Epicenter)", xEpicenter + 8, ySurface - 12);
+  
+  ctx.fillStyle = "var(--accent-rose)";
+  ctx.fillText(`震源 (Hypocenter) Depth: ${state.depth} km`, xEpicenter + 12, yFocus + 4);
+}
+
+// 5. AI Agent Swarm network visualizer
+function initSwarmVisualizer() {
+  const swarmCanvas = document.getElementById("agent-swarm-canvas");
+  if (!swarmCanvas) return;
+  
+  // Node details
+  const agentNodes = [
+    { id: "my_agent", name: "my_agent", role: "預警總管", color: "var(--accent-emerald)", bg: "var(--accent-emerald-glow)", x: 200, y: 120, r: 48, desc: "主控監測流程，定時健康檢查 (eew_health cron)。判讀並處理異常事件，異常時透過 Telegram 主動發送告警，並彙整所有 agent 資訊產出每日簡報日報 (eew_report_daily)。" },
+    { id: "seismo", name: "seismo", role: "數據前向轉發", color: "var(--accent-blue)", bg: "var(--accent-blue-glow)", x: 450, y: 120, r: 42, desc: "維持持續運行的心跳循環 (heartbeat loop)，即時偵測及提取中央氣象署 EEW 流程產生的最新地震 `.rep` 報告原始檔，將資料進行結構化轉換輸出 (轉為 JSON/CSV)。" },
+    { id: "seismo_agent", name: "seismo_agent", role: "地震學分析助教", color: "var(--accent-amber)", bg: "var(--accent-amber-glow)", x: 450, y: 320, r: 42, desc: "負責科學數據分析與處理流水線。解析速報效能與測站延遲統計，呼叫自動繪圖模組繪製事件散佈圖與序列圖，同時儲存備份二進位原始數據檔。" },
+    { id: "secondary_agent", name: "secondary_agent", role: "系統整合工程師", color: "var(--accent-rose)", bg: "var(--accent-rose-glow)", x: 200, y: 320, r: 48, desc: "本地調度與訊息轉發中心。負責部署與維護容器重啟腳本 (eew_fault_recovery.sh)、Cron 排程及 Telegram 機器人核心，負責在 my_agent 要求時調用 delegate_task 指派任務。" }
+  ];
+  
+  const links = [
+    { from: "seismo", to: "secondary_agent", label: "地震.rep JSON 輸出" },
+    { from: "secondary_agent", to: "seismo_agent", label: "分發科研分析與繪圖" },
+    { from: "seismo_agent", to: "my_agent", label: "回傳延遲時效日報" },
+    { from: "my_agent", to: "secondary_agent", label: "調度容器故障重啟" },
+    { from: "seismo", to: "my_agent", label: "心跳狀態報告" }
+  ];
+  
+  let selectedNodeId = "my_agent";
+  
+  const updateSwarmOverlay = (node) => {
+    document.getElementById("agent-overlay-name").textContent = node.name;
+    document.getElementById("agent-overlay-role").textContent = node.role;
+    document.getElementById("agent-overlay-role").style.backgroundColor = node.bg;
+    document.getElementById("agent-overlay-role").style.color = node.color;
+    document.getElementById("agent-overlay-desc").textContent = node.desc;
+    document.getElementById("agent-overlay-icon").style.color = node.color;
+    document.getElementById("agent-overlay-icon").style.backgroundColor = node.bg;
+  };
+  
+  window.drawSwarm = () => {
+    const dpr = window.devicePixelRatio || 1;
+    const rect = swarmCanvas.getBoundingClientRect();
+    swarmCanvas.width = rect.width * dpr;
+    swarmCanvas.height = rect.height * dpr;
+    const ctx = swarmCanvas.getContext("2d");
+    ctx.scale(dpr, dpr);
+    
+    const w = rect.width;
+    const h = rect.height;
+    ctx.clearRect(0, 0, w, h);
+    
+    // Set node positions dynamically centered to canvas
+    const xCenter = w / 2;
+    const yCenter = h / 2 - 40;
+    
+    // Re-adjust node coordinates relative to canvas center
+    agentNodes[0].x = xCenter - 150; agentNodes[0].y = yCenter - 80;
+    agentNodes[1].x = xCenter + 150; agentNodes[1].y = yCenter - 80;
+    agentNodes[2].x = xCenter + 150; agentNodes[2].y = yCenter + 120;
+    agentNodes[3].x = xCenter - 150; agentNodes[3].y = yCenter + 120;
+    
+    // Draw Links
+    links.forEach(l => {
+      const fromNode = agentNodes.find(n => n.id === l.from);
+      const toNode = agentNodes.find(n => n.id === l.to);
+      if (!fromNode || !toNode) return;
+      
+      ctx.strokeStyle = "rgba(148, 163, 184, 0.15)";
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(fromNode.x, fromNode.y);
+      ctx.lineTo(toNode.x, toNode.y);
+      ctx.stroke();
+      
+      // Draw dynamic animated pulse dot on links
+      const speed = 0.001;
+      const t = (Date.now() * speed) % 1;
+      const dotX = fromNode.x + (toNode.x - fromNode.x) * t;
+      const dotY = fromNode.y + (toNode.y - fromNode.y) * t;
+      ctx.fillStyle = "var(--accent-cyan)";
+      ctx.beginPath();
+      ctx.arc(dotX, dotY, 4, 0, 2*Math.PI);
+      ctx.fill();
+    });
+    
+    // Draw Nodes
+    agentNodes.forEach(node => {
+      const isSelected = node.id === selectedNodeId;
+      
+      // Glowing shadow
+      if (isSelected) {
+        ctx.shadowColor = node.color;
+        ctx.shadowBlur = 15;
+      }
+      
+      // Node fill
+      ctx.fillStyle = "rgba(10, 15, 26, 0.9)";
+      ctx.strokeStyle = isSelected ? "white" : node.color;
+      ctx.lineWidth = isSelected ? 3 : 1.5;
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, node.r, 0, 2*Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      
+      // Reset shadow
+      ctx.shadowBlur = 0;
+      
+      // Text
+      ctx.fillStyle = "white";
+      ctx.font = "bold 12px sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(node.name, node.x, node.y - 4);
+      
+      ctx.fillStyle = node.color;
+      ctx.font = "10px sans-serif";
+      ctx.fillText(node.role, node.x, node.y + 14);
+    });
+  };
+  
+  // Click handler
+  swarmCanvas.addEventListener("click", (e) => {
+    const rect = swarmCanvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    // Check if clicked node
+    for (let node of agentNodes) {
+      const dist = Math.sqrt((x - node.x)**2 + (y - node.y)**2);
+      if (dist <= node.r) {
+        selectedNodeId = node.id;
+        updateSwarmOverlay(node);
+        drawSwarm();
+        break;
+      }
+    }
+  });
+  
+  // Animation loop for swarm
+  let animId;
+  const loop = () => {
+    if (document.getElementById("tab-swarm").classList.contains("active")) {
+      drawSwarm();
+    }
+    animId = requestAnimationFrame(loop);
+  };
+  loop();
+  
+  // Select default node
+  updateSwarmOverlay(agentNodes[0]);
+}
+
+// 6. Search Engine Controller
+function initSearchEngine() {
+  // Build slide index
+  searchIndex = [];
+  slidesData.forEach(ppt => {
+    ppt.slides.forEach(slide => {
+      searchIndex.push({
+        pptId: ppt.id,
+        pptTitle: ppt.title,
+        slideNumber: slide.slideNumber,
+        title: slide.title || "",
+        textLines: slide.text || [],
+        image: slide.image
+      });
+    });
+  });
+  
+  searchInput.addEventListener("input", (e) => {
+    const query = e.target.value.toLowerCase().trim();
+    if (!query) {
+      searchResults.innerHTML = `
+        <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>
+      `;
+      return;
+    }
+    
+    const matches = searchIndex.filter(item => {
+      const matchTitle = item.title.toLowerCase().includes(query);
+      const matchPptTitle = item.pptTitle.toLowerCase().includes(query);
+      const matchLines = item.textLines.some(line => line.toLowerCase().includes(query));
+      return matchTitle || matchPptTitle || matchLines;
+    });
+    
+    if (matches.length === 0) {
+      searchResults.innerHTML = `
+        <div class="no-results-view">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+          </svg>
+          <p style="font-size: 14px; font-weight: 600;">未找到任何相符的投影片內容</p>
+          <p style="font-size: 12px; color: var(--text-dark); margin-top: 4px;">請試著搜尋其他字眼（如：Earthworm, Grafana, 盲區, 代理）</p>
+        </div>
+      `;
+      return;
+    }
+    
+    searchResults.innerHTML = "";
+    matches.forEach(item => {
+      const card = document.createElement("div");
+      card.className = "glass-panel card-padding search-result-card";
+      
+      // Highlight matching snippet
+      let snippet = "";
+      const matchingLine = item.textLines.find(line => line.toLowerCase().includes(query));
+      if (matchingLine) {
+        snippet = matchingLine;
+      } else if (item.textLines.length > 0) {
+        snippet = item.textLines[0];
+      }
+      
+      // Highlight text snippet helper
+      const queryIdx = snippet.toLowerCase().indexOf(query);
+      if (queryIdx !== -1 && query.length > 0) {
+        const start = snippet.substring(0, queryIdx);
+        const match = snippet.substring(queryIdx, queryIdx + query.length);
+        const end = snippet.substring(queryIdx + query.length);
+        snippet = `${start}<mark style="background-color: rgba(6, 182, 212, 0.4); color: white; border-radius: 2px; padding: 0 2px;">${match}</mark>${end}`;
+      }
+      
+      card.innerHTML = `
+        <div class="result-image-box">
+          <img src="${item.image}" alt="Slide Thumb">
+        </div>
+        <div class="result-content-box">
+          <div class="result-meta">${item.pptTitle} · 第 ${item.slideNumber} 頁</div>
+          <div class="result-title">${item.title || '(無標題)'}</div>
+          <div class="result-snippet">${snippet}</div>
+        </div>
+      `;
+      
+      card.addEventListener("click", () => {
+        jumpToPresentation(item.pptId, item.slideNumber);
+      });
+      
+      searchResults.appendChild(card);
+    });
+  });
+}
+
+// 7. Key Highlights Section Controller
+const highlightsData = [
+  {
+    pptId: "ppt1",
+    slideNum: 6,
+    category: "network",
+    title: "中央氣象署即時地震觀測網分佈",
+    description: "展示臺灣陸地與海域鋪設的極其密集的觀測網。包含強震儀站點與鋪設於東部海域、南部海域的 OBS 海底電纜觀測系統，是提供即時測報之根本基礎。",
+    keyPoints: ["島內密集陸地強震儀分佈", "東部與南部海纜觀測系統 (OBS)", "即時連續訊號在發震數秒內傳達中心"]
+  },
+  {
+    pptId: "ppt1",
+    slideNum: 11,
+    category: "network",
+    title: "實時地震波形歸檔整合數據流",
+    description: "展示 Earthworm 處理器如何透過共享記憶體 RING，將 Field Stations 的資料利用 tbuf2mseed 模組壓縮，並同步保存至本機 NAS，確保高可靠度與極低資料延遲。",
+    keyPoints: ["共享記憶體 (Shared Memory) 機制", "支援跨網絡與跨節點資料交換", "Docker 容器化保證部署彈性"]
+  },
+  {
+    pptId: "ppt1",
+    slideNum: 12,
+    category: "network",
+    title: "eBEAR 自動化強震即時警報軟體",
+    description: "CWA 自主開發的 eBEAR (Earthworm Based Earthquake Alert Reporting) 系統，已封裝成 Docker Image 並提供在 Docker Hub 下載，具備模組化警報回報流程。",
+    keyPoints: ["Docker Hub: cwadayi/earthworm_ubuntu22.04_eew:v1", "高整合性的地震波相拾取與規模演算", "支援自動化的警報派遣與日誌紀錄"]
+  },
+  {
+    pptId: "ppt2",
+    slideNum: 2,
+    category: "eew",
+    title: "2026年5月 強震即時警報系統 (EEW) 效能",
+    description: "彙�� 2026 年 5 月份 EEW 的統計數據。最快解算時效達到驚人的 9.7 秒，PWS 細胞廣播發送 6 次，展示了防減災技術在即時解算上的優異成果。",
+    keyPoints: ["5月份地震預警最速時效達 9.7 秒", "PWS 發布 6 次，電視台即時插播 6 次", "對外通報管道觸發穩定，無漏報異常"]
+  },
+  {
+    pptId: "ppt2",
+    slideNum: 14,
+    category: "eew",
+    title: "應變盲區 (Blind Zone) 與 S 波幾何學",
+    description: "地震發生後，P 波與 S 波以球形向外傳播。在系統花費時間解算並發送警報前，S 波已波及的範圍（半徑 = 解算時間 × S波速度）即為預警盲區，此區域內前置時間為零。",
+    keyPoints: ["盲區半徑 = 解算時間 (s) × S波速度 (3.5km/s)", "極淺地震（如大埔或美濃）的震央周圍多位於盲區內", "加速測站密集度與算法能有效縮小盲區"]
+  },
+  {
+    pptId: "ppt2",
+    slideNum: 15,
+    category: "eew",
+    title: "測站觸發率 (Trigger Rate) 半徑篩選",
+    description: "以定位震央為中心、事件最遠觸發測站為半徑作圓，評估該圓形範圍內觀測網測站觸發率，排除共站造成的比率偏低誤差，是評估觀測網效能的關鍵指標。",
+    keyPoints: ["速報震央為圓心，最遠觸發測站為半徑作圓", "剔除重複計算共站，反映真實觀測網覆蓋", "輔助評估密集強震時之儀器健康度"]
+  },
+  {
+    pptId: "ppt3",
+    slideNum: 4,
+    category: "history",
+    title: "臺灣過去 10 年災害性地震損失統計",
+    description: "展示臺灣過去 10 年內數次引發嚴重災情之強震（包括美濃、花蓮、池上、大埔地震等），凸顯了台灣極高地震風險性與建立次世代預警系統的迫切性。",
+    keyPoints: ["美濃地震維冠大樓塌陷、花蓮地震統帥飯店受災", "高鐵與捷運在預警下成功採取減速避災措施", "災害地震平均每 30-40 年發生一次"]
+  },
+  {
+    pptId: "ppt3",
+    slideNum: 44,
+    category: "ai",
+    title: "大型地震模型 LEM 與 SeisWav2Vec 2.0",
+    description: "介紹將 Wav2Vec 2.0 語音自監督模型遷移至地震波形特徵提取之架構。由一維 CNN 編碼器與 12 層 Transformer 構成，從無標記波形中自主學習震波語意特徵。",
+    keyPoints: ["自監督學習 (SSL) 無需人工標註海量資料", "Wav2Vec 離散向量量化與 Mask 遮罩學習", "微調後於波相辨識精度與噪訊過濾上顯著提升"]
+  },
+  {
+    pptId: "ppt3",
+    slideNum: 50,
+    category: "ai",
+    title: "EEW Swarm 四位 Agent 角色與職責矩陣",
+    description: "次世代地震系統中四個協同 Agents 的核心分工矩陣：包含主助理、科學前向轉發工程師、地震分析學助教與本地排程容器整合工程師，建構多代理人體系。",
+    keyPoints: ["my_agent、seismo、seismo_agent、secondary_agent", "實現跨系統的多代理協調派遣", "個別 Agent 維持獨立的指令執行環境與日誌監控"]
+  },
+  {
+    pptId: "ppt3",
+    slideNum: 54,
+    category: "ai",
+    title: "EEW 代理群多模組自動化閉環工作流",
+    description: "當系統產出新事件的 `.rep` 報告後，自動觸發 seismo 解析資料、seismo_agent 繪製散佈圖、secondary_agent 協調排程、最後由 my_agent 生成簡報推播至 Telegram 的自動化流向圖。",
+    keyPoints: ["事件驅動 (Event-driven) 觸發運行", "Telegram API 即時回報與 eew_fault_recovery 恢復功能", "全流程無人工介入，秒級產出簡報與日報"]
+  },
+  {
+    pptId: "ppt4",
+    slideNum: 18,
+    category: "eew",
+    title: "強震即時警報物理原理 (P/S 波速差)",
+    description: "圖解地震產生之 P 縱波 (速度快) 與 S 橫波 (破壞大、速度慢) 的傳播物理機制。利用兩者速度差，可在 S 波抵達前數秒解算位置並以電磁波速度搶先警報。",
+    keyPoints: ["P波波速約 6 km/s，S波波速約 3.5 km/s", "電磁波傳輸警報以光速前進，遠快於地震波", "提供關鍵數秒至數十秒避難避險前置時間"]
+  },
+  {
+    pptId: "ppt4",
+    slideNum: 21,
+    category: "history",
+    title: "2024/04/03 M7.2 花蓮大地震國家級警報實況",
+    description: "回顧花蓮強震當日預警系統運行狀況，說明系統於極短時間內完成解算，並透過細胞廣播 (PWS)、電視插播與中小學防震系統即時推送警報的實際情境。",
+    keyPoints: ["全台多個縣市獲得寶貴避險前置時間", "電視台實時彈出插播覆蓋全螢幕", "分析極震區盲區覆蓋以及大眾運輸系統防災減速反應"]
+  }
+];
+
+function initHighlights() {
+  const container = document.getElementById("highlights-container");
+  const filterButtons = document.querySelectorAll(".filter-btn");
+  if (!container) return;
+
+  const renderHighlights = (catFilter) => {
+    container.innerHTML = "";
+    
+    const filtered = catFilter === "all" 
+      ? highlightsData 
+      : highlightsData.filter(h => h.category === catFilter);
+      
+    filtered.forEach(h => {
+      const card = document.createElement("div");
+      card.className = "glass-panel";
+      card.style.display = "flex";
+      card.style.flexDirection = "column";
+      card.style.overflow = "hidden";
+      
+      const slideImgPath = `slides/${h.pptId}/slide_${h.slideNum}.png`;
+      
+      // Category tag display
+      const catLabels = { network: "觀測架構", eew: "預警效能", ai: "AI與代理人", history: "地震與案例" };
+      const catLabel = catLabels[h.category] || h.category;
+      
+      card.innerHTML = `
+        <div style="position: relative; width: 100%; padding-top: 56.25%; background: #020408; border-bottom: 1px solid var(--card-border); overflow: hidden; display: flex; align-items: center; justify-content: center;">
+          <img src="${slideImgPath}" alt="${h.title}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; padding: 4px;" class="highlight-img-click">
+          <span style="position: absolute; top: 12px; left: 12px; background: rgba(10, 15, 26, 0.85); border: 1px solid var(--card-border); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--accent-cyan); font-family: var(--font-mono);">
+            ${h.pptId.toUpperCase()} · Slide ${h.slideNum}
+          </span>
+          <span style="position: absolute; bottom: 12px; right: 12px; background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.2); padding: 3px 8px; border-radius: 4px; font-size: 10.5px; font-weight: bold; color: #60a5fa;">
+            ${catLabel}
+          </span>
+        </div>
+        <div style="padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px;">
+          <h4 style="font-size: 15px; font-weight: 800; color: white; line-height: 1.4;">${h.title}</h4>
+          <p style="font-size: 12.5px; color: var(--text-muted); line-height: 1.6; flex: 1;">${h.description}</p>
+          <ul style="list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 6px;">
+            ${h.keyPoints.map(pt => `
+              <li style="font-size: 12px; color: var(--text-dark); position: relative; padding-left: 14px; line-height: 1.5;">
+                <span style="position: absolute; left: 0; top: 5px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--accent-cyan);"></span>
+                ${pt}
+              </li>
+            `).join("")}
+          </ul>
+        </div>
+        <div style="border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 12px 20px; display: flex; justify-content: flex-end; background: rgba(8, 12, 20, 0.2);">
+          <button class="view-btn jump-to-slide-btn" data-ppt="${h.pptId}" data-slide="${h.slideNum}">
+            定位至簡報
+            <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>
+      `;
+      
+      // Lightbox click handler
+      card.querySelector(".highlight-img-click").addEventListener("click", () => {
+        lightroomImgEl.src = slideImgPath;
+        lightroomEl.style.display = "flex";
+      });
+      
+      // Slide Jump click handler
+      card.querySelector(".jump-to-slide-btn").addEventListener("click", () => {
+        jumpToPresentation(h.pptId, h.slideNum);
+      });
+      
+      container.appendChild(card);
+    });
+  };
+
+  // Filter Buttons binding
+  filterButtons.forEach(btn => {
+    btn.addEventListener("click", () => {
+      filterButtons.forEach(b => {
+        b.classList.remove("active-filter");
+        b.style.background = "";
+        b.style.borderColor = "";
+      });
+      
+      btn.classList.add("active-filter");
+      btn.style.background = "var(--accent-cyan-glow)";
+      btn.style.borderColor = "var(--accent-cyan)";
+      
+      const filterCat = btn.getAttribute("data-filter-cat");
+      renderHighlights(filterCat);
+    });
+  });
+
+  // Initial render
+  renderHighlights("all");
+}
+