[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 6.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; --radius: 0.5rem; } .light { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .chart-1 { color: hsl(var(--primary)); } .chart-2 { color: hsl(var(--secondary)); } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" export function ThemeToggle() { const [theme, setTheme] = useState<"dark" | "light">("dark") useEffect(() => { const root = window.document.documentElement root.classList.remove("light", "dark") root.classList.add(theme) }, [theme]) const toggleTheme = () => { setTheme(theme === "dark" ? "light" : "dark") } return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sign Language Recognition", description: "A tool for sign language recognition using deep learning", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/model-trainer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Progress } from "@/components/ui/progress" import { Loader2, Play, Square } from "lucide-react" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts" interface ModelTrainerProps { dataset: { trainImages: any[] testImages: any[] classes: string[] } onModelTrained: (model: any) => void } export default function ModelTrainer({ dataset, onModelTrained }: ModelTrainerProps) { const [trainingPercentage, setTrainingPercentage] = useState(80) const [modelType, setModelType] = useState("simplecnn") const [batchSize, setBatchSize] = useState(32) const [epochs, setEpochs] = useState(30) const [isTraining, setIsTraining] = useState(false) const [currentEpoch, setCurrentEpoch] = useState(0) const [timeElapsed, setTimeElapsed] = useState(0) const [trainingMetrics, setTrainingMetrics] = useState([]) const timerRef = useRef(null) const startTimeRef = useRef(null) const handleStartTraining = () => { setIsTraining(true) setCurrentEpoch(0) setTimeElapsed(0) setTrainingMetrics([]) startTimeRef.current = Date.now() // Simulate training process timerRef.current = setInterval(() => { setCurrentEpoch((prev) => { if (prev >= epochs - 1) { if (timerRef.current) clearInterval(timerRef.current) setIsTraining(false) // Create a mock trained model const trainedModel = { id: Date.now(), name: `${modelType}-${new Date().toLocaleTimeString()}`, type: modelType, trainPercentage: trainingPercentage, batchSize, epochs, accuracy: 95 + Math.random() * 4, // 95-99% accuracy trainingTime: timeElapsed, } onModelTrained(trainedModel) return epochs - 1 } return prev + 1 }) setTimeElapsed(Math.floor((Date.now() - (startTimeRef.current || 0)) / 1000)) // Generate mock training metrics setTrainingMetrics((prev) => { const newEpoch = prev.length const lastLoss = prev.length > 0 ? prev[prev.length - 1].loss : 2.5 const lastAccuracy = prev.length > 0 ? prev[prev.length - 1].accuracy : 0.5 return [ ...prev, { epoch: newEpoch + 1, loss: Math.max(0.1, lastLoss * 0.9), accuracy: Math.min(0.99, lastAccuracy + (0.99 - lastAccuracy) * 0.2), }, ] }) }, 500) // Faster for demo purposes } const handleStopTraining = () => { if (timerRef.current) { clearInterval(timerRef.current) timerRef.current = null } setIsTraining(false) } useEffect(() => { return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, []) const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}m ${secs}s` } const estimatedTimeLeft = isTraining && trainingMetrics.length > 0 ? formatTime(Math.floor((timeElapsed / currentEpoch) * (epochs - currentEpoch))) : "N/A" return (

Training Settings Configure model parameters

Model Architecture

Training Data Percentage: {trainingPercentage}% setTrainingPercentage(value[0])} disabled={isTraining} className="[&>span]:bg-primary" />

Batch Size setBatchSize(Number.parseInt(e.target.value))} min={8} max={128} disabled={isTraining} className="bg-input text-foreground border-border" />

Epochs setEpochs(Number.parseInt(e.target.value))} min={1} max={100} disabled={isTraining} className="bg-input text-foreground border-border" />

{!isTraining ? ( ) : ( )}

Training Progress {isTraining ? `Training in progress - Epoch ${currentEpoch + 1}/${epochs}` : trainingMetrics.length > 0 ? "Training complete" : "Training not started"} {isTraining && (

Progress: {Math.round(((currentEpoch + 1) / epochs) * 100)}% Estimated time left: {estimatedTimeLeft}

Time elapsed: {formatTime(timeElapsed)}

)} {trainingMetrics.length > 0 && (

)} {!isTraining && trainingMetrics.length === 0 && (

Configure settings and start training to see metrics

)}

) } [V0_FILE]typescriptreact:file="components/predictor.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Upload, ImageIcon } from "lucide-react" import Image from "next/image" interface PredictorProps { dataset: { trainImages: any[] testImages: any[] classes: string[] } trainedModels: any[] } export default function Predictor({ dataset, trainedModels }: PredictorProps) { const [selectedModel, setSelectedModel] = useState( trainedModels.length > 0 ? trainedModels[0].id.toString() : null, ) const [selectedImages, setSelectedImages] = useState([]) const [predictions, setPredictions] = useState([]) const handleSelectTestImages = () => { // Randomly select 4 test images for demonstration const randomImages = [...dataset.testImages].sort(() => 0.5 - Math.random()).slice(0, 4) setSelectedImages(randomImages) setPredictions([]) } const handlePredict = () => { if (!selectedModel || selectedImages.length === 0) return // Generate mock predictions const mockPredictions = selectedImages.map((image) => { const correctClass = image.class // 90% chance of correct prediction, 10% chance of wrong prediction const predictedClass = Math.random() > 0.1 ? correctClass : (correctClass + 1 + Math.floor(Math.random() * 34)) % 36 // Generate confidence scores const confidences = Array(36) .fill(0) .map((_, i) => { if (i === predictedClass) return 0.7 + Math.random() * 0.29 if (i === correctClass && i !== predictedClass) return 0.4 + Math.random() * 0.3 return Math.random() * 0.1 }) return { imageId: image.id, predictedClass, correctClass, confidences, isCorrect: predictedClass === correctClass, topConfidence: confidences[predictedClass], } }) setPredictions(mockPredictions) } const getAccuracy = () => { if (predictions.length === 0) return 0 return (predictions.filter((p) => p.isCorrect).length / predictions.length) * 100 } return ( Prediction Test trained models on images

Select Model

Test Images

{selectedImages.length > 0 && (

{selectedImages.map((image) => (

Class: {dataset.classes[image.class]}

))}

)}

Prediction Results

{predictions.length > 0 ? ( <>

Overall Accuracy: {getAccuracy().toFixed(2)}%

{predictions.map((prediction, index) => (

img.id === prediction.imageId)?.path || ""} alt="Test image" fill className="object-cover" />

Predicted: {dataset.classes[prediction.predictedClass]} ({(prediction.topConfidence * 100).toFixed(1)}%)

Actual: {dataset.classes[prediction.correctClass]}

))}

) : (

Select images and run prediction to see results

)}

) } [V0_FILE]typescriptreact:file="components/live-stream.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Camera, CameraOff, CameraIcon } from "lucide-react" import { Progress } from "@/components/ui/progress" interface LiveStreamProps { trainedModels: any[] classes: string[] } export default function LiveStream({ trainedModels, classes }: LiveStreamProps) { const [selectedModel, setSelectedModel] = useState( trainedModels.length > 0 ? trainedModels[0].id.toString() : null, ) const [isStreaming, setIsStreaming] = useState(false) const [prediction, setPrediction] = useState(null) const [capturedImage, setCapturedImage] = useState(null) const videoRef = useRef(null) const canvasRef = useRef(null) const streamRef = useRef(null) const animationRef = useRef(null) // Start webcam stream const startStream = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: "user", }, }) if (videoRef.current) { videoRef.current.srcObject = stream streamRef.current = stream setIsStreaming(true) // Start prediction loop startPredictionLoop() } } catch (err) { console.error("Error accessing webcam:", err) } } // Stop webcam stream const stopStream = () => { if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()) streamRef.current = null } if (animationRef.current) { cancelAnimationFrame(animationRef.current) animationRef.current = null } setIsStreaming(false) setPrediction(null) } // Capture image from webcam const captureImage = () => { if (videoRef.current && canvasRef.current) { const video = videoRef.current const canvas = canvasRef.current const context = canvas.getContext("2d") if (!context) return canvas.width = video.videoWidth canvas.height = video.videoHeight context.drawImage(video, 0, 0, canvas.width, canvas.height) const imageDataURL = canvas.toDataURL("image/png") setCapturedImage(imageDataURL) // Run prediction on captured image runPrediction() } } // Run prediction on captured image const runPrediction = () => { if (!selectedModel) return // Simulate prediction with random results setTimeout(() => { const randomClassIndex = Math.floor(Math.random() * classes.length) const confidences = Array(classes.length) .fill(0) .map((_, i) => { if (i === randomClassIndex) return 0.7 + Math.random() * 0.29 return Math.random() * 0.2 }) setPrediction({ predictedClass: randomClassIndex, confidences, timestamp: new Date().toLocaleTimeString(), }) }, 500) } // Continuous prediction loop const startPredictionLoop = () => { const predict = () => { captureImage() animationRef.current = requestAnimationFrame(predict) } animationRef.current = requestAnimationFrame(predict) } // Clean up on unmount useEffect(() => { return () => { stopStream() } }, []) return ( Live Video Stream Capture and predict sign language in real-time

