Create static/js/script.js

static/js/script.js

@@ -0,0 +1,71 @@
+// static/js/script.js
+
+let hMin = 0, hMax = 179, sMin = 0, sMax = 255, vMin = 0, vMax = 255;
+let currentImage = null;
+
+function updateImage(src) {
+    const img = document.getElementById("image");
+    img.src = src + "?t=" + new Date().getTime(); // Cache-busting
+    currentImage = src;
+}
+
+function sendPixelClick(x, y) {
+    fetch("/click", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ x: x, y: y })
+    })
+    .then(res => res.json())
+    .then(data => {
+        document.getElementById("pixel-info").innerText = data.info;
+        hMin = data.hMin; hMax = data.hMax;
+        sMin = data.sMin; sMax = data.sMax;
+        vMin = data.vMin; vMax = data.vMax;
+        updateSegmentation();
+    });
+}
+
+function updateSegmentation() {
+    fetch("/update_mask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ hMin, hMax, sMin, sMax, vMin, vMax })
+    })
+    .then(res => res.json())
+    .then(data => {
+        updateImage(data.image_path);
+    });
+}
+
+function adjustValue(type, delta) {
+    switch(type) {
+        case "hMin": hMin = Math.max(0, Math.min(179, hMin + delta)); break;
+        case "hMax": hMax = Math.max(0, Math.min(179, hMax + delta)); break;
+        case "sMin": sMin = Math.max(0, Math.min(255, sMin + delta)); break;
+        case "sMax": sMax = Math.max(0, Math.min(255, sMax + delta)); break;
+        case "vMin": vMin = Math.max(0, Math.min(255, vMin + delta)); break;
+        case "vMax": vMax = Math.max(0, Math.min(255, vMax + delta)); break;
+    }
+    updateSegmentation();
+}
+
+function setupCanvas() {
+    const img = document.getElementById("image");
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+
+    img.onload = function() {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+    };
+
+    canvas.addEventListener("click", function(e) {
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.floor(e.clientX - rect.left);
+        const y = Math.floor(e.clientY - rect.top);
+        sendPixelClick(x, y);
+    });
+}
+
+document.addEventListener("DOMContentLoaded", setupCanvas);