Spaces:

YOUSEF2434
/

Computer-Vision-Lab

Paused

App Files Files Community

Computer-Vision-Lab / Object-Detection.html

YOUSEF2434

Upload 96 files

a566fb0 verified 2 months ago

raw

history blame contribute delete

15 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Enhanced Object Detection</title>
	<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
	<style>
	body { font-family: 'Roboto', sans-serif; margin: 2em; color: #3d3d3d; background: #f0f2f5; }
	h1 { color: #007f8b; text-align: center; }
	.container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

	/* Controls Section */
	.controls { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding: 15px; background: #e6fcfd; border-radius: 8px; align-items: center; }
	.control-group { display: flex; flex-direction: column; min-width: 200px; }
	label { font-weight: bold; font-size: 0.9em; margin-bottom: 5px; color: #007f8b; }
	input[type=range] { width: 100%; }
	.upload-btn { background: #007f8b; color: white; padding: 10px 20px; border-radius: 25px; cursor: pointer; display: inline-block; font-weight: bold; text-align: center; }
	.upload-btn:hover { background: #006069; }
	input[type="file"] { display: none; }

	/* Image Grid */
	/* Replace the existing .image-grid and .detect-card styles */

	.image-grid {
	/* Disable Grid, use Columns instead */
	display: block;
	column-count: 3; /* Creates 3 columns like Pinterest */
	column-gap: 20px;
	}

	/* Responsive: 2 columns on smaller screens */
	@media (max-width: 900px) {
	.image-grid { column-count: 2; }
	}
	@media (max-width: 600px) {
	.image-grid { column-count: 1; }
	}

	.detect-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	background: #000;
	cursor: pointer;
	transition: transform 0.2s;
	z-index: 1;

	/* NEW: Prevents card from splitting across columns */
	break-inside: avoid-column;
	margin-bottom: 20px;
	}

	.detect-card:hover { transform: scale(1.01); }
	.detect-card img { display: block; width: 100%; height: auto; transition: opacity 0.3s; }

	/* Processing State */
	.detect-card.processing { pointer-events: none; } /* Prevent double clicks */
	.detect-card.processing img { opacity: 0.6; filter: grayscale(50%); }

	/* --- NEW: Inference Loading Bar --- */
	.inference-panel {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	padding: 15px;
	box-sizing: border-box;
	transform: translateY(100%); /* Hidden by default */
	transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	z-index: 50;
	border-top: 3px solid #007f8b;
	}

	/* Show panel when processing */
	.detect-card.processing .inference-panel {
	transform: translateY(0);
	}

	.inference-status {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	color: #007f8b;
	margin-bottom: 8px;
	font-size: 0.9rem;
	}

	.progress-track {
	width: 100%;
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	}

	.progress-bar {
	height: 100%;
	background: #007f8b;
	width: 30%;
	border-radius: 3px;
	animation: loading 1.5s infinite ease-in-out;
	}

	@keyframes loading {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(400%); }
	}
	/* ---------------------------------- */

	/* Bounding Boxes */
	.highlighter { position: absolute; border: 2px solid; border-radius: 4px; z-index: 10; pointer-events: none; }
	.label-tag { position: absolute; padding: 2px 6px; color: white; font-size: 11px; font-weight: bold; border-radius: 4px; pointer-events: none; z-index: 11; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

	/* Loading Spinner (Initial Model Load) */
	#loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); display: none; z-index: 1000; font-weight: bold; }
	</style>
	</head>
	<body>

	<div class="container">
	<h1>Smart Object Recognition</h1>

	<div class="controls">
	<div class="control-group">
	<label for="imageUpload" class="upload-btn">📂 Upload Image</label>
	<input type="file" id="imageUpload" accept="image/*">
	</div>

	<div class="control-group">
	<label>Confidence Threshold: <span id="confValue">50</span>%</label>
	<input type="range" id="confidenceSlider" min="10" max="90" value="50">
	<small>Increase to remove weak guesses.</small>
	</div>

	<div class="control-group">
	<label>Overlap Fix (NMS): <span id="overlapValue">30</span>%</label>
	<input type="range" id="overlapSlider" min="0" max="100" value="30">
	<small>Lower value = Fewer overlapping boxes.</small>
	</div>
	</div>

	<div id="loader">Loading AI Model...</div>

	<div class="image-grid" id="imageContainer">
	<!-- Image 1 -->
	<div class="detect-card">
	<img src="https://assets.codepen.io/9177687/coupledog.jpeg" crossorigin="anonymous" />
	</div>

	<!-- Image 2 -->
	<div class="detect-card">
	<img src="https://assets.codepen.io/9177687/doggo.jpeg" crossorigin="anonymous" />
	</div>

	<!-- Image 3 (FIXED: Added wrapper div) -->
	<div class="detect-card">
	<img src="https://tse3.mm.bing.net/th/id/OIP.mIJJ36cXpVujF1wnZnd4VQHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 4 -->
	<div class="detect-card">
	<img src="https://images.pexels.com/photos/23409055/pexels-photo-23409055/free-photo-of-cars-on-street-in-town.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" crossorigin="anonymous" />
	</div>

	<!-- Image 5 -->
	<div class="detect-card">
	<img src="https://tse4.mm.bing.net/th/id/OIP.bWwaHeR-aoBb3esBRaAEEgHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 6 -->
	<div class="detect-card">
	<img src="https://tse4.mm.bing.net/th/id/OIP.vs_d1C-7n4PoNv0GVlaVDwHaFj?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 7 -->
	<div class="detect-card">
	<img src="https://tse4.mm.bing.net/th/id/OIP.V1zVa5IUI22o0i6gG4or2QHaLH?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 8 -->
	<div class="detect-card">
	<img src="https://th.bing.com/th/id/R.2be55af1ab4a38df1a9b54bf6b68a8bd?rik=f7wiKdc8N42mgA&pid=ImgRaw&r=0" crossorigin="anonymous" />
	</div>

	<!-- Image 9 -->
	<div class="detect-card">
	<img src="https://images.pexels.com/photos/20625972/pexels-photo-20625972.jpeg?cs=srgb&dl=pexels-saturnus99-20625972.jpg&fm=jpg" crossorigin="anonymous" />
	</div>

	<!-- Image 10 -->
	<div class="detect-card">
	<img src="https://tse4.mm.bing.net/th/id/OIP.ZMnNqw1GVTa9HpHvsTYcjQAAAA?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 11 -->
	<div class="detect-card">
	<img src="https://bestbackpacklab.com/wp-content/uploads/2021/05/children-1536x864.jpg" crossorigin="anonymous" />
	</div>

	<!-- Image 12 -->
	<div class="detect-card">
	<img src="https://tse1.explicit.bing.net/th/id/OIP.za2l0WGKXbR4Qkj8phu2UwHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 13 -->
	<div class="detect-card">
	<img src="https://tse2.mm.bing.net/th/id/OIP.bcOP7ZTpLAyyl3tKpdk5gAHaFB?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 14 -->
	<div class="detect-card">
	<img src="https://tse3.mm.bing.net/th/id/OIP.PC6Fr2mEuGUsEiaNfCSOaAHaE7?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 15 -->
	<div class="detect-card">
	<img src="https://tse3.mm.bing.net/th/id/OIF.EABwKojMHBX0uEfpxor95w?rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>

	<!-- Image 16 -->
	<div class="detect-card">
	<img src="https://tse4.mm.bing.net/th/id/OIP.qliYrfiREN-ydW4DxWYfSgHaE7?w=626&h=417&rs=1&pid=ImgDetMain&o=7&rm=3" crossorigin="anonymous" />
	</div>
	</div>
	</div>

	<script type="module">
	import { ObjectDetector, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2";

	const loader = document.getElementById("loader");
	let objectDetector;
	let runningMode = "IMAGE";

	// SETTINGS
	let confidenceThreshold = 0.5;
	let overlapThreshold = 0.3;

	// 1. Initialize MediaPipe
	const initializeObjectDetector = async () => {
	loader.style.display = "block";
	const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2/wasm");

	objectDetector = await ObjectDetector.createFromOptions(vision, {
	baseOptions: {
	modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite2/float16/1/efficientdet_lite2.tflite`,
	delegate: "GPU"
	},
	scoreThreshold: 0.2,
	runningMode: runningMode
	});

	loader.style.display = "none";
	console.log("Model Loaded: EfficientDet-Lite2");
	};

	initializeObjectDetector();

	// 2. NMS Filter Function
	function filterDetections(detections, iouLimit) {
	detections.sort((a, b) => b.categories[0].score - a.categories[0].score);

	const selected = [];
	const active = new Array(detections.length).fill(true);

	for (let i = 0; i < detections.length; i++) {
	if (!active[i]) continue;
	if (detections[i].categories[0].score < confidenceThreshold) continue;

	selected.push(detections[i]);
	const boxA = detections[i].boundingBox;

	for (let j = i + 1; j < detections.length; j++) {
	if (!active[j]) continue;

	const boxB = detections[j].boundingBox;

	const x1 = Math.max(boxA.originX, boxB.originX);
	const y1 = Math.max(boxA.originY, boxB.originY);
	const x2 = Math.min(boxA.originX + boxA.width, boxB.originX + boxB.width);
	const y2 = Math.min(boxA.originY + boxA.height, boxB.originY + boxB.height);

	if (x2 < x1 \|\| y2 < y1) continue;

	const intersection = (x2 - x1) * (y2 - y1);
	const areaA = boxA.width * boxA.height;
	const areaB = boxB.width * boxB.height;
	const union = areaA + areaB - intersection;

	const iou = intersection / union;

	if (iou > iouLimit) {
	active[j] = false;
	}
	}
	}
	return selected;
	}

	// 3. Handle Clicks & Draw
	async function handleClick(event) {
	if (!objectDetector) return;

	const img = event.target;
	const card = img.parentNode;

	// -- NEW: Inject/Show Inference Bar --
	let infoPanel = card.querySelector('.inference-panel');
	if (!infoPanel) {
	infoPanel = document.createElement('div');
	infoPanel.className = 'inference-panel';
	infoPanel.innerHTML = `
	<div class="inference-status">
	<span>Running Inference...</span>
	<span>Please wait</span>
	</div>
	<div class="progress-track">
	<div class="progress-bar"></div>
	</div>
	`;
	card.appendChild(infoPanel);
	}

	// 1. Show Loading State
	card.classList.add('processing');
	// Clear old boxes immediately so the user sees a "reset"
	card.querySelectorAll('.highlighter, .label-tag').forEach(el => el.remove());

	// 2. Force a tiny delay so the browser renders the loading bar
	// before the heavy synchronous AI detection freezes the thread.
	await new Promise(resolve => requestAnimationFrame(() => setTimeout(resolve, 50)));

	try {
	// 3. Run Detection
	const predictions = objectDetector.detect(img);
	const filteredDetections = filterDetections(predictions.detections, overlapThreshold);
	displayDetections(filteredDetections, img);
	} catch(e) {
	console.error(e);
	alert("Error running model");
	} finally {
	// 4. Hide Loading State
	card.classList.remove('processing');
	}
	}

	function displayDetections(detections, img) {
	const ratioX = img.width / img.naturalWidth;
	const ratioY = img.height / img.naturalHeight;

	detections.forEach(detection => {
	const box = detection.boundingBox;
	const category = detection.categories[0];
	const score = Math.round(category.score * 100);
	const color = getColorForLabel(category.categoryName);

	const highlighter = document.createElement("div");
	highlighter.className = "highlighter";
	highlighter.style.left = `${box.originX * ratioX}px`;
	highlighter.style.top = `${box.originY * ratioY}px`;
	highlighter.style.width = `${box.width * ratioX}px`;
	highlighter.style.height = `${box.height * ratioY}px`;
	highlighter.style.borderColor = color;
	highlighter.style.backgroundColor = color + "20";

	const label = document.createElement("div");
	label.className = "label-tag";
	label.innerText = `${category.categoryName} ${score}%`;
	label.style.backgroundColor = color;

	const topPos = (box.originY * ratioY) - 25;
	label.style.left = `${box.originX * ratioX}px`;
	label.style.top = `${topPos > 0 ? topPos : (box.originY * ratioY)}px`;

	img.parentNode.appendChild(highlighter);
	img.parentNode.appendChild(label);
	});
	}

	function getColorForLabel(label) {
	let hash = 0;
	for (let i = 0; i < label.length; i++) {
	hash = label.charCodeAt(i) + ((hash << 5) - hash);
	}
	const c = (hash & 0x00FFFFFF).toString(16).toUpperCase();
	return "#" + "00000".substring(0, 6 - c.length) + c;
	}

	// 4. Initialization & Event Listeners
	const imageContainer = document.getElementById("imageContainer");

	imageContainer.addEventListener('click', (e) => {
	if (e.target.tagName === 'IMG') handleClick(e);
	});

	document.getElementById('imageUpload').addEventListener('change', (e) => {
	const file = e.target.files[0];
	if (!file) return;

	const reader = new FileReader();
	reader.onload = (event) => {
	const div = document.createElement('div');
	div.className = 'detect-card';
	const img = document.createElement('img');
	img.src = event.target.result;
	div.appendChild(img);
	imageContainer.insertBefore(div, imageContainer.firstChild);
	};
	reader.readAsDataURL(file);
	});

	document.getElementById('confidenceSlider').addEventListener('input', (e) => {
	confidenceThreshold = e.target.value / 100;
	document.getElementById('confValue').innerText = e.target.value;
	});

	document.getElementById('overlapSlider').addEventListener('input', (e) => {
	overlapThreshold = e.target.value / 100;
	document.getElementById('overlapValue').innerText = e.target.value;
	});
	</script>

	</body>
	</html>