mirror of
https://github.com/ruvnet/RuView
synced 2026-07-17 16:33:18 +00:00
113011e704
* feat: RVF training pipeline & UI integration (ADR-036) Implement full model training, management, and inference pipeline: Backend (Rust): - recording.rs: CSI recording API (start/stop/list/download/delete) - model_manager.rs: RVF model loading, LoRA profile switching, model library - training_api.rs: Training API with WebSocket progress streaming, simulated training mode with realistic loss curves, auto-RVF export on completion - main.rs: Wire new modules, recording hooks in all CSI paths, data dirs UI (new components): - ModelPanel.js: Dark-mode model library with load/unload, LoRA dropdown - TrainingPanel.js: Recording controls, training config, live Canvas charts - model.service.js: Model REST API client with events - training.service.js: Training + recording API client with WebSocket progress UI (enhancements): - LiveDemoTab: Model selector, LoRA profile switcher, A/B split view toggle, training quick-panel with 60s recording shortcut - SettingsPanel: Full dark mode conversion (issue #92), model configuration (device, threads, auto-load), training configuration (epochs, LR, patience) - PoseDetectionCanvas: 10-frame pose trail with ghost keypoints and motion trajectory lines, cyan trail toggle button - pose.service.js: Model-inference confidence thresholds UI (plumbing): - index.html: Training tab (8th tab) - app.js: Panel initialization and tab routing - style.css: ~250 lines of training/model panel dark-mode styles 191 Rust tests pass, 0 failures. Closes #92. Refs: ADR-036, #93 Co-Authored-By: claude-flow <ruv@ruv.net> * fix: real RuVector training pipeline + UI service fixes Training pipeline (training_api.rs): - Replace simulated training with real signal-based training loop - Load actual CSI data from .csi.jsonl recordings or live frame history - Extract 180 features per frame: subcarrier amplitudes, temporal variance, Goertzel frequency analysis (9 bands), motion gradients, global stats - Train calibrated linear CSI-to-pose mapping via mini-batch gradient descent with L2 regularization (ridge regression), Xavier init, cosine LR decay - Self-supervised: teacher targets from derive_pose_from_sensing() heuristics - Real validation metrics: MSE and PCK@0.2 on 80/20 train/val split - Export trained .rvf with real weights, feature normalization stats, witness - Add infer_pose_from_model() for live inference from trained model - 16 new tests covering features, training, inference, serialization UI fixes: - Fix double-URL bug in model.service.js and training.service.js (buildApiUrl was called twice — once in service, once in apiService) - Fix route paths to match Rust backend (/api/v1/train/*, /api/v1/recording/*) - Fix request body formats (session_name, nested config object) - Fix top-level await in LiveDemoTab.js blocking module graph - Dynamic imports for ModelPanel/TrainingPanel in app.js - Center nav tabs with flex-wrap for 8-tab layout Co-Authored-By: claude-flow <ruv@ruv.net> * fix: WebSocket onOpen race condition, data source indicators, auto-start pose detection - Fix WebSocket onOpen race condition in websocket.service.js where setupEventHandlers replaced onopen after socket was already open, preventing pose service from receiving connection signal - Add 4-state data source indicator (LIVE/SIMULATED/RECONNECTING/OFFLINE) across Dashboard, Sensing, and Live Demo tabs via sensing.service.js - Add hot-plug ESP32 auto-detection in sensing server (auto mode runs both UDP listener and simulation, switches on ESP32_TIMEOUT) - Auto-start pose detection when backend is reachable - Hide duplicate PoseDetectionCanvas controls when enableControls=false - Add standalone Demo button in LiveDemoTab for offline animated demo - Add data source banner and status styling Co-Authored-By: claude-flow <ruv@ruv.net>
376 lines
12 KiB
JavaScript
376 lines
12 KiB
JavaScript
/**
|
|
* Sensing WebSocket Service
|
|
*
|
|
* Manages the connection to the Python sensing WebSocket server
|
|
* (ws://localhost:8765) and provides a callback-based API for the UI.
|
|
*
|
|
* Falls back to simulated data only after MAX_RECONNECT_ATTEMPTS exhausted.
|
|
* While reconnecting the service stays in "reconnecting" state and does NOT
|
|
* emit simulated frames so the UI can clearly distinguish live vs. fallback data.
|
|
*/
|
|
|
|
// Derive WebSocket URL from the page origin so it works on any port
|
|
// (Docker :3000, native :8080, etc.)
|
|
const _wsProto = (typeof window !== 'undefined' && window.location.protocol === 'https:') ? 'wss:' : 'ws:';
|
|
const _wsHost = (typeof window !== 'undefined' && window.location.host) ? window.location.host : 'localhost:3000';
|
|
const SENSING_WS_URL = `${_wsProto}//${_wsHost}/ws/sensing`;
|
|
const RECONNECT_DELAYS = [1000, 2000, 4000, 8000, 16000];
|
|
const MAX_RECONNECT_ATTEMPTS = 20;
|
|
// Number of failed attempts that must occur before simulation starts.
|
|
// This prevents the UI from flashing "SIMULATED" on a brief hiccup.
|
|
const SIM_FALLBACK_AFTER_ATTEMPTS = 5;
|
|
const SIMULATION_INTERVAL = 500; // ms
|
|
|
|
class SensingService {
|
|
constructor() {
|
|
/** @type {WebSocket|null} */
|
|
this._ws = null;
|
|
this._listeners = new Set();
|
|
this._stateListeners = new Set();
|
|
this._reconnectAttempt = 0;
|
|
this._reconnectTimer = null;
|
|
this._simTimer = null;
|
|
// Connection state: disconnected | connecting | connected | reconnecting | simulated
|
|
this._state = 'disconnected';
|
|
// Data-source label exposed to the UI:
|
|
// "live" — real ESP32 hardware connected
|
|
// "server-simulated" — server is running but using synthetic data (no hardware)
|
|
// "reconnecting" — WebSocket disconnected, retrying
|
|
// "simulated" — client-side fallback simulation (server unreachable)
|
|
this._dataSource = 'reconnecting';
|
|
// The raw source string from the server (e.g. "esp32", "simulated", "simulate")
|
|
this._serverSource = null;
|
|
this._lastMessage = null;
|
|
|
|
// Ring buffer of recent RSSI values for sparkline
|
|
this._rssiHistory = [];
|
|
this._maxHistory = 60;
|
|
}
|
|
|
|
// ---- Public API --------------------------------------------------------
|
|
|
|
/** Start the service (connect or simulate). */
|
|
start() {
|
|
this._connect();
|
|
}
|
|
|
|
/** Stop the service entirely. */
|
|
stop() {
|
|
this._clearTimers();
|
|
if (this._ws) {
|
|
this._ws.close(1000, 'client stop');
|
|
this._ws = null;
|
|
}
|
|
this._setState('disconnected');
|
|
}
|
|
|
|
/** Register a callback for sensing data updates. Returns unsubscribe fn. */
|
|
onData(callback) {
|
|
this._listeners.add(callback);
|
|
// Immediately push last known data if available
|
|
if (this._lastMessage) callback(this._lastMessage);
|
|
return () => this._listeners.delete(callback);
|
|
}
|
|
|
|
/** Register a callback for connection state changes. Returns unsubscribe fn. */
|
|
onStateChange(callback) {
|
|
this._stateListeners.add(callback);
|
|
callback(this._state);
|
|
return () => this._stateListeners.delete(callback);
|
|
}
|
|
|
|
/** Get the RSSI sparkline history (array of floats). */
|
|
getRssiHistory() {
|
|
return [...this._rssiHistory];
|
|
}
|
|
|
|
/** Current connection state. */
|
|
get state() {
|
|
return this._state;
|
|
}
|
|
|
|
/**
|
|
* Current data source label.
|
|
* "live" — frames are arriving from the real ESP32 over WebSocket
|
|
* "reconnecting" — WebSocket disconnected; actively retrying, no frames emitted
|
|
* "simulated" — max reconnect attempts exhausted; emitting synthetic frames
|
|
*/
|
|
get dataSource() {
|
|
return this._dataSource;
|
|
}
|
|
|
|
// ---- Connection --------------------------------------------------------
|
|
|
|
_connect() {
|
|
if (this._ws && this._ws.readyState <= WebSocket.OPEN) return;
|
|
|
|
this._setState('connecting');
|
|
|
|
try {
|
|
this._ws = new WebSocket(SENSING_WS_URL);
|
|
} catch (err) {
|
|
console.warn('[Sensing] WebSocket constructor failed:', err.message);
|
|
this._fallbackToSimulation();
|
|
return;
|
|
}
|
|
|
|
this._ws.onopen = () => {
|
|
console.info('[Sensing] Connected to', SENSING_WS_URL);
|
|
this._reconnectAttempt = 0;
|
|
this._stopSimulation();
|
|
this._setState('connected');
|
|
// Don't assume "live" yet — wait for first frame's source field.
|
|
// Fetch server status to determine actual data source immediately.
|
|
this._detectServerSource();
|
|
};
|
|
|
|
this._ws.onmessage = (evt) => {
|
|
try {
|
|
const data = JSON.parse(evt.data);
|
|
this._handleData(data);
|
|
} catch (e) {
|
|
console.warn('[Sensing] Invalid message:', e.message);
|
|
}
|
|
};
|
|
|
|
this._ws.onerror = () => {
|
|
// onerror is always followed by onclose, so we handle reconnect there
|
|
};
|
|
|
|
this._ws.onclose = (evt) => {
|
|
console.info('[Sensing] Connection closed (code=%d)', evt.code);
|
|
this._ws = null;
|
|
if (evt.code !== 1000) {
|
|
this._scheduleReconnect();
|
|
} else {
|
|
this._setState('disconnected');
|
|
this._setDataSource('reconnecting');
|
|
}
|
|
};
|
|
}
|
|
|
|
_scheduleReconnect() {
|
|
if (this._reconnectAttempt >= MAX_RECONNECT_ATTEMPTS) {
|
|
console.warn('[Sensing] Max reconnect attempts (%d) reached, switching to simulation', MAX_RECONNECT_ATTEMPTS);
|
|
this._fallbackToSimulation();
|
|
return;
|
|
}
|
|
|
|
const delay = RECONNECT_DELAYS[Math.min(this._reconnectAttempt, RECONNECT_DELAYS.length - 1)];
|
|
this._reconnectAttempt++;
|
|
console.info('[Sensing] Reconnecting in %dms (attempt %d/%d)', delay, this._reconnectAttempt, MAX_RECONNECT_ATTEMPTS);
|
|
|
|
this._setState('reconnecting');
|
|
this._setDataSource('reconnecting');
|
|
|
|
this._reconnectTimer = setTimeout(() => {
|
|
this._reconnectTimer = null;
|
|
this._connect();
|
|
}, delay);
|
|
|
|
// Only start simulation after several failed attempts so a brief hiccup
|
|
// does not immediately switch the UI to "SIMULATED DATA".
|
|
if (this._reconnectAttempt >= SIM_FALLBACK_AFTER_ATTEMPTS && this._state !== 'simulated') {
|
|
this._fallbackToSimulation();
|
|
}
|
|
}
|
|
|
|
// ---- Simulation fallback -----------------------------------------------
|
|
|
|
_fallbackToSimulation() {
|
|
this._setState('simulated');
|
|
this._setDataSource('simulated');
|
|
if (this._simTimer) return; // already running
|
|
console.info('[Sensing] Running in simulation mode');
|
|
|
|
this._simTimer = setInterval(() => {
|
|
const data = this._generateSimulatedData();
|
|
this._handleData(data);
|
|
}, SIMULATION_INTERVAL);
|
|
}
|
|
|
|
_stopSimulation() {
|
|
if (this._simTimer) {
|
|
clearInterval(this._simTimer);
|
|
this._simTimer = null;
|
|
}
|
|
}
|
|
|
|
_generateSimulatedData() {
|
|
const t = Date.now() / 1000;
|
|
const baseRssi = -45;
|
|
const variance = 1.5 + Math.sin(t * 0.1) * 1.0;
|
|
const motionBand = 0.05 + Math.abs(Math.sin(t * 0.3)) * 0.15;
|
|
const breathBand = 0.03 + Math.abs(Math.sin(t * 0.05)) * 0.08;
|
|
const isPresent = variance > 0.8;
|
|
const isActive = motionBand > 0.12;
|
|
|
|
// Generate signal field
|
|
const gridSize = 20;
|
|
const values = [];
|
|
for (let iz = 0; iz < gridSize; iz++) {
|
|
for (let ix = 0; ix < gridSize; ix++) {
|
|
const cx = gridSize / 2, cy = gridSize / 2;
|
|
const dist = Math.sqrt((ix - cx) ** 2 + (iz - cy) ** 2);
|
|
let v = Math.max(0, 1 - dist / (gridSize * 0.7)) * 0.3;
|
|
// Body blob
|
|
const bx = cx + 3 * Math.sin(t * 0.2);
|
|
const by = cy + 2 * Math.cos(t * 0.15);
|
|
const bodyDist = Math.sqrt((ix - bx) ** 2 + (iz - by) ** 2);
|
|
if (isPresent) {
|
|
v += Math.exp(-bodyDist * bodyDist / 8) * (0.3 + motionBand * 3);
|
|
}
|
|
values.push(Math.min(1, Math.max(0, v + Math.random() * 0.05)));
|
|
}
|
|
}
|
|
|
|
return {
|
|
type: 'sensing_update',
|
|
timestamp: t,
|
|
source: 'simulated',
|
|
// Explicit machine-readable marker so the UI can always detect simulated
|
|
// frames regardless of which code path produced them.
|
|
_simulated: true,
|
|
nodes: [{
|
|
node_id: 1,
|
|
rssi_dbm: baseRssi + Math.sin(t * 0.5) * 3,
|
|
position: [2, 0, 1.5],
|
|
amplitude: [],
|
|
subcarrier_count: 0,
|
|
}],
|
|
features: {
|
|
mean_rssi: baseRssi + Math.sin(t * 0.5) * 3,
|
|
variance,
|
|
std: Math.sqrt(variance),
|
|
motion_band_power: motionBand,
|
|
breathing_band_power: breathBand,
|
|
dominant_freq_hz: 0.3 + Math.sin(t * 0.02) * 0.1,
|
|
change_points: Math.floor(Math.random() * 3),
|
|
spectral_power: motionBand + breathBand + Math.random() * 0.1,
|
|
range: variance * 3,
|
|
iqr: variance * 1.5,
|
|
skewness: (Math.random() - 0.5) * 0.5,
|
|
kurtosis: Math.random() * 2,
|
|
},
|
|
classification: {
|
|
motion_level: isActive ? 'active' : (isPresent ? 'present_still' : 'absent'),
|
|
presence: isPresent,
|
|
confidence: isPresent ? 0.75 + Math.random() * 0.2 : 0.5 + Math.random() * 0.3,
|
|
},
|
|
signal_field: {
|
|
grid_size: [gridSize, 1, gridSize],
|
|
values,
|
|
},
|
|
};
|
|
}
|
|
|
|
// ---- Server source detection -------------------------------------------
|
|
|
|
/**
|
|
* Fetch `/api/v1/status` to find out if the server is using real
|
|
* hardware or simulation. Called once on WebSocket open.
|
|
*/
|
|
async _detectServerSource() {
|
|
try {
|
|
const resp = await fetch('/api/v1/status');
|
|
if (resp.ok) {
|
|
const json = await resp.json();
|
|
this._applyServerSource(json.source);
|
|
} else {
|
|
// Can't reach status endpoint — assume live until first frame tells us
|
|
this._setDataSource('live');
|
|
}
|
|
} catch {
|
|
this._setDataSource('live');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Map a raw server source string to the UI data-source label.
|
|
*/
|
|
_applyServerSource(rawSource) {
|
|
this._serverSource = rawSource;
|
|
if (rawSource === 'esp32' || rawSource === 'wifi' || rawSource === 'live') {
|
|
this._setDataSource('live');
|
|
} else if (rawSource === 'simulated' || rawSource === 'simulate') {
|
|
this._setDataSource('server-simulated');
|
|
} else {
|
|
// Unknown source — show as server-simulated to be safe
|
|
this._setDataSource('server-simulated');
|
|
}
|
|
}
|
|
|
|
/** @return {string|null} Raw server source (e.g. "esp32", "simulated") */
|
|
get serverSource() {
|
|
return this._serverSource;
|
|
}
|
|
|
|
// ---- Data handling -----------------------------------------------------
|
|
|
|
_handleData(data) {
|
|
this._lastMessage = data;
|
|
|
|
// Track the server's source field from each frame so the UI
|
|
// can react if the server switches between esp32 ↔ simulated at runtime.
|
|
if (data.source && this._state === 'connected') {
|
|
const raw = data.source;
|
|
if (raw !== this._serverSource) {
|
|
this._applyServerSource(raw);
|
|
}
|
|
}
|
|
|
|
// Update RSSI history for sparkline
|
|
if (data.features && data.features.mean_rssi != null) {
|
|
this._rssiHistory.push(data.features.mean_rssi);
|
|
if (this._rssiHistory.length > this._maxHistory) {
|
|
this._rssiHistory.shift();
|
|
}
|
|
}
|
|
|
|
// Notify all listeners
|
|
for (const cb of this._listeners) {
|
|
try {
|
|
cb(data);
|
|
} catch (e) {
|
|
console.error('[Sensing] Listener error:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---- State management --------------------------------------------------
|
|
|
|
_setState(newState) {
|
|
if (newState === this._state) return;
|
|
this._state = newState;
|
|
for (const cb of this._stateListeners) {
|
|
try { cb(newState); } catch (e) { /* ignore */ }
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the dataSource label and notify state listeners so the UI can
|
|
* react without needing a separate subscription.
|
|
* @param {'live'|'server-simulated'|'reconnecting'|'simulated'} source
|
|
*/
|
|
_setDataSource(source) {
|
|
if (source === this._dataSource) return;
|
|
this._dataSource = source;
|
|
// Re-use the same state-listener channel — listeners receive the
|
|
// connection state but can read dataSource via service.dataSource.
|
|
for (const cb of this._stateListeners) {
|
|
try { cb(this._state); } catch (e) { /* ignore */ }
|
|
}
|
|
}
|
|
|
|
_clearTimers() {
|
|
this._stopSimulation();
|
|
if (this._reconnectTimer) {
|
|
clearTimeout(this._reconnectTimer);
|
|
this._reconnectTimer = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Singleton
|
|
export const sensingService = new SensingService();
|