{"id":29639683,"url":"https://github.com/fikriaf/ai-vision-web","last_synced_at":"2026-05-04T20:33:49.052Z","repository":{"id":305253843,"uuid":"1022387226","full_name":"fikriaf/AI-Vision-Web","owner":"fikriaf","description":"This is an AI-powered waste classification application that uses computer vision to detect and categorize different types of waste materials.","archived":false,"fork":false,"pushed_at":"2025-07-19T05:46:55.000Z","size":6437,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-19T06:02:40.002Z","etag":null,"topics":["fastapi","fullstack-ai","object-detection","react","realtime","waste-detection","websocket","yolov8"],"latest_commit_sha":null,"homepage":"https://ai-vision-web.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fikriaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-19T01:14:20.000Z","updated_at":"2025-07-19T05:46:59.000Z","dependencies_parsed_at":"2025-07-19T06:02:42.060Z","dependency_job_id":"063e7d55-b694-4274-8aa5-e76f8e1f637d","html_url":"https://github.com/fikriaf/AI-Vision-Web","commit_stats":null,"previous_names":["fikriaf/ai-vision-web"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/fikriaf/AI-Vision-Web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fikriaf%2FAI-Vision-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fikriaf%2FAI-Vision-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fikriaf%2FAI-Vision-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fikriaf%2FAI-Vision-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fikriaf","download_url":"https://codeload.github.com/fikriaf/AI-Vision-Web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fikriaf%2FAI-Vision-Web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266375798,"owners_count":23919627,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fastapi","fullstack-ai","object-detection","react","realtime","waste-detection","websocket","yolov8"],"created_at":"2025-07-21T20:38:17.409Z","updated_at":"2026-05-04T20:33:49.041Z","avatar_url":"https://github.com/fikriaf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eAI Vision Waste Classification System\u003c/h1\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/fikriaf/AI-Vision-Web/blob/main/Preview.png?raw=true\" width=\"500px\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://github.com/fikriaf/AI-Vision-Web/blob/main/image.png?raw=true\" width=\"540px\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/React-61DAFB?style=flat\u0026logo=react\u0026logoColor=black\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/TypeScript-3178C6?style=flat\u0026logo=typescript\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/Express-000000?style=flat\u0026logo=express\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/FastAPI-009688?style=flat\u0026logo=fastapi\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/Python-3776AB?style=flat\u0026logo=python\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/YOLO-FFDD00?style=flat\u0026logo=github\u0026logoColor=black\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/badge/WebSocket-4CAF50?style=flat\u0026logo=websocket\u0026logoColor=white\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/github/repo-size/fikriaf/AI-Vision-Web?color=blue\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/code-size/fikriaf/AI-Vision-Web?color=green\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Live UI:\n  \u003ca href=\"https://ai-vision-web.vercel.app/\" target=\"_blank\"\u003ehttps://ai-vision-web.vercel.app/\u003c/a\u003e\n\u003c/p\u003e\n\n## Overview\n\nThis 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.\n\n## System Architecture\n\n### Frontend Architecture\n- **Framework**: React 18 with TypeScript\n- **Build Tool**: Vite for fast development and optimized builds\n- **UI Framework**: Shadcn/ui components built on Radix UI primitives\n- **Styling**: Tailwind CSS with CSS variables for theming\n- **State Management**: TanStack Query for server state management\n- **Routing**: Wouter for lightweight client-side routing\n\n### Backend Architecture\n- **Primary Backend**: Node.js with Express server\n- **AI Processing**: Separate Python FastAPI service for YOLO model inference\n- **Communication**: WebSocket connections for real-time data streaming\n- **Session Management**: In-memory storage with plans for database integration\n\n## Key Components\n\n### Frontend Components\n1. **CameraFeed**: Handles webcam access and real-time video streaming\n2. **ControlPanel**: Configuration interface for detection parameters and model settings\n3. **PerformanceMetrics**: Real-time system performance monitoring\n4. **UI Components**: Complete Shadcn/ui component library for consistent interface\n\n### Backend Services\n1. **Express Server**: Main application server handling HTTP requests and WebSocket connections\n2. **Python Backend**: FastAPI service with YOLO model integration\n3. **WebSocket Manager**: Real-time communication between frontend and AI processing\n4. **Performance Monitor**: System resource monitoring (CPU, memory, GPU usage)\n5. **File Handler**: Manages model uploads and data exports\n\n### AI/ML Components\n1. **YOLO Detector**: Ultralytics YOLO implementation for waste classification\n2. **Model Configuration**: Configurable confidence thresholds and class filtering\n3. **Real-time Processing**: Frame-by-frame analysis with performance optimization\n\n## Data Flow\n\n1. **Camera Feed**: User webcam captures video frames\n2. **Frame Processing**: Frames sent via WebSocket to Python backend\n3. **AI Inference**: YOLO model processes frames and detects waste objects\n4. **Results Streaming**: Detection results sent back to frontend via WebSocket\n5. **Data Storage**: Results optionally stored in PostgreSQL database\n6. **Performance Monitoring**: System metrics continuously monitored and displayed\n\n### Waste Classification Categories\n- Plastic (Plastik)\n- Glass (Kaca) \n- Cans (Kaleng)\n\n## External Dependencies\n\n### Frontend Dependencies\n- **React Ecosystem**: React, React DOM, React Router (Wouter)\n- **UI Framework**: Radix UI primitives, Lucide icons\n- **State Management**: TanStack Query\n- **Styling**: Tailwind CSS, class-variance-authority\n- **Build Tools**: Vite, TypeScript\n\n### Backend Dependencies\n- **Server Framework**: Express.js, WebSocket support\n\n### Python AI Backend\n- **Web Framework**: FastAPI with uvicorn\n- **Computer Vision**: OpenCV, Ultralytics YOLO\n- **Performance**: NumPy, psutil for system monitoring\n- **File Handling**: aiofiles for async file operations\n\n## Deployment Strategy\n\n### Development Environment\n- **Frontend**: Vite dev server with HMR\n- **Backend**: tsx for TypeScript execution with hot reload\n- **AI Service**: FastAPI with uvicorn in development mode\n\n### Production Build\n- **Frontend**: Static build output served by Express\n- **Backend**: Compiled TypeScript bundle with ESBuild\n- **AI Service**: Production FastAPI deployment\n- **Environment**: NODE_ENV-based configuration\n\n## Recent Changes\n- **July 19, 2025 - WebSocket Input Configuration**\n  ![Hasil Demo](https://github.com/fikriaf/AI-Vision-Web/blob/main/image.png)\n  \n  - Added WebSocket server input field to allow manual connection setup\n  - URL input now updates internal WebSocket hook dynamically\n  - Ensures flexibility for different local/remote server configurations\n  - WebSocket reconnects automatically on URL change\n  \n- **July 07, 2025 - Theme and Camera Selection Added**\n  - Added dark/light mode toggle with theme provider\n  - Implemented camera selection dropdown for multiple cameras\n  - Updated all components to use theme-aware styling (surface/muted colors)\n  - Enhanced camera hook to support device enumeration and switching\n  - Improved responsive design for better light/dark mode contrast\n\n## Changelog\n- July 19, 2025. Added WebSocket input field for manual server connection\n- July 07, 2025. Initial setup with AI waste classification system\n- July 07, 2025. Added theme toggle and camera selection features\n\n## User Preferences\nPreferred communication style: Simple, everyday language.\nUI Preferences: Dark/light theme toggle, camera selection support, theme-aware styling\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffikriaf%2Fai-vision-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffikriaf%2Fai-vision-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffikriaf%2Fai-vision-web/lists"}