gbanyan/yolo-label
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add all untracked files and configure gitignore

Browse Source
This commit is contained in:
Gbanyan
2025-12-03 13:56:23 +08:00
parent a97ca8cb7c
commit 641c8aa1f0
502 changed files with 1203 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
templates/index.html
View File

@@ -24,10 +24,17 @@
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.controls {
.header-left {
display: flex;
flex-direction: column;
}
.controls, .nav-controls {
display: flex;
gap: 10px;
align-items: center;
}
button {
padding: 8px 16px;
@@ -44,6 +51,13 @@
.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;
@@ -76,6 +90,7 @@
.stats {
font-size: 14px;
color: #555;
margin-top: 4px;
}
#loading {
@@ -89,6 +104,17 @@
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>
@@ -96,10 +122,21 @@
<div id="loading">Loading...</div>
<header>
<div>
<h2 style="margin:0;">Signature Labeler</h2>
<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)">&laquo; 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 &raquo;</button>
</div>
<div class="controls">
<button class="btn-secondary" onclick="undo()">Undo (Z)</button>
<button class="btn-danger" onclick="clearBoxes()">Clear All</button>
@@ -116,7 +153,10 @@
<script>
let currentFilename = null;
let boxes = []; // Array of {x, y, w, h}
let currentIndex = 0;
let totalImages = 0;
let boxes = [];
let existingBoxes = []; // Normalized YOLO boxes from server
let isDrawing = false;
let startX, startY;
let currentBox = null;
@@ -126,6 +166,9 @@
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() {
@@ -133,6 +176,28 @@
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();
}
@@ -142,36 +207,79 @@
};
// API Calls
async function loadNextImage() {
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) {
alert("All images labeled! Great job!");
loadingOverlay.classList.add('hidden');
return;
// If all done, start at the end or 0
loadImage(0);
} else {
updateState(data);
}
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");
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;
// 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,
@@ -187,7 +295,13 @@
});
if (res.ok) {
loadNextImage();
labeledIndicator.className = 'labeled-indicator labeled-yes';
if (currentIndex < totalImages - 1) {
loadImage(currentIndex + 1);
} else {
alert("You reached the end!");
}
} else {
alert("Failed to save");
}
@@ -199,7 +313,6 @@
// 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 {
@@ -278,16 +391,20 @@
// 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
loadNextImage();
loadInitialImage();
</script>
</body>
</html>
</html>