WaterMeter AI

A simple browser-based water meter reading demo using ONNX Runtime Web and a YOLOv8 ONNX model.

Files

• index.html — UI and page structure
• style.css — app styling
• script.js — model loading, image preprocessing, inference, drawing, and reading extraction
• labels.json — model class labels reference
• best.onnx — your YOLOv8 ONNX model file (must be added separately)

Setup

1. Place your best.onnx model in the same folder as index.html.
2. Open the files from a static server or deploy to a static host such as Hugging Face Spaces.

No Python server is required for the repository structure below.

Usage

1. Upload or drag a water meter image.
2. Press Analyze Image.
3. The app will show detected boxes and assemble meter digits into a reading.

Notes

• The app expects a YOLOv8 ONNX model that returns standard detection output: [x, y, w, h, obj, class01, class02, ...].
• For best results, use a model trained on your meter dataset.
• If best.onnx is missing, the model load will fail.

Hugging Face Spaces

This project is ready to deploy as a static Space. Upload the repository including best.onnx to the Space root.

If you want to use a remote model URL instead, update MODEL_PATH in script.js.