52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2ed1,"use client"; import { useEffect, useRef, useState } from "react"; import { Camera, CameraOff, LoaderCircle } from "lucide-react"; import { DrawingUtils, FaceDetector, FilesetResolver, } from "@mediapipe/tasks-vision"; type CameraPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"; interface FaceDetectionProps { position: CameraPosition; boxColor: string; labelColor: string; size: number; } function FaceDetection({ position, boxColor, labelColor, size, }: FaceDetectionProps) { const safePosition = position ?? "bottom-right"; const safeBoxColor = boxColor ?? "#7dd3fc"; const safeLabelColor = labelColor ?? "#0f172a"; const videoRef = useRef(null); const canvasRef = useRef(null); const detectorRef = useRef(null); const streamRef = useRef(null); const animationFrameRef = useRef(null); const webcamRunningRef = useRef(false); const [isModelReady, setIsModelReady] = useState(false); const [isCameraRunning, setIsCameraRunning] = useState(false); const [isCameraStarting, setIsCameraStarting] = useState(false); const [faceDetected, setFaceDetected] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const cameraPositionClasses: Record = { "top-left": "left-4 top-4 sm:left-6 sm:top-6", "top-right": "right-4 top-4 sm:right-6 sm:top-6", "bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6", "bottom-right": "bottom-4 right-4 sm:bottom-6 sm:right-6", }; useEffect(() => { let cancelled = false; async function createDetector() { try { const vision = await FilesetResolver.forVisionTasks( "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@1.1.0/wasm", ); const detectorOptions = { baseOptions: { modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite", }, runningMode: "VIDEO" as const, minDetectionConfidence: 0.75, minSuppressionThreshold: 0.3, }; let detector: FaceDetector; try { detector = await FaceDetector.createFromOptions(vision, { ...detectorOptions, baseOptions: { ...detectorOptions.baseOptions, delegate: "GPU" }, }); } catch (gpuError) { console.warn("GPU face detection unavailable; retrying with CPU:", gpuError); detector = await FaceDetector.createFromOptions(vision, { ...detectorOptions, baseOptions: { ...detectorOptions.baseOptions, delegate: "CPU" }, }); } if (cancelled) { detector.close(); return; } detectorRef.current = detector; setIsModelReady(true); } catch (error) { console.error("Failed to load the face detection model:", error); if (!cancelled) { setErrorMessage("Could not load the face detector. Check your connection and reload."); } } } void createDetector(); return () => { cancelled = true; webcamRunningRef.current = false; if (animationFrameRef.current !== null) { window.cancelAnimationFrame(animationFrameRef.current); } streamRef.current?.getTracks().forEach((track) => track.stop()); detectorRef.current?.close(); }; }, []); async function toggleCamera() { if (webcamRunningRef.current) { webcamRunningRef.current = false; setIsCameraRunning(false); if (animationFrameRef.current !== null) { window.cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; } streamRef.current?.getTracks().forEach((track) => track.stop()); streamRef.current = null; if (videoRef.current) { videoRef.current.srcObject = null; } const canvas = canvasRef.current; const context = canvas?.getContext("2d"); if (canvas && context) { context.clearRect(0, 0, canvas.width, canvas.height); } setFaceDetected(false); return; } setIsCameraStarting(true); setErrorMessage(null); try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, }); const video = videoRef.current; if (!video) { stream.getTracks().forEach((track) => track.stop()); return; } streamRef.current = stream; video.srcObject = stream; await video.play(); webcamRunningRef.current = true; setIsCameraRunning(true); animationFrameRef.current = window.requestAnimationFrame((timestamp) => { void predictWebcam(timestamp); }); } catch (error) { streamRef.current?.getTracks().forEach((track) => track.stop()); streamRef.current = null; console.error("Failed to start the camera:", error); setErrorMessage( error instanceof Error && error.name === "NotAllowedError" ? "Camera access was denied. Allow camera access in your browser settings and try again." : "Could not start the camera. Check that it is connected and not being used by another app.", ); } finally { setIsCameraStarting(false); } } async function predictWebcam(timestamp: number) { const video = videoRef.current; const canvas = canvasRef.current; const detector = detectorRef.current; if (!video || !canvas || !webcamRunningRef.current) { return; } if (!detector || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || video.videoWidth === 0) { animationFrameRef.current = window.requestAnimationFrame((frameTime) => { void predictWebcam(frameTime); }); return; } const canvasContext = canvas.getContext("2d"); if (!canvasContext) { setErrorMessage("Could not create the face detection canvas."); webcamRunningRef.current = false; setIsCameraRunning(false); streamRef.current?.getTracks().forEach((track) => track.stop()); streamRef.current = null; return; } if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) { canvas.width = video.videoWidth; canvas.height = video.videoHeight; } let detections; try { detections = detector.detectForVideo(video, timestamp).detections; } catch (error) { console.error("Face detection failed:", error); setErrorMessage("Face detection failed. Please restart the camera."); webcamRunningRef.current = false; setIsCameraRunning(false); streamRef.current?.getTracks().forEach((track) => track.stop()); streamRef.current = null; return; } const faceDetections = detections.filter( (detection) => (detection.categories?.[0]?.score ?? 0) >= 0.75, ); canvasContext.clearRect(0, 0, canvas.width, canvas.height); setFaceDetected(faceDetections.length > 0); if (faceDetections.length > 0) { const drawingUtils = new DrawingUtils(canvasContext); canvasContext.font = "16px sans-serif"; for (const detection of faceDetections) { if (!detection.boundingBox) continue; const box = detection.boundingBox; const mirroredBox = { ...box, originX: canvas.width - box.originX - box.width, }; drawingUtils.drawBoundingBox(mirroredBox, { color: safeBoxColor, lineWidth: size, fillColor: "transparent", }); const category = detection.categories?.[0]; const score = category?.score ? Math.round(category.score * 100) : 0; const labelText = `Face - ${score}%`; const textWidth = canvasContext.measureText(labelText).width; canvasContext.fillStyle = safeLabelColor; canvasContext.fillRect(mirroredBox.originX, mirroredBox.originY, textWidth + 12, 26); canvasContext.fillStyle = "#ffffff"; canvasContext.fillText(labelText, mirroredBox.originX + 6, mirroredBox.originY + 18); } } if (webcamRunningRef.current) { animationFrameRef.current = window.requestAnimationFrame((frameTime) => { void predictWebcam(frameTime); }); } } return (

); } export default FaceDetection;51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@mediapipe/tasks-vision",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40mediapipe%2Ftasks-vision","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@mediapipe/tasks-vision"}]]}]}]]}],["$","$L52",null,{"namespace":"@krave-docs","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/face-detection/FaceDetection.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]