[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (

), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertDescription } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useRef, useEffect, useCallback } from "react" import { Camera, CheckCircle, XCircle, Loader2 } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" interface RecognitionResponse { recognized: boolean confidence?: number name?: string message: string } export default function RealtimeFaceRecognition() { const [isRecognized, setIsRecognized] = useState(null) const [message, setMessage] = useState("Initializing camera...") const [isProcessing, setIsProcessing] = useState(false) const [cameraError, setCameraError] = useState(null) const videoRef = useRef(null) const canvasRef = useRef(null) const intervalRef = useRef(null) // Mock backend recognition function const recognizeFace = async (imageData: string): Promise => { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 500)) // Mock recognition logic - randomly return true/false for demo const recognized = Math.random() > 0.7 // 30% chance of recognition if (recognized) { return { recognized: true, confidence: 0.95, name: "John Doe", message: "Access Granted - Welcome John!", } } else { return { recognized: false, message: "Face not recognized - Please try again", } } } const captureAndSendFrame = useCallback(async () => { if (!videoRef.current || !canvasRef.current || isProcessing) return const video = videoRef.current const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx || video.videoWidth === 0 || video.videoHeight === 0) return // Set canvas size to match video canvas.width = video.videoWidth canvas.height = video.videoHeight // Draw current frame to canvas ctx.drawImage(video, 0, 0) // Convert to base64 const imageData = canvas.toDataURL("image/jpeg", 0.8) setIsProcessing(true) try { const response = await recognizeFace(imageData) setIsRecognized(response.recognized) setMessage(response.message) } catch (error) { setMessage("Recognition service unavailable") setIsRecognized(false) } finally { setIsProcessing(false) } }, [isProcessing]) const startCamera = useCallback(async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user", width: { ideal: 640 }, height: { ideal: 640 }, }, }) if (videoRef.current) { videoRef.current.srcObject = stream setCameraError(null) setMessage("Camera ready - Position your face in the frame") // Start sending frames every 2 seconds intervalRef.current = setInterval(captureAndSendFrame, 2000) } } catch (err) { setCameraError("Unable to access camera. Please check permissions.") setMessage("Camera access denied") } }, [captureAndSendFrame]) const stopCamera = useCallback(() => { if (videoRef.current?.srcObject) { const stream = videoRef.current.srcObject as MediaStream stream.getTracks().forEach((track) => track.stop()) videoRef.current.srcObject = null } if (intervalRef.current) { clearInterval(intervalRef.current) intervalRef.current = null } }, []) useEffect(() => { startCamera() return () => { stopCamera() } }, [startCamera, stopCamera]) const getStatusColor = () => { if (isRecognized === true) return "bg-green-500" if (isRecognized === false) return "bg-red-500" return "bg-gray-500" } const getStatusIcon = () => { if (isProcessing) return if (isRecognized === true) return if (isRecognized === false) return return } return (

{/* Header */}

Face Recognition

Real-time face detection and recognition

{/* Camera Card */} {/* Camera Feed */}

{cameraError ? (

{cameraError}

) : (

{/* Status Display */}

{getStatusIcon()}

{message}

{isRecognized === true &&

Confidence: 95%

}

{/* System Status */}

System Status:

{cameraError ? "Offline" : "Online"}

Recognition:

{isProcessing ? "Processing" : "Ready"}

{/* Hidden canvas for frame capture */}

) } [V0_FILE]typescriptreact:file="app/api/recognize/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { imageData } = await request.json() if (!imageData) { return NextResponse.json({ error: "No image data provided" }, { status: 400 }) } // Simulate processing time await new Promise((resolve) => setTimeout(resolve, 500)) // Mock recognition logic // In a real implementation, you would: // 1. Process the base64 image data // 2. Send it to your face recognition service // 3. Return the actual results const recognized = Math.random() > 0.6 // 40% chance of recognition for demo if (recognized) { return NextResponse.json({ recognized: true, confidence: 0.95, name: "John Doe", message: "Access Granted - Welcome John!", }) } else { return NextResponse.json({ recognized: false, message: "Face not recognized - Please try again", }) } } catch (error) { return NextResponse.json({ error: "Recognition service error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants }