516 lines
30 KiB
HTML
516 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title data-i18n="meta.title">WiFi DensePose: Human Tracking Through Walls</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<h1 data-i18n="header.title">WiFi DensePose</h1>
|
||
<p class="subtitle" data-i18n="header.subtitle">Human Tracking Through Walls Using WiFi Signals</p>
|
||
<div class="header-info">
|
||
<span class="api-version"></span>
|
||
<span class="api-environment"></span>
|
||
<span class="overall-health"></span>
|
||
<select id="languageSelector" class="language-selector" title="Select Language">
|
||
<option value="en-US">English</option>
|
||
<option value="zh-CN">中文简体</option>
|
||
</select>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav-tabs">
|
||
<button class="nav-tab active" data-tab="dashboard" data-i18n="nav.dashboard">Dashboard</button>
|
||
<button class="nav-tab" data-tab="hardware" data-i18n="nav.hardware">Hardware</button>
|
||
<button class="nav-tab" data-tab="demo" data-i18n="nav.demo">Live Demo</button>
|
||
<button class="nav-tab" data-tab="architecture" data-i18n="nav.architecture">Architecture</button>
|
||
<button class="nav-tab" data-tab="performance" data-i18n="nav.performance">Performance</button>
|
||
<button class="nav-tab" data-tab="applications" data-i18n="nav.applications">Applications</button>
|
||
<button class="nav-tab" data-tab="sensing" data-i18n="nav.sensing">Sensing</button>
|
||
<button class="nav-tab" data-tab="training" data-i18n="nav.training">Training</button>
|
||
<a href="observatory.html" class="nav-tab" style="text-decoration:none" data-i18n="nav.observatory">Observatory</a>
|
||
</nav>
|
||
|
||
<!-- Dashboard Tab -->
|
||
<section id="dashboard" class="tab-content active">
|
||
<div class="hero-section">
|
||
<h2 data-i18n="dashboard.title">Revolutionary WiFi-Based Human Pose Detection</h2>
|
||
<p class="hero-description" data-i18n="dashboard.description">
|
||
AI can track your full-body movement through walls using just WiFi signals.
|
||
Researchers at Carnegie Mellon have trained a neural network to turn basic WiFi
|
||
signals into detailed wireframe models of human bodies.
|
||
</p>
|
||
|
||
<!-- Error container -->
|
||
<div class="error-container" style="display: none;"></div>
|
||
|
||
<!-- Live Status Panel -->
|
||
<div class="live-status-panel">
|
||
<h3 data-i18n="dashboard.status.title">System Status</h3>
|
||
<div class="status-grid">
|
||
<div class="component-status" data-component="api">
|
||
<span class="component-name" data-i18n="dashboard.status.apiServer">API Server</span>
|
||
<span class="status-text">-</span>
|
||
<span class="status-message"></span>
|
||
</div>
|
||
<div class="component-status" data-component="hardware">
|
||
<span class="component-name" data-i18n="dashboard.status.hardware">Hardware</span>
|
||
<span class="status-text">-</span>
|
||
<span class="status-message"></span>
|
||
</div>
|
||
<div class="component-status" data-component="inference">
|
||
<span class="component-name" data-i18n="dashboard.status.inference">Inference</span>
|
||
<span class="status-text">-</span>
|
||
<span class="status-message"></span>
|
||
</div>
|
||
<div class="component-status" data-component="streaming">
|
||
<span class="component-name" data-i18n="dashboard.status.streaming">Streaming</span>
|
||
<span class="status-text">-</span>
|
||
<span class="status-message"></span>
|
||
</div>
|
||
<div class="component-status" data-component="datasource" id="dashboard-datasource">
|
||
<span class="component-name" data-i18n="dashboard.status.datasource">Data Source</span>
|
||
<span class="status-text">-</span>
|
||
<span class="status-message"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- System Metrics -->
|
||
<div class="system-metrics-panel">
|
||
<h3 data-i18n="dashboard.metrics.title">System Metrics</h3>
|
||
<div class="metrics-grid">
|
||
<div class="metric-item">
|
||
<span class="metric-label" data-i18n="dashboard.metrics.cpuUsage">CPU Usage</span>
|
||
<div class="progress-bar" data-type="cpu">
|
||
<div class="progress-fill normal" style="width: 0%"></div>
|
||
</div>
|
||
<span class="cpu-usage">0%</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span class="metric-label" data-i18n="dashboard.metrics.memoryUsage">Memory Usage</span>
|
||
<div class="progress-bar" data-type="memory">
|
||
<div class="progress-fill normal" style="width: 0%"></div>
|
||
</div>
|
||
<span class="memory-usage">0%</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span class="metric-label" data-i18n="dashboard.metrics.diskUsage">Disk Usage</span>
|
||
<div class="progress-bar" data-type="disk">
|
||
<div class="progress-fill normal" style="width: 0%"></div>
|
||
</div>
|
||
<span class="disk-usage">0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features Status -->
|
||
<div class="features-panel">
|
||
<h3 data-i18n="dashboard.features.title">Features</h3>
|
||
<div class="features-status"></div>
|
||
</div>
|
||
|
||
<!-- Live Statistics -->
|
||
<div class="live-stats-panel">
|
||
<h3 data-i18n="dashboard.stats.title">Live Statistics</h3>
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<span class="stat-label" data-i18n="dashboard.stats.activePersons">Active Persons</span>
|
||
<span class="person-count">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label" data-i18n="dashboard.stats.avgConfidence">Avg Confidence</span>
|
||
<span class="avg-confidence">0%</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label" data-i18n="dashboard.stats.totalDetections">Total Detections</span>
|
||
<span class="detection-count">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zones-panel">
|
||
<h4 data-i18n="dashboard.stats.zoneOccupancy">Zone Occupancy</h4>
|
||
<div class="zones-summary"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="key-benefits">
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">🏠</div>
|
||
<h3 data-i18n="dashboard.benefits.throughWalls.title">Through Walls</h3>
|
||
<p data-i18n="dashboard.benefits.throughWalls.description">Works through solid barriers with no line of sight required</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">🔒</div>
|
||
<h3 data-i18n="dashboard.benefits.privacy.title">Privacy-Preserving</h3>
|
||
<p data-i18n="dashboard.benefits.privacy.description">No cameras or visual recording - just WiFi signal analysis</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">⚡</div>
|
||
<h3 data-i18n="dashboard.benefits.realtime.title">Real-Time</h3>
|
||
<p data-i18n="dashboard.benefits.realtime.description">Maps 24 body regions in real-time at 100Hz sampling rate</p>
|
||
</div>
|
||
<div class="benefit-card">
|
||
<div class="benefit-icon">💰</div>
|
||
<h3 data-i18n="dashboard.benefits.lowCost.title">Low Cost</h3>
|
||
<p data-i18n="dashboard.benefits.lowCost.description">Built using $30 commercial WiFi hardware</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-stats">
|
||
<div class="stat" data-stat="body-regions">
|
||
<span class="stat-value">24</span>
|
||
<span class="stat-label" data-i18n="dashboard.systemStats.bodyRegions">Body Regions</span>
|
||
</div>
|
||
<div class="stat" data-stat="sampling-rate">
|
||
<span class="stat-value">100Hz</span>
|
||
<span class="stat-label" data-i18n="dashboard.systemStats.samplingRate">Sampling Rate</span>
|
||
</div>
|
||
<div class="stat" data-stat="accuracy">
|
||
<span class="stat-value">87.2%</span>
|
||
<span class="stat-label" data-i18n="dashboard.systemStats.accuracy">Accuracy (AP@50)</span>
|
||
</div>
|
||
<div class="stat" data-stat="hardware-cost">
|
||
<span class="stat-value">$30</span>
|
||
<span class="stat-label" data-i18n="dashboard.systemStats.hardwareCost">Hardware Cost</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Hardware Tab -->
|
||
<section id="hardware" class="tab-content">
|
||
<h2 data-i18n="hardware.title">Hardware Configuration</h2>
|
||
|
||
<div class="hardware-grid">
|
||
<div class="antenna-section">
|
||
<h3 data-i18n="hardware.antenna.title">3×3 Antenna Array</h3>
|
||
<p class="help-text" data-i18n="hardware.antenna.helpText">Click antennas to toggle their state</p>
|
||
<div class="antenna-array">
|
||
<div class="antenna-grid">
|
||
<div class="antenna tx active" data-type="TX1"></div>
|
||
<div class="antenna tx active" data-type="TX2"></div>
|
||
<div class="antenna tx active" data-type="TX3"></div>
|
||
<div class="antenna rx active" data-type="RX1"></div>
|
||
<div class="antenna rx active" data-type="RX2"></div>
|
||
<div class="antenna rx active" data-type="RX3"></div>
|
||
<div class="antenna rx active" data-type="RX4"></div>
|
||
<div class="antenna rx active" data-type="RX5"></div>
|
||
<div class="antenna rx active" data-type="RX6"></div>
|
||
</div>
|
||
<div class="antenna-legend">
|
||
<div class="legend-item">
|
||
<div class="legend-color tx"></div>
|
||
<span data-i18n="hardware.antenna.transmitters">Transmitters (3)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color rx"></div>
|
||
<span data-i18n="hardware.antenna.receivers">Receivers (6)</span>
|
||
</div>
|
||
</div>
|
||
<div class="array-status"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="config-section">
|
||
<h3 data-i18n="hardware.wifi.title">WiFi Configuration</h3>
|
||
<div class="config-grid">
|
||
<div class="config-item">
|
||
<label data-i18n="hardware.wifi.frequency">Frequency</label>
|
||
<div class="config-value" data-i18n="hardware.wifi.frequencyValue">2.4GHz ± 20MHz</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<label data-i18n="hardware.wifi.subcarriers">Subcarriers</label>
|
||
<div class="config-value" data-i18n="hardware.wifi.subcarriersValue">30</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<label data-i18n="hardware.wifi.samplingRate">Sampling Rate</label>
|
||
<div class="config-value" data-i18n="hardware.wifi.samplingRateValue">100 Hz</div>
|
||
</div>
|
||
<div class="config-item">
|
||
<label data-i18n="hardware.wifi.totalCost">Total Cost</label>
|
||
<div class="config-value" data-i18n="hardware.wifi.totalCostValue">$30</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="csi-data">
|
||
<h4 data-i18n="hardware.csi.title">Real-time CSI Data</h4>
|
||
<div class="csi-display">
|
||
<div class="csi-row">
|
||
<span data-i18n="hardware.csi.amplitude">Amplitude:</span>
|
||
<div class="csi-bar">
|
||
<div class="csi-fill amplitude" style="width: 75%"></div>
|
||
</div>
|
||
<span class="csi-value">0.75</span>
|
||
</div>
|
||
<div class="csi-row">
|
||
<span data-i18n="hardware.csi.phase">Phase:</span>
|
||
<div class="csi-bar">
|
||
<div class="csi-fill phase" style="width: 60%"></div>
|
||
</div>
|
||
<span class="csi-value">1.2π</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Demo Tab -->
|
||
<section id="demo" class="tab-content">
|
||
<h2 data-i18n="demo.title">Live Demonstration</h2>
|
||
|
||
<div class="demo-controls">
|
||
<button id="startDemo" class="btn btn--primary" data-i18n="demo.controls.startStream">Start Stream</button>
|
||
<button id="stopDemo" class="btn btn--secondary" disabled data-i18n="demo.controls.stopStream">Stop Stream</button>
|
||
<div class="demo-status">
|
||
<span class="status status--info" id="demoStatus" data-i18n="demo.controls.ready">Ready</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-grid">
|
||
<div class="signal-panel">
|
||
<h3 data-i18n="demo.signal.title">WiFi Signal Analysis</h3>
|
||
<div class="signal-display">
|
||
<canvas id="signalCanvas" width="400" height="200"></canvas>
|
||
</div>
|
||
<div class="signal-metrics">
|
||
<div class="metric">
|
||
<span data-i18n="demo.signal.signalStrength">Signal Strength:</span>
|
||
<span id="signalStrength">-45 dBm</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span data-i18n="demo.signal.processingLatency">Processing Latency:</span>
|
||
<span id="latency">12 ms</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pose-panel">
|
||
<h3 data-i18n="demo.pose.title">Human Pose Detection</h3>
|
||
<div class="pose-display">
|
||
<canvas id="poseCanvas" width="400" height="300"></canvas>
|
||
</div>
|
||
<div class="detection-info">
|
||
<div class="info-item">
|
||
<span data-i18n="demo.pose.personsDetected">Persons Detected:</span>
|
||
<span id="personCount">0</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span data-i18n="demo.pose.confidence">Confidence:</span>
|
||
<span id="confidence">0.0%</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span data-i18n="demo.pose.keypoints">Keypoints:</span>
|
||
<span id="keypoints">0/0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Architecture Tab -->
|
||
<section id="architecture" class="tab-content">
|
||
<h2 data-i18n="architecture.title">System Architecture</h2>
|
||
|
||
<div class="architecture-flow">
|
||
<img src="https://pplx-res.cloudinary.com/image/upload/v1748813853/gpt4o_images/m7zztcttnue7vaxclvuw.png"
|
||
alt="WiFi DensePose Architecture" class="architecture-image">
|
||
|
||
<div class="flow-steps">
|
||
<div class="step-card" data-step="1">
|
||
<div class="step-number">1</div>
|
||
<h3 data-i18n="architecture.steps.csiInput.title">CSI Input</h3>
|
||
<p data-i18n="architecture.steps.csiInput.description">Channel State Information collected from WiFi antenna array</p>
|
||
</div>
|
||
<div class="step-card" data-step="2">
|
||
<div class="step-number">2</div>
|
||
<h3 data-i18n="architecture.steps.phaseSanitization.title">Phase Sanitization</h3>
|
||
<p data-i18n="architecture.steps.phaseSanitization.description">Remove hardware-specific noise and normalize signal phase</p>
|
||
</div>
|
||
<div class="step-card" data-step="3">
|
||
<div class="step-number">3</div>
|
||
<h3 data-i18n="architecture.steps.modalityTranslation.title">Modality Translation</h3>
|
||
<p data-i18n="architecture.steps.modalityTranslation.description">Convert WiFi signals to visual representation using CNN</p>
|
||
</div>
|
||
<div class="step-card" data-step="4">
|
||
<div class="step-number">4</div>
|
||
<h3 data-i18n="architecture.steps.densePose.title">DensePose-RCNN</h3>
|
||
<p data-i18n="architecture.steps.densePose.description">Extract human pose keypoints and body part segmentation</p>
|
||
</div>
|
||
<div class="step-card" data-step="5">
|
||
<div class="step-number">5</div>
|
||
<h3 data-i18n="architecture.steps.wireframeOutput.title">Wireframe Output</h3>
|
||
<p data-i18n="architecture.steps.wireframeOutput.description">Generate final human pose wireframe visualization</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Performance Tab -->
|
||
<section id="performance" class="tab-content">
|
||
<h2 data-i18n="performance.title">Performance Analysis</h2>
|
||
|
||
<div class="performance-chart">
|
||
<img src="https://pplx-res.cloudinary.com/image/upload/v1748813924/pplx_code_interpreter/af6ef268_nsauu6.jpg"
|
||
alt="Performance Comparison Chart" class="chart-image">
|
||
</div>
|
||
|
||
<div class="performance-grid">
|
||
<div class="performance-card">
|
||
<h3 data-i18n="performance.wifiBased.title">WiFi-based (Same Layout)</h3>
|
||
<div class="metric-list">
|
||
<div class="metric-item">
|
||
<span data-i18n="performance.wifiBased.averagePrecision">Average Precision:</span>
|
||
<span class="metric-value">43.5%</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span data-i18n="performance.wifiBased.ap50">AP@50:</span>
|
||
<span class="metric-value success">87.2%</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span data-i18n="performance.wifiBased.ap75">AP@75:</span>
|
||
<span class="metric-value">44.6%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="performance-card">
|
||
<h3 data-i18n="performance.imageBased.title">Image-based (Reference)</h3>
|
||
<div class="metric-list">
|
||
<div class="metric-item">
|
||
<span data-i18n="performance.imageBased.averagePrecision">Average Precision:</span>
|
||
<span class="metric-value success">84.7%</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span data-i18n="performance.imageBased.ap50">AP@50:</span>
|
||
<span class="metric-value success">94.4%</span>
|
||
</div>
|
||
<div class="metric-item">
|
||
<span data-i18n="performance.imageBased.ap75">AP@75:</span>
|
||
<span class="metric-value success">77.1%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="limitations-section">
|
||
<h3 data-i18n="performance.advantages.title">Advantages & Limitations</h3>
|
||
<div class="pros-cons">
|
||
<div class="pros">
|
||
<h4 data-i18n="performance.advantages.pros.title">Advantages</h4>
|
||
<ul>
|
||
<li data-i18n="performance.advantages.pros.items.0">Through-wall detection</li>
|
||
<li data-i18n="performance.advantages.pros.items.1">Privacy preserving</li>
|
||
<li data-i18n="performance.advantages.pros.items.2">Lighting independent</li>
|
||
<li data-i18n="performance.advantages.pros.items.3">Low cost hardware</li>
|
||
<li data-i18n="performance.advantages.pros.items.4">Uses existing WiFi</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cons">
|
||
<h4 data-i18n="performance.advantages.cons.title">Limitations</h4>
|
||
<ul>
|
||
<li data-i18n="performance.advantages.cons.items.0">Performance drops in different layouts</li>
|
||
<li data-i18n="performance.advantages.cons.items.1">Requires WiFi-compatible devices</li>
|
||
<li data-i18n="performance.advantages.cons.items.2">Training requires synchronized data</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Applications Tab -->
|
||
<section id="applications" class="tab-content">
|
||
<h2 data-i18n="applications.title">Real-World Applications</h2>
|
||
|
||
<div class="applications-grid">
|
||
<div class="app-card">
|
||
<div class="app-icon">👴</div>
|
||
<h3 data-i18n="applications.elderlyCare.title">Elderly Care Monitoring</h3>
|
||
<p data-i18n="applications.elderlyCare.description">Monitor elderly individuals for falls or emergencies without invading privacy. Track movement patterns and detect anomalies in daily routines.</p>
|
||
<div class="app-features">
|
||
<span class="feature-tag" data-i18n="applications.elderlyCare.features.0">Fall Detection</span>
|
||
<span class="feature-tag" data-i18n="applications.elderlyCare.features.1">Activity Monitoring</span>
|
||
<span class="feature-tag" data-i18n="applications.elderlyCare.features.2">Emergency Alert</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-card">
|
||
<div class="app-icon">🏠</div>
|
||
<h3 data-i18n="applications.homeSecurity.title">Home Security Systems</h3>
|
||
<p data-i18n="applications.homeSecurity.description">Detect intruders and monitor home security without visible cameras. Track multiple persons and identify suspicious movement patterns.</p>
|
||
<div class="app-features">
|
||
<span class="feature-tag" data-i18n="applications.homeSecurity.features.0">Intrusion Detection</span>
|
||
<span class="feature-tag" data-i18n="applications.homeSecurity.features.1">Multi-person Tracking</span>
|
||
<span class="feature-tag" data-i18n="applications.homeSecurity.features.2">Invisible Monitoring</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-card">
|
||
<div class="app-icon">🏥</div>
|
||
<h3 data-i18n="applications.healthcare.title">Healthcare Patient Monitoring</h3>
|
||
<p data-i18n="applications.healthcare.description">Monitor patients in hospitals and care facilities. Track vital signs through movement analysis and detect health emergencies.</p>
|
||
<div class="app-features">
|
||
<span class="feature-tag" data-i18n="applications.healthcare.features.0">Vital Sign Analysis</span>
|
||
<span class="feature-tag" data-i18n="applications.healthcare.features.1">Movement Tracking</span>
|
||
<span class="feature-tag" data-i18n="applications.healthcare.features.2">Health Alerts</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-card">
|
||
<div class="app-icon">🏢</div>
|
||
<h3 data-i18n="applications.smartBuilding.title">Smart Building Occupancy</h3>
|
||
<p data-i18n="applications.smartBuilding.description">Optimize building energy consumption by tracking occupancy patterns. Control lighting, HVAC, and security systems automatically.</p>
|
||
<div class="app-features">
|
||
<span class="feature-tag" data-i18n="applications.smartBuilding.features.0">Energy Optimization</span>
|
||
<span class="feature-tag" data-i18n="applications.smartBuilding.features.1">Occupancy Tracking</span>
|
||
<span class="feature-tag" data-i18n="applications.smartBuilding.features.2">Smart Controls</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-card">
|
||
<div class="app-icon">🥽</div>
|
||
<h3 data-i18n="applications.arVr.title">AR/VR Applications</h3>
|
||
<p data-i18n="applications.arVr.description">Enable full-body tracking for virtual and augmented reality applications without wearing additional sensors or cameras.</p>
|
||
<div class="app-features">
|
||
<span class="feature-tag" data-i18n="applications.arVr.features.0">Full Body Tracking</span>
|
||
<span class="feature-tag" data-i18n="applications.arVr.features.1">Sensor-free</span>
|
||
<span class="feature-tag" data-i18n="applications.arVr.features.2">Immersive Experience</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="implementation-note">
|
||
<h3 data-i18n="applications.implementation.title">Implementation Considerations</h3>
|
||
<p data-i18n="applications.implementation.description">While WiFi DensePose offers revolutionary capabilities, successful implementation requires careful consideration of environment setup, data privacy regulations, and system calibration for optimal performance.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sensing Tab -->
|
||
<section id="sensing" class="tab-content"></section>
|
||
|
||
<!-- Training Tab -->
|
||
<section id="training" class="tab-content">
|
||
<div class="tab-header">
|
||
<h2 data-i18n="training.title">Model Training</h2>
|
||
<p data-i18n="training.description">Record CSI data, train pose estimation models, and manage .rvf files</p>
|
||
</div>
|
||
<div id="training-container" style="display: flex; gap: 20px; flex-wrap: wrap;">
|
||
<div id="training-panel-container" style="flex: 1; min-width: 400px;"></div>
|
||
<div id="model-panel-container" style="flex: 1; min-width: 350px; max-width: 450px;"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Error Toast -->
|
||
<div id="globalErrorToast" class="error-toast"></div>
|
||
|
||
<!-- Load application scripts as modules -->
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html> |