Select Model

{!isStreaming ? ( ) : ( )}

Live Prediction

{prediction ? (

{classes[prediction.predictedClass]}

Confidence: {(prediction.confidences[prediction.predictedClass] * 100).toFixed(1)}%

Last updated: {prediction.timestamp}

Top 3 Predictions

{prediction.confidences .map((conf: number, idx: number) => ({ class: idx, confidence: conf })) .sort((a: any, b: any) => b.confidence - a.confidence) .slice(0, 3) .map((item: any, idx: number) => (

{classes[item.class]} {(item.confidence * 100).toFixed(1)}%

))}

{capturedImage && (

Captured Frame

)}

) : (

Start the camera to see predictions

)}

) } [V0_FILE]typescriptreact:file="components/statistics.tsx" isEdit="true" isMerged="true" "use client" import { useMemo } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Chart, ChartContainer, ChartBar, ChartTooltip } from "@/components/ui/chart" interface StatisticsProps { dataset: { trainImages: any[] testImages: any[] classes: string[] } } export default function Statistics({ dataset }: StatisticsProps) { const classDistribution = useMemo(() => { const distribution = Array(dataset.classes.length).fill(0) // Count occurrences of each class in training set dataset.trainImages.forEach((img) => { distribution[img.class]++ }) return dataset.classes.map((className, index) => ({ class: className, count: distribution[index], type: index < 26 ? "Letter" : "Number", displayName: index < 26 ? `${className} (${String.fromCharCode(65 + index)})` : `${className} (${index - 26})`, })) }, [dataset]) const letterCount = useMemo(() => { return classDistribution.filter((item) => item.type === "Letter").reduce((sum, item) => sum + item.count, 0) }, [classDistribution]) const numberCount = useMemo(() => { return classDistribution.filter((item) => item.type === "Number").reduce((sum, item) => sum + item.count, 0) }, [classDistribution]) return (

Dataset Statistics Distribution of classes in the dataset

Total Images

{dataset.trainImages.length + dataset.testImages.length}

Training: {dataset.trainImages.length}

Testing: {dataset.testImages.length}

Letters (A-Z)

{letterCount}

{((letterCount / dataset.trainImages.length) * 100).toFixed(1)}% of dataset

Numbers (0-9)

{numberCount}

{((numberCount / dataset.trainImages.length) * 100).toFixed(1)}% of dataset

ctx.dataKey === "count" && ctx.value.type === "Letter" ? "fill-primary" : "fill-primary/60" } />

) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Tooltip, TooltipProvider } from "@/components/ui/tooltip" import { XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, BarChart, Bar, type TooltipProps } from "recharts" interface ChartContainerProps { className?: string data: any[] xAxisKey: string yAxisKey: string categories: string[] children: React.ReactNode } export function ChartContainer({ className, data, xAxisKey, yAxisKey, categories, children }: ChartContainerProps) { return ( {children} ) } interface ChartProps { children: React.ReactNode } export function Chart({ children }: ChartProps) { return ( } /> {children} ) } interface ChartBarProps { className?: string | ((ctx: { dataKey: string; value: any }) => string) } export function ChartBar({ className }: ChartBarProps) { return ( ) } interface CustomTooltipProps extends TooltipProps {} function CustomTooltip({ active, payload, label }: CustomTooltipProps) { if (active && payload && payload.length) { return (

{`${label}`}

{payload.map((item, index) => (

{`${item.name}: ${item.value}`}

))}

) } return null } export { CustomTooltip as ChartTooltip } [V0_FILE]typescriptreact:file="components/import-dataset.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Loader2, Database, Upload } from "lucide-react" interface ImportDatasetProps { isLoading: boolean onImport: () => void } export default function ImportDataset({ isLoading, onImport }: ImportDatasetProps) { return (

Sign Language Recognition Train and test deep neural networks for sign language recognition

Import Dataset

Import the sign language dataset to get started with training and testing models

Dataset Information

36 classes total (labeled 0-35)
Classes 0-25 are alphabetic letters A-Z
Classes 26-35 are numbers 0 to 9
No cases for J(9) or Z(25) due to gesture motions

The dataset will be processed and prepared for training

) } [V0_FILE]typescriptreact:file="components/dataset-viewer.tsx" isEdit="true" isMerged="true" "use client" import { useState, useMemo } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import Image from "next/image" interface DatasetViewerProps { dataset: { trainImages: any[] testImages: any[] classes: string[] } } export default function DatasetViewer({ dataset }: DatasetViewerProps) { const [searchTerm, setSearchTerm] = useState("") const [selectedClass, setSelectedClass] = useState("all") const [datasetType, setDatasetType] = useState("train") const filteredImages = useMemo(() => { const images = datasetType === "train" ? dataset.trainImages : dataset.testImages return images.filter((img) => { // Filter by class if not "all" if (selectedClass !== "all" && img.class !== Number.parseInt(selectedClass)) { return false } // Filter by search term if provided if (searchTerm && !dataset.classes[img.class].toLowerCase().includes(searchTerm.toLowerCase())) { return false } return true }) }, [dataset, searchTerm, selectedClass, datasetType]) return (

Dataset Information Overview of the imported dataset

{dataset.trainImages.length} Training Images {dataset.testImages.length} Test Images 36 Classes Total

This dataset contains sign language gestures for the alphabet (A-Z) and numbers (0-9).

Dataset Viewer Training Set Test Set

setSearchTerm(e.target.value)} className="w-full bg-input text-foreground border-border" />

{filteredImages.map((image) => (

{dataset.classes[image.class]}

))} {filteredImages.length === 0 && (

No images match your filter criteria

)}

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="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-full 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 hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground 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 } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

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

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

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/select.tsx" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "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/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]json:file="package.json" { "name": "sign-language-recognition", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.7", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "lucide-react": "^0.294.0", "next": "14.0.4", "react": "^18", "react-dom": "^18", "recharts": "^2.10.3", "tailwind-merge": "^2.1.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Loader2, BookOpen, Brain, Video, BarChart, RefreshCw } from "lucide-react" import { ThemeToggle } from "@/components/theme-toggle" import DatasetViewer from "@/components/dataset-viewer" import ModelTrainer from "@/components/model-trainer" import Predictor from "@/components/predictor" import LiveStream from "@/components/live-stream" import Statistics from "@/components/statistics" import ImportDataset from "@/components/import-dataset" export default function Home() { const [isLoading, setIsLoading] = useState(false) const [dataset, setDataset] = useState(null) const [trainedModels, setTrainedModels] = useState([]) const handleImportDataset = () => { setIsLoading(true) // Simulate dataset loading setTimeout(() => { // Mock dataset const mockDataset = { trainImages: Array(500) .fill(null) .map((_, i) => ({ id: i, class: Math.floor(Math.random() * 36), path: `/placeholder.svg?height=64&width=64`, })), testImages: Array(100) .fill(null) .map((_, i) => ({ id: i, class: Math.floor(Math.random() * 36), path: `/placeholder.svg?height=64&width=64`, })), classes: [ ...Array(26) .fill(null) .map((_, i) => String.fromCharCode(65 + i)), ...Array(10) .fill(null) .map((_, i) => i.toString()), ], } setDataset(mockDataset) setIsLoading(false) }, 2000) } const handleResetDataset = () => { setDataset(null) setTrainedModels([]) } return (

Sign Language Recognition

{dataset && ( )}

{!dataset ? ( ) : ( <> Dataset Viewer Model Training Prediction Statistics setTrainedModels([...trainedModels, model])} /> )}

) }