410 lines
12 KiB
HTML
410 lines
12 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;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
.header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.controls, .nav-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
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; }
|
|
|
|
input[type="number"] {
|
|
padding: 6px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
width: 60px;
|
|
}
|
|
|
|
#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;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
#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; }
|
|
|
|
.labeled-indicator {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #ccc;
|
|
margin-left: 8px;
|
|
}
|
|
.labeled-yes { background-color: #28a745; }
|
|
.labeled-no { background-color: #dc3545; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="loading">Loading...</div>
|
|
|
|
<header>
|
|
<div class="header-left">
|
|
<div style="display:flex; align-items:center;">
|
|
<h2 style="margin:0;">Signature Labeler</h2>
|
|
<span id="labeledIndicator" class="labeled-indicator" title="Labeled Status"></span>
|
|
</div>
|
|
<div class="stats" id="statusText">Loading stats...</div>
|
|
</div>
|
|
|
|
<div class="nav-controls">
|
|
<button class="btn-secondary" onclick="changeImage(-1)">« Prev</button>
|
|
<input type="number" id="imgIndexInput" value="0" onchange="jumpToIndex()">
|
|
<span>/ <span id="totalCount">0</span></span>
|
|
<button class="btn-secondary" onclick="changeImage(1)">Next »</button>
|
|
</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 currentIndex = 0;
|
|
let totalImages = 0;
|
|
let boxes = [];
|
|
let existingBoxes = []; // Normalized YOLO boxes from server
|
|
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');
|
|
const indexInput = document.getElementById('imgIndexInput');
|
|
const totalSpan = document.getElementById('totalCount');
|
|
const labeledIndicator = document.getElementById('labeledIndicator');
|
|
|
|
// Setup Canvas
|
|
function resizeCanvas() {
|
|
canvas.width = imgElement.naturalWidth;
|
|
canvas.height = imgElement.naturalHeight;
|
|
canvas.style.width = imgElement.width + 'px';
|
|
canvas.style.height = imgElement.height + 'px';
|
|
|
|
// Convert normalized existingBoxes to pixel boxes
|
|
if (existingBoxes && existingBoxes.length > 0) {
|
|
const imgW = imgElement.naturalWidth;
|
|
const imgH = imgElement.naturalHeight;
|
|
|
|
boxes = existingBoxes.map(b => {
|
|
// YOLO: center_x, center_y, w, h (normalized)
|
|
// Canvas: top_left_x, top_left_y, w, h (pixels)
|
|
|
|
const w = b.w * imgW;
|
|
const h = b.h * imgH;
|
|
const x = (b.x * imgW) - (w / 2.0);
|
|
const y = (b.y * imgH) - (h / 2.0);
|
|
|
|
return {x: x, y: y, w: w, h: h};
|
|
});
|
|
// Clear existingBoxes so we don't re-add them if resize is called again
|
|
// (though resize is usually only called on load, so keep it simple)
|
|
existingBoxes = [];
|
|
}
|
|
|
|
redraw();
|
|
}
|
|
|
|
imgElement.onload = () => {
|
|
resizeCanvas();
|
|
loadingOverlay.classList.add('hidden');
|
|
};
|
|
|
|
// API Calls
|
|
async function loadInitialImage() {
|
|
loadingOverlay.classList.remove('hidden');
|
|
try {
|
|
// First try to find where we left off
|
|
const response = await fetch('/api/next');
|
|
const data = await response.json();
|
|
|
|
if (data.completed) {
|
|
// If all done, start at the end or 0
|
|
loadImage(0);
|
|
} else {
|
|
updateState(data);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert("Error loading initial image");
|
|
}
|
|
}
|
|
|
|
async function loadImage(index) {
|
|
loadingOverlay.classList.remove('hidden');
|
|
try {
|
|
const response = await fetch(`/api/image/${index}`);
|
|
if (!response.ok) throw new Error('Failed to load image');
|
|
const data = await response.json();
|
|
updateState(data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
loadingOverlay.classList.add('hidden');
|
|
alert("Error loading image");
|
|
}
|
|
}
|
|
|
|
function updateState(data) {
|
|
currentFilename = data.filename;
|
|
currentIndex = data.index;
|
|
totalImages = data.total;
|
|
|
|
// Update UI
|
|
indexInput.value = currentIndex + 1; // Display as 1-based
|
|
totalSpan.innerText = totalImages;
|
|
statusText.innerText = `Labeled: ${data.labeled_count} / ${data.total} | ${data.filename}`;
|
|
|
|
labeledIndicator.className = 'labeled-indicator ' + (data.labeled ? 'labeled-yes' : 'labeled-no');
|
|
labeledIndicator.title = data.labeled ? 'This image is labeled' : 'Not labeled yet';
|
|
|
|
// Store boxes for processing in onload
|
|
existingBoxes = data.boxes || [];
|
|
boxes = []; // Clear current pixel boxes
|
|
|
|
imgElement.src = `/images/${data.filename}`;
|
|
}
|
|
|
|
function changeImage(delta) {
|
|
let newIndex = currentIndex + delta;
|
|
// Local clamp, but backend also handles it
|
|
if (newIndex < 0) newIndex = 0;
|
|
if (newIndex >= totalImages) newIndex = totalImages - 1;
|
|
|
|
if (newIndex !== currentIndex || totalImages === 1) {
|
|
loadImage(newIndex);
|
|
}
|
|
}
|
|
|
|
function jumpToIndex() {
|
|
let val = parseInt(indexInput.value);
|
|
if (isNaN(val)) val = 1;
|
|
loadImage(val - 1); // Convert back to 0-based
|
|
}
|
|
|
|
async function saveAndNext() {
|
|
if (!currentFilename) return;
|
|
|
|
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) {
|
|
labeledIndicator.className = 'labeled-indicator labeled-yes';
|
|
|
|
if (currentIndex < totalImages - 1) {
|
|
loadImage(currentIndex + 1);
|
|
} else {
|
|
alert("You reached the end!");
|
|
}
|
|
} else {
|
|
alert("Failed to save");
|
|
}
|
|
} catch (e) {
|
|
alert("Error saving");
|
|
}
|
|
}
|
|
|
|
// Drawing Logic
|
|
function getMousePos(evt) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
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.target.tagName === 'INPUT') return;
|
|
|
|
if (e.key.toLowerCase() === 'z') undo();
|
|
if (e.code === 'Space') {
|
|
e.preventDefault(); // Prevent scrolling
|
|
saveAndNext();
|
|
}
|
|
if (e.key === 'ArrowLeft') changeImage(-1);
|
|
if (e.key === 'ArrowRight') changeImage(1);
|
|
});
|
|
|
|
// Init
|
|
loadInitialImage();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |