zinc-detection

byYashasvi paheriya

Act as a senior AI engineer, full-stack developer, and UI/UX designer. Build a complete, production-ready Object Detection Web App called "VisionX". This should be a smooth, modern, and premium system inspired by YOLO interfaces, but NOT a copy. Create a unique, cleaner, and more futuristic experience. ------------------------------------- 🧠 CORE SYSTEM: - Use YOLOv8 pretrained model (COCO trained) - Perform real object detection (no fake data) - Support: 1. Image Detection 2. Video Detection 3. Live Camera Detection ------------------------------------- ⚙️ BACKEND (FastAPI): Create scalable APIs: 1. POST /detect/image - Input: image file - Output: { "detections": [ { "label": "person", "confidence": 0.92, "bbox": [x1, y1, x2, y2] } ] } 2. POST /detect/video - Process video frame-by-frame - Return detections or processed stream 3. WebSocket /detect/live - Real-time detection from webcam frames ------------------------------------- ⚡ MODEL: - Load YOLOv8 (yolov8n.pt) - Optimize for speed - Resize frames before inference - Filter low confidence detections ------------------------------------- 🎨 FRONTEND (MODERN UI/UX): Create a premium, smooth UI using: - React / Next.js - TailwindCSS - Framer Motion ------------------------------------- 🎯 THEME: - Mixed Black & White theme - Background: #0f0f0f (dark grey, not pure black) - White cards + subtle borders - Glassmorphism effect (blur + transparency) - Minimal and futuristic design ------------------------------------- 📱 LAYOUT: 1. Navbar: - Logo: VisionX - Tabs: - Image - Video - Live - Smooth animated tab indicator 2. Main Area: - Drag & Drop Upload Box - Buttons: - Upload Image - Upload Video - Start Camera 3. Detection Display: - Show preview (image/video/live) - Overlay bounding boxes using canvas - Show label + confidence ------------------------------------- ⏳ SKELETON LOADER (IMPORTANT): - Grey skeleton UI while processing - Include: - Image placeholder - Text lines - Fake bounding boxes - Shimmer animation - Smooth transition → real results ------------------------------------- ✨ ANIMATIONS: - Fade-in results - Bounding boxes animate (scale + opacity) - Smooth hover effects - Button micro-interactions ------------------------------------- 📦 COMPONENTS: - UploadBox - DetectionCanvas - SkeletonLoader - ModeSwitcher (Image / Video / Live) - ResultPanel (object list + confidence bars) ------------------------------------- 🔁 UX FLOW: 1. User uploads file / starts camera 2. Preview appears instantly 3. Skeleton loader shows "Detecting..." 4. Backend processes data 5. Results returned 6. Bounding boxes animate smoothly 7. Object list updates ------------------------------------- 🚀 FEATURES: - Real-time object detection (live camera) - Video frame detection - Object count display - Confidence visualization (progress bars) - Smooth UI transitions ------------------------------------- 📁 STRUCTURE: backend/ frontend/ ------------------------------------- ⚡ PERFORMANCE: - Fast API response - Lightweight model - Smooth frontend rendering ------------------------------------- 🎯 OUTPUT: - Fully working backend (YOLO detection) - Fully working frontend (modern UI) - Clean architecture - Smooth, premium experience ------------------------------------- IMPORTANT: Do NOT overcomplicate. Do NOT copy Ultralytics UI. Focus on: 1. Accuracy of detection 2. Smooth user experience 3. Clean, modern design 4. Real-time responsiveness