Spaces:
Running
Running
| | |
| <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> | |