Spaces:
Build error
Build error
File size: 1,692 Bytes
faaf172 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html>
<html>
<head>
<title>SAM2 Interactive</title>
<style>
body { font-family: sans-serif; }
#canvas { border: 1px solid #ccc; cursor: crosshair; }
</style>
</head>
<body>
<h1>Interactive SAM2 Segmentation</h1>
<input type="file" id="upload" accept="image/*">
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
document.getElementById("upload").addEventListener("change", function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(evt) {
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
img.src = evt.target.result;
}
reader.readAsDataURL(file);
});
canvas.addEventListener("contextmenu", e => e.preventDefault()); // disable default right-click menu
canvas.addEventListener("mousedown", function(e) {
const rect = canvas.getBoundingClientRect();
const x = Math.round(e.clientX - rect.left);
const y = Math.round(e.clientY - rect.top);
if (e.button === 0) {
console.log("Negative point:", x, y);
// send to backend with label=0
} else if (e.button === 2) {
console.log("Positive point:", x, y);
// send to backend with label=1
}
});
</script>
</body>
</html>
|