Rooftop_segmentation / index.html
Noursine's picture
Update index.html
faaf172 verified
<!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>