import { useRef, useState, useEffect } from 'react'; import ParticleEffects, { useParticleEffects } from './ParticleEffects' import MainContent from './MainContent'; import { AnimationStyles, AudioEffects } from './UIUtils'; import useDeviceAndCanvas from '../hooks/useDeviceAndCanvas'; import useHandDetection from '../hooks/useHandDetection'; import useThoughtGeneration from '../hooks/useThoughtGeneration'; const HandDetector = () => { // Refs const videoRef = useRef(null); const canvasRef = useRef(null); const containerRef = useRef(null); // Camera state const [facingMode, setFacingMode] = useState('user'); // 'user' for front camera, 'environment' for back camera const [cameraError, setCameraError] = useState(false); // Prompt state const [customPrompt, setCustomPrompt] = useState( "Look at this image and identify the main object or scene (ignoring any hands or fingers that might be visible). Generate a single, short, insightful thought (maximum 5 words) about this object or scene. Focus on something interesting, fun, or unexpected about it. DO NOT mention hands, fingers, pose estimation, motion tracking, or any computer vision technology in your response. Respond with just the thought, no additional text." ); // Custom hooks const { isMobile, isMac, canvasWidth, canvasHeight, videoAspectRatio, setVideoAspectRatio, updateCanvasSize } = useDeviceAndCanvas(); const { handDetected, isMouthOpen, isLeftHand, thumbPosition, isFirstLoad } = useHandDetection(videoRef, canvasRef, isMobile); const { thought, isThinking, animateThinking } = useThoughtGeneration(canvasRef, isMouthOpen, customPrompt); const { particles, popParticles, createSparkleParticles, createPopParticles } = useParticleEffects(containerRef, isMobile); // Clean up all component mounted refs on unmount useEffect(() => { return () => { // This will run when the component unmounts console.log("HandDetector component unmounting"); }; }, []); return ( <div className="relative flex flex-col items-center w-full"> {/* Add animations and styles */} <AnimationStyles /> {/* Add audio effects */} <AudioEffects isThinking={isThinking} /> {cameraError ? ( <div className="bg-red-500 text-white p-4 rounded-lg mb-4 w-full max-w-md"> <p className="font-medium">Camera access denied. Please allow camera access to use this app.</p> </div> ) : ( <MainContent videoRef={videoRef} canvasRef={canvasRef} containerRef={containerRef} facingMode={facingMode} setFacingMode={setFacingMode} setCameraError={setCameraError} customPrompt={customPrompt} setCustomPrompt={setCustomPrompt} isMac={isMac} isMobile={isMobile} canvasWidth={canvasWidth} canvasHeight={canvasHeight} setVideoAspectRatio={setVideoAspectRatio} updateCanvasSize={updateCanvasSize} handDetected={handDetected} isMouthOpen={isMouthOpen} isLeftHand={isLeftHand} thumbPosition={thumbPosition} isFirstLoad={isFirstLoad} thought={thought} isThinking={isThinking} animateThinking={animateThinking} particles={particles} popParticles={popParticles} createSparkleParticles={createSparkleParticles} createPopParticles={createPopParticles} /> )} </div> ); }; export default HandDetector;