161 lines
6.0 KiB
HTML
161 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WiFi-DensePose — Dual-Modal Pose Estimation</title>
|
|
<link rel="stylesheet" href="pose-fusion/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<div class="logo"><span class="pi">π</span> DensePose</div>
|
|
<div class="header-title">Dual-Modal Pose Estimation — Live Video + WiFi CSI Fusion</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<select id="mode-select" class="mode-select">
|
|
<option value="dual">Dual Mode (Video + CSI)</option>
|
|
<option value="video">Video Only</option>
|
|
<option value="csi">CSI Only (WiFi)</option>
|
|
</select>
|
|
<div class="status-badge">
|
|
<span id="status-dot" class="status-dot offline"></span>
|
|
<span id="status-label">READY</span>
|
|
</div>
|
|
<span id="fps-display" class="fps-badge">-- FPS</span>
|
|
<a href="index.html" class="back-link">← Dashboard</a>
|
|
<a href="observatory.html" class="back-link">Observatory →</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Grid -->
|
|
<div class="main-grid">
|
|
|
|
<!-- Video + Skeleton Panel -->
|
|
<div class="video-panel">
|
|
<video id="webcam" autoplay playsinline muted></video>
|
|
<canvas id="skeleton-canvas"></canvas>
|
|
<div class="video-overlay-label" id="mode-label">DUAL FUSION</div>
|
|
|
|
<div id="camera-prompt" class="camera-prompt">
|
|
<p>Enable your webcam for live video pose estimation.<br>
|
|
Or switch to <strong>CSI Only</strong> mode for WiFi-based sensing.</p>
|
|
<button id="start-camera-btn">Enable Camera</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Side Panels -->
|
|
<div class="side-panels">
|
|
|
|
<!-- Fusion Confidence -->
|
|
<div class="panel">
|
|
<div class="panel-title">◆ Fusion Confidence</div>
|
|
<div class="fusion-bars">
|
|
<div class="bar-row">
|
|
<span class="bar-label">Video</span>
|
|
<div class="bar-track"><div class="bar-fill video" id="video-bar" style="width:0%"></div></div>
|
|
<span class="bar-value" id="video-bar-val">0%</span>
|
|
</div>
|
|
<div class="bar-row">
|
|
<span class="bar-label">CSI</span>
|
|
<div class="bar-track"><div class="bar-fill csi" id="csi-bar" style="width:0%"></div></div>
|
|
<span class="bar-value" id="csi-bar-val">0%</span>
|
|
</div>
|
|
<div class="bar-row">
|
|
<span class="bar-label">Fused</span>
|
|
<div class="bar-track"><div class="bar-fill fused" id="fused-bar" style="width:0%"></div></div>
|
|
<span class="bar-value" id="fused-bar-val">0%</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:8px; font-size:10px; color:var(--text-label)">
|
|
Cross-modal: <span id="cross-modal-sim" style="color:var(--green-glow)">0.000</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSI Heatmap -->
|
|
<div class="panel">
|
|
<div class="panel-title">◆ CSI Amplitude Heatmap</div>
|
|
<div class="csi-canvas-wrapper">
|
|
<canvas id="csi-canvas" width="320" height="120"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Embedding Space -->
|
|
<div class="panel">
|
|
<div class="panel-title">◆ Embedding Space (2D Projection)</div>
|
|
<div class="embedding-canvas-wrapper">
|
|
<canvas id="embedding-canvas" width="320" height="140"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latency -->
|
|
<div class="panel">
|
|
<div class="panel-title">◆ Pipeline Latency</div>
|
|
<div class="latency-grid">
|
|
<div class="latency-item">
|
|
<div class="latency-value" id="lat-video">--</div>
|
|
<div class="latency-label">Video CNN</div>
|
|
</div>
|
|
<div class="latency-item">
|
|
<div class="latency-value" id="lat-csi">--</div>
|
|
<div class="latency-label">CSI CNN</div>
|
|
</div>
|
|
<div class="latency-item">
|
|
<div class="latency-value" id="lat-fusion">--</div>
|
|
<div class="latency-label">Fusion</div>
|
|
</div>
|
|
<div class="latency-item">
|
|
<div class="latency-value" id="lat-total">--</div>
|
|
<div class="latency-label">Total</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="panel">
|
|
<div class="panel-title">◆ Controls</div>
|
|
<div class="controls-row">
|
|
<button class="btn" id="pause-btn">⏸ Pause</button>
|
|
</div>
|
|
|
|
<div class="slider-row">
|
|
<label>Confidence</label>
|
|
<input type="range" id="confidence-slider" min="0" max="1" step="0.05" value="0.3">
|
|
<span class="slider-val" id="confidence-value">0.30</span>
|
|
</div>
|
|
|
|
<div style="margin-top:10px">
|
|
<div class="panel-title" style="margin-bottom:6px">◆ Live CSI Source</div>
|
|
<div style="display:flex;gap:6px">
|
|
<input type="text" id="ws-url" placeholder="ws://localhost:3030/ws/csi"
|
|
style="flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--bg-panel-border);
|
|
color:var(--text-primary);padding:5px 8px;border-radius:4px;font-size:11px;
|
|
font-family:'JetBrains Mono',monospace">
|
|
<button class="btn" id="connect-ws-btn">Connect</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /side-panels -->
|
|
|
|
<!-- Bottom Bar -->
|
|
<div class="bottom-bar">
|
|
<div>
|
|
WiFi-DensePose · Dual-Modal Pose Estimation ·
|
|
Architecture: MobileNet-V3 × 2 → Attention Fusion → 17-Keypoint COCO
|
|
</div>
|
|
<div>
|
|
<a href="https://github.com/ruvnet/wifi-densepose">GitHub</a> ·
|
|
CNN: ruvector-cnn (JS fallback) ·
|
|
<a href="observatory.html">Observatory</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /main-grid -->
|
|
|
|
<script type="module" src="pose-fusion/js/main.js"></script>
|
|
</body>
|
|
</html>
|