---
title: WaterMeter AI
emoji: 💧
colorFrom: blue
colorTo: green
sdk: static
pinned: true
---

# 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`.