Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samueltuoyo15/ai-object-detector
This is an ai powered Video Object Detection I built using Valinna Typescript and Html. Seamless Object Detection in real time
https://github.com/samueltuoyo15/ai-object-detector
Last synced: 2 days ago
JSON representation
This is an ai powered Video Object Detection I built using Valinna Typescript and Html. Seamless Object Detection in real time
- Host: GitHub
- URL: https://github.com/samueltuoyo15/ai-object-detector
- Owner: samueltuoyo15
- Created: 2025-02-03T09:16:47.000Z (3 days ago)
- Default Branch: main
- Last Pushed: 2025-02-03T10:28:16.000Z (3 days ago)
- Last Synced: 2025-02-03T10:34:18.456Z (3 days ago)
- Language: TypeScript
- Homepage: https://ai-object-detector-phi.vercel.app
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📌 Object Detection with COCO-SSD and TensorFlow.js
Real-time object detection web app using **TensorFlow.js** and the **COCO-SSD model**, supporting live video input from a user's device.
---
## 🚀 Features
✔️ Real-time object detection in video streams
✔️ Uses **COCO-SSD**, a lightweight and fast pre-trained model
✔️ Automatically stops detection when the tab is inactive
✔️ Stops the camera when the user leaves the page
✔️ Displays detection results dynamically
---
## 📂 Project Structure
```
/project-root
│── /dist # Compiled TypeScript files and html file
│── /src
│ ├── main.ts # Entry point, initializes video & model
│ ├── modelConfig.ts # Loads COCO-SSD & handles detection
│── /public
│ ├── # public directory
│── index.html # Main HTML file
│── tsconfig.json # TypeScript configuration
│── package.json # Dependencies (if using npm)
│── README.md # Project documentation
```
---
## 📜 How It Works
1. **Initialize the Camera**
- Requests permission to access the user's camera
- Starts a video stream on the page
2. **Load the COCO-SSD Model**
- Uses TensorFlow.js to load the pre-trained COCO-SSD model
3. **Detect Objects in Real Time**
- Continuously analyzes video frames and logs detected objects
- Displays detected objects with **name** and **confidence score**
4. **Optimize Performance**
- Stops detection when the tab is inactive
- Automatically turns off the camera when the user leaves
---
## 📦 Installation & Setup
### 1️⃣ Clone the Repository
```sh
git clone https://github.com/samueltuoyo15/Ai-Object-Detector.git
cd Ai-Object-Detector
```
### 2️⃣ Install Dependencies
```sh
npm install
```
### 3️⃣ Run the Project
run code:
```sh
npm run dev
```
Then open `index.html` in your browser.
---
---
## 🎯 Key Technologies Used
| Tech | Description |
|--------------------|--------------------------------------------------|
| **TypeScript** | Ensures type safety & better maintainability |
| **TensorFlow.js** | Runs machine learning models directly in the browser |
| **COCO-SSD** | Lightweight object detection model optimized for real-time use |
| **HTML5 & CSS3** | Simple, responsive UI |
| **MediaDevices API** | Accesses the user’s camera |
---
## 🛠 Possible Improvements
🔹 Add a UI overlay to highlight detected objects on video
🔹 Support image uploads for static object detection
🔹 Implement a **recording feature** to save detection results
---
## 👨💻 Author
| Name | Contact |
|--------------|----------------------------------------------|
| **Your Name** | 📧 [email protected] |
| GitHub | 🐙 [GitHub](https://github.com/samueluoyo15) |
| LinkedIn | 🔗 [LinkedIn](https://www.linkedin.com/in/samuel-tuoyo-%F0%9F%93%A2-8568b62b6) |
---
### 📢 Like this project? Give it a ⭐ on GitHub!
```md
⭐ Star the repo to support development!
```