294 lines
8.3 KiB
HTML
294 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>YOLO Signature Labeler</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
background-color: #f0f2f5;
|
|
}
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: background 0.2s;
|
|
}
|
|
.btn-primary { background-color: #007bff; color: white; }
|
|
.btn-primary:hover { background-color: #0056b3; }
|
|
.btn-danger { background-color: #dc3545; color: white; }
|
|
.btn-danger:hover { background-color: #a71d2a; }
|
|
.btn-secondary { background-color: #6c757d; color: white; }
|
|
.btn-secondary:hover { background-color: #545b62; }
|
|
|
|
#workspace {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: auto;
|
|
border: 2px solid #ccc;
|
|
background: #333;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: 20px;
|
|
}
|
|
|
|
.canvas-container {
|
|
position: relative;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: none; /* Allow scrolling for large images */
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.stats {
|
|
font-size: 14px;
|
|
color: #555;
|
|
}
|
|
|
|
#loading {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(255,255,255,0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24px;
|
|
z-index: 1000;
|
|
}
|
|
.hidden { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="loading">Loading...</div>
|
|
|
|
<header>
|
|
<div>
|
|
<h2 style="margin:0;">Signature Labeler</h2>
|
|
<div class="stats" id="statusText">Loading stats...</div>
|
|
</div>
|
|
<div class="controls">
|
|
<button class="btn-secondary" onclick="undo()">Undo (Z)</button>
|
|
<button class="btn-danger" onclick="clearBoxes()">Clear All</button>
|
|
<button class="btn-primary" onclick="saveAndNext()">Save & Next (Space)</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="workspace">
|
|
<div class="canvas-container" id="container">
|
|
<img id="targetImage" src="" alt="">
|
|
<canvas id="drawCanvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentFilename = null;
|
|
let boxes = []; // Array of {x, y, w, h}
|
|
let isDrawing = false;
|
|
let startX, startY;
|
|
let currentBox = null;
|
|
|
|
const imgElement = document.getElementById('targetImage');
|
|
const canvas = document.getElementById('drawCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const statusText = document.getElementById('statusText');
|
|
const loadingOverlay = document.getElementById('loading');
|
|
|
|
// Setup Canvas
|
|
function resizeCanvas() {
|
|
canvas.width = imgElement.naturalWidth;
|
|
canvas.height = imgElement.naturalHeight;
|
|
canvas.style.width = imgElement.width + 'px';
|
|
canvas.style.height = imgElement.height + 'px';
|
|
redraw();
|
|
}
|
|
|
|
imgElement.onload = () => {
|
|
resizeCanvas();
|
|
loadingOverlay.classList.add('hidden');
|
|
};
|
|
|
|
// API Calls
|
|
async function loadNextImage() {
|
|
loadingOverlay.classList.remove('hidden');
|
|
try {
|
|
const response = await fetch('/api/next');
|
|
const data = await response.json();
|
|
|
|
if (data.completed) {
|
|
alert("All images labeled! Great job!");
|
|
loadingOverlay.classList.add('hidden');
|
|
return;
|
|
}
|
|
|
|
currentFilename = data.filename;
|
|
statusText.innerText = `Progress: ${data.labeled} / ${data.total} | Current: ${data.filename}`;
|
|
|
|
imgElement.src = `/images/${data.filename}`;
|
|
boxes = [];
|
|
// Img onload will hide loader
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert("Error loading next image");
|
|
}
|
|
}
|
|
|
|
async function saveAndNext() {
|
|
if (!currentFilename) return;
|
|
|
|
// Even if boxes is empty, we save (as empty file, meaning no signature)
|
|
// But maybe warn? No, empty is valid "no object".
|
|
|
|
const payload = {
|
|
filename: currentFilename,
|
|
width: imgElement.naturalWidth,
|
|
height: imgElement.naturalHeight,
|
|
boxes: boxes
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('/api/save', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (res.ok) {
|
|
loadNextImage();
|
|
} else {
|
|
alert("Failed to save");
|
|
}
|
|
} catch (e) {
|
|
alert("Error saving");
|
|
}
|
|
}
|
|
|
|
// Drawing Logic
|
|
function getMousePos(evt) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
// Calculate scale if displayed size differs from natural size
|
|
const scaleX = canvas.width / rect.width;
|
|
const scaleY = canvas.height / rect.height;
|
|
return {
|
|
x: (evt.clientX - rect.left) * scaleX,
|
|
y: (evt.clientY - rect.top) * scaleY
|
|
};
|
|
}
|
|
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
isDrawing = true;
|
|
const pos = getMousePos(e);
|
|
startX = pos.x;
|
|
startY = pos.y;
|
|
});
|
|
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
if (!isDrawing) return;
|
|
const pos = getMousePos(e);
|
|
const w = pos.x - startX;
|
|
const h = pos.y - startY;
|
|
currentBox = {x: startX, y: startY, w: w, h: h};
|
|
redraw();
|
|
});
|
|
|
|
canvas.addEventListener('mouseup', () => {
|
|
if (!isDrawing) return;
|
|
isDrawing = false;
|
|
if (currentBox) {
|
|
// Normalize negative width/height
|
|
let finalBox = {
|
|
x: currentBox.w < 0 ? currentBox.x + currentBox.w : currentBox.x,
|
|
y: currentBox.h < 0 ? currentBox.y + currentBox.h : currentBox.y,
|
|
w: Math.abs(currentBox.w),
|
|
h: Math.abs(currentBox.h)
|
|
};
|
|
|
|
// Ignore tiny boxes
|
|
if (finalBox.w > 5 && finalBox.h > 5) {
|
|
boxes.push(finalBox);
|
|
}
|
|
currentBox = null;
|
|
redraw();
|
|
}
|
|
});
|
|
|
|
function redraw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.strokeStyle = '#00FF00';
|
|
ctx.lineWidth = 3;
|
|
|
|
// Draw existing boxes
|
|
boxes.forEach(b => {
|
|
ctx.strokeRect(b.x, b.y, b.w, b.h);
|
|
// Add semi-transparent fill
|
|
ctx.fillStyle = 'rgba(0, 255, 0, 0.1)';
|
|
ctx.fillRect(b.x, b.y, b.w, b.h);
|
|
});
|
|
|
|
// Draw current dragging box
|
|
if (currentBox) {
|
|
ctx.strokeStyle = '#FF0000';
|
|
ctx.strokeRect(currentBox.x, currentBox.y, currentBox.w, currentBox.h);
|
|
}
|
|
}
|
|
|
|
function undo() {
|
|
boxes.pop();
|
|
redraw();
|
|
}
|
|
|
|
function clearBoxes() {
|
|
boxes = [];
|
|
redraw();
|
|
}
|
|
|
|
// Key shortcuts
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key.toLowerCase() === 'z') undo();
|
|
if (e.code === 'Space') {
|
|
e.preventDefault(); // Prevent scrolling
|
|
saveAndNext();
|
|
}
|
|
});
|
|
|
|
// Init
|
|
loadNextImage();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|