Dive into the world of AI with the Object Detection Agent, a minimalist yet powerful web application designed to identify objects in real-time using your device's camera. Built with TypeScript and leveraging the robust capabilities of TensorFlow.js and the COCO-SSD model, this project offers a dynamic and interactive experience for recognizing common objects right in your browser.
Ready to see AI in action? Follow these steps to get the Object Detection Agent running locally on your machine.
Before you begin, make sure you have Node.js and npm (Node Package Manager) installed.
Clone the repository and install the necessary dependencies:
git clone https://github.com/samueltuoyo15/Object-Detect-Agent.git
cd Object-Detect-AgentOnce inside the project directory, install the dependencies:
npm installTo start the development server and launch the application:
npm run devYour browser should automatically open the application, usually at http://localhost:5173/. If it doesn't, navigate there manually.
Upon launching the application, you'll be prompted to grant camera access. Allow access to begin real-time object detection.
- Camera Feed: You'll see a live video feed from your camera.
- Object Detection: The AI model continuously analyzes the video stream for recognizable objects.
- Bounding Boxes: Detected objects will be highlighted with green bounding boxes drawn directly on the video feed.
- Results Display: A list of detected objects, along with their confidence scores (e.g., "person - 98.50%"), will be displayed next to the video.
- No Detection Message: If no recognizable objects are found, a "No Recognizable Object Detected" message will appear.
- Background Handling: The application intelligently pauses detection and the camera stream when the browser tab is not active, reloading upon focus to ensure optimal performance and resource management.
- Real-time Object Detection: Instantly identifies objects from your live camera feed.
- Browser-based Interface: Runs entirely in the browser, requiring no complex server-side setup.
- AI-Powered: Utilizes the pre-trained COCO-SSD model via TensorFlow.js for accurate object recognition.
- Visual Feedback: Draws bounding boxes around detected objects for clear visualization.
- Confidence Scores: Displays the probability of detection for each identified object.
- Responsive Camera Management: Automatically handles camera stream and detection based on tab visibility, optimizing performance.
- Modern Web Stack: Built with TypeScript and Vite for a robust and efficient development experience.
| Technology | Description |
|---|---|
| TypeScript | A strongly typed superset of JavaScript that compiles to plain JavaScript, enhancing code quality. |
| Vite | A next-generation frontend tooling that provides an extremely fast development experience. |
| TensorFlow.js | An open-source machine learning library for JavaScript, enabling on-device ML in the browser. |
| COCO-SSD Model | A pre-trained object detection model (part of TensorFlow.js) capable of detecting 90 common objects. |
Contributions are always welcome! If you have ideas for improvements or new features, feel free to contribute.
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-name. - Make your changes and ensure the code adheres to the project's style.
- Commit your changes:
git commit -m 'feat: Add new awesome feature'. - Push to your branch:
git push origin feature/your-feature-name. - Open a Pull Request to the
mainbranch of this repository.
This project is currently under development, and the license information will be provided shortly.
Developed with ❤️ by OritseWeyinmi Samuel Tuoyo.
- LinkedIn: samuel_tuoyo
- X: @TuoyoS26091
-yellow.svg){kind=icon}
