| --- |
| title: WaterMeter AI |
| emoji: 💧 |
| colorFrom: blue |
| colorTo: cyan |
| 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`. |
|
|
