Initial commit
This commit is contained in:
293
templates/index.html
Normal file
293
templates/index.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user