Spaces:
Running
Running
| "use client"; | |
| import { useCallback, useEffect, useRef, useState } from "react"; | |
| import { Card, CardHeader, CardTitle } from "@/components/ui"; | |
| import { useSettings } from "@/context/SettingsProvider"; | |
| import { useEmotionLogger } from "@/hooks/useEmotionLogger"; | |
| import { useFaceTracking } from "@/hooks/useFaceTracking"; | |
| import { useMediaStream } from "@/hooks/useMediaStream"; | |
| import { useTelemetryLog } from "@/hooks/useTelemetryLog"; | |
| import { formatDuration, formatTime } from "@/lib/format"; | |
| import { CameraFeed } from "./CameraFeed"; | |
| import { EmotionDisplay } from "./EmotionDisplay"; | |
| import { FaceOverlayCanvas } from "./FaceOverlayCanvas"; | |
| import { StatsPanel } from "./StatsPanel"; | |
| import { TelemetryConsole } from "./TelemetryConsole"; | |
| import { TrackingControls } from "./TrackingControls"; | |
| /** | |
| * The tracking tab. | |
| * | |
| * Owns only what coordinates its children: whether tracking is on. Per-frame data | |
| * never passes through here -- the canvas and the stats panel subscribe to it | |
| * directly, which is what keeps this component from re-rendering sixty times a | |
| * second along with everything below it. | |
| */ | |
| export function TrackingView() { | |
| const { settings } = useSettings(); | |
| const [isTracking, setIsTracking] = useState(false); | |
| const { videoRef, state: cameraState, error: cameraError, start, stop } = useMediaStream(); | |
| const { lines, push } = useTelemetryLog(); | |
| const { currentEmotion, faceDetected, fps, isLoaded, loadError, subscribe } = useFaceTracking( | |
| videoRef, | |
| isTracking && cameraState === "ready", | |
| ); | |
| const { lastLog, logError, connectionStatus, queueCount } = useEmotionLogger( | |
| currentEmotion, | |
| isTracking && cameraState === "ready", | |
| ); | |
| // Telemetry, driven by state changes rather than by eight separate effects in | |
| // the root component. | |
| const previousEmotion = useRef(currentEmotion); | |
| useEffect(() => { | |
| if (!isTracking) return; | |
| if (previousEmotion.current === currentEmotion) return; | |
| previousEmotion.current = currentEmotion; | |
| push(`Expression changed to ${currentEmotion}`); | |
| }, [currentEmotion, isTracking, push]); | |
| useEffect(() => { | |
| if (isLoaded) push("Face tracking model ready"); | |
| }, [isLoaded, push]); | |
| useEffect(() => { | |
| if (loadError) push(`Model error: ${loadError}`); | |
| }, [loadError, push]); | |
| useEffect(() => { | |
| if (cameraError) push(`Camera error: ${cameraError}`); | |
| }, [cameraError, push]); | |
| useEffect(() => { | |
| if (lastLog) push(`Logged ${lastLog.dominant_emotion} for ${lastLog.duration_seconds}s`); | |
| }, [lastLog, push]); | |
| useEffect(() => { | |
| if (logError) push(`Sync issue: ${logError}`); | |
| }, [logError, push]); | |
| const handleStart = useCallback(async () => { | |
| push("Starting camera"); | |
| await start(); | |
| setIsTracking(true); | |
| }, [start, push]); | |
| const handleStop = useCallback(() => { | |
| setIsTracking(false); | |
| // Releases the camera tracks, so the indicator light actually goes out. | |
| stop(); | |
| push("Tracking stopped, camera released"); | |
| }, [stop, push]); | |
| return ( | |
| <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"> | |
| <div className="flex flex-col gap-4"> | |
| <CameraFeed | |
| videoRef={videoRef} | |
| state={cameraState} | |
| error={cameraError} | |
| onRetry={handleStart} | |
| > | |
| <FaceOverlayCanvas | |
| videoRef={videoRef} | |
| subscribe={subscribe} | |
| active={isTracking && isLoaded} | |
| emotion={currentEmotion} | |
| faceDetected={faceDetected} | |
| /> | |
| {settings.showScannerGrid && isTracking && ( | |
| <div | |
| aria-hidden="true" | |
| className="pointer-events-none absolute inset-0 opacity-20" | |
| style={{ | |
| backgroundImage: | |
| "linear-gradient(rgba(96,165,250,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.35) 1px, transparent 1px)", | |
| backgroundSize: "40px 40px", | |
| }} | |
| /> | |
| )} | |
| </CameraFeed> | |
| <TrackingControls | |
| isTracking={isTracking} | |
| canStart={isLoaded && cameraState !== "requesting"} | |
| starting={cameraState === "requesting"} | |
| onStart={handleStart} | |
| onStop={handleStop} | |
| syncIntervalMs={settings.syncIntervalMs} | |
| connectionStatus={connectionStatus} | |
| queueCount={queueCount} | |
| /> | |
| {loadError && ( | |
| <p role="alert" className="text-danger text-sm"> | |
| {loadError} | |
| </p> | |
| )} | |
| {/* Surfaced rather than silently dropped: the previous root component | |
| destructured logError and never rendered it. */} | |
| {logError && ( | |
| <p role="status" className="text-warning text-sm"> | |
| {logError} | |
| </p> | |
| )} | |
| </div> | |
| <div className="flex flex-col gap-4"> | |
| <EmotionDisplay emotion={currentEmotion} faceDetected={faceDetected} /> | |
| <StatsPanel subscribe={subscribe} fps={fps} /> | |
| <Card padding="sm"> | |
| <CardHeader className="mb-2"> | |
| <CardTitle className="text-sm">Last entry</CardTitle> | |
| </CardHeader> | |
| {lastLog ? ( | |
| <div className="flex flex-col gap-1"> | |
| <p className="text-content-primary text-sm font-medium">{lastLog.dominant_emotion}</p> | |
| <p className="text-content-muted text-xs"> | |
| {formatDuration(lastLog.duration_seconds)} · {formatTime(lastLog.queued_at)} | |
| </p> | |
| </div> | |
| ) : ( | |
| <p className="text-content-muted text-xs">Nothing logged yet.</p> | |
| )} | |
| </Card> | |
| {settings.showTerminal && <TelemetryConsole lines={lines} />} | |
| </div> | |
| </div> | |
| ); | |
| } | |