This web application, built on ONNX Runtime Web, brings the power of YOLO object detection directly to your browser. It supports full client-side inference without sending data to a server, offering privacy and low latency.

To achieve the best performance using WebGPU, please ensure the following:

1. Browser: Use a Chromium-based browser (Chrome, Edge, Brave).
2. Enable Flags:
   • Type chrome://flags (or edge://flags) in your address bar.
   • Search for "Unsafe WebGPU Support" and set it to Enabled.
   • (Linux / Android users): Search for "Vulkan" (#enable-vulkan) and set it to Enabled.
   • Relaunch your browser.

💡 Note: If WebGPU is not available, the app will automatically fall back to WASM (CPU), which is slower but universally compatible.

• 🔍 Object Detection - Precisely identify and locate various objects in real-time.
• ⚡ High Performance - Powered by WebGPU acceleration.
• 🔒 Privacy First - All processing happens locally on your device.

Models are licensed under AGPL-3.0 via Ultralytics.

1. Clone the repository

   git clone https://github.com/nomi30701/yolo-object-detection-onnxruntime-web.git

2. Navigate to project directory

   cd yolo-object-detection-onnxruntime-web

3. Install dependencies

   yarn install

4. Run Development Server

   yarn dev

5. Build for Production

   yarn build

You can run your own YOLO models in this app.

Use Ultralytics to export your model. Crucial: Use opset=12 for WebGPU compatibility.

from ultralytics import YOLO model = YOLO("path/to/your/model.pt") # Export with opset=12 and dynamic shape model.export(format="onnx", opset=12, dynamic=True)

You have two ways to load your model:

Simply click the "Add model" button in the web interface to upload your .onnx file temporarily.

1. Copy your .onnx file to ./public/models/.
2. Edit App.jsx to add your model to the list:

<select name="model-selector"> <option value="yolo11n">YOLO11n (2.6M)</option> <option value="your-custom-model">Your Custom Model</option> </select>

If your model uses custom classes (not COCO), you need to update the class definitions:

• UI Method: Click "Add Classes.json" to upload a JSON file mapping class IDs to names.
• Code Method: Update src/utils/yolo_classes.json.

{ "class": { "0": "person", "1": "bicycle" } }

You can control how images are pre-processed via the imgsz_type setting:

• Dynamic (Default):

  • Uses the original image aspect ratio.
  • Pros: Best accuracy.
  • Cons: Slower on large images; inference time varies.
  • Requires model exported with dynamic=True.

• Zero Pad (Square):

  • Pads image to square and resizes to 640x640.
  • Pros: Consistent, faster speed suitable for real-time video.
  • Cons: Slight accuracy drop on small objects due to scaling.