import { useState, useEffect, useRef, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { LineChart, Line, XAxis, YAxis, ResponsiveContainer, AreaChart, Area } from 'recharts'; import { Mic, MicOff, Video, VideoOff, Settings, Zap, Shield, BarChart3 } from 'lucide-react'; const AdvancedVideoAnalysis = () => { const [isAnalyzing, setIsAnalyzing] = useState(false); const [currentAnalysis, setCurrentAnalysis] = useState(null); const [analysisHistory, setAnalysisHistory] = useState([]); const [isConnected, setIsConnected] = useState(false); const [connectionQuality, setConnectionQuality] = useState('good'); const [modelVersion, setModelVersion] = useState('v2.0.0'); const [privacyMode, setPrivacyMode] = useState(false); const videoRef = useRef(null); const canvasRef = useRef(null); const wsRef = useRef(null); const streamRef = useRef(null); const sessionIdRef = useRef(`session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`); // WebRTC and WebSocket setup const initializeWebRTC = useCallback(async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } }, audio: { sampleRate: 16000, channelCount: 1, echoCancellation: true, noiseSuppression: true } }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; } // Initialize WebSocket for real-time analysis initializeWebSocket(); setIsConnected(true); } catch (error) { console.error('WebRTC initialization failed:', error); setConnectionQuality('error'); } }, []); const initializeWebSocket = () => { const ws = new WebSocket(`ws://localhost:8000/ws/analyze/${sessionIdRef.current}`); ws.onopen = () => { console.log('WebSocket connected'); setConnectionQuality('good'); }; ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.error) { console.error('Analysis error:', data.error); setConnectionQuality('error'); } else { setCurrentAnalysis(data); setAnalysisHistory(prev => [...prev.slice(-99), data]); // Keep last 100 } }; ws.onclose = () => { console.log('WebSocket disconnected'); setIsConnected(false); setConnectionQuality('disconnected'); }; ws.onerror = (error) => { console.error('WebSocket error:', error); setConnectionQuality('error'); }; wsRef.current = ws; }; const startAnalysis = async () => { setIsAnalyzing(true); await initializeWebRTC(); }; const stopAnalysis = () => { setIsAnalyzing(false); // Stop WebRTC stream if (streamRef.current) { streamRef.current.getTracks().forEach(track => track.stop()); } // Close WebSocket if (wsRef.current) { wsRef.current.close(); } setIsConnected(false); setCurrentAnalysis(null); }; // Real-time frame capture and streaming useEffect(() => { if (!isAnalyzing || !videoRef.current || !wsRef.current) return; const captureFrame = () => { if (!isAnalyzing) return; const canvas = canvasRef.current; const video = videoRef.current; const ctx = canvas.getContext('2d'); if (video.videoWidth > 0 && video.videoHeight > 0) { canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0); // Convert to blob and send via WebSocket canvas.toBlob((blob) => { if (blob && wsRef.current && wsRef.current.readyState === WebSocket.OPEN) { const reader = new FileReader(); reader.onload = () => { const data = { image: reader.result, timestamp: Date.now(), sessionId: sessionIdRef.current }; wsRef.current.send(JSON.stringify(data)); }; reader.readAsDataURL(blob); } }, 'image/jpeg', 0.8); } // Continue capturing at ~10 FPS setTimeout(captureFrame, 100); }; captureFrame(); return () => { // Cleanup }; }, [isAnalyzing]); // Connection quality monitoring useEffect(() => { const checkConnection = () => { if (wsRef.current) { const state = wsRef.current.readyState; if (state === WebSocket.CLOSED || state === WebSocket.CLOSING) { setConnectionQuality('disconnected'); } else if (state === WebSocket.CONNECTING) { setConnectionQuality('connecting'); } } }; const interval = setInterval(checkConnection, 1000); return () => clearInterval(interval); }, []); return (
{/* Advanced Header */}
🚀

EMOTIA Advanced

Real-time Multi-Modal Intelligence

{/* Connection Status */}
{connectionQuality}
{/* Model Version */}
Model: {modelVersion}
{/* Privacy Mode */} {/* Control Buttons */}
{isAnalyzing ? 'Stop Analysis' : 'Start Advanced Analysis'}
{/* Main Dashboard */}
{/* Video Feed Panel */}

Live Video Feed

{/* Real-time Analytics */}
{/* Emotion Timeline */}

Real-time Emotion Timeline

 {/* Current Analysis */} {currentAnalysis && ( {/* Emotion Analysis */}

Emotion Analysis

{currentAnalysis.emotion?.probabilities?.map((prob, idx) => (
{['angry', 'disgust', 'fear', 'happy', 'sad', 'surprise', 'neutral'][idx]}
{(prob * 100).toFixed(1)}%
))}
{/* Intent Analysis */}

Intent Analysis

{currentAnalysis.intent?.probabilities?.map((prob, idx) => (
{['agreement', 'confusion', 'hesitation', 'confidence', 'neutral'][idx]}
{(prob * 100).toFixed(1)}%
))}
)} {/* Modality Contributions */} {currentAnalysis?.modality_importance && (

AI Decision Factors

{['Vision', 'Audio', 'Text'].map((modality, idx) => (
{modality === 'Vision' ? '👁️' : modality === 'Audio' ? '🎵' : '💬'}
{modality}
{(currentAnalysis.modality_importance[idx] * 100).toFixed(1)}%
))}
)}
{/* Footer */}
); }; export default AdvancedVideoAnalysis;