Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Real-Time Anomaly Detection</title> | |
| <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet" /> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> | |
| <style> | |
| :root { | |
| --bg: #0c0c0f; | |
| --surface: #141419; | |
| --surface-elevated: #1a1a21; | |
| --border: rgba(255, 255, 255, 0.06); | |
| --text: #e4e4e7; | |
| --text-muted: #a1a1aa; | |
| --accent: #22c55e; | |
| --accent-dim: rgba(34, 197, 94, 0.15); | |
| --danger: #ef4444; | |
| --danger-dim: rgba(239, 68, 68, 0.12); | |
| --warn: #eab308; | |
| --warn-dim: rgba(234, 179, 8, 0.12); | |
| --info: #38bdf8; | |
| --info-dim: rgba(56, 189, 248, 0.12); | |
| --chart-temp: #38bdf8; | |
| --chart-pressure: #a78bfa; | |
| --chart-vibe: #34d399; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| font-family: 'DM Sans', system-ui, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.5; | |
| } | |
| .layout { | |
| max-width: 1080px; | |
| margin: 0 auto; | |
| padding: 2rem 1.5rem 3rem; | |
| } | |
| header { margin-bottom: 1.5rem; } | |
| h1 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 0.35rem 0; | |
| color: var(--text); | |
| } | |
| .intro { | |
| font-size: 0.9375rem; | |
| color: var(--text-muted); | |
| margin: 0; | |
| max-width: 60ch; | |
| } | |
| /* Status + phase row */ | |
| .status-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.625rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| #status { | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| padding: 0.3rem 0.75rem; | |
| border-radius: 999px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| #status::before { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| } | |
| #status.connected { color: var(--accent); background: var(--accent-dim); } | |
| #status.disconnected { color: var(--danger); background: var(--danger-dim); } | |
| .phase-badge { | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| padding: 0.3rem 0.75rem; | |
| border-radius: 999px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| transition: background 0.25s, color 0.25s; | |
| } | |
| .phase-badge.phase-A { color: var(--accent); background: var(--accent-dim); } | |
| .phase-badge.phase-B { color: var(--warn); background: var(--warn-dim); } | |
| .phase-badge.phase-C { color: var(--danger); background: var(--danger-dim); } | |
| .phase-desc { | |
| font-size: 0.8125rem; | |
| color: var(--text-muted); | |
| } | |
| .obs-count { | |
| margin-left: auto; | |
| font-size: 0.8125rem; | |
| color: var(--text-muted); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Counter grids */ | |
| .counters-section { margin-bottom: 1.25rem; } | |
| .counters-label { | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--text-muted); | |
| margin: 0 0 0.5rem; | |
| } | |
| .counters { | |
| display: grid; | |
| gap: 0.875rem; | |
| } | |
| .counters.counts { grid-template-columns: repeat(3, 1fr); } | |
| .counters.metrics { grid-template-columns: repeat(3, 1fr); } | |
| @media (max-width: 600px) { | |
| .counters.counts, .counters.metrics { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| .counter { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1rem 1.25rem; | |
| cursor: help; | |
| transition: border-color 0.15s, background 0.15s; | |
| } | |
| .counter:hover { | |
| background: var(--surface-elevated); | |
| border-color: rgba(255, 255, 255, 0.09); | |
| } | |
| .counter label { | |
| display: block; | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--text-muted); | |
| margin-bottom: 0.35rem; | |
| } | |
| .counter .value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .counter .sub { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: 0.2rem; | |
| } | |
| /* Charts */ | |
| .chart-section { margin-bottom: 1.25rem; } | |
| .chart-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.25rem 1.25rem 1rem; | |
| } | |
| .chart-title { | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin: 0 0 0.75rem; | |
| } | |
| .chart-wrap { position: relative; } | |
| .chart-wrap.sensors { height: 320px; } | |
| .chart-wrap.scores { height: 160px; } | |
| .chart-caption { | |
| font-size: 0.8125rem; | |
| color: var(--text-muted); | |
| margin: 0.625rem 0 0; | |
| line-height: 1.5; | |
| } | |
| .chart-caption span { font-weight: 500; } | |
| /* Legend pill for ground truth */ | |
| .legend-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .legend-dot { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .legend-dash { | |
| width: 18px; height: 2px; flex-shrink: 0; | |
| } | |
| /* Explainer accordion */ | |
| .explainer { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: var(--surface); | |
| } | |
| .explainer-header { | |
| padding: 0.875rem 1.25rem; | |
| font-weight: 600; | |
| font-size: 0.9375rem; | |
| cursor: pointer; | |
| user-select: none; | |
| color: var(--text); | |
| transition: background 0.15s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .explainer-header:hover { background: var(--surface-elevated); } | |
| .explainer-header .chevron { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| transition: transform 0.2s; | |
| } | |
| .explainer.open .explainer-header .chevron { transform: rotate(180deg); } | |
| .explainer-body { | |
| display: none; | |
| padding: 0 1.25rem 1.25rem; | |
| } | |
| .explainer.open .explainer-body { display: block; } | |
| .explainer-body p { | |
| font-size: 0.9375rem; | |
| color: var(--text-muted); | |
| line-height: 1.65; | |
| margin: 0.75rem 0 0; | |
| } | |
| .explainer-body strong { color: var(--text); } | |
| .explainer-body ul { | |
| margin: 0.5rem 0 0; | |
| padding-left: 1.25rem; | |
| } | |
| .explainer-body li { | |
| font-size: 0.9375rem; | |
| color: var(--text-muted); | |
| margin-bottom: 0.5rem; | |
| line-height: 1.6; | |
| } | |
| .explainer-body .algo-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-top: 0.875rem; | |
| } | |
| @media (max-width: 600px) { .explainer-body .algo-grid { grid-template-columns: 1fr; } } | |
| .algo-card { | |
| background: var(--surface-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 0.875rem 1rem; | |
| } | |
| .algo-card h4 { | |
| margin: 0 0 0.35rem; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .algo-card p { | |
| margin: 0; | |
| font-size: 0.8375rem; | |
| color: var(--text-muted); | |
| line-height: 1.55; | |
| } | |
| .divider { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 1.25rem 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="layout"> | |
| <header> | |
| <h1>Real-Time Anomaly Detection</h1> | |
| <p class="intro">Live sensor stream scored observation by observation. Tracks precision, recall, and F1 against ground truth in real time.</p> | |
| </header> | |
| <div class="status-row"> | |
| <div id="status" class="disconnected">Disconnected</div> | |
| <div id="phase-badge" class="phase-badge phase-A">Phase A</div> | |
| <span id="phase-desc" class="phase-desc">building baseline</span> | |
| <span class="obs-count" id="obs-count">0 observations</span> | |
| </div> | |
| <!-- Event counters --> | |
| <div class="counters-section"> | |
| <p class="counters-label">Event counts, current cycle</p> | |
| <div class="counters counts"> | |
| <div class="counter" title="Observations processed since last stream reset."> | |
| <label>Observations</label> | |
| <span class="value" id="total-obs">0</span> | |
| </div> | |
| <div class="counter" title="Number of times the anomaly score exceeded the detection threshold."> | |
| <label>Anomalies detected</label> | |
| <span class="value" id="total-anomalies">0</span> | |
| </div> | |
| <div class="counter" title="Times ADWIN detected a shift in the sensor drift signal."> | |
| <label>Drift events</label> | |
| <span class="value" id="total-drift">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detection metrics --> | |
| <div class="counters-section"> | |
| <p class="counters-label">Detection metrics vs ground truth, current cycle</p> | |
| <div class="counters metrics"> | |
| <div class="counter" title="Of all alerts raised, how many were genuine anomalies."> | |
| <label>Precision</label> | |
| <span class="value" id="precision">0.00</span> | |
| <p class="sub">alerts that were real</p> | |
| </div> | |
| <div class="counter" title="Of all true anomalies injected, how many were caught."> | |
| <label>Recall</label> | |
| <span class="value" id="recall">0.00</span> | |
| <p class="sub">anomalies caught</p> | |
| </div> | |
| <div class="counter" title="Harmonic mean of precision and recall."> | |
| <label>F1 Score</label> | |
| <span class="value" id="f1">0.00</span> | |
| <p class="sub">harmonic mean P&R</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sensor chart --> | |
| <div class="chart-section"> | |
| <div class="chart-card"> | |
| <p class="chart-title">Sensor readings, last 200 observations</p> | |
| <div class="legend-row"> | |
| <span class="legend-item"><span class="legend-dot" style="background:#38bdf8"></span>Temperature</span> | |
| <span class="legend-item"><span class="legend-dot" style="background:#a78bfa"></span>Pressure</span> | |
| <span class="legend-item"><span class="legend-dot" style="background:#34d399"></span>Vibration</span> | |
| <span class="legend-item"><span class="legend-dot" style="background:#ef4444"></span>Alert (score > threshold)</span> | |
| <span class="legend-item"><span class="legend-dash" style="background:#eab308"></span>Drift event</span> | |
| </div> | |
| <div class="chart-wrap sensors"> | |
| <canvas id="chart-sensors"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Anomaly score chart --> | |
| <div class="chart-section"> | |
| <div class="chart-card"> | |
| <p class="chart-title">Anomaly score, last 200 observations</p> | |
| <div class="chart-wrap scores"> | |
| <canvas id="chart-score"></canvas> | |
| </div> | |
| <p class="chart-caption"> | |
| Mahalanobis distance from the Phase A baseline, scaled to [0, 1). | |
| <span style="color:var(--danger)">Red dashed line</span> = detection threshold (0.60). | |
| <span style="color:var(--warn)">Yellow lines</span> = ADWIN drift events. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Algorithm explainer --> | |
| <div class="explainer" id="explainer"> | |
| <div class="explainer-header" id="explainer-toggle"> | |
| How it works <span class="chevron">▼</span> | |
| </div> | |
| <div class="explainer-body"> | |
| <p> | |
| Each observation is scored exactly once as it arrives. No batching, no retraining. | |
| </p> | |
| <div class="algo-grid"> | |
| <div class="algo-card"> | |
| <h4>Mahalanobis distance (anomaly scorer)</h4> | |
| <p>During Phase A, the detector fits a multivariate Gaussian to the sensor readings. After Phase A, that baseline is frozen. Every new observation is scored as its Mahalanobis distance from the Phase A mean, using the full covariance matrix. This catches both large single-sensor spikes and unusual sensor combinations, like high temperature paired with low pressure when the two normally move together.</p> | |
| </div> | |
| <div class="algo-card"> | |
| <h4>ADWIN (drift detector)</h4> | |
| <p>Watches a normalized average of all three sensor readings. When the distribution of that signal shifts in Phase B, ADWIN fires. The anomaly baseline is not reset since it was calibrated on the pre-drift data. Drift events are logged and shown as yellow markers on the charts.</p> | |
| </div> | |
| </div> | |
| <p><strong>Stream phases</strong></p> | |
| <ul> | |
| <li><strong>Phase A (300 obs):</strong> Correlated Gaussian noise across three sensors, shared latent factor (weight 0.7). The detector fits the baseline here. Scores are 0 during this phase.</li> | |
| <li><strong>Phase B (200 obs):</strong> All sensor means shift linearly. ADWIN fires when it detects the sustained shift.</li> | |
| <li><strong>Phase C (300 obs):</strong> Anomalies are injected at ~8% rate. Two types: <em>point anomalies</em> (3-5σ spikes in one or more sensors) and <em>contextual anomalies</em> (high temp + low pressure, unusual given the positive correlation in normal data). Precision, recall, and F1 are measured here against ground truth labels.</li> | |
| </ul> | |
| <p> | |
| The <code>/stats</code> and <code>/metrics</code> endpoints expose all counters as JSON and Prometheus text respectively. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/dashboard.js"></script> | |
| </body> | |
| </html> | |