KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

YoloDetect

★ 16 Open GitHub ↗

YOLO and LiteRT.js to find and recognize objects in image, video, and webcam content.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# YoloDetect

This is a simple web app to demonstrate how to use YOLO and [LiteRT.js](https://developers.google.com/edge/litert/web) to identify and locate objects within images, videos, and live camera feeds, running fully client-side on WebGPU.

## Project Structure

The project is structured as follows:

- `assets/`: This directory contains screenshots of the output results and deployment-related reports.

- `public/`: Static assets like images, icons, and fonts. Also contains the model files.

- `yolo11n.tflite`: Yolo11 nano object detection model, converted to LiteRT (`.tflite`) format.
  - `yolo12n.tflite`: Yolo12 nano object detection model, converted to LiteRT (`.tflite`) format.
  - `yolo26n.tflite`: Yolo26 nano object detection model, converted to LiteRT (`.tflite`) format.

- `src/`: Core source code for the application.

- `components/`: Reusable React components for the application.

- `btn-handler.jsx`: Button handler component for managing image/video/webcam stream actions.
    - `loader.jsx`: Loader component for displaying loading state.

- `style/`: CSS files for styling the application.

- `index.css`: Global CSS styles for the application.
    - `loader.css`: CSS styles for the loader component.
    - `App.css`: CSS styles for the main application.

- `utils/`: Utility functions for the application.

- `detect.js`: Object detection utility js function — pre/post-processing (padding, resizing, NMS) done with tf.js, inference run through LiteRT.js.
    - `litert.js`: Loads the LiteRT.js Wasm runtime (via CDN) and bridges it to tf.js's WebGPU backend so tensors move between the two without a CPU round-trip; fetches and compiles `.tflite` models with load-progress reporting.
    - `renderBox.js`: Box rendering utility js function.
    - `webcam.js`: Webcam utility js function.
    - `labels.json`: Labels for the Yolo model classes in JSON format.

- `App.jsx`: Main React component for the application.
  - `main.jsx`: Entry point for the application.

- `.gitignore`: Specifies which files and directories should be ignored by Git.
- `LICENSE`: Project licensing information.
- `README.md`: Project documentation and setup instructions.
- `index.html`: Main HTML file for the application.
- `package.json`: Project dependencies and script configuration.
- `vite.config.js`: Vite configuration file for the project.

## Technologies Used

- **HTML**: Standard markup language for creating web pages.
- **CSS**: Style sheet for designing the layout of web pages.
- **JavaScript**: High-level programming language for building web applications.
- **React**: JavaScript library for building user interfaces.
- **LiteRT.js**: Google's WebGPU-accelerated in-browser runtime that runs the `.tflite` models directly ([`@litertjs/core`](https://www.npmjs.com/package/@litertjs/core), [`@litertjs/tfjs-interop`](https://www.npmjs.com/package/@litertjs/tfjs-interop)).
- **TensorFlow.js**: Used for image pre-processing (padding/resizing), non-max suppression, and as the interop layer feeding tensors into LiteRT.js.
- **Ultralytics**: Exported the YOLO series nano detection models (YOLO11, YOLO12, YOLO26) to LiteRT (`.tflite`) format.

## Getting Started

To get started with this project, follow the steps below:

1. Clone the repository: `git clone https://github.com/sitammeur/YoloDetect.git`
2. Change the directory: `cd YoloDetect`
3. Install the required dependencies: `npm install`
4. Run the application: `npm run dev`

Open your local host to view the web application in your browser at `http://localhost:5173/`. You can also access a live version of the application [here](https://yolo-detect.vercel.app/), which is deployed on Vercel.

## Model Export

The `.tflite` files in `public/` are exported from the PyTorch (`.pt`) weights using [Ultralytics](https://docs.ultralytics.com/) (`ultralytics >= 8.4.83` is required for the single-file LiteRT export with embedded metadata):

```bash
pip install ultralytics
```

```python
from ultralytics import YOLO

model = YOLO("yolo26n.pt")
model.export(format="litert", end2end=False)  # creates yolo26n.tflite
```

Swap `"yolo26n.pt"` for `"yolo11n.pt"` / `"yolo12n.pt"` to export the other models, then drop the resulting `.tflite` file into `public/`.

> **Note**: `end2end=False` matters most for YOLO26 — its default export uses an end-to-end NMS head with `int64`/`gather_nd` ops that the LiteRT.js WebGPU delegate can't run, so it silently falls back to slower CPU/Wasm execution. YOLO11 and YOLO12 already use the standard head by default.

## Results

The YoloDetect web application allows users to upload an image or video file, or use their webcam to detect and locate objects within the media. Users can switch between three YOLO nano models (YOLO11, YOLO12, YOLO26) from a dropdown; each runs entirely in-browser via LiteRT.js on WebGPU. The application draws bounding boxes around detected objects along with their corresponding confidence scores.

**Note**: To see results regarding testing and deployment, please refer to the `assets` folder in the repository. Requires a WebGPU-capable browser (Chrome/Edge 113+, Safari 17.4+, or Firefox 121+ with partial support).

## References

The following resources were used to develop this project:

- [Yolo26](https://docs.ultralytics.com/models/yolo26/)
- [Yolo12](https://docs.ultralytics.com/models/yolo12/)
- [Yolo11](https://docs.ultralytics.com/models/yolo11/)
- [LiteRT.js](https://developers.google.com/edge/litert/web)
- [TensorFlow.js](https://www.tensorflow.org/js)
- [Ultralytics](https://github.com/ultralytics/ultralytics)

Special thanks to Wahyu Setianto for his contributions to projects involving the YOLO series of models, ONNX, TensorFlow.js, and more.

## Contributing

Contributions are welcome! If you would like to contribute to this project, please raise an issue to discuss the changes you would like to make. Once the changes are approved, you can create a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

## Contact

If you have any questions or suggestions regarding the project, feel free to reach out to me on my GitHub profile.

Happy coding! 🚀

YoloDetect

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README