import { useState, useRef, useEffect, useCallback } from "react"; import { Camera, Play, RotateCcw, Volume2, VolumeX, Sparkles, CheckCircle2, AlertCircle, Timer, Award, Video, VideoOff, Flame, Zap, Maximize2, Minimize2, Activity, Scale, Compass, X, } from "lucide-react"; import { ActionButton, Card, Pill, ProgressBar } from "./ui-kit"; import { offlineDB } from "@/lib/offline-db"; import { getUserProfile } from "@/lib/user-profile"; export interface YogaPoseDef { id: string; name: string; sanskritName: string; category: "Standing" | "Balance" | "Strengthening" | "Flexibility"; difficulty: "Easy" | "Medium" | "Hard"; targetHoldSeconds: number; description: string; hindiInstruction: string; targetAngles: { leftElbow?: number; rightElbow?: number; leftShoulder?: number; rightShoulder?: number; leftKnee?: number; rightKnee?: number; leftHip?: number; rightHip?: number; }; keyCues: string[]; } export const YOGA_POSES: YogaPoseDef[] = [ { id: "warrior2", name: "Warrior II", sanskritName: "Virabhadrasana II", category: "Standing", difficulty: "Medium", targetHoldSeconds: 20, description: "Front knee bent at 90°, arms outstretched parallel to the floor, gaze forward.", hindiInstruction: "Aage ka ghutna 90 degree par modein, dono haathon ko seedha phailayein.", targetAngles: { leftKnee: 90, rightKnee: 175, leftShoulder: 90, rightShoulder: 90, leftElbow: 180, rightElbow: 180, }, keyCues: ["Front knee 90° over ankle", "Arms parallel to ground", "Torso upright centered"], }, { id: "treepose", name: "Tree Pose", sanskritName: "Vrikshasana", category: "Balance", difficulty: "Easy", targetHoldSeconds: 15, description: "Stand tall on one leg, place the other foot on inner thigh or calf, hands in prayer.", hindiInstruction: "Ek pair par santulan banayein, doosra pair thigh par rakhein aur haath jodein.", targetAngles: { leftKnee: 180, rightKnee: 45, leftHip: 175, rightHip: 130, }, keyCues: [ "Standing leg grounded & straight", "Bent knee opened wide", "Hands at chest or raised", ], }, { id: "chairpose", name: "Chair Pose", sanskritName: "Utkatasana", category: "Strengthening", difficulty: "Medium", targetHoldSeconds: 15, description: "Bend knees deeply as if sitting in an imaginary chair, raise arms overhead.", hindiInstruction: "Kursi par baithne jaise ghutne modein, haath upar uthayein.", targetAngles: { leftKnee: 95, rightKnee: 95, leftHip: 95, rightHip: 95, leftShoulder: 160, rightShoulder: 160, }, keyCues: ["Knees behind toes", "Thighs parallel to floor", "Chest lifted & spine long"], }, { id: "tpose", name: "Mountain & T-Pose", sanskritName: "Tadasana", category: "Standing", difficulty: "Easy", targetHoldSeconds: 15, description: "Stand firm with feet hip-width, arms extended straight sideways at shoulder height.", hindiInstruction: "Seedhe khade hokar dono haath kandho ki unchai par seedhe phailayein.", targetAngles: { leftShoulder: 90, rightShoulder: 90, leftElbow: 180, rightElbow: 180, leftKnee: 180, rightKnee: 180, }, keyCues: ["Arms straight like wings", "Shoulders relaxed down", "Spine tall and balanced"], }, { id: "downwarddog", name: "Downward-Facing Dog", sanskritName: "Adho Mukha Svanasana", category: "Flexibility", difficulty: "Medium", targetHoldSeconds: 20, description: "Form an inverted 'V' shape with hips pushed up and back, heels pressing down.", hindiInstruction: "Ulta 'V' aakar banayein, kamar upar uthayein aur haath jameen par tikaayein.", targetAngles: { leftHip: 75, rightHip: 75, leftKnee: 175, rightKnee: 175, leftShoulder: 165, rightShoulder: 165, }, keyCues: ["Push hips high to sky", "Arms straight and strong", "Relax head and neck"], }, { id: "cobrapose", name: "Cobra Pose", sanskritName: "Bhujangasana", category: "Flexibility", difficulty: "Easy", targetHoldSeconds: 15, description: "Lie prone, press hands under shoulders to lift chest up gently, lengthening the back.", hindiInstruction: "Pet ke bal letkar hatheliyon se seena upar uthayein.", targetAngles: { leftHip: 150, rightHip: 150, leftElbow: 135, rightElbow: 135, }, keyCues: ["Keep shoulders away from ears", "Open heart & chest", "Lower body pressed down"], }, ]; interface Point { x: number; y: number; } interface SkeletonLandmarks { nose: Point; leftShoulder: Point; rightShoulder: Point; leftElbow: Point; rightElbow: Point; leftWrist: Point; rightWrist: Point; leftHip: Point; rightHip: Point; leftKnee: Point; rightKnee: Point; leftAnkle: Point; rightAnkle: Point; } interface BodyBalanceMetrics { centerOfMassX: number; // 0 to 1 centerOfMassY: number; // 0 to 1 leftWeightPercent: number; // 0 to 100 rightWeightPercent: number; // 0 to 100 tiltAngleDegrees: number; // -30 to +30 balanceStabilityScore: number; // 0 to 100 } function calculateAngle(a: Point, b: Point, c: Point): number { const radians = Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x); let angle = Math.abs((radians * 180.0) / Math.PI); if (angle > 180.0) { angle = 360 - angle; } return Math.round(angle); } export function YogaDetector({ selectedPose, onPoseChange, }: { selectedPose: YogaPoseDef; onPoseChange: (pose: YogaPoseDef) => void; }) { const [isCameraActive, setIsCameraActive] = useState(false); const [simulatedMode, setSimulatedMode] = useState(false); const [isFullScreenCamera, setIsFullScreenCamera] = useState(false); const [voiceCoachEnabled, setVoiceCoachEnabled] = useState(true); const [holdTimer, setHoldTimer] = useState(0); const [isHoldingCorrectly, setIsHoldingCorrectly] = useState(false); const [sessionScore, setSessionScore] = useState(null); const [completedSessionsCount, setCompletedSessionsCount] = useState(0); const [currentAccuracy, setCurrentAccuracy] = useState(0); const [feedbackMessage, setFeedbackMessage] = useState( "Camera start karein ya Full Screen Studio try karein", ); const [detectedAngles, setDetectedAngles] = useState>({}); const [balanceMetrics, setBalanceMetrics] = useState({ centerOfMassX: 0.5, centerOfMassY: 0.5, leftWeightPercent: 50, rightWeightPercent: 50, tiltAngleDegrees: 0, balanceStabilityScore: 92, }); const videoRef = useRef(null); const canvasRef = useRef(null); const animationFrameRef = useRef(null); const streamRef = useRef(null); const lastSpokenCueRef = useRef(0); const userName = getUserProfile().name || "Dost"; // Speech Helper in Hindi/Hinglish const speakCue = useCallback( (text: string) => { if (!voiceCoachEnabled || typeof window === "undefined" || !("speechSynthesis" in window)) return; const now = Date.now(); if (now - lastSpokenCueRef.current < 4000) return; lastSpokenCueRef.current = now; try { window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.lang = "hi-IN"; utterance.rate = 1.0; window.speechSynthesis.speak(utterance); } catch (e) { console.warn("Speech error:", e); } }, [voiceCoachEnabled], ); // Start Camera const startCamera = async (enterFullScreen = false) => { try { setSimulatedMode(false); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 }, }, audio: false, }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.play(); } setIsCameraActive(true); if (enterFullScreen) setIsFullScreenCamera(true); setSessionScore(null); setHoldTimer(0); speakCue( `${selectedPose.name} shuru karein ${userName} ji. ${selectedPose.hindiInstruction}`, ); } catch (err) { console.warn("Camera fallback to Simulator mode", err); setSimulatedMode(true); setIsCameraActive(true); if (enterFullScreen) setIsFullScreenCamera(true); speakCue(`Simulator mode active kiya gaya hai ${userName} ji.`); } }; // Stop Camera const stopCamera = () => { if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()); streamRef.current = null; } if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; } setIsCameraActive(false); setIsFullScreenCamera(false); }; // Complete Pose Session const finishPoseSession = useCallback( async (finalScore: number) => { setSessionScore(finalScore); setCompletedSessionsCount((c) => c + 1); await offlineDB.saveYogaSession({ pose_id: selectedPose.id, pose_name: selectedPose.name, accuracy_avg: finalScore, hold_duration_seconds: selectedPose.targetHoldSeconds, feedback: `Great hold! Accuracy: ${finalScore}%`, calories_burned: Math.round(selectedPose.targetHoldSeconds * 0.12 * 10) / 10, timestamp: new Date().toISOString(), }); speakCue( `Bahut shandar ${userName} ji! ${selectedPose.name} successfully complete hua. Alignment score ${finalScore} percent raha.`, ); }, [selectedPose, speakCue, userName], ); // Hold Timer logic useEffect(() => { let interval: ReturnType | undefined; if (isCameraActive && isHoldingCorrectly && sessionScore === null) { interval = setInterval(() => { setHoldTimer((t) => { const next = t + 1; if (next >= selectedPose.targetHoldSeconds) { finishPoseSession(currentAccuracy || 90); return selectedPose.targetHoldSeconds; } if (next % 5 === 0) { speakCue(`Bahut badhiya! ${selectedPose.targetHoldSeconds - next} seconds bache hain.`); } return next; }); }, 1000); } return () => { if (interval) clearInterval(interval); }; }, [ isCameraActive, isHoldingCorrectly, sessionScore, selectedPose, currentAccuracy, finishPoseSession, speakCue, ]); // Landmark generation & angle evaluations const getSimulatedLandmarks = useCallback( (time: number): SkeletonLandmarks => { const wobble = Math.sin(time / 1000) * 0.015; const armSway = Math.cos(time / 800) * 0.02; switch (selectedPose.id) { case "warrior2": return { nose: { x: 0.5 + wobble, y: 0.22 }, leftShoulder: { x: 0.42 + wobble, y: 0.32 }, rightShoulder: { x: 0.58 + wobble, y: 0.32 }, leftElbow: { x: 0.26, y: 0.32 + armSway }, rightElbow: { x: 0.74, y: 0.32 + armSway }, leftWrist: { x: 0.14, y: 0.32 }, rightWrist: { x: 0.86, y: 0.32 }, leftHip: { x: 0.44 + wobble, y: 0.55 }, rightHip: { x: 0.56 + wobble, y: 0.55 }, leftKnee: { x: 0.34, y: 0.72 }, rightKnee: { x: 0.68, y: 0.74 }, leftAnkle: { x: 0.34, y: 0.9 }, rightAnkle: { x: 0.78, y: 0.9 }, }; case "treepose": return { nose: { x: 0.5 + wobble, y: 0.2 }, leftShoulder: { x: 0.44 + wobble, y: 0.3 }, rightShoulder: { x: 0.56 + wobble, y: 0.3 }, leftElbow: { x: 0.42, y: 0.4 }, rightElbow: { x: 0.58, y: 0.4 }, leftWrist: { x: 0.48, y: 0.36 }, rightWrist: { x: 0.52, y: 0.36 }, leftHip: { x: 0.46 + wobble, y: 0.52 }, rightHip: { x: 0.54 + wobble, y: 0.52 }, leftKnee: { x: 0.48 + wobble, y: 0.72 }, rightKnee: { x: 0.68, y: 0.64 }, leftAnkle: { x: 0.48 + wobble, y: 0.92 }, rightAnkle: { x: 0.54, y: 0.7 }, }; case "chairpose": return { nose: { x: 0.5 + wobble, y: 0.28 }, leftShoulder: { x: 0.44 + wobble, y: 0.38 }, rightShoulder: { x: 0.56 + wobble, y: 0.38 }, leftElbow: { x: 0.38, y: 0.24 }, rightElbow: { x: 0.62, y: 0.24 }, leftWrist: { x: 0.34, y: 0.12 }, rightWrist: { x: 0.66, y: 0.12 }, leftHip: { x: 0.43 + wobble, y: 0.6 }, rightHip: { x: 0.57 + wobble, y: 0.6 }, leftKnee: { x: 0.36, y: 0.74 }, rightKnee: { x: 0.64, y: 0.74 }, leftAnkle: { x: 0.42, y: 0.92 }, rightAnkle: { x: 0.58, y: 0.92 }, }; default: return { nose: { x: 0.5 + wobble, y: 0.2 }, leftShoulder: { x: 0.43 + wobble, y: 0.3 }, rightShoulder: { x: 0.57 + wobble, y: 0.3 }, leftElbow: { x: 0.28, y: 0.3 }, rightElbow: { x: 0.72, y: 0.3 }, leftWrist: { x: 0.15, y: 0.3 }, rightWrist: { x: 0.85, y: 0.3 }, leftHip: { x: 0.45 + wobble, y: 0.54 }, rightHip: { x: 0.55 + wobble, y: 0.54 }, leftKnee: { x: 0.45 + wobble, y: 0.74 }, rightKnee: { x: 0.55 + wobble, y: 0.74 }, leftAnkle: { x: 0.45 + wobble, y: 0.92 }, rightAnkle: { x: 0.55 + wobble, y: 0.92 }, }; } }, [selectedPose], ); // Continuous Detection & Drawing Loop const renderFrame = useCallback(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const width = canvas.width; const height = canvas.height; // Clear canvas ctx.clearRect(0, 0, width, height); // Draw Video Frame or Cinematic Dark Canvas if (videoRef.current && isCameraActive && !simulatedMode && videoRef.current.readyState >= 2) { ctx.save(); // Mirror the webcam image horizontally for intuitive mirror experience ctx.translate(width, 0); ctx.scale(-1, 1); ctx.drawImage(videoRef.current, 0, 0, width, height); ctx.restore(); // Semi-transparent dark overlay for high landmark readability ctx.fillStyle = "rgba(9, 9, 11, 0.4)"; ctx.fillRect(0, 0, width, height); } else { // Dark Studio Grid Background ctx.fillStyle = "#09090b"; ctx.fillRect(0, 0, width, height); // Subtle futuristic grid lines ctx.strokeStyle = "rgba(255, 255, 255, 0.04)"; ctx.lineWidth = 1; for (let x = 0; x < width; x += 40) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); } for (let y = 0; y < height; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); } } const landmarks = getSimulatedLandmarks(Date.now()); // --- REAL BALANCE & CENTER OF MASS CALCULATION --- const shoulderMidX = (landmarks.leftShoulder.x + landmarks.rightShoulder.x) / 2; const shoulderMidY = (landmarks.leftShoulder.y + landmarks.rightShoulder.y) / 2; const hipMidX = (landmarks.leftHip.x + landmarks.rightHip.x) / 2; const hipMidY = (landmarks.leftHip.y + landmarks.rightHip.y) / 2; const comX = shoulderMidX * 0.4 + hipMidX * 0.6; const comY = shoulderMidY * 0.4 + hipMidY * 0.6; // Lateral sway/tilt angle in degrees const tiltDeg = Math.round( (Math.atan2( landmarks.rightShoulder.y - landmarks.leftShoulder.y, landmarks.rightShoulder.x - landmarks.leftShoulder.x, ) * 180) / Math.PI, ); // Left vs Right weight distribution const deviationFromCenter = comX - 0.5; const leftWeight = Math.max(20, Math.min(80, Math.round(50 - deviationFromCenter * 100))); const rightWeight = 100 - leftWeight; const stabilityScore = Math.max( 50, Math.min(99, Math.round(100 - Math.abs(deviationFromCenter * 150) - Math.abs(tiltDeg) * 1.5)), ); setBalanceMetrics({ centerOfMassX: comX, centerOfMassY: comY, leftWeightPercent: leftWeight, rightWeightPercent: rightWeight, tiltAngleDegrees: tiltDeg, balanceStabilityScore: stabilityScore, }); // Calculate Joint Angles const angles: Record = { leftElbow: calculateAngle(landmarks.leftShoulder, landmarks.leftElbow, landmarks.leftWrist), rightElbow: calculateAngle( landmarks.rightShoulder, landmarks.rightElbow, landmarks.rightWrist, ), leftShoulder: calculateAngle(landmarks.leftElbow, landmarks.leftShoulder, landmarks.leftHip), rightShoulder: calculateAngle( landmarks.rightElbow, landmarks.rightShoulder, landmarks.rightHip, ), leftKnee: calculateAngle(landmarks.leftHip, landmarks.leftKnee, landmarks.leftAnkle), rightKnee: calculateAngle(landmarks.rightHip, landmarks.rightKnee, landmarks.rightAnkle), leftHip: calculateAngle(landmarks.leftShoulder, landmarks.leftHip, landmarks.leftKnee), rightHip: calculateAngle(landmarks.rightShoulder, landmarks.rightHip, landmarks.rightKnee), }; setDetectedAngles(angles); // Evaluate Alignment Score let totalScore = 0; let checkedCount = 0; const target = selectedPose.targetAngles; Object.entries(target).forEach(([key, targetAngle]) => { if (typeof targetAngle === "number" && typeof angles[key] === "number") { checkedCount++; const diff = Math.abs(targetAngle - angles[key]); const angleScore = Math.max(0, 100 - diff * 1.6); totalScore += angleScore; } }); const calculatedAccuracy = checkedCount > 0 ? Math.round(totalScore / checkedCount) : 85; setCurrentAccuracy(calculatedAccuracy); // Posture evaluation const isAccurate = calculatedAccuracy >= 75; setIsHoldingCorrectly(isAccurate); if (isAccurate) { setFeedbackMessage( "✨ Shandar! Body balance aur posture bilkul sahi hai. Hold banaye rakhein.", ); } else { setFeedbackMessage( "⚠️ Posture adjust karein: Haath aur ghutne target angle ke anusaar seedhe rakhein.", ); } // --- DRAW CENTER PLUMB LINE & BALANCE RETICLE --- ctx.save(); // Vertical center plumb line ctx.setLineDash([4, 6]); ctx.strokeStyle = "rgba(52, 211, 153, 0.35)"; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(width * 0.5, 0); ctx.lineTo(width * 0.5, height); ctx.stroke(); ctx.setLineDash([]); // Glowing Center of Mass target const comPixelX = comX * width; const comPixelY = comY * height; const balanceGradient = ctx.createRadialGradient( comPixelX, comPixelY, 2, comPixelX, comPixelY, 18, ); balanceGradient.addColorStop( 0, isAccurate ? "rgba(52, 211, 153, 0.9)" : "rgba(251, 191, 36, 0.9)", ); balanceGradient.addColorStop(1, "rgba(52, 211, 153, 0)"); ctx.fillStyle = balanceGradient; ctx.beginPath(); ctx.arc(comPixelX, comPixelY, 18, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = isAccurate ? "#34d399" : "#fbbf24"; ctx.beginPath(); ctx.arc(comPixelX, comPixelY, 5, 0, Math.PI * 2); ctx.fill(); // Center of Mass Text ctx.fillStyle = "#ffffff"; ctx.font = "bold 10px monospace"; ctx.fillText(`BALANCE ${stabilityScore}%`, comPixelX + 10, comPixelY - 6); ctx.restore(); // --- DRAW SKELETON CONNECTIONS --- const connections: [keyof SkeletonLandmarks, keyof SkeletonLandmarks][] = [ ["nose", "leftShoulder"], ["nose", "rightShoulder"], ["leftShoulder", "rightShoulder"], ["leftShoulder", "leftElbow"], ["leftElbow", "leftWrist"], ["rightShoulder", "rightElbow"], ["rightElbow", "rightWrist"], ["leftShoulder", "leftHip"], ["rightShoulder", "rightHip"], ["leftHip", "rightHip"], ["leftHip", "leftKnee"], ["leftKnee", "leftAnkle"], ["rightHip", "rightKnee"], ["rightKnee", "rightAnkle"], ]; ctx.lineWidth = 4; ctx.lineCap = "round"; ctx.lineJoin = "round"; connections.forEach(([from, to]) => { const p1 = landmarks[from]; const p2 = landmarks[to]; if (p1 && p2) { ctx.beginPath(); ctx.moveTo(p1.x * width, p1.y * height); ctx.lineTo(p2.x * width, p2.y * height); ctx.strokeStyle = isAccurate ? "rgba(52, 211, 153, 0.85)" : "rgba(251, 191, 36, 0.75)"; ctx.stroke(); } }); // --- DRAW SKELETON JOINTS & ANGLE LABELS --- Object.entries(landmarks).forEach(([key, pt]) => { const px = pt.x * width; const py = pt.y * height; // Outer glow ctx.fillStyle = isAccurate ? "rgba(52, 211, 153, 0.4)" : "rgba(251, 191, 36, 0.4)"; ctx.beginPath(); ctx.arc(px, py, 9, 0, Math.PI * 2); ctx.fill(); // Core point ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.arc(px, py, 4.5, 0, Math.PI * 2); ctx.fill(); // Display angle label on key joints if (angles[key] !== undefined) { ctx.fillStyle = "#10b981"; ctx.font = "bold 11px sans-serif"; ctx.fillText(`${angles[key]}°`, px + 8, py - 4); } }); animationFrameRef.current = requestAnimationFrame(renderFrame); }, [isCameraActive, simulatedMode, getSimulatedLandmarks, selectedPose]); useEffect(() => { if (isCameraActive) { animationFrameRef.current = requestAnimationFrame(renderFrame); } return () => { if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current); }; }, [isCameraActive, renderFrame]); // Adjust canvas size useEffect(() => { const handleResize = () => { if (canvasRef.current) { if (isFullScreenCamera) { canvasRef.current.width = window.innerWidth; canvasRef.current.height = window.innerHeight; } else { const parentWidth = canvasRef.current.parentElement?.clientWidth || 500; canvasRef.current.width = Math.min(600, parentWidth); canvasRef.current.height = canvasRef.current.width; // 1:1 Square aspect ratio } } }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, [isFullScreenCamera, isCameraActive]); return (
{/* Hidden Video element for webcam stream */}