YoloDetect

This is a simple web app to demonstrate how to use YOLO and LiteRT.js 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, @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, which is deployed on Vercel.

Model Export

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

pip install ultralytics

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
• Yolo12
• Yolo11
• LiteRT.js
• TensorFlow.js
• 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 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! 🚀