itsparadie24/water-meter-reading

Water Meter Reading System (WMRS)

Water Meter Reading System (WMRS) is a static Hugging Face Spaces MVP for uploading a water meter image and returning a detected meter reading placeholder. The current version is designed to be deployed immediately without a Python server or paid hardware.

Features

• —Water meter image upload
• —Image preview
• —Detect Reading button
• —Results area for the detected meter reading
• —Confidence area
• —Reset/Clear button
• —Browser-only placeholder prediction function

Current MVP Status

The application interface and deployment structure are complete. The trained model is not connected yet. For now, predictMeterReading() in index.html returns:

{
  meter_reading: "Model not connected yet",
  confidence: "N/A"
}

This allows the Hugging Face Space to be created and shared now.

How to Run Locally

Open index.html in a browser.

No Python environment or package installation is required for the static MVP.

How to Connect the Trained Model Later

Static Spaces cannot directly run a Python/PyTorch model inside the browser. Use one of these paths when the trained model is ready:

1. 1.Keep this static interface and update predictMeterReading(imageFile) to call a hosted inference API.
2. 2.Convert the same Hugging Face Space to Gradio or Docker later and connect the model server-side.
3. 3.Export the model to a browser-compatible format such as ONNX/WebAssembly if the model is small enough for client-side inference.

The placeholder is located in index.html:

function predictMeterReading(imageFile) {
  return {
    meter_reading: "Model not connected yet",
    confidence: "N/A"
  };
}

Keep the same return shape when replacing it:

{
  meter_reading: "...",
  confidence: "..."
}

Keeping this interface stable means the visible application flow does not need to change.

How to Deploy to Hugging Face Spaces

1. 1.Create a new Space on Hugging Face.
2. 2.Select Static as the Space SDK.
3. 3.Upload these files to the Space repository:
4. 4.index.html
5. 5.README.md
6. 6..gitignore
7. 7.Commit the files.
8. 8.Hugging Face Spaces will serve index.html automatically.

Future Improvements

• —Connect the trained meter-reading model through an API, Gradio backend, Docker backend, or browser-compatible runtime
• —Add image preprocessing and validation
• —Display annotated detection results
• —Add batch image processing
• —Store reading history
• —Add confidence thresholds and error handling for low-quality images
• —Improve mobile layout for field use