AntiGuard-Object-Detection 🎯

Project Description

This project is a high-performance Real-Time Object Detection application that runs directly in the browser. It leverages a webcam feed to instantaneously detect and classify objects in view, drawing bounding boxes and confidence scores. It further features an accessibility-driven capability to announce detected objects out loud using the browser's native Speech Synthesis API.

Built on top of React (with TypeScript) and Vite, the application offers a lightning-fast and robust development footprint. At its core, it uses the TensorFlow.js COCO-SSD model to provide edge-based, client-side inference, ensuring user privacy and low latency without requiring server-side processing for the heavy lifting. Tailwind CSS forms the UI backbone, presenting a beautiful, modern, and dark-themed dashboard.

Workflow

graph TD
    A[User Grants Camera Access] --> B[React-Webcam Feed Initiated];
    B --> C[TensorFlow.js Initialization];
    C --> D[Load COCO-SSD Model];
    D --> E{Inference Loop - requestAnimationFrame};
    E --> F[Extract Video Frame];
    F --> G[Model Predicts Objects & Bounding Boxes];
    G --> H[Render Canvas with Bounding Boxes];
    G --> I[Update UI Detection List];
    H --> E;
    G -- "Confidence > 70%" --> J[Speech Synthesis Announcement];
    J --> E;

Loading

Tools Used

• Framework: React 18 (TypeScript)
• Bundler: Vite 5
• Styling: Tailwind CSS
• Machine Learning: TensorFlow.js (@tensorflow/tfjs), COCO-SSD Model (@tensorflow-models/coco-ssd)
• Key Modules:
  • react-webcam for video handling
  • lucide-react for iconography
• Environment: Node.js, Web Browser (Modern specs with WebGL/WebGPU support recommended for TF.js)

How to Run

1. Clone the repository:

   git clone https://github.com/Abhi200550/AntiGuard-Object-Detection.git
   cd AntiGuard-Object-Detection

2. Install dependencies: Make sure you have Node.js installed, then run:

   npm install

3. Run the development server:

   npm run dev

4. Build for production:

   npm run build