Spaces:

srivatsavdamaraju
/

object_detection

Running

App Files Files Community

object_detection / index.html

srivatsavdamaraju

Update index.html

6c77ca4 verified 2 months ago

raw

history blame contribute delete

5.12 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Real-Time Object Detection</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #000;
	}
	#video {
	width: 320px; /* Reduced video size */
	height: 240px; /* Reduced video size */
	display: block;
	background-color: #000;
	}
	#canvas {
	width: 320px; /* Reduced canvas size */
	height: 240px; /* Reduced canvas size */
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	}
	.overlay {
	position: absolute;
	top: 10px;
	left: 10px;
	color: white;
	font-size: 16px;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 5px;
	pointer-events: none;
	}
	#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 24px;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 20px;
	border-radius: 5px;
	}
	</style>
	</head>
	<body>

	<video id="video" width="320" height="240" autoplay muted></video>
	<canvas id="canvas" width="320" height="240"></canvas>
	<div id="overlay" class="overlay"></div>
	<div id="loading" style="display: none;">Loading model...</div>

	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
	<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

	<script>
	const video = document.getElementById('video');
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	const overlay = document.getElementById('overlay');
	const loading = document.getElementById('loading');

	let model;
	let frameCount = 0;
	const detectionInterval = 2; // Process every 2nd frame

	// Initialize video stream from webcam
	navigator.mediaDevices.getUserMedia({ video: { width: 320, height: 240 } })
	.then((stream) => {
	video.srcObject = stream;
	loadModel();
	})
	.catch((err) => {
	console.error('Error accessing webcam: ', err);
	});

	// Load the COCO-SSD model for object detection
	async function loadModel() {
	try {
	loading.style.display = 'block'; // Show loading message
	model = await cocoSsd.load();
	console.log('COCO-SSD model loaded!');
	loading.style.display = 'none'; // Hide loading message once model is ready
	startDetection();
	} catch (err) {
	console.error('Error loading model:', err);
	loading.innerHTML = 'Error loading model. Please try again.';
	}
	}

	// Function to run object detection on each frame
	async function detectFrame() {
	if (!model) return; // Only proceed if model is loaded

	frameCount++;

	// Skip frames to improve performance
	if (frameCount % detectionInterval !== 0) {
	requestAnimationFrame(detectFrame); // Skip this frame and move to the next
	return;
	}

	frameCount = 0; // Reset frame count after detection

	// Clear the canvas before drawing
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw the video frame to canvas
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

	// Run object detection
	const predictions = await model.detect(video);

	// Clear previous overlay content
	overlay.innerHTML = '';

	predictions.forEach(prediction => {
	// Draw bounding box
	ctx.beginPath();
	ctx.rect(
	prediction.bbox[0],
	prediction.bbox[1],
	prediction.bbox[2],
	prediction.bbox[3]
	);
	ctx.lineWidth = 2;
	ctx.strokeStyle = 'red';
	ctx.fillStyle = 'red';
	ctx.stroke();

	// Add label for the detected object
	ctx.fillText(
	`${prediction.class} (${Math.round(prediction.score * 100)}%)`,
	prediction.bbox[0],
	prediction.bbox[1] > 10 ? prediction.bbox[1] - 5 : 10
	);

	// Optionally display detected class names in the overlay
	overlay.innerHTML += `<p>${prediction.class} - ${Math.round(prediction.score * 100)}%</p>`;
	});

	// Call detectFrame repeatedly for continuous object detection
	requestAnimationFrame(detectFrame);
	}

	// Start the detection loop once the model is loaded
	function startDetection() {
	detectFrame();
	}
	</script>

	</body>
	</html>