Hugging Face's logo

trysem
/
splug

Model card Files
xet
Community
splug / videoflow
trysem's picture
trysem
Create videoflow
110164f verified
raw
history blame contribute delete
38.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HumanFrame AI | Local Video Extractor</title>
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- JSZip for exporting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Face API for Facial Recognition -->
<script src="https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.12/dist/face-api.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.gradient-text {
background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#results-container::-webkit-scrollbar { width: 5px; }
#results-container::-webkit-scrollbar-track { background: transparent; }
#results-container::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
.scan-line {
position: absolute; top: 0; left: 0; width: 100%; height: 2px;
background: #818cf8; box-shadow: 0 0 15px #818cf8;
animation: scan 2s linear infinite; display: none; z-index: 10;
}
@keyframes scan { 0% { top: 0%; } 100% { top: 100%; } }
/* Toggle Switch CSS */
.toggle-checkbox:checked { right: 0; border-color: #6366f1; }
.toggle-checkbox:checked + .toggle-label { background-color: #6366f1; }
.toggle-checkbox { right: 4px; z-index: 1; border-color: #e2e8f0; transition: all 0.3s; }
.toggle-label { background-color: #cbd5e1; transition: all 0.3s; }
</style>
</head>
<body class="bg-[#0f172a] text-slate-200 min-h-screen selection:bg-indigo-500/30">
<!-- Navbar -->
<nav class="border-b border-white/5 bg-[#0f172a]/80 backdrop-blur-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/20">
<i class="fas fa-user-check text-white text-lg"></i>
</div>
<h1 class="text-xl font-bold tracking-tight">HumanFrame<span class="gradient-text">AI</span></h1>
</div>
<div class="flex gap-3">
<div id="model-badge" class="flex items-center gap-2 bg-slate-800/50 px-3 py-1.5 rounded-full border border-white/5 text-xs font-medium text-slate-400">
<span class="status-dot bg-amber-500 animate-pulse"></span> MediaPipe Loading...
</div>
<div id="face-badge" class="flex items-center gap-2 bg-slate-800/50 px-3 py-1.5 rounded-full border border-white/5 text-xs font-medium text-slate-400 hidden">
<span class="status-dot bg-amber-500 animate-pulse"></span> FaceAPI Loading...
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-6 py-10">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Panel: Configuration -->
<div class="lg:col-span-4 space-y-6">
<!-- Upload Zone -->
<div id="drop-zone" class="glass-panel rounded-2xl p-8 text-center border-2 border-dashed border-indigo-500/20 hover:border-indigo-500/50 transition-all cursor-pointer group relative overflow-hidden">
<input type="file" id="video-input" class="hidden" accept="video/*">
<div class="relative z-10">
<div class="w-14 h-14 bg-indigo-500/10 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-video text-indigo-400 text-xl"></i>
</div>
<h3 class="text-md font-semibold text-white mb-1">Upload Video</h3>
<p class="text-xs text-slate-400">Drag & drop or click to browse</p>
</div>
</div>
<!-- Settings & Advanced -->
<div id="settings-panel" class="glass-panel rounded-2xl p-6 space-y-6 opacity-40 pointer-events-none transition-all">
<!-- Basic Engine -->
<div class="space-y-4">
<div class="flex items-center justify-between border-b border-white/5 pb-2">
<h4 class="font-bold text-white text-xs uppercase tracking-wider">Engine Settings</h4>
</div>
<div class="space-y-2">
<label class="text-xs font-semibold text-slate-400 flex justify-between">
Scan Interval
<span id="interval-val" class="text-indigo-400">0.5s</span>
</label>
<input type="range" id="scan-rate" min="0.1" max="2.0" step="0.1" value="0.5" class="w-full h-1.5 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-indigo-500">
</div>
<div class="space-y-2">
<label class="text-xs font-semibold text-slate-400 flex justify-between">
Detection Confidence
<span id="conf-val" class="text-indigo-400">50%</span>
</label>
<input type="range" id="confidence" min="0.3" max="0.9" step="0.05" value="0.5" class="w-full h-1.5 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-indigo-500">
</div>
</div>
<!-- Advanced Features -->
<div class="space-y-4">
<div class="flex items-center justify-between border-b border-white/5 pb-2">
<h4 class="font-bold text-white text-xs uppercase tracking-wider text-purple-400">Advanced Extraction</h4>
</div>
<!-- Smart Body Crop Toggle -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="text-sm font-medium text-slate-200">Smart Body Crop</span>
<span class="text-[10px] text-slate-500">Extracts the person bounding box</span>
</div>
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle" id="auto-crop-toggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="auto-crop-toggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-600 cursor-pointer"></label>
</div>
</div>
<!-- 512x512 Face Crop Toggle -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="text-sm font-medium text-slate-200">Tight Face Crop (512px)</span>
<span class="text-[10px] text-slate-500">Extracts faces specifically in 512x512</span>
</div>
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle" id="face-crop-toggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="face-crop-toggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-600 cursor-pointer"></label>
</div>
</div>
<!-- Require Visible Face Toggle -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="text-sm font-medium text-slate-200">Require Visible Face</span>
<span class="text-[10px] text-slate-500">Skip frames with bodies but no faces</span>
</div>
<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle" id="require-face-toggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="require-face-toggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-600 cursor-pointer"></label>
</div>
</div>
<!-- Target Face Match -->
<div class="bg-slate-800/40 p-3 rounded-xl border border-white/5">
<div class="flex flex-col mb-2">
<span class="text-sm font-medium text-slate-200">Target Face Match</span>
<span class="text-[10px] text-slate-500">Only extract frames containing this person</span>
</div>
<div class="flex items-center gap-3 mt-3">
<div id="face-upload-btn" class="flex-grow bg-slate-700 hover:bg-slate-600 text-xs text-center py-2 rounded-lg cursor-pointer transition-colors border border-dashed border-slate-500">
<i class="fas fa-camera mr-1"></i> Upload Target Face
</div>
<input type="file" id="face-input" class="hidden" accept="image/*">
<img id="target-face-preview" class="hidden w-10 h-10 object-cover rounded-full border-2 border-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.5)]">
</div>
<p id="face-status-text" class="text-[10px] text-amber-400 mt-2 hidden text-center"><i class="fas fa-spinner animate-spin"></i> Analyzing face...</p>
</div>
</div>
<button id="start-btn" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-xl shadow-xl shadow-indigo-500/10 transition-all flex items-center justify-center gap-3">
<i class="fas fa-microchip"></i> Start AI Extraction
</button>
</div>
<!-- Monitoring Window -->
<div class="glass-panel rounded-2xl overflow-hidden relative shadow-2xl group border-2 border-[#0f172a]">
<div class="scan-line" id="scanner"></div>
<canvas id="preview-canvas" class="w-full aspect-video bg-black object-contain"></canvas>
<div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent flex items-center justify-between">
<span class="text-[10px] font-bold tracking-widest text-indigo-400 uppercase">Live Monitor</span>
<div id="fps-counter" class="text-[10px] font-mono text-slate-400">-- FPS</div>
</div>
</div>
</div>
<!-- Right Panel: Results Gallery -->
<div class="lg:col-span-8 flex flex-col h-[calc(100vh-160px)] min-h-[600px]">
<div class="glass-panel rounded-3xl flex flex-col h-full overflow-hidden border border-white/10 relative">
<!-- Toolbar -->
<div class="p-6 border-b border-white/5 flex flex-wrap gap-4 items-center justify-between bg-white/[0.02]">
<div>
<h2 class="text-xl font-bold text-white">Detection Gallery</h2>
<p id="stats-text" class="text-sm text-slate-500">System idle. Awaiting video upload.</p>
</div>
<div class="flex gap-2">
<button id="download-btn" class="hidden px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-white text-sm font-bold rounded-xl transition-all flex items-center gap-2 shadow-lg shadow-emerald-500/20">
<i class="fas fa-file-export"></i> Export All (.zip)
</button>
</div>
</div>
<!-- Progress Bar -->
<div id="progress-container" class="px-6 py-4 bg-indigo-500/5 hidden border-b border-white/5">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-bold text-indigo-300 uppercase tracking-tighter" id="status-label">Analyzing Frames...</span>
<span class="text-xs font-mono text-indigo-300" id="progress-percent">0%</span>
</div>
<div class="w-full bg-white/5 h-1.5 rounded-full overflow-hidden">
<div id="progress-bar" class="h-full bg-indigo-500 transition-all duration-300 shadow-[0_0_10px_#6366f1]" style="width: 0%"></div>
</div>
</div>
<!-- Gallery Grid -->
<div id="results-container" class="flex-grow overflow-y-auto p-6 relative">
<!-- Auto-masonry/flex grid for mixed crop sizes -->
<div id="results" class="flex flex-wrap gap-4 content-start">
<!-- Frames will be injected here -->
</div>
<!-- Placeholder -->
<div id="empty-state" class="absolute inset-0 flex flex-col items-center justify-center opacity-20">
<i class="fas fa-images text-7xl mb-6"></i>
<p class="text-lg font-medium">No frames extracted yet</p>
</div>
</div>
</div>
</div>
</div>
</main>
<video id="hidden-video" class="hidden" muted></video>
<!-- Import MediaPipe -->
<script type="module">
import { ObjectDetector, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs";
// DOM Elements
const videoInput = document.getElementById('video-input');
const dropZone = document.getElementById('drop-zone');
const videoEl = document.getElementById('hidden-video');
const previewCanvas = document.getElementById('preview-canvas');
const resultsEl = document.getElementById('results');
const progressBar = document.getElementById('progress-bar');
const progressPercent = document.getElementById('progress-percent');
const statusLabel = document.getElementById('status-label');
const startBtn = document.getElementById('start-btn');
const downloadBtn = document.getElementById('download-btn');
const modelBadge = document.getElementById('model-badge');
const faceBadge = document.getElementById('face-badge');
const settingsPanel = document.getElementById('settings-panel');
const statsText = document.getElementById('stats-text');
const scannerLine = document.getElementById('scanner');
const emptyState = document.getElementById('empty-state');
const autoCropToggle = document.getElementById('auto-crop-toggle');
const faceCropToggle = document.getElementById('face-crop-toggle');
const requireFaceToggle = document.getElementById('require-face-toggle');
// Face Match Elements
const faceUploadBtn = document.getElementById('face-upload-btn');
const faceInput = document.getElementById('face-input');
const facePreview = document.getElementById('target-face-preview');
const faceStatusText = document.getElementById('face-status-text');
// State variables
let detector;
let extractedFrames = [];
let isProcessing = false;
let targetFaceDescriptor = null;
let isFaceApiLoaded = false;
// UI Listeners
document.getElementById('scan-rate').oninput = (e) => document.getElementById('interval-val').innerText = e.target.value + 's';
document.getElementById('confidence').oninput = (e) => document.getElementById('conf-val').innerText = Math.round(e.target.value * 100) + '%';
// 1. Init MediaPipe Object Detector (Body detection)
async function initMediaPipe() {
try {
const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm");
detector = await ObjectDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite0/float16/1/efficientdet_lite0.tflite`,
delegate: "GPU"
},
scoreThreshold: 0.5,
runningMode: "IMAGE"
});
modelBadge.innerHTML = '<span class="status-dot bg-emerald-500"></span> MediaPipe Ready';
modelBadge.classList.replace('text-slate-400', 'text-emerald-400');
} catch (err) {
console.error("MediaPipe Error:", err);
modelBadge.innerHTML = '<span class="status-dot bg-red-500"></span> Engine Error';
}
}
// 2. Init Face-API (Facial Recognition)
async function initFaceAPI() {
faceBadge.classList.remove('hidden');
try {
const MODEL_URL = 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.12/model/';
await Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL),
faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL)
]);
isFaceApiLoaded = true;
faceBadge.innerHTML = '<span class="status-dot bg-purple-500"></span> FaceAPI Ready';
faceBadge.classList.replace('text-slate-400', 'text-purple-400');
} catch(err) {
console.error("FaceAPI Error:", err);
faceBadge.innerHTML = '<span class="status-dot bg-red-500"></span> FaceAPI Error';
}
}
// Initialize models in background
initMediaPipe();
initFaceAPI();
// Target Face Upload Handler
faceUploadBtn.onclick = () => faceInput.click();
faceInput.onchange = async (e) => {
const file = e.target.files[0];
if (!file) return;
if (!isFaceApiLoaded) {
alert("Please wait for FaceAPI to finish loading...");
return;
}
faceStatusText.classList.remove('hidden');
faceStatusText.innerHTML = '<i class="fas fa-spinner animate-spin"></i> Analyzing face...';
faceStatusText.className = "text-[10px] text-amber-400 mt-2 text-center";
try {
const url = URL.createObjectURL(file);
facePreview.onload = async () => {
try {
// Extract facial blueprint using slightly lower confidence to prevent missed detections
const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.2 });
const detection = await faceapi.detectSingleFace(facePreview, options).withFaceLandmarks().withFaceDescriptor();
if (detection) {
targetFaceDescriptor = detection.descriptor;
faceStatusText.innerHTML = '<i class="fas fa-check text-emerald-400"></i> Target Face Locked';
faceStatusText.className = "text-[10px] text-emerald-400 mt-2 text-center font-bold";
facePreview.classList.remove('border-red-500');
} else {
targetFaceDescriptor = null;
facePreview.classList.add('border-red-500');
faceStatusText.innerHTML = '<i class="fas fa-times text-red-500"></i> No face detected. Try another photo.';
faceStatusText.className = "text-[10px] text-red-500 mt-2 text-center";
}
} catch (err) {
console.error("Detection error:", err);
faceStatusText.innerHTML = '<i class="fas fa-times text-red-500"></i> Processing error.';
}
};
facePreview.src = url;
faceUploadBtn.classList.add('hidden');
facePreview.classList.remove('hidden');
} catch (err) {
console.error(err);
faceStatusText.innerHTML = 'Error reading image.';
}
};
// Video Upload Handler
dropZone.onclick = () => videoInput.click();
videoInput.onchange = (e) => {
const file = e.target.files[0];
if (file) {
settingsPanel.style.opacity = "1";
settingsPanel.style.pointerEvents = "all";
dropZone.querySelector('h3').innerText = file.name;
statsText.innerText = "Video loaded. Ready to scan.";
}
};
// Extraction Process
startBtn.onclick = async () => {
if (isProcessing) {
isProcessing = false;
return;
}
const file = videoInput.files[0];
if (!file || !detector) return;
// Setup UI for processing
isProcessing = true;
extractedFrames = [];
resultsEl.innerHTML = '';
if (emptyState) emptyState.classList.add('hidden');
document.getElementById('progress-container').classList.remove('hidden');
if (scannerLine) scannerLine.style.display = "block";
startBtn.innerHTML = '<i class="fas fa-stop"></i> Stop Analysis';
startBtn.classList.replace('bg-indigo-600', 'bg-red-600');
downloadBtn.classList.add('hidden');
const url = URL.createObjectURL(file);
videoEl.src = url;
videoEl.onloadedmetadata = async () => {
const ctx = previewCanvas.getContext('2d');
previewCanvas.width = videoEl.videoWidth;
previewCanvas.height = videoEl.videoHeight;
const duration = videoEl.duration;
const step = parseFloat(document.getElementById('scan-rate').value);
const confidence = parseFloat(document.getElementById('confidence').value);
const doAutoCrop = autoCropToggle.checked;
const doFaceCrop = faceCropToggle.checked;
const requireFace = requireFaceToggle.checked;
const matchFace = targetFaceDescriptor !== null;
let lastTime = performance.now();
for (let time = 0; time < duration; time += step) {
if (!isProcessing) break;
videoEl.currentTime = time;
await new Promise(r => videoEl.onseeked = r);
// Draw frame
ctx.drawImage(videoEl, 0, 0);
// 1. Detect bodies (MediaPipe)
detector.setOptions({ scoreThreshold: confidence });
const results = detector.detect(previewCanvas);
let people = results.detections.filter(d =>
d.categories.some(c => c.categoryName === 'person')
);
let validEntities = [];
if (people.length > 0) {
// 2. Face API Processing (If required by any advanced setting)
if (matchFace || requireFace || doFaceCrop) {
// Detect all faces with a reasonable confidence
const faces = await faceapi.detectAllFaces(previewCanvas, new faceapi.SsdMobilenetv1Options({minConfidence: 0.3})).withFaceLandmarks().withFaceDescriptors();
if (matchFace) {
const matchingFaces = faces.filter(f => faceapi.euclideanDistance(targetFaceDescriptor, f.descriptor) < 0.55);
matchingFaces.forEach(f => {
// Try to link to a person body
let linkedPerson = people.find(p => isFaceInBody(f.detection.box, p.boundingBox));
validEntities.push({ personBox: linkedPerson ? linkedPerson.boundingBox : null, faceBox: f.detection.box, isMatch: true });
});
} else if (requireFace) {
// Must have a face to be valid
faces.forEach(f => {
let linkedPerson = people.find(p => isFaceInBody(f.detection.box, p.boundingBox));
validEntities.push({ personBox: linkedPerson ? linkedPerson.boundingBox : null, faceBox: f.detection.box, isMatch: false });
});
} else {
// Don't explicitly require face, but want to grab face box if available (for 512x512 crop)
people.forEach(p => {
let linkedFace = faces.find(f => isFaceInBody(f.detection.box, p.boundingBox));
validEntities.push({ personBox: p.boundingBox, faceBox: linkedFace ? linkedFace.detection.box : null, isMatch: false });
});
}
} else {
// Basic extraction, no face API needed
people.forEach(p => validEntities.push({ personBox: p.boundingBox, faceBox: null, isMatch: false }));
}
}
// 3. Save and Crop
if (validEntities.length > 0) {
if (!doAutoCrop && !doFaceCrop) {
// Save full frame once if no crop is selected
const fullFrameData = previewCanvas.toDataURL('image/jpeg', 0.9);
extractedFrames.push({ data: fullFrameData, time: time, type: 'Full' });
addFrameToUI(fullFrameData, time, 'Full');
} else {
// Extract EACH entity based on selected crops
validEntities.forEach(entity => {
// Normal Body Crop
if (doAutoCrop && entity.personBox) {
const box = entity.personBox;
const padX = box.width * 0.15;
const padY = box.height * 0.15;
const cX = Math.max(0, box.originX - padX);
const cY = Math.max(0, box.originY - padY);
const cW = Math.min(previewCanvas.width - cX, box.width + padX * 2);
const cH = Math.min(previewCanvas.height - cY, box.height + padY * 2);
const cropCanvas = document.createElement('canvas');
cropCanvas.width = cW;
cropCanvas.height = cH;
cropCanvas.getContext('2d').drawImage(previewCanvas, cX, cY, cW, cH, 0, 0, cW, cH);
const frameData = cropCanvas.toDataURL('image/jpeg', 0.9);
extractedFrames.push({ data: frameData, time: time, type: 'Body' });
addFrameToUI(frameData, time, 'Body');
}
// Tight Face Crop (512x512)
if (doFaceCrop && entity.faceBox) {
const fBox = entity.faceBox;
// Make crop region ~2x face size
const size = Math.max(fBox.width, fBox.height) * 2.0;
const centerX = fBox.x + fBox.width / 2;
const centerY = fBox.y + fBox.height / 2;
const sX = Math.max(0, centerX - size / 2);
const sY = Math.max(0, centerY - size / 2);
const sW = Math.min(previewCanvas.width - sX, size);
const sH = Math.min(previewCanvas.height - sY, size);
const faceCanvas = document.createElement('canvas');
faceCanvas.width = 512;
faceCanvas.height = 512;
const fCtx = faceCanvas.getContext('2d');
fCtx.fillStyle = '#000000';
fCtx.fillRect(0, 0, 512, 512);
const scale = 512 / size;
const dX = (sX - (centerX - size/2)) * scale;
const dY = (sY - (centerY - size/2)) * scale;
const dW = sW * scale;
const dH = sH * scale;
fCtx.drawImage(previewCanvas, sX, sY, sW, sH, dX, dY, dW, dH);
const faceData = faceCanvas.toDataURL('image/jpeg', 0.95);
extractedFrames.push({ data: faceData, time: time, type: 'Face' });
addFrameToUI(faceData, time, 'Face');
}
});
}
// 4. Draw visual feedback bounding boxes on monitor
validEntities.forEach(entity => {
if (entity.personBox) {
ctx.strokeStyle = entity.isMatch ? '#c084fc' : '#818cf8';
ctx.lineWidth = 4;
ctx.strokeRect(entity.personBox.originX, entity.personBox.originY, entity.personBox.width, entity.personBox.height);
if (entity.isMatch) {
ctx.fillStyle = '#c084fc';
ctx.font = '20px Arial';
ctx.fillText("TARGET MATCH", entity.personBox.originX, entity.personBox.originY - 10);
}
}
if (entity.faceBox) {
ctx.strokeStyle = '#34d399'; // Green for face box
ctx.lineWidth = 2;
ctx.strokeRect(entity.faceBox.x, entity.faceBox.y, entity.faceBox.width, entity.faceBox.height);
}
});
}
// Update Progress
const pct = Math.min(100, Math.round((time / duration) * 100));
progressBar.style.width = `${pct}%`;
progressPercent.innerText = `${pct}%`;
statsText.innerText = `Extracted ${extractedFrames.length} specific instances.`;
const now = performance.now();
const fps = Math.round(1000 / (now - lastTime));
document.getElementById('fps-counter').innerText = `${fps} SEEK/S`;
lastTime = now;
}
cleanup();
};
};
// Helper to link Face Box with Body Box
function isFaceInBody(faceBox, bodyBox) {
if (!bodyBox || !faceBox) return false;
const fCenterX = faceBox.x + faceBox.width / 2;
const fCenterY = faceBox.y + faceBox.height / 2;
return fCenterX >= bodyBox.originX && fCenterX <= bodyBox.originX + bodyBox.width &&
fCenterY >= bodyBox.originY && fCenterY <= bodyBox.originY + bodyBox.height;
}
function addFrameToUI(src, time, type) {
const wrapper = document.createElement('div');
const sizeClasses = type === 'Face' ? "w-32 h-32" : (type === 'Body' ? "h-40 w-auto min-w-[100px]" : "w-64 h-auto aspect-video");
const badgeColor = type === 'Face' ? 'bg-emerald-600' : (type === 'Body' ? 'bg-indigo-600' : 'bg-slate-600');
wrapper.className = `group relative bg-slate-900 rounded-xl overflow-hidden border border-white/5 hover:border-indigo-500/50 transition-all cursor-zoom-in shadow-xl flex-shrink-0 ${sizeClasses}`;
wrapper.innerHTML = `
<img src="${src}" class="w-full h-full object-contain bg-black/50">
<div class="absolute inset-0 bg-indigo-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<i class="fas fa-search-plus text-white text-xl"></i>
</div>
<div class="absolute bottom-2 left-2 bg-black/60 px-2 py-0.5 rounded text-[9px] font-mono text-indigo-300">
T+ ${time.toFixed(1)}s
</div>
<div class="absolute top-2 right-2 ${badgeColor} px-1.5 py-0.5 rounded text-[8px] font-bold text-white uppercase shadow">
${type}
</div>
`;
wrapper.onclick = () => {
const win = window.open();
win.document.write(`<img src="${src}" style="max-width:100%; max-height:100vh; display:block; margin:auto; background:#0f172a;">`);
};
resultsEl.appendChild(wrapper);
const container = document.getElementById('results-container');
if (container) container.scrollTop = container.scrollHeight;
}
function cleanup() {
isProcessing = false;
startBtn.innerHTML = '<i class="fas fa-microchip"></i> Start AI Extraction';
startBtn.classList.replace('bg-red-600', 'bg-indigo-600');
if (scannerLine) scannerLine.style.display = "none";
statusLabel.innerText = "Process Complete";
if(extractedFrames.length > 0) {
downloadBtn.classList.remove('hidden');
} else {
if (emptyState) emptyState.classList.remove('hidden');
statsText.innerText = "Scan complete. No matching frames found.";
}
}
downloadBtn.onclick = async () => {
const originalText = downloadBtn.innerHTML;
downloadBtn.innerHTML = '<i class="fas fa-spinner animate-spin"></i> Zipping...';
downloadBtn.disabled = true;
const zip = new JSZip();
extractedFrames.forEach((f, index) => {
const base64Data = f.data.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
zip.file(`frame_${f.time.toFixed(2)}s_${f.type}_${index}.jpg`, base64Data, {base64: true});
});
try {
const content = await zip.generateAsync({type: "blob"});
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
a.download = `HumanFrames_Extracted.zip`;
a.click();
} catch (err) {
console.error("Zipping failed", err);
} finally {
downloadBtn.innerHTML = originalText;
downloadBtn.disabled = false;
}
};
</script>
</body>
</html>