378 lines
14 KiB
JavaScript
378 lines
14 KiB
JavaScript
/* Vigilar — Pet labeling overlay for recording playback
|
|
*
|
|
* Integration:
|
|
* 1. Add to the page:
|
|
* <link rel="stylesheet" href="{{ url_for('static', filename='css/pet-labeling.css') }}">
|
|
* <script src="{{ url_for('static', filename='js/pet-labeling.js') }}"></script>
|
|
*
|
|
* 2. Wrap the <video> element in a position:relative container and add
|
|
* `data-pet-labeling="true"` to that container, along with a
|
|
* `data-detections` attribute holding the JSON array of detections:
|
|
*
|
|
* <div class="position-relative" data-pet-labeling="true"
|
|
* data-detections='[{"id":1,"species":"cat","confidence":0.92,
|
|
* "bbox":[0.1,0.15,0.35,0.6]}]'>
|
|
* <video id="player-video" class="w-100" controls></video>
|
|
* </div>
|
|
*
|
|
* bbox values are fractional [x1, y1, x2, y2] relative to video dimensions
|
|
* (same convention as YOLO normalised coords).
|
|
*
|
|
* 3. The module self-initialises on DOMContentLoaded and also exposes
|
|
* window.PetLabeling for manual calls:
|
|
*
|
|
* PetLabeling.init(containerEl, detectionsArray);
|
|
* PetLabeling.updateDetections(containerEl, detectionsArray);
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Constants
|
|
// -------------------------------------------------------------------------
|
|
|
|
const ANIMAL_SPECIES = new Set(['cat', 'dog', 'bird', 'rabbit', 'hamster', 'fish', 'animal']);
|
|
|
|
// Map species to bbox CSS class (animals get default cyan)
|
|
function bboxClass(species) {
|
|
if (species === 'person') return 'bbox-person';
|
|
if (species === 'vehicle' || species === 'car' || species === 'truck') return 'bbox-vehicle';
|
|
return ''; // cyan default (animals / unknown)
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Pets cache — fetched once per page load, filtered by species on demand
|
|
// -------------------------------------------------------------------------
|
|
|
|
let _petsCache = null; // null = not fetched yet; [] = fetched, none found
|
|
|
|
async function fetchPets() {
|
|
if (_petsCache !== null) return _petsCache;
|
|
try {
|
|
const resp = await fetch('/pets/api/status');
|
|
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
|
const data = await resp.json();
|
|
_petsCache = Array.isArray(data.pets) ? data.pets : [];
|
|
} catch (e) {
|
|
_petsCache = [];
|
|
}
|
|
return _petsCache;
|
|
}
|
|
|
|
function petsForSpecies(pets, species) {
|
|
if (!species) return pets;
|
|
// For generic "animal" detections show all pets; otherwise filter by species
|
|
if (ANIMAL_SPECIES.has(species) && species !== 'animal') {
|
|
return pets.filter(p => p.species && p.species.toLowerCase() === species.toLowerCase());
|
|
}
|
|
return pets;
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Active popup — only one at a time
|
|
// -------------------------------------------------------------------------
|
|
|
|
let _activePopup = null;
|
|
|
|
function dismissActivePopup() {
|
|
if (_activePopup) {
|
|
_activePopup.remove();
|
|
_activePopup = null;
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Label popup
|
|
// -------------------------------------------------------------------------
|
|
|
|
async function showLabelPopup(bbox, detection, anchorEl) {
|
|
dismissActivePopup();
|
|
|
|
const popup = document.createElement('div');
|
|
popup.className = 'label-popup';
|
|
popup.innerHTML = `
|
|
<div class="label-popup-title">
|
|
<i class="bi bi-tag-fill me-1"></i>Who is this?
|
|
</div>
|
|
<div class="label-popup-loading">
|
|
<span class="spinner-border spinner-border-sm me-1" role="status"></span>
|
|
Loading…
|
|
</div>`;
|
|
document.body.appendChild(popup);
|
|
_activePopup = popup;
|
|
|
|
// Position near the clicked bbox, keep on screen
|
|
positionPopup(popup, anchorEl);
|
|
|
|
// Fetch pets (cached after first call)
|
|
const allPets = await fetchPets();
|
|
if (_activePopup !== popup) return; // dismissed while loading
|
|
|
|
const pets = petsForSpecies(allPets, detection.species);
|
|
|
|
let petsHtml = '';
|
|
if (pets.length > 0) {
|
|
petsHtml = pets.map(p => `
|
|
<button class="label-popup-pet-btn" data-pet-id="${p.id}" data-pet-name="${escHtml(p.name)}">
|
|
<span class="pet-species-dot"></span>
|
|
${escHtml(p.name)}
|
|
<small class="ms-auto text-muted">${escHtml(p.species || '')}</small>
|
|
</button>`).join('');
|
|
}
|
|
|
|
popup.innerHTML = `
|
|
<div class="label-popup-title">
|
|
<i class="bi bi-tag-fill me-1"></i>Who is this?
|
|
<small class="float-end text-muted text-capitalize">${escHtml(detection.species || 'animal')}</small>
|
|
</div>
|
|
<div class="label-popup-pets">
|
|
${petsHtml}
|
|
</div>
|
|
${pets.length > 0 ? '<hr class="label-popup-divider">' : ''}
|
|
<button class="label-popup-action-btn" data-action="unknown">
|
|
<i class="bi bi-question-circle"></i>Unknown
|
|
</button>
|
|
<button class="label-popup-action-btn mt-1" data-action="new-pet">
|
|
<i class="bi bi-plus-circle"></i>+ New Pet
|
|
</button>`;
|
|
|
|
// Re-position after content change (height may differ)
|
|
positionPopup(popup, anchorEl);
|
|
|
|
// Pet selection
|
|
popup.querySelectorAll('.label-popup-pet-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const petId = btn.dataset.petId;
|
|
const petName = btn.dataset.petName;
|
|
applyLabel(detection, petId, petName, bbox);
|
|
dismissActivePopup();
|
|
});
|
|
});
|
|
|
|
// Unknown
|
|
const unknownBtn = popup.querySelector('[data-action="unknown"]');
|
|
if (unknownBtn) {
|
|
unknownBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
applyLabel(detection, 'unknown', 'Unknown', bbox);
|
|
dismissActivePopup();
|
|
});
|
|
}
|
|
|
|
// New Pet — open the pets dashboard in a new tab
|
|
const newPetBtn = popup.querySelector('[data-action="new-pet"]');
|
|
if (newPetBtn) {
|
|
newPetBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
window.open('/pets/', '_blank');
|
|
dismissActivePopup();
|
|
});
|
|
}
|
|
}
|
|
|
|
function positionPopup(popup, anchorEl) {
|
|
const rect = anchorEl.getBoundingClientRect();
|
|
const popW = popup.offsetWidth || 200;
|
|
const popH = popup.offsetHeight || 160;
|
|
const margin = 8;
|
|
|
|
// Prefer right of bbox; fall back to left
|
|
let left = rect.right + margin;
|
|
if (left + popW > window.innerWidth - margin) {
|
|
left = rect.left - popW - margin;
|
|
}
|
|
if (left < margin) left = margin;
|
|
|
|
// Align top with bbox; clamp to viewport
|
|
let top = rect.top;
|
|
if (top + popH > window.innerHeight - margin) {
|
|
top = window.innerHeight - popH - margin;
|
|
}
|
|
if (top < margin) top = margin;
|
|
|
|
popup.style.left = `${left}px`;
|
|
popup.style.top = `${top}px`;
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Label API call
|
|
// -------------------------------------------------------------------------
|
|
|
|
async function applyLabel(detection, petId, petName, bboxEl) {
|
|
// Optimistic UI: update the label tag immediately
|
|
const labelTag = bboxEl.querySelector('.detection-bbox-label');
|
|
if (labelTag) {
|
|
labelTag.textContent = petId === 'unknown' ? 'Unknown' : petName;
|
|
}
|
|
bboxEl.classList.add('bbox-labeled');
|
|
|
|
// Confirmation flash
|
|
const flash = document.createElement('div');
|
|
flash.className = 'label-confirm-flash';
|
|
bboxEl.appendChild(flash);
|
|
flash.addEventListener('animationend', () => flash.remove());
|
|
|
|
if (!detection.id || petId === 'unknown') return;
|
|
|
|
try {
|
|
await fetch(`/pets/${detection.id}/label`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ pet_id: petId }),
|
|
});
|
|
} catch (e) {
|
|
// Silently fail — offline mode
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Overlay rendering
|
|
// -------------------------------------------------------------------------
|
|
|
|
function renderOverlay(container, detections) {
|
|
// Remove any existing overlay
|
|
const existing = container.querySelector('.detection-overlay');
|
|
if (existing) existing.remove();
|
|
|
|
if (!detections || detections.length === 0) return;
|
|
|
|
const video = container.querySelector('video');
|
|
if (!video) return;
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'detection-overlay';
|
|
container.appendChild(overlay);
|
|
|
|
// Draw bboxes sized to the video's rendered dimensions
|
|
function drawBboxes() {
|
|
overlay.innerHTML = '';
|
|
|
|
const vRect = video.getBoundingClientRect();
|
|
const cRect = container.getBoundingClientRect();
|
|
|
|
// Offset from container origin
|
|
const offX = vRect.left - cRect.left;
|
|
const offY = vRect.top - cRect.top;
|
|
const vW = vRect.width;
|
|
const vH = vRect.height;
|
|
|
|
if (vW === 0 || vH === 0) return;
|
|
|
|
detections.forEach(det => {
|
|
const [x1f, y1f, x2f, y2f] = det.bbox || [0, 0, 1, 1];
|
|
|
|
const left = offX + x1f * vW;
|
|
const top = offY + y1f * vH;
|
|
const width = (x2f - x1f) * vW;
|
|
const height = (y2f - y1f) * vH;
|
|
|
|
const bbox = document.createElement('div');
|
|
bbox.className = `detection-bbox ${bboxClass(det.species)}`.trimEnd();
|
|
bbox.style.cssText = `
|
|
left: ${left}px;
|
|
top: ${top}px;
|
|
width: ${width}px;
|
|
height: ${height}px;
|
|
`;
|
|
|
|
const confidence = det.confidence !== undefined
|
|
? ` ${Math.round(det.confidence * 100)}%`
|
|
: '';
|
|
const labelText = det.pet_name
|
|
? det.pet_name
|
|
: `${det.species || 'animal'}${confidence}`;
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'detection-bbox-label';
|
|
label.textContent = labelText;
|
|
bbox.appendChild(label);
|
|
|
|
// Only show "Who is this?" popup for animal detections
|
|
if (!det.species || ANIMAL_SPECIES.has(det.species.toLowerCase())) {
|
|
bbox.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
showLabelPopup(bbox, det, bbox);
|
|
});
|
|
}
|
|
|
|
overlay.appendChild(bbox);
|
|
});
|
|
}
|
|
|
|
// Draw immediately and on video resize/metadata
|
|
drawBboxes();
|
|
video.addEventListener('loadedmetadata', drawBboxes);
|
|
const ro = new ResizeObserver(drawBboxes);
|
|
ro.observe(video);
|
|
|
|
// Store cleanup handle
|
|
overlay._roCleanup = () => ro.disconnect();
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Public API
|
|
// -------------------------------------------------------------------------
|
|
|
|
function init(container, detections) {
|
|
if (!container) return;
|
|
renderOverlay(container, detections);
|
|
}
|
|
|
|
function updateDetections(container, detections) {
|
|
if (!container) return;
|
|
const old = container.querySelector('.detection-overlay');
|
|
if (old && old._roCleanup) old._roCleanup();
|
|
renderOverlay(container, detections);
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Auto-init: find all [data-pet-labeling="true"] containers on page load
|
|
// -------------------------------------------------------------------------
|
|
|
|
function autoInit() {
|
|
document.querySelectorAll('[data-pet-labeling="true"]').forEach(container => {
|
|
let detections = [];
|
|
const raw = container.dataset.detections;
|
|
if (raw) {
|
|
try { detections = JSON.parse(raw); } catch (e) { detections = []; }
|
|
}
|
|
init(container, detections);
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', autoInit);
|
|
} else {
|
|
autoInit();
|
|
}
|
|
|
|
// Dismiss popup when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (_activePopup && !_activePopup.contains(e.target)) {
|
|
dismissActivePopup();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') dismissActivePopup();
|
|
});
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Helpers
|
|
// -------------------------------------------------------------------------
|
|
|
|
function escHtml(str) {
|
|
if (!str) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
// Expose public API
|
|
window.PetLabeling = { init, updateDetections };
|
|
})();
|