[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" export function useMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkIfMobile = () => { const userAgent = typeof window.navigator === "undefined" ? "" : navigator.userAgent const mobile = Boolean(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i)) setIsMobile(mobile) } checkIfMobile() window.addEventListener("resize", checkIfMobile) return () => { window.removeEventListener("resize", checkIfMobile) } }, []) return isMobile } [V0_FILE]typescriptreact:file="app/env.ts" isMerged="true" export const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import PetClassifier from "@/components/pet-classifier" export default function Home() { return (

🐾

Pet Classifier

) } [V0_FILE]typescriptreact:file="components/image-uploader.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { ImageIcon } from "lucide-react" import { motion } from "framer-motion" interface ImageUploaderProps { onImageSelect: (imageData: string) => void selectedImage: string | null } export default function ImageUploader({ onImageSelect, selectedImage }: ImageUploaderProps) { const [dragActive, setDragActive] = useState(false) const inputRef = useRef(null) const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true) } else if (e.type === "dragleave") { setDragActive(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setDragActive(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFiles(e.dataTransfer.files[0]) } } const handleChange = (e: React.ChangeEvent) => { e.preventDefault() if (e.target.files && e.target.files[0]) { handleFiles(e.target.files[0]) } } const handleFiles = (file: File) => { if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (e) => { if (e.target?.result) { onImageSelect(e.target.result as string) } } reader.readAsDataURL(file) } } const onButtonClick = () => { inputRef.current?.click() } return (

{!selectedImage ? (

Drag and drop an image, or{" "}

Supported formats: JPG, PNG, GIF

) : (

)}

) } [V0_FILE]typescriptreact:file="components/camera-capture.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useCallback } from "react" import Webcam from "react-webcam" import { Button } from "@/components/ui/button" import { Camera, RefreshCw } from "lucide-react" import { useMobile } from "@/hooks/use-mobile" import { motion } from "framer-motion" interface CameraCaptureProps { onImageCapture: (imageData: string) => void capturedImage: string | null } export default function CameraCapture({ onImageCapture, capturedImage }: CameraCaptureProps) { const webcamRef = useRef(null) const [isCameraReady, setIsCameraReady] = useState(false) const isMobile = useMobile() const handleCapture = useCallback(() => { const imageSrc = webcamRef.current?.getScreenshot() if (imageSrc) { onImageCapture(imageSrc) } }, [webcamRef, onImageCapture]) const handleRetake = () => { onImageCapture("") } const videoConstraints = { width: 1280, height: 720, facingMode: isMobile ? "environment" : "user", } return (

{!capturedImage ? (

setIsCameraReady(true)} className="w-full h-full object-cover" /> {!isCameraReady && (

Loading camera...

)}

) : (

)}

) } [V0_FILE]typescriptreact:file="components/result-card.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Cat, Dog, User } from "lucide-react" import { motion } from "framer-motion" interface ResultCardProps { image: string label: "cat" | "dog" | "human" confidence?: number } export default function ResultCard({ image, label, confidence }: ResultCardProps) { const getIcon = () => { switch (label) { case "cat": return case "dog": return case "human": return } } const getColor = () => { switch (label) { case "cat": return "bg-purple-100 text-purple-800 border-purple-200" case "dog": return "bg-amber-100 text-amber-800 border-amber-200" case "human": return "bg-blue-100 text-blue-800 border-blue-200" } } const getGradient = () => { switch (label) { case "cat": return "from-purple-500 to-fuchsia-600" case "dog": return "from-amber-500 to-orange-600" case "human": return "from-blue-500 to-cyan-600" } } return ( Classification Result {getIcon()} {label.charAt(0).toUpperCase() + label.slice(1)}

{confidence !== undefined && (

Confidence {(confidence * 100).toFixed(1)}%

)}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --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: 262.1 83.3% 57.8%; --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: 262.1 83.3% 57.8%; --radius: 0.75rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 262.1 83.3% 57.8%; --primary-foreground: 210 40% 98%; --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: 262.1 83.3% 57.8%; } * { @apply border-border; } body { @apply bg-background text-foreground; } /* Custom animations */ @keyframes pulse-border { 0%, 100% { border-color: rgba(147, 51, 234, 0.3); } 50% { border-color: rgba(147, 51, 234, 0.6); } } .animate-pulse-border { animation: pulse-border 2s infinite; } /* Smooth transitions */ .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Card hover effects */ .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="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]plaintext:file=".env.local.example" isMerged="true" # API URL for the Flask backend NEXT_PUBLIC_API_URL=http://localhost:5000 [V0_FILE]typescriptreact:file="components/api-status-indicator.tsx" "use client" import { CheckCircle2, XCircle, HelpCircle, Loader2 } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" type ApiStatus = "unknown" | "connected" | "disconnected" | "checking" interface ApiStatusIndicatorProps { status: ApiStatus } export default function ApiStatusIndicator({ status }: ApiStatusIndicatorProps) { const getStatusDetails = () => { switch (status) { case "connected": return { icon: , label: "API Connected", description: "Connection to the API is working properly", color: "bg-green-100", } case "disconnected": return { icon: , label: "API Disconnected", description: "Cannot connect to the API. Please check if it's running", color: "bg-red-100", } case "checking": return { icon: , label: "Checking API", description: "Testing connection to the API...", color: "bg-blue-100", } default: return { icon: , label: "API Status Unknown", description: "API connection status has not been checked yet", color: "bg-gray-100", } } } const { icon, label, description, color } = getStatusDetails() return ( {icon} {label}

{description}

) } [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="components/api-test-button.tsx" "use client" import { Button } from "@/components/ui/button" import { Loader2, Activity } from "lucide-react" import { motion } from "framer-motion" type ApiStatus = "unknown" | "connected" | "disconnected" | "checking" interface ApiTestButtonProps { onClick: () => void status: ApiStatus disabled: boolean } export default function ApiTestButton({ onClick, status, disabled }: ApiTestButtonProps) { return ( ) } [V0_FILE]typescriptreact:file="components/success-animation.tsx" "use client" import { motion } from "framer-motion" import { CheckCircle } from "lucide-react" export default function SuccessAnimation() { return ( ) } [V0_FILE]typescriptreact:file="components/failure-animation.tsx" "use client" import { motion } from "framer-motion" import { XCircle } from "lucide-react" export default function FailureAnimation() { return ( ) } [V0_FILE]typescriptreact:file="components/pet-classifier.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" import ImageUploader from "./image-uploader" import CameraCapture from "./camera-capture" import ResultCard from "./result-card" import { Loader2, AlertCircle } from "lucide-react" import { API_URL } from "@/app/env" import { Alert, AlertDescription } from "@/components/ui/alert" import { motion, AnimatePresence } from "framer-motion" import ApiStatusIndicator from "./api-status-indicator" import ApiTestButton from "./api-test-button" import SuccessAnimation from "./success-animation" import FailureAnimation from "./failure-animation" type InputMethod = "upload" | "camera" type PredictionResult = { label: "cat" | "dog" | "human" confidence?: number } type ApiStatus = "unknown" | "connected" | "disconnected" | "checking" export default function PetClassifier() { const [inputMethod, setInputMethod] = useState("upload") const [image, setImage] = useState(null) const [isLoading, setIsLoading] = useState(false) const [result, setResult] = useState(null) const [error, setError] = useState(null) const [apiStatus, setApiStatus] = useState("unknown") const { toast } = useToast() const handleImageSelect = (imageData: string) => { setImage(imageData) setResult(null) setError(null) } const handleReset = () => { setImage(null) setResult(null) setError(null) } const testApiConnection = async () => { try { setApiStatus("checking") setIsLoading(true) const response = await fetch(`${API_URL}/test`, { method: "GET", }) if (!response.ok) { throw new Error("API test failed") } const data = await response.json() setApiStatus("connected") toast({ title: "API Connection Successful", description: data.message || "Connection to the API is working!", variant: "default", action: , }) } catch (err) { setApiStatus("disconnected") toast({ title: "API Connection Failed", description: `Could not connect to the API at ${API_URL}. Please check if it's running.`, variant: "destructive", action: , }) } finally { setIsLoading(false) } } // Auto-check API status on component mount useEffect(() => { testApiConnection() }, []) const handleSubmit = async () => { if (!image) { setError("Please select or capture an image first") return } try { setIsLoading(true) setError(null) // Convert base64 to blob const base64Response = await fetch(image) const blob = await base64Response.blob() // Create form data const formData = new FormData() formData.append("file", blob, "image.jpg") // Send to API const response = await fetch(`${API_URL}/predict`, { method: "POST", body: formData, }) if (!response.ok) { throw new Error("Failed to get prediction") } const data = await response.json() setResult({ label: data.prediction, confidence: data.confidence, }) } catch (err) { setError("Failed to process the image. Please try again.") console.error(err) } finally { setIsLoading(false) } } return (

Pet Classifier

Image Classification

Upload or capture an image to classify

setInputMethod(value as InputMethod)} className="w-full" > Upload Image Use Camera {error && ( {error} )} {result && image && ( )}

{image && ( )}

) }