feat: initial implementation of People Counter web app

- Add Flask application with MJPEG video streaming
- Implement OpenCV DNN face detection module
- Add zone-based entry/exit tracking with cooldown mechanism
- Create web interface with real-time WebSocket updates
- Add model download script and comprehensive README
- Include OpenCV DNN model files for face detection

static/js/main.js

@@ -0,0 +1,133 @@
+// WebSocket connection and real-time UI updates
+const socket = io();
+
+// Default maximum occupancy threshold (can be configured)
+const MAX_OCCUPANCY = 10;
+
+// DOM elements
+const occupancyValue = document.getElementById('occupancyValue');
+const occupancyStatus = document.getElementById('occupancyStatus');
+const occupancyCard = document.getElementById('occupancyCard');
+const enteredValue = document.getElementById('enteredValue');
+const exitedValue = document.getElementById('exitedValue');
+const resetButton = document.getElementById('resetButton');
+const statusIndicator = document.getElementById('statusIndicator');
+const videoStream = document.getElementById('videoStream');
+
+// Connection status
+let isConnected = false;
+
+// WebSocket event handlers
+socket.on('connect', () => {
+    console.log('Connected to server');
+    isConnected = true;
+    updateConnectionStatus(true);
+});
+
+socket.on('disconnect', () => {
+    console.log('Disconnected from server');
+    isConnected = false;
+    updateConnectionStatus(false);
+});
+
+// Handle count updates from server
+socket.on('count_update', (data) => {
+    updateCounts(data);
+});
+
+// Handle reset confirmation
+socket.on('reset_confirmation', (data) => {
+    console.log('Counts reset:', data);
+    // Counts will be updated via count_update event
+});
+
+// Update count displays
+function updateCounts(counts) {
+    const { total_entered, total_exited, current_occupancy } = counts;
+    
+    // Update values with animation
+    updateValue(enteredValue, total_entered);
+    updateValue(exitedValue, total_exited);
+    updateValue(occupancyValue, current_occupancy);
+    
+    // Update occupancy status and styling
+    updateOccupancyStatus(current_occupancy);
+}
+
+// Update a single value with animation
+function updateValue(element, newValue) {
+    const oldValue = parseInt(element.textContent) || 0;
+    if (oldValue !== newValue) {
+        element.classList.add('updated');
+        element.textContent = newValue;
+        setTimeout(() => {
+            element.classList.remove('updated');
+        }, 200);
+    }
+}
+
+// Update occupancy status based on current count
+function updateOccupancyStatus(occupancy) {
+    // Remove all status classes
+    occupancyCard.classList.remove('warning', 'danger');
+    statusIndicator.classList.remove('warning', 'danger');
+    
+    // Update status text and styling
+    if (occupancy >= MAX_OCCUPANCY) {
+        occupancyStatus.textContent = 'OVER LIMIT';
+        occupancyCard.classList.add('danger');
+        statusIndicator.classList.add('danger');
+    } else if (occupancy >= MAX_OCCUPANCY * 0.8) {
+        occupancyStatus.textContent = 'High';
+        occupancyCard.classList.add('warning');
+        statusIndicator.classList.add('warning');
+    } else if (occupancy >= MAX_OCCUPANCY * 0.5) {
+        occupancyStatus.textContent = 'Moderate';
+        occupancyCard.classList.remove('warning', 'danger');
+        statusIndicator.classList.remove('warning', 'danger');
+    } else {
+        occupancyStatus.textContent = 'Normal';
+        occupancyCard.classList.remove('warning', 'danger');
+        statusIndicator.classList.remove('warning', 'danger');
+    }
+}
+
+// Update connection status indicator
+function updateConnectionStatus(connected) {
+    if (connected) {
+        statusIndicator.style.background = '#4caf50';
+        statusIndicator.title = 'Connected';
+    } else {
+        statusIndicator.style.background = '#f44336';
+        statusIndicator.title = 'Disconnected';
+    }
+}
+
+// Handle reset button click
+resetButton.addEventListener('click', () => {
+    if (confirm('Are you sure you want to reset all counts?')) {
+        socket.emit('reset_counts');
+    }
+});
+
+// Handle video stream errors
+videoStream.addEventListener('error', () => {
+    console.error('Error loading video stream');
+    videoStream.src = '';  // Clear src to prevent repeated errors
+    // Optionally show an error message
+    const errorMsg = document.createElement('div');
+    errorMsg.className = 'error-message';
+    errorMsg.textContent = 'Unable to load video stream. Please check camera connection.';
+    errorMsg.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(244, 67, 54, 0.9); padding: 20px; border-radius: 10px;';
+    document.querySelector('.video-container').appendChild(errorMsg);
+});
+
+// Periodic check for connection (fallback)
+setInterval(() => {
+    if (!isConnected && socket.connected === false) {
+        console.log('Attempting to reconnect...');
+    }
+}, 5000);
+
+// Initialize
+console.log('People Counter frontend initialized');