Update templates/index.html

templates/index.html

@@ -5,270 +5,45 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Face Detection App</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: Arial, sans-serif;
-        }
-
-        body {
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            min-height: 100vh;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 15px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-        }
-
-        header {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-        }
-
-        .subtitle {
-            color: #666;
-            font-size: 1.1rem;
-        }
-
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 30px;
-        }
-
-        @media (max-width: 768px) {
-            .main-content {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .input-section, .output-section {
-            background: #f8f9fa;
-            padding: 25px;
-            border-radius: 10px;
-            border: 2px dashed #dee2e6;
-        }
-
-        .section-title {
-            color: #495057;
-            margin-bottom: 20px;
-            font-size: 1.3rem;
-        }
-
-        .input-options {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-
-        .btn {
-            padding: 12px 20px;
-            border: none;
-            border-radius: 8px;
-            background: #6c757d;
-            color: white;
-            cursor: pointer;
-            flex: 1;
-            text-align: center;
-            transition: background 0.3s;
-        }
-
-        .btn:hover {
-            background: #5a6268;
-        }
-
-        .btn.active {
-            background: #007bff;
-        }
-
-        .upload-area {
-            border: 2px dashed #adb5bd;
-            border-radius: 10px;
-            padding: 40px 20px;
-            text-align: center;
-            margin-bottom: 20px;
-            cursor: pointer;
-            transition: border-color 0.3s;
-        }
-
-        .upload-area:hover {
-            border-color: #007bff;
-        }
-
-        .upload-icon {
-            font-size: 3rem;
-            margin-bottom: 15px;
-            color: #6c757d;
-        }
-
-        .camera-container {
-            position: relative;
-            width: 100%;
-            height: 300px;
-            background: #000;
-            border-radius: 10px;
-            overflow: hidden;
-            margin-bottom: 20px;
-            display: none;
-        }
-
-        #videoElement {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        .capture-btn {
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #dc3545;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            border: 4px solid white;
-            cursor: pointer;
-        }
-
-        .slider-container {
-            margin: 20px 0;
-        }
-
-        .slider-label {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px;
-            color: #495057;
-        }
-
-        .slider {
-            width: 100%;
-            height: 8px;
-            -webkit-appearance: none;
-            background: #dee2e6;
-            border-radius: 5px;
-            outline: none;
-        }
-
-        .slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #007bff;
-            cursor: pointer;
-        }
-
-        .detect-btn {
-            width: 100%;
-            padding: 15px;
-            background: #28a745;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1.1rem;
-            cursor: pointer;
-            transition: background 0.3s;
-        }
-
-        .detect-btn:hover {
-            background: #218838;
-        }
-
-        .detect-btn:disabled {
-            background: #6c757d;
-            cursor: not-allowed;
-        }
-
-        .image-container {
-            width: 100%;
-            height: 300px;
-            background: #e9ecef;
-            border-radius: 10px;
-            overflow: hidden;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        #outputImage {
-            max-width: 100%;
-            max-height: 100%;
-            display: none;
-        }
-
-        .placeholder-text {
-            color: #6c757d;
-            text-align: center;
-        }
-
-        .results-container {
-            background: white;
-            border-radius: 10px;
-            padding: 20px;
-            border: 2px solid #e9ecef;
-        }
-
-        .result-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 12px 0;
-            border-bottom: 1px solid #dee2e6;
-        }
-
-        .result-item:last-child {
-            border-bottom: none;
-        }
-
-        .result-label {
-            font-weight: bold;
-            color: #495057;
-        }
-
-        .result-value {
-            color: #007bff;
-            font-weight: bold;
-        }
-
-        .loading {
-            display: none;
-            text-align: center;
-            margin: 20px 0;
-        }
-
-        .spinner {
-            border: 4px solid #f3f3f3;
-            border-radius: 50%;
-            border-top: 4px solid #007bff;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 15px;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        #fileInput {
-            display: none;
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
+        body { background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; padding: 20px; }
+        .container { max-width: 1000px; margin: 0 auto; background: white; border-radius: 15px; padding: 30px; }
+        header { text-align: center; margin-bottom: 30px; }
+        h1 { color: #333; margin-bottom: 10px; }
+        .subtitle { color: #666; }
+        .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
+        @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } }
+        .input-section, .output-section { background: #f8f9fa; padding: 25px; border-radius: 10px; border: 2px dashed #dee2e6; }
+        .section-title { color: #495057; margin-bottom: 20px; }
+        .input-options { display: flex; gap: 10px; margin-bottom: 20px; }
+        .btn { padding: 12px; border: none; border-radius: 8px; background: #6c757d; color: white; cursor: pointer; flex: 1; }
+        .btn:hover { background: #5a6268; }
+        .btn.active { background: #007bff; }
+        .upload-area { border: 2px dashed #adb5bd; border-radius: 10px; padding: 40px 20px; text-align: center; margin-bottom: 20px; cursor: pointer; }
+        .upload-area:hover { border-color: #007bff; }
+        .upload-icon { font-size: 3rem; margin-bottom: 15px; color: #6c757d; }
+        .camera-container { position: relative; width: 100%; height: 300px; background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 20px; display: none; }
+        #videoElement { width: 100%; height: 100%; object-fit: cover; }
+        .capture-btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #dc3545; width: 60px; height: 60px; border-radius: 50%; border: 4px solid white; cursor: pointer; }
+        .slider-container { margin: 20px 0; }
+        .slider-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: #495057; }
+        .slider { width: 100%; height: 8px; background: #dee2e6; border-radius: 5px; outline: none; }
+        .slider::-webkit-slider-thumb { width: 20px; height: 20px; border-radius: 50%; background: #007bff; cursor: pointer; }
+        .detect-btn { width: 100%; padding: 15px; background: #28a745; color: white; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; }
+        .detect-btn:hover { background: #218838; }
+        .detect-btn:disabled { background: #6c757d; cursor: not-allowed; }
+        .image-container { width: 100%; height: 300px; background: #e9ecef; border-radius: 10px; overflow: hidden; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
+        #outputImage { max-width: 100%; max-height: 100%; display: none; }
+        .placeholder-text { color: #6c757d; text-align: center; }
+        .results-container { background: white; border-radius: 10px; padding: 20px; border: 2px solid #e9ecef; }
+        .result-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #dee2e6; }
+        .result-item:last-child { border-bottom: none; }
+        .result-label { font-weight: bold; color: #495057; }
+        .result-value { color: #007bff; font-weight: bold; }
+        .loading { display: none; text-align: center; margin: 20px 0; }
+        .spinner { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #007bff; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        #fileInput { display: none; }
     </style>
 </head>
 <body>
@@ -281,24 +56,19 @@
         <div class="main-content">
             <div class="input-section">
                 <h2 class="section-title">Input</h2>
-                
                 <div class="input-options">
                     <button id="uploadBtn" class="btn active">Upload Image</button>
                     <button id="cameraBtn" class="btn">Use Camera</button>
                 </div>
-                
                 <div id="uploadArea" class="upload-area">
                     <div class="upload-icon">📁</div>
                     <p>Click to upload an image</p>
-                    <p style="font-size: 0.9rem; color: #6c757d; margin-top: 5px;">Supported: JPG, PNG</p>
                     <input type="file" id="fileInput" accept="image/*">
                 </div>
-                
                 <div id="cameraContainer" class="camera-container">
                     <video id="videoElement" autoplay playsinline></video>
                     <button id="captureBtn" class="capture-btn"></button>
                 </div>
-                
                 <div class="slider-container">
                     <div class="slider-label">
                         <span>Detection Scale:</span>
@@ -306,39 +76,31 @@
                     </div>
                     <input type="range" min="1.1" max="2.0" step="0.1" value="1.1" class="slider" id="scaleSlider">
                 </div>
-                
                 <button id="detectBtn" class="detect-btn" disabled>Detect Faces</button>
-                
                 <div id="loading" class="loading">
                     <div class="spinner"></div>
                     <p>Processing image...</p>
                 </div>
             </div>
-            
             <div class="output-section">
                 <h2 class="section-title">Output</h2>
-                
                 <div class="image-container">
                     <img id="outputImage" alt="Processed Image">
                     <p id="placeholderText" class="placeholder-text">Processed image will appear here</p>
                 </div>
-                
                 <div id="resultsContainer" class="results-container" style="display: none;">
                     <h3 style="margin-bottom: 15px; color: #495057;">Detection Results</h3>
                     <div class="result-item">
                         <span class="result-label">Faces Detected:</span>
                         <span id="facesCount" class="result-value">0</span>
                     </div>
-                    <div id="facesDetails">
-                        <!-- Face details will be added here -->
-                    </div>
+                    <div id="facesDetails"></div>
                 </div>
             </div>
         </div>
     </div>
 
     <script>
-        // DOM Elements
         const uploadBtn = document.getElementById('uploadBtn');
         const cameraBtn = document.getElementById('cameraBtn');
         const uploadArea = document.getElementById('uploadArea');
@@ -356,11 +118,9 @@
         const facesDetails = document.getElementById('facesDetails');
         const loading = document.getElementById('loading');
 
-        // State variables
         let currentImage = null;
         let stream = null;
 
-        // Event Listeners
         uploadBtn.addEventListener('click', () => {
             uploadBtn.classList.add('active');
             cameraBtn.classList.remove('active');
@@ -377,19 +137,12 @@
             startCamera();
         });
 
-        uploadArea.addEventListener('click', () => {
-            fileInput.click();
-        });
-
+        uploadArea.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', handleImageUpload);
         captureBtn.addEventListener('click', captureImage);
         detectBtn.addEventListener('click', detectFaces);
+        scaleSlider.addEventListener('input', () => scaleValue.textContent = scaleSlider.value);
 
-        scaleSlider.addEventListener('input', () => {
-            scaleValue.textContent = scaleSlider.value;
-        });
-
-        // Functions
         function handleImageUpload(event) {
             const file = event.target.files[0];
             if (file) {
@@ -407,14 +160,14 @@
         }
 
         function startCamera() {
-            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+            if (navigator.mediaDevices?.getUserMedia) {
                 navigator.mediaDevices.getUserMedia({ video: true })
-                    .then(function(mediaStream) {
+                    .then(mediaStream => {
                         stream = mediaStream;
                         videoElement.srcObject = stream;
                         detectBtn.disabled = false;
                     })
-                    .catch(function(error) {
+                    .catch(error => {
                         console.error("Camera error: ", error);
                         alert("Unable to access camera. Please check permissions.");
                     });
@@ -436,7 +189,6 @@
             canvas.height = videoElement.videoHeight;
             const ctx = canvas.getContext('2d');
             ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-            
             currentImage = canvas.toDataURL('image/png');
             outputImage.src = currentImage;
             outputImage.style.display = 'block';
@@ -456,17 +208,11 @@
             try {
                 const response = await fetch('/detect', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        image: currentImage,
-                        scale: scaleSlider.value
-                    })
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ image: currentImage, scale: scaleSlider.value })
                 });
 
                 const data = await response.json();
-
                 if (data.success) {
                     outputImage.src = data.result_image;
                     displayResults(data.faces_detected, data.face_data);
@@ -474,7 +220,6 @@
                     alert('Error detecting faces: ' + data.error);
                 }
             } catch (error) {
-                console.error('Detection error:', error);
                 alert('Error detecting faces. Please try again.');
             } finally {
                 loading.style.display = 'none';
@@ -484,7 +229,6 @@
 
         function displayResults(faceCount, faceData) {
             facesCount.textContent = faceCount;
-            
             facesDetails.innerHTML = '';
             faceData.forEach(face => {
                 const faceElement = document.createElement('div');
@@ -495,12 +239,10 @@
                 `;
                 facesDetails.appendChild(faceElement);
             });
-            
             resultsContainer.style.display = 'block';
         }
 
-        // Initialize
-        uploadBtn.click(); // Start with upload mode
+        uploadBtn.click();
     </script>
 </body>
 </html>