https://github.com/fikriaf/ai-vision-web
This is an AI-powered waste classification application that uses computer vision to detect and categorize different types of waste materials.
https://github.com/fikriaf/ai-vision-web
fastapi fullstack-ai object-detection react realtime waste-detection websocket yolov8
Last synced: about 1 month ago
JSON representation
This is an AI-powered waste classification application that uses computer vision to detect and categorize different types of waste materials.
- Host: GitHub
- URL: https://github.com/fikriaf/ai-vision-web
- Owner: fikriaf
- Created: 2025-07-19T01:14:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-19T05:46:55.000Z (11 months ago)
- Last Synced: 2025-07-19T06:02:40.002Z (11 months ago)
- Topics: fastapi, fullstack-ai, object-detection, react, realtime, waste-detection, websocket, yolov8
- Language: TypeScript
- Homepage: https://ai-vision-web.vercel.app
- Size: 6.14 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
AI Vision Waste Classification System
Live UI:
https://ai-vision-web.vercel.app/
## Overview
This is an AI-powered waste classification application that uses computer vision to detect and categorize different types of waste materials. The system combines a React frontend with a Node.js/Express backend and a Python FastAPI service for AI processing, utilizing YOLO models for real-time object detection.
## System Architecture
### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Build Tool**: Vite for fast development and optimized builds
- **UI Framework**: Shadcn/ui components built on Radix UI primitives
- **Styling**: Tailwind CSS with CSS variables for theming
- **State Management**: TanStack Query for server state management
- **Routing**: Wouter for lightweight client-side routing
### Backend Architecture
- **Primary Backend**: Node.js with Express server
- **AI Processing**: Separate Python FastAPI service for YOLO model inference
- **Communication**: WebSocket connections for real-time data streaming
- **Session Management**: In-memory storage with plans for database integration
## Key Components
### Frontend Components
1. **CameraFeed**: Handles webcam access and real-time video streaming
2. **ControlPanel**: Configuration interface for detection parameters and model settings
3. **PerformanceMetrics**: Real-time system performance monitoring
4. **UI Components**: Complete Shadcn/ui component library for consistent interface
### Backend Services
1. **Express Server**: Main application server handling HTTP requests and WebSocket connections
2. **Python Backend**: FastAPI service with YOLO model integration
3. **WebSocket Manager**: Real-time communication between frontend and AI processing
4. **Performance Monitor**: System resource monitoring (CPU, memory, GPU usage)
5. **File Handler**: Manages model uploads and data exports
### AI/ML Components
1. **YOLO Detector**: Ultralytics YOLO implementation for waste classification
2. **Model Configuration**: Configurable confidence thresholds and class filtering
3. **Real-time Processing**: Frame-by-frame analysis with performance optimization
## Data Flow
1. **Camera Feed**: User webcam captures video frames
2. **Frame Processing**: Frames sent via WebSocket to Python backend
3. **AI Inference**: YOLO model processes frames and detects waste objects
4. **Results Streaming**: Detection results sent back to frontend via WebSocket
5. **Data Storage**: Results optionally stored in PostgreSQL database
6. **Performance Monitoring**: System metrics continuously monitored and displayed
### Waste Classification Categories
- Plastic (Plastik)
- Glass (Kaca)
- Cans (Kaleng)
## External Dependencies
### Frontend Dependencies
- **React Ecosystem**: React, React DOM, React Router (Wouter)
- **UI Framework**: Radix UI primitives, Lucide icons
- **State Management**: TanStack Query
- **Styling**: Tailwind CSS, class-variance-authority
- **Build Tools**: Vite, TypeScript
### Backend Dependencies
- **Server Framework**: Express.js, WebSocket support
### Python AI Backend
- **Web Framework**: FastAPI with uvicorn
- **Computer Vision**: OpenCV, Ultralytics YOLO
- **Performance**: NumPy, psutil for system monitoring
- **File Handling**: aiofiles for async file operations
## Deployment Strategy
### Development Environment
- **Frontend**: Vite dev server with HMR
- **Backend**: tsx for TypeScript execution with hot reload
- **AI Service**: FastAPI with uvicorn in development mode
### Production Build
- **Frontend**: Static build output served by Express
- **Backend**: Compiled TypeScript bundle with ESBuild
- **AI Service**: Production FastAPI deployment
- **Environment**: NODE_ENV-based configuration
## Recent Changes
- **July 19, 2025 - WebSocket Input Configuration**
- Added WebSocket server input field to allow manual connection setup
- URL input now updates internal WebSocket hook dynamically
- Ensures flexibility for different local/remote server configurations
- WebSocket reconnects automatically on URL change
- **July 07, 2025 - Theme and Camera Selection Added**
- Added dark/light mode toggle with theme provider
- Implemented camera selection dropdown for multiple cameras
- Updated all components to use theme-aware styling (surface/muted colors)
- Enhanced camera hook to support device enumeration and switching
- Improved responsive design for better light/dark mode contrast
## Changelog
- July 19, 2025. Added WebSocket input field for manual server connection
- July 07, 2025. Initial setup with AI waste classification system
- July 07, 2025. Added theme toggle and camera selection features
## User Preferences
Preferred communication style: Simple, everyday language.
UI Preferences: Dark/light theme toggle, camera selection support, theme-aware styling