Upload folder using huggingface_hub

Browse files

Files changed (6) hide show

README.md +36 -3
best.onnx +3 -0
index.html +75 -0
labels.json +17 -0
script.js +395 -0
style.css +299 -0

README.md CHANGED Viewed

@@ -1,3 +1,36 @@
----
-license: mit
----

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

best.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:d78f76f262590562d462d076eebe326df1f804bb0b2c5cfaf4155f773cffbcc2
+size 12274732

index.html ADDED Viewed

	@@ -0,0 +1,75 @@

+<!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>

labels.json ADDED Viewed

	@@ -0,0 +1,17 @@

+{
+  "classes": [
+    "meter",
+    "window",
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "u"
+  ]
+}

script.js ADDED Viewed

	@@ -0,0 +1,395 @@

+const MODEL_PATH = "https://huggingface.co/fique5/watermeter/resolve/main/best.onnx";;
+const INPUT_SIZE = 640;
+const CLASS_NAMES = [
+  "meter",
+  "window",
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "u"
+];
+const SCORE_THRESHOLD = 0.25;
+const IOU_THRESHOLD = 0.45;
+const MAX_BOXES = 120;
+let session = null;
+let selectedImage = null;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const imageInput = document.getElementById("imageInput");
+const browseBtn = document.getElementById("browseBtn");
+const dropZone = document.getElementById("dropZone");
+const predictBtn = document.getElementById("predictBtn");
+const modelStatus = document.getElementById("modelStatus");
+const meterReading = document.getElementById("meterReading");
+const confidence = document.getElementById("confidence");
+const detectionsList = document.getElementById("detectionsList");
+const imageInfo = document.getElementById("imageInfo");
+async function loadModel() {
+  modelStatus.textContent = "Loading model...";
+  modelStatus.className = "badge loading";
+  try {
+    session = await ort.InferenceSession.create(MODEL_PATH, {
+      executionProviders: ["wasm"]
+    });
+    modelStatus.textContent = "Model ready";
+    modelStatus.className = "badge ready";
+  } catch (error) {
+    console.error(error);
+    modelStatus.textContent = "Model failed";
+    modelStatus.className = "badge error";
+    detectionsList.innerHTML =
+      "<p class=\"small-text\">Unable to load the ONNX model. Make sure best.onnx is present in the repository root.</p>";
+  }
+}
+function setDropZoneState(active) {
+  if (active) {
+    dropZone.classList.add("drag-over");
+  } else {
+    dropZone.classList.remove("drag-over");
+  }
+}
+browseBtn.addEventListener("click", () => imageInput.click());
+imageInput.addEventListener("change", (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    loadImage(file);
+  }
+});
+dropZone.addEventListener("dragover", (event) => {
+  event.preventDefault();
+  setDropZoneState(true);
+});
+dropZone.addEventListener("dragleave", () => setDropZoneState(false));
+dropZone.addEventListener("drop", (event) => {
+  event.preventDefault();
+  setDropZoneState(false);
+  const file = event.dataTransfer.files[0];
+  if (file) {
+    loadImage(file);
+  }
+});
+window.addEventListener("dragover", (event) => {
+  event.preventDefault();
+});
+window.addEventListener("drop", (event) => {
+  event.preventDefault();
+});
+function loadImage(file) {
+  const img = new Image();
+  img.onload = () => {
+    selectedImage = img;
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0);
+    imageInfo.textContent = `${img.width}px × ${img.height}px`;
+    meterReading.textContent = "--";
+    confidence.textContent = "--";
+    detectionsList.innerHTML =
+      "<p class=\"small-text\">Ready to analyze. Press Analyze Image.</p>";
+    URL.revokeObjectURL(img.src);
+  };
+  img.src = URL.createObjectURL(file);
+}
+predictBtn.addEventListener("click", runPrediction);
+async function runPrediction() {
+  if (!selectedImage) {
+    alert("Please upload an image first.");
+    return;
+  }
+  if (!session) {
+    alert("Model is not ready yet. Wait until the model finishes loading.");
+    return;
+  }
+  modelStatus.textContent = "Running inference...";
+  modelStatus.className = "badge loading";
+  try {
+    const prediction = await predictImage(selectedImage);
+    drawDetectionResults(prediction.detections);
+    updatePredictionUI(prediction);
+    modelStatus.textContent = "Ready";
+    modelStatus.className = "badge ready";
+  } catch (error) {
+    console.error(error);
+    modelStatus.textContent = "Inference failed";
+    modelStatus.className = "badge error";
+    detectionsList.innerHTML =
+      "<p class=\"small-text\">Inference failed. Check your model path and image format.</p>";
+  }
+}
+async function predictImage(image) {
+  const {tensor, ratio, pad, originalWidth, originalHeight} = prepareInput(image);
+  const inputName = session.inputNames[0];
+  const feeds = {};
+  feeds[inputName] = new ort.Tensor("float32", [1, 3, INPUT_SIZE, INPUT_SIZE], tensor);
+  const results = await session.run(feeds);
+  const outputName = session.outputNames[0];
+  const rawOutput = results[outputName];
+  const detections = decodeOutput(
+    rawOutput.data,
+    rawOutput.dims,
+    ratio,
+    pad,
+    originalWidth,
+    originalHeight
+  );
+  return {
+    detections,
+    reading: extractMeterReading(detections),
+    averageConfidence: computeAverageConfidence(detections)
+  };
+}
+function prepareInput(image) {
+  const letterbox = letterboxImage(image, INPUT_SIZE);
+  const imageData = letterbox.imageData;
+  const floatArray = new Float32Array(1 * 3 * INPUT_SIZE * INPUT_SIZE);
+  for (let y = 0; y < INPUT_SIZE; y++) {
+    for (let x = 0; x < INPUT_SIZE; x++) {
+      const idx = (y * INPUT_SIZE + x) * 4;
+      const r = imageData.data[idx] / 255;
+      const g = imageData.data[idx + 1] / 255;
+      const b = imageData.data[idx + 2] / 255;
+      const pos = y * INPUT_SIZE + x;
+      floatArray[pos] = r;
+      floatArray[INPUT_SIZE * INPUT_SIZE + pos] = g;
+      floatArray[2 * INPUT_SIZE * INPUT_SIZE + pos] = b;
+    }
+  }
+  return {
+    tensor: floatArray,
+    ratio: letterbox.ratio,
+    pad: letterbox.pad,
+    originalWidth: image.width,
+    originalHeight: image.height
+  };
+}
+function letterboxImage(image, size) {
+  const offscreen = document.createElement("canvas");
+  offscreen.width = size;
+  offscreen.height = size;
+  const ctxOff = offscreen.getContext("2d");
+  ctxOff.fillStyle = "#000";
+  ctxOff.fillRect(0, 0, size, size);
+  const ratio = Math.min(size / image.width, size / image.height);
+  const newWidth = Math.round(image.width * ratio);
+  const newHeight = Math.round(image.height * ratio);
+  const padX = Math.round((size - newWidth) / 2);
+  const padY = Math.round((size - newHeight) / 2);
+  ctxOff.drawImage(image, 0, 0, image.width, image.height, padX, padY, newWidth, newHeight);
+  return {
+    imageData: ctxOff.getImageData(0, 0, size, size),
+    ratio,
+    pad: { x: padX, y: padY }
+  };
+}
+function decodeOutput(data, dims, ratio, pad, originalWidth, originalHeight) {
+  const [batch, numBoxes, attributes] = dims;
+  const detections = [];
+  for (let i = 0; i < numBoxes; i++) {
+    const offset = i * attributes;
+    const x = data[offset];
+    const y = data[offset + 1];
+    const w = data[offset + 2];
+    const h = data[offset + 3];
+    const objectness = data[offset + 4];
+    let bestClass = -1;
+    let bestScore = 0;
+    for (let c = 0; c < CLASS_NAMES.length; c++) {
+      const classScore = data[offset + 5 + c];
+      const score = objectness * classScore;
+      if (score > bestScore) {
+        bestScore = score;
+        bestClass = c;
+      }
+    }
+    if (bestScore < SCORE_THRESHOLD) {
+      continue;
+    }
+    const x1 = (x - w / 2 - pad.x) / ratio;
+    const y1 = (y - h / 2 - pad.y) / ratio;
+    const x2 = (x + w / 2 - pad.x) / ratio;
+    const y2 = (y + h / 2 - pad.y) / ratio;
+    detections.push({
+      classIndex: bestClass,
+      label: CLASS_NAMES[bestClass],
+      score: bestScore,
+      x1: clamp(x1, 0, originalWidth),
+      y1: clamp(y1, 0, originalHeight),
+      x2: clamp(x2, 0, originalWidth),
+      y2: clamp(y2, 0, originalHeight)
+    });
+  }
+  return nonMaxSuppression(detections, IOU_THRESHOLD, MAX_BOXES);
+}
+function nonMaxSuppression(detections, iouThreshold, maxBoxes) {
+  const results = [];
+  const sorted = detections.sort((a, b) => b.score - a.score);
+  while (sorted.length && results.length < maxBoxes) {
+    const current = sorted.shift();
+    results.push(current);
+    for (let i = sorted.length - 1; i >= 0; i--) {
+      if (current.classIndex !== sorted[i].classIndex) {
+        continue;
+      }
+      if (intersectionOverUnion(current, sorted[i]) > iouThreshold) {
+        sorted.splice(i, 1);
+      }
+    }
+  }
+  return results;
+}
+function intersectionOverUnion(a, b) {
+  const x1 = Math.max(a.x1, b.x1);
+  const y1 = Math.max(a.y1, b.y1);
+  const x2 = Math.min(a.x2, b.x2);
+  const y2 = Math.min(a.y2, b.y2);
+  const width = Math.max(0, x2 - x1);
+  const height = Math.max(0, y2 - y1);
+  const intersection = width * height;
+  const union =
+    (a.x2 - a.x1) * (a.y2 - a.y1) +
+    (b.x2 - b.x1) * (b.y2 - b.y1) -
+    intersection;
+  return union === 0 ? 0 : intersection / union;
+}
+function drawDetectionResults(detections) {
+  if (!selectedImage) {
+    return;
+  }
+  canvas.width = selectedImage.width;
+  canvas.height = selectedImage.height;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(selectedImage, 0, 0);
+  detections.forEach((detection) => {
+    const width = detection.x2 - detection.x1;
+    const height = detection.y2 - detection.y1;
+    ctx.strokeStyle = detection.classIndex === 0 ? "#00d4ff" : "#ffb703";
+    ctx.lineWidth = Math.max(2, Math.round(canvas.width / 360));
+    ctx.strokeRect(detection.x1, detection.y1, width, height);
+    const label = `${detection.label} ${(detection.score * 100).toFixed(1)}%`;
+    ctx.font = `${Math.max(12, Math.round(canvas.width / 60))}px Inter`;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = "rgba(0, 0, 0, 0.65)";
+    const textWidth = ctx.measureText(label).width + 16;
+    const textHeight = parseInt(ctx.font, 10) + 10;
+    const textX = detection.x1;
+    const textY = Math.max(0, detection.y1 - textHeight - 4);
+    ctx.fillRect(textX, textY, textWidth, textHeight);
+    ctx.fillStyle = "#ffffff";
+    ctx.fillText(label, textX + 8, textY + 5);
+  });
+}
+function extractMeterReading(detections) {
+  const digits = detections.filter(
+    (item) => item.classIndex >= 2 && item.classIndex <= 11
+  );
+  const unknown = detections.some((item) => item.classIndex === 12);
+  if (!digits.length) {
+    if (unknown) {
+      return "Unreadable";
+    }
+    return "No digits detected";
+  }
+  const ordered = digits.sort((a, b) => a.x1 - b.x1);
+  return ordered.map((item) => item.label).join("");
+}
+function computeAverageConfidence(detections) {
+  const digits = detections.filter(
+    (item) => item.classIndex >= 2 && item.classIndex <= 11
+  );
+  if (!digits.length) {
+    return 0;
+  }
+  const sum = digits.reduce((acc, item) => acc + item.score, 0);
+  return sum / digits.length;
+}
+function updatePredictionUI(prediction) {
+  const { detections, reading, averageConfidence } = prediction;
+  meterReading.textContent = reading;
+  confidence.textContent = averageConfidence
+    ? `${(averageConfidence * 100).toFixed(1)}%`
+    : "--";
+  if (!detections.length) {
+    detectionsList.innerHTML =
+      "<p class=\"small-text\">No objects detected in this image.</p>";
+    return;
+  }
+  detectionsList.innerHTML = detections
+    .slice(0, 20)
+    .map(
+      (item) =>
+        `<div class="detection-card"><strong>${item.label}</strong><span>Score: ${(item.score * 100).toFixed(1)}%</span></div>`
+    )
+    .join("");
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+loadModel();

style.css ADDED Viewed

	@@ -0,0 +1,299 @@

+:root {
+  --bg: #08111f;
+  --card: rgba(15, 37, 67, 0.96);
+  --card-strong: rgba(10, 17, 30, 0.96);
+  --border: rgba(255, 255, 255, 0.08);
+  --primary: #00b4ff;
+  --accent: #22d3ee;
+  --text: #f5f9ff;
+  --muted: #98adc9;
+  --success: #2dd39f;
+  --danger: #ff5f7a;
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: Inter, "Segoe UI", sans-serif;
+  min-height: 100vh;
+  background: radial-gradient(circle at top left, rgba(0, 180, 255, 0.14), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.12), transparent 28%),
+    linear-gradient(180deg, #06111f 0%, #081728 100%);
+  color: var(--text);
+}
+.background {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at top right, rgba(0, 180, 255, 0.18), transparent 24%),
+    radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.18), transparent 24%);
+  pointer-events: none;
+  z-index: -1;
+}
+.container {
+  width: min(1280px, 94%);
+  margin: 0 auto;
+  padding: 40px 0 60px;
+}
+.hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+.hero h1 {
+  font-size: clamp(2.4rem, 2.7vw, 3.4rem);
+  line-height: 1.05;
+}
+.hero p {
+  max-width: 600px;
+  color: var(--muted);
+  margin-top: 10px;
+  font-size: 1rem;
+  line-height: 1.8;
+}
+.status-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 124px;
+  padding: 12px 18px;
+  border-radius: 999px;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+.loading {
+  background: #315b8c;
+}
+.ready {
+  background: var(--success);
+  color: #06111f;
+}
+.error {
+  background: rgba(255, 95, 122, 0.18);
+  color: var(--danger);
+}
+.hint {
+  display: inline-block;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+.upload-card,
+.result-card,
+.image-card,
+.detections {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+}
+.drop-zone {
+  height: 260px;
+  border: 2px dashed rgba(255, 255, 255, 0.14);
+  border-radius: 26px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
+  background: rgba(255, 255, 255, 0.03);
+  cursor: pointer;
+}
+.drop-zone:hover,
+.drop-zone.drag-over {
+  border-color: rgba(0, 180, 255, 0.7);
+  transform: scale(1.01);
+  background: rgba(0, 180, 255, 0.08);
+}
+.upload-content {
+  text-align: center;
+  max-width: 380px;
+}
+.upload-content h2 {
+  font-size: 1.6rem;
+  margin-bottom: 10px;
+}
+.upload-content p {
+  color: var(--muted);
+  margin-bottom: 22px;
+  line-height: 1.75;
+}
+#browseBtn,
+.primary-button {
+  border: none;
+  border-radius: 16px;
+  padding: 14px 26px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, #00b4ff, #0fd4d4);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+#browseBtn:hover,
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 32px rgba(0, 180, 255, 0.22);
+}
+.viewer {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+  margin-top: 28px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 22px;
+}
+.image-card,
+.result-card {
+  padding: 26px;
+}
+.canvas-viewport {
+  width: 100%;
+  min-height: 420px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 22px;
+  padding: 14px;
+  display: grid;
+  place-items: center;
+}
+canvas {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 18px;
+  background: #07101d;
+}
+.muted {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+.reading,
+.confidence {
+  margin-bottom: 22px;
+}
+.title {
+  display: block;
+  color: var(--muted);
+  margin-bottom: 10px;
+  font-size: 0.95rem;
+}
+#meterReading {
+  display: block;
+  font-size: 2.8rem;
+  font-weight: 800;
+  color: var(--accent);
+  word-break: break-all;
+}
+#confidence {
+  display: block;
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+.prediction-footer {
+  margin-top: 16px;
+}
+.detections {
+  margin-top: 32px;
+  padding: 26px;
+}
+.detections h2 {
+  margin-bottom: 20px;
+}
+.detections-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+}
+.detection-card {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  padding: 16px;
+}
+.detection-card strong {
+  display: block;
+  font-size: 1rem;
+  margin-bottom: 8px;
+}
+.small-text {
+  color: var(--muted);
+  line-height: 1.7;
+}
+@media (max-width: 980px) {
+  .viewer {
+    grid-template-columns: 1fr;
+  }
+  .hero {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+@media (max-width: 720px) {
+  .container {
+    padding: 24px 0 40px;
+  }
+  .drop-zone {
+    height: auto;
+    padding: 40px 18px;
+  }
+  .canvas-viewport {
+    min-height: 320px;
+  }
+}