| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>WaterMeter AI</title> |
| <link rel="stylesheet" href="style.css" /> |
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script> |
| </head> |
|
|
| <body> |
| <div class="background"></div> |
| <main class="container"> |
| <header class="hero"> |
| <div> |
| <h1>💧 WaterMeter AI</h1> |
| <p>Upload a meter photo and read the digits with a YOLOv8 ONNX model.</p> |
| </div> |
| <div class="status-group"> |
| <span id="modelStatus" class="badge loading">Loading model...</span> |
| <span id="appHint" class="hint">Upload <strong>best.onnx</strong> to the repository root.</span> |
| </div> |
| </header> |
|
|
| <section class="upload-card"> |
| <div id="dropZone" class="drop-zone"> |
| <input type="file" id="imageInput" accept="image/*" hidden /> |
| <div class="upload-content"> |
| <h2>Upload or drop an image</h2> |
| <p>Drag and drop a water meter photo, or browse locally.</p> |
| <button id="browseBtn" type="button">Browse Image</button> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="viewer"> |
| <div class="image-card"> |
| <div class="card-header"> |
| <h3>Preview</h3> |
| <span id="imageInfo" class="muted">No image selected.</span> |
| </div> |
| <div class="canvas-viewport"> |
| <canvas id="canvas"></canvas> |
| </div> |
| </div> |
|
|
| <div class="result-card"> |
| <h3>Prediction</h3> |
| <div class="reading"> |
| <span class="title">Meter Reading</span> |
| <span id="meterReading">--</span> |
| </div> |
| <div class="confidence"> |
| <span class="title">Average Confidence</span> |
| <span id="confidence">--</span> |
| </div> |
| <div class="prediction-footer"> |
| <button id="predictBtn" class="primary-button" type="button">Analyze Image</button> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="detections"> |
| <h2>Detected Objects</h2> |
| <div id="detectionsList" class="detections-grid"> |
| <p class="small-text">Upload an image and press Analyze Image to see detections.</p> |
| </div> |
| </section> |
| </main> |
|
|
| <script src="script.js"></script> |
| </body> |
|
|
| </html>
|
|
|
