File size: 3,664 Bytes
065d164 3fdfac3 065d164 103fcd2 065d164 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
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; |