mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-11-14 10:42:45 -05:00
270 lines
19 KiB
React
270 lines
19 KiB
React
// One service snapshot supplies this entire card. Favorites never leave settings.
|
|
import { useEffect, useState } from 'react';
|
|
import { useSessionSelector } from '../../context/SessionContext.jsx';
|
|
import { isFeatureEnabled } from '../../lib/features.js';
|
|
import { useSocket } from '../../context/SocketContext.jsx';
|
|
import { useSettingsNamespace } from '../../settings/index.js';
|
|
import CardFrame from '../CardFrame/index.jsx';
|
|
import { fieldClass } from './constants.js';
|
|
|
|
const display = (value) => value == null ? 'Unavailable' : String(value);
|
|
const bytes = (value) => value == null ? 'Unavailable' : `${(value / 1024 ** 2).toFixed(1)} MiB`;
|
|
const time = (value) => value ? new Date(value).toLocaleString() : 'Unavailable';
|
|
const age = (now, value) => value ? `${Math.max(0, (now - value) / 1000).toFixed(1)} s` : 'Unavailable';
|
|
|
|
function Row({ label, children }) {
|
|
return <div className="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 py-0.5">
|
|
<dt className="text-slate-400">{label}</dt>
|
|
<dd className="min-w-0 break-words text-right text-slate-200">{children}</dd>
|
|
</div>;
|
|
}
|
|
|
|
function Group({ title, children }) {
|
|
return <section className="surface-muted min-w-0 space-y-1">
|
|
<h4 className="font-semibold text-slate-200">{title}</h4>{children}
|
|
</section>;
|
|
}
|
|
|
|
const actionNames = { motors: 'Brushes / vacuum', servo: 'Camera tilt', headlight: 'Headlight',
|
|
laser: 'Laser', horn: 'Horn', peripheral: 'Accessory', song: 'Beeper', raw: 'Recorded control' };
|
|
|
|
function WheelMeter({ label, speed }) {
|
|
const known = Number.isFinite(speed);
|
|
const value = known ? Math.max(-500, Math.min(500, speed)) : 0;
|
|
return <div className="surface-muted min-w-0 space-y-1">
|
|
<div className="flex justify-between gap-2 text-xs"><span>{label}</span><span>{known ? `${value} mm/s` : 'Waiting'}</span></div>
|
|
<div role="meter" aria-label={label} aria-valuemin={-500} aria-valuemax={500} aria-valuenow={value}
|
|
aria-valuetext={known ? `${value} millimeters per second` : 'Unavailable'} className="relative h-3 overflow-hidden rounded bg-slate-800">
|
|
<div className={`absolute inset-y-0 rounded ${value < 0 ? 'bg-amber-400' : 'bg-sky-400'}`}
|
|
style={{ left: `${value < 0 ? 50 + value / 10 : 50}%`, width: `${Math.abs(value) / 10}%` }} />
|
|
<div className="absolute inset-y-0 left-1/2 w-px bg-slate-400" />
|
|
</div>
|
|
<div className="flex justify-between text-xs text-slate-500"><span>Reverse</span><span>Forward</span></div>
|
|
</div>;
|
|
}
|
|
|
|
export default function VipRoverLearningCard() {
|
|
const enabled = useSessionSelector((state) => isFeatureEnabled(state, 'roverLearning') && Boolean(state.session?.isVerified));
|
|
const roverId = useSessionSelector((state) => state.session?.assignment?.roverId || null);
|
|
if (!enabled) return null;
|
|
return <LearningCard roverId={roverId} />;
|
|
}
|
|
|
|
function LearningCard({ roverId }) {
|
|
const socket = useSocket();
|
|
const [snapshot, setSnapshot] = useState(null);
|
|
const [selectedId, setSelectedId] = useState('');
|
|
const [detailsOpen, setDetailsOpen] = useState(false);
|
|
const [thresholdDraft, setThresholdDraft] = useState(null);
|
|
const [copyStatus, setCopyStatus] = useState('');
|
|
const [working, setWorking] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const { value: settings, save } = useSettingsNamespace('roverLearning', { favorites: [] });
|
|
const favorites = Array.isArray(settings?.favorites) ? settings.favorites : [];
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
const receive = (state) => { if (active) setSnapshot(state); };
|
|
const subscribe = () => {
|
|
if (!socket.connected) return;
|
|
socket.timeout(5000).emit('roverLearning:subscribe', { roverId, live: detailsOpen }, (failure, response) => {
|
|
if (!failure && response?.state) receive(response.state);
|
|
});
|
|
};
|
|
const disconnected = () => receive(null);
|
|
socket.on('roverLearning:state', receive);
|
|
socket.on('connect', subscribe);
|
|
socket.on('disconnect', disconnected);
|
|
subscribe();
|
|
// A config enable can mount this card before async service startup has
|
|
// attached handlers. Resubscribe periodically without another data API.
|
|
const timer = setInterval(subscribe, 10000);
|
|
return () => {
|
|
active = false;
|
|
clearInterval(timer);
|
|
socket.off('roverLearning:state', receive);
|
|
socket.off('connect', subscribe);
|
|
socket.off('disconnect', disconnected);
|
|
socket.emit('roverLearning:unsubscribe');
|
|
};
|
|
}, [socket, roverId, detailsOpen]);
|
|
|
|
const state = snapshot?.roverId === roverId ? snapshot : null;
|
|
const models = [...(state?.models || [])].sort((a, b) => Number(favorites.includes(b.id)) - Number(favorites.includes(a.id)) || Number(b.id === 'latest') - Number(a.id === 'latest') || b.createdAt - a.createdAt);
|
|
const chosen = models.find((model) => model.id === selectedId) || models.find((model) => model.compatible) || models[0];
|
|
const session = state?.session;
|
|
const training = state?.training;
|
|
const recording = state?.recording;
|
|
const limits = state?.limits;
|
|
const now = state?.updatedAt || 0;
|
|
|
|
const act = (action, value) => {
|
|
setWorking(true);
|
|
setError('');
|
|
socket.timeout(10000).emit('roverLearning:action', { action, value, roverId, modelId: chosen?.id }, (failure, response) => {
|
|
setWorking(false);
|
|
if (action === 'threshold') setThresholdDraft(null);
|
|
if (failure || response?.error) setError(response?.error || 'The server did not respond. Check the controller status before trying again.');
|
|
else if (response?.state) setSnapshot(response.state);
|
|
});
|
|
};
|
|
const commitThreshold = (event) => {
|
|
const value = Number(event.currentTarget.value);
|
|
if (!working && state?.control?.canAdjust && value !== session?.threshold) act('threshold', value);
|
|
};
|
|
const copyDiagnostics = async () => {
|
|
try {
|
|
if (!state?.diagnostics) return;
|
|
await navigator.clipboard.writeText(JSON.stringify(state.diagnostics));
|
|
setCopyStatus('Diagnostics copied');
|
|
} catch { setCopyStatus('Clipboard unavailable. Select and copy the report below.'); }
|
|
};
|
|
const favorite = () => {
|
|
if (!chosen) return;
|
|
save((current) => {
|
|
const ids = Array.isArray(current?.favorites) ? current.favorites : [];
|
|
return { ...current, favorites: ids.includes(chosen.id) ? ids.filter((id) => id !== chosen.id) : [...ids, chosen.id] };
|
|
});
|
|
};
|
|
|
|
return <CardFrame title="Rover learning" className="w-full" bodyClassName="text-sm text-slate-300">
|
|
<div className="space-y-2">
|
|
<p className="text-center text-xs text-slate-400">
|
|
{session ? `${session.modelName} · ${session.status}` : state ? 'Stopped' : 'Waiting for rover learning status…'}
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-1">
|
|
<select aria-label="Rover model" className={fieldClass} value={chosen?.id || ''} onChange={(event) => setSelectedId(event.target.value)} disabled={working || !models.length}>
|
|
{!models.length && <option value="">No published models yet</option>}
|
|
{models.map((model) => <option key={model.id} value={model.id}>{favorites.includes(model.id) ? '★ ' : ''}{model.name}{model.experimental ? ' (experimental)' : ''}{model.compatible ? '' : model.formatVersion !== 2 ? ' (older model format)' : ' (incompatible)'}</option>)}
|
|
</select>
|
|
<button type="button" className="button-dark text-sm disabled:opacity-50" aria-pressed={Boolean(chosen && favorites.includes(chosen.id))} disabled={!chosen} onClick={favorite}>
|
|
{chosen && favorites.includes(chosen.id) ? '★ Favorite' : '☆ Favorite'}
|
|
</button>
|
|
</div>
|
|
<div className="flex justify-center gap-1">
|
|
<button type="button" className="button-dark text-sm disabled:opacity-50" disabled={working || !state?.control?.canStart || !chosen?.compatible} onClick={() => act('start')}>Start</button>
|
|
<button type="button" className="button-dark text-sm disabled:opacity-50" disabled={working || !state?.control?.canStop} onClick={() => act('stop')}>Stop</button>
|
|
</div>
|
|
{state?.control?.canSnapshot && <div className="text-center">
|
|
<button type="button" className="button-dark text-sm disabled:opacity-50" disabled={working} onClick={() => act('snapshot')}>Save learner snapshot</button>
|
|
</div>}
|
|
{session && <section className="space-y-2" aria-label="Live model actions">
|
|
<p className="text-center text-xs text-sky-300">{session.predictionStatus || 'Waiting for fresh video and sensors'}</p>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<WheelMeter label="Predicted left wheel" speed={session.wheelSpeeds?.[0]} />
|
|
<WheelMeter label="Predicted right wheel" speed={session.wheelSpeeds?.[1]} />
|
|
</div>
|
|
<label className="surface-muted block space-y-1 text-xs">
|
|
<span className="flex justify-between gap-2"><span>Accessory action threshold</span><span>{(thresholdDraft ?? session.threshold ?? .7).toFixed(2)}</span></span>
|
|
<input type="range" min="0.05" max="0.99" step="0.01" className="w-full accent-sky-400"
|
|
value={thresholdDraft ?? session.threshold ?? .7} disabled={working || !state?.control?.canAdjust}
|
|
onChange={(event) => setThresholdDraft(Number(event.target.value))}
|
|
onPointerUp={commitThreshold} onKeyUp={commitThreshold} onBlur={commitThreshold} />
|
|
</label>
|
|
<div className="grid max-h-52 grid-cols-1 gap-1 overflow-y-auto @[28rem]:grid-cols-2">
|
|
{session.proposals?.map((proposal) => {
|
|
const submission = session.submissions?.find((item) => item.command.type === proposal.command.type
|
|
&& (proposal.command.type !== 'peripheral' || (item.command.peripheral?.id === proposal.command.peripheral?.id
|
|
&& item.command.peripheral?.control === proposal.command.peripheral?.control)));
|
|
const status = proposal.reason === 'Proposed' && submission ? submission.result : proposal.reason;
|
|
return <div key={proposal.slot} className="surface-muted space-y-1 text-xs">
|
|
<div className="flex justify-between gap-2"><span>{actionNames[proposal.command.type] || proposal.command.type}{proposal.command.type === 'peripheral' ? ` · ${proposal.command.peripheral?.id} / ${proposal.command.peripheral?.control}` : ''}</span><span>{proposal.score.toFixed(2)}</span></div>
|
|
<div className="h-1.5 overflow-hidden rounded bg-slate-800"><div className={status === 'issued' ? 'h-full bg-emerald-400' : 'h-full bg-slate-500'} style={{ width: `${proposal.score * 100}%` }} /></div>
|
|
<p className={status === 'issued' ? 'text-emerald-300' : 'text-slate-400'}>{status === 'issued' ? 'Submitted' : status}</p>
|
|
</div>;
|
|
})}
|
|
</div>
|
|
</section>}
|
|
{state?.control?.reason && <p className="text-center text-xs text-slate-400">{state.control.reason}</p>}
|
|
<p className="text-center text-xs text-slate-400">Recording: {recording ? recording.paused ? 'paused for disk space' : `${recording.sessions.filter((item) => item.video === 'Recording human driving').length} driving · ${recording.sessions.filter((item) => item.video === 'Dock lead-in buffer').length} dock buffer(s)` : 'unavailable'} · Training: {training?.status || 'unavailable'}</p>
|
|
{(error || state?.catalogError) && <p role="alert" className="break-words text-xs text-amber-300">{error || state.catalogError}</p>}
|
|
<details className="surface-muted text-xs" onToggle={(event) => setDetailsOpen(event.currentTarget.open)}>
|
|
<summary className="cursor-pointer py-1 font-semibold text-slate-200">System details</summary>
|
|
<div className="my-2 flex flex-wrap items-center gap-2">
|
|
<button type="button" className="button-dark disabled:opacity-50" disabled={!state?.diagnostics} onClick={copyDiagnostics}>Copy diagnostics</button>
|
|
<span role="status">{copyStatus}</span>
|
|
</div>
|
|
{copyStatus.startsWith('Clipboard unavailable') && <textarea readOnly aria-label="Diagnostics report" className="w-full" rows={4} value={JSON.stringify(state?.diagnostics || {})} onFocus={(event) => event.target.select()} />}
|
|
<div className="mt-2 grid min-w-0 grid-cols-1 gap-2 @[36rem]:grid-cols-2">
|
|
<Group title="Recording and storage"><dl>
|
|
<Row label="Recording size">{bytes(recording?.bytes)}</Row>
|
|
<Row label="Disk budget">{limits ? `${limits.recording.maxGiB} GiB` : 'Unavailable'}</Row>
|
|
<Row label="Free disk space">{bytes(recording?.freeBytes)}</Row>
|
|
<Row label="Minimum free space">{limits ? `${limits.recording.minimumFreeGiB} GiB` : 'Unavailable'}</Row>
|
|
<Row label="Session rotation">{limits ? `${limits.recording.sessionSeconds} s` : 'Unavailable'}</Row>
|
|
<Row label="Buffered events">{bytes(recording?.pendingBytes)}</Row>
|
|
<Row label="Dropped buffered events">{display(recording?.droppedPending)}</Row>
|
|
</dl>{recording?.sessions.map((item) => <div key={item.id} className="mt-1 border-t border-slate-700 pt-1">
|
|
<p>{item.roverId} · {item.video} · {age(now, item.startedAt)}</p>
|
|
<p>Dropped events: {item.droppedEvents}</p>{item.error && <p className="text-amber-300">{item.error}</p>}
|
|
</div>)}</Group>
|
|
<Group title="Dataset and training"><dl>
|
|
<Row label="Status">{training?.status || 'Unavailable'}</Row>
|
|
<Row label="Steps">{display(training?.steps)}</Row>
|
|
<Row label="Examples processed">{display(training?.examples)}</Row>
|
|
<Row label="Wheel / event / accessory losses">{training?.losses ? `${training.losses.wheels.toFixed(4)} / ${training.losses.events.toFixed(4)} / ${training.losses.accessoryValues.toFixed(4)}` : 'Unavailable'}</Row>
|
|
<Row label="Wheel error / stopped baseline / previous speed baseline">{training?.evaluation?.wheelMaeMmPerSecond == null ? 'Unavailable' : `${training.evaluation.wheelMaeMmPerSecond.toFixed(1)} / ${training.evaluation.stoppedBaselineMaeMmPerSecond.toFixed(1)} / ${training.evaluation.previousSpeedBaselineMaeMmPerSecond.toFixed(1)} mm/s`}</Row>
|
|
<Row label="Training loss">{training?.loss == null ? 'Unavailable' : training.loss.toFixed(4)}</Row>
|
|
<Row label="Current job age">{training?.status === 'training' ? age(now, training.startedAt) : 'Not running'}</Row>
|
|
<Row label="Next attempt">{time(training?.nextAttemptAt)}</Row>
|
|
<Row label="Visited / skipped sessions">{training ? `${training.visitedSessions} / ${training.skippedSessions}` : 'Unavailable'}</Row>
|
|
<Row label="Sessions protected from retention">{display(training?.leasedSessions)}</Row>
|
|
<Row label="Last windows available / sampled">{training?.lastAvailableWindows == null ? 'Unavailable' : `${training.lastAvailableWindows} / ${training.lastSampledWindows}`}</Row>
|
|
<Row label="CPU threads / batch size">{limits ? `${limits.training.threads} / ${limits.training.batchSize}` : 'Unavailable'}</Row>
|
|
<Row label="Samples / passes per job">{limits ? `${limits.training.maxSamples} / ${limits.training.passesPerJob}` : 'Unavailable'}</Row>
|
|
<Row label="Distinct training minutes">{training?.publication?.distinctMinutes?.toFixed(1) ?? 'Unavailable'}</Row>
|
|
<Row label="Latest minimum / new minutes">{limits ? `${limits.training.minimumDrivingMinutes} / ${limits.training.newDrivingMinutesPerModel}` : 'Unavailable'}</Row>
|
|
<Row label="Latest update status">{training?.publication?.reason || 'Collecting data'}</Row>
|
|
<Row label="Held-out evaluation">{training?.evaluation?.status || 'Waiting for held-out data'}</Row>
|
|
<Row label="Held-out precision / recall">{training?.evaluation?.precision == null ? 'Unavailable' : `${training.evaluation.precision.toFixed(3)} / ${training.evaluation.recall.toFixed(3)}`}</Row>
|
|
<Row label="Steps between Latest updates">{display(limits?.training.checkpointEverySteps)}</Row>
|
|
</dl>{training?.error && <p className="break-words text-amber-300">{training.error}</p>}
|
|
{training?.reason && <p>{training.reason}</p>}
|
|
{training?.rejectionReasons?.map((reason) => <p className="break-words text-amber-300" key={reason}>{reason}</p>)}
|
|
</Group>
|
|
<Group title="Selected model"><dl>
|
|
<Row label="Name">{chosen?.name || 'None'}</Row>
|
|
<Row label="Created">{time(chosen?.createdAt)}</Row>
|
|
<Row label="Size">{bytes(chosen?.weightBytes)}</Row>
|
|
<Row label="Parameters">{chosen?.parameters?.toLocaleString() || 'Unavailable'}</Row>
|
|
<Row label="Steps / examples">{chosen ? `${chosen.trainingSteps} / ${chosen.examplesProcessed}` : 'Unavailable'}</Row>
|
|
<Row label="Control shapes">{display(chosen?.controls)}</Row>
|
|
<Row label="Evaluation">{chosen?.evaluation || 'Unavailable'}</Row>
|
|
<Row label="Distinct training minutes">{chosen?.distinctMinutes?.toFixed(1) ?? 'Unavailable'}</Row>
|
|
<Row label="Held-out precision / recall">{chosen?.validation?.precision == null ? 'Unavailable' : `${chosen.validation.precision.toFixed(3)} / ${chosen.validation.recall.toFixed(3)}`}</Row>
|
|
<Row label="Available models">{models.length}</Row>
|
|
</dl></Group>
|
|
<Group title="Live controller"><dl>
|
|
<Row label="Latest prediction">{session?.predictionStatus || 'Unavailable'}</Row>
|
|
<Row label="Action threshold">{display(session?.threshold)}</Row>
|
|
<Row label="State">{session?.status || 'Stopped'}</Row>
|
|
<Row label="Started by">{session?.startedBy || 'Unavailable'}</Row>
|
|
<Row label="Duration">{age(now, session?.startedAt)}</Row>
|
|
<Row label="Inference time">{session?.latencyMs == null ? 'Unavailable' : `${session.latencyMs.toFixed(1)} ms`}</Row>
|
|
<Row label="Video age">{age(now, session?.frameAt)}</Row>
|
|
<Row label="Sensor age">{age(now, session?.sensorAt)}</Row>
|
|
<Row label="Last command result">{session?.lastResult || 'Unavailable'}</Row>
|
|
<Row label="CPU threads">{display(limits?.driving.threads)}</Row>
|
|
</dl>{session?.lastAction && <pre className="mt-1 whitespace-pre-wrap break-all text-slate-400">{JSON.stringify(session.lastAction.command, null, 2)}</pre>}
|
|
{session?.proposals?.length > 0 && <div className="mt-2 max-h-72 space-y-1 overflow-auto">
|
|
{session.proposals.map((proposal) => <div key={proposal.slot} className="border-t border-slate-700 py-1">
|
|
<p>{proposal.command.type} · score {proposal.score.toFixed(3)} · {proposal.reason}</p>
|
|
<pre className="whitespace-pre-wrap break-all text-slate-400">{JSON.stringify(proposal.command)}</pre>
|
|
</div>)}
|
|
</div>}
|
|
{session?.submissions?.map((item, index) => <p key={index}>Submitted {item.command.type}: {item.result}</p>)}
|
|
{session?.stopReason && <p>{session.stopReason}</p>}
|
|
</Group>
|
|
<div className="@[36rem]:col-span-2"><Group title="Recent activity">
|
|
<ul className="max-h-56 space-y-1 overflow-y-auto">
|
|
{state?.activity?.map((entry, index) => <li key={`${entry.at}-${index}`} className="break-words">
|
|
<span className="text-slate-500">{time(entry.at)}</span> · {entry.message}{entry.roverId ? ` · ${entry.roverId}` : ''}{entry.detail ? ` · ${entry.detail}` : ''}
|
|
</li>)}
|
|
</ul>
|
|
</Group></div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</CardFrame>;
|
|
}
|