Upload script.js

static/script.js

@@ -0,0 +1,70 @@
+const imageInput = document.getElementById('imageInput');
+const previewImg = document.getElementById('previewImg');
+const classifyBtn = document.getElementById('classifyBtn');
+const resultDiv = document.getElementById('result');
+
+imageInput.addEventListener('change', (event) => {
+    const file = event.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            previewImg.src = e.target.result;
+            previewImg.style.display = 'block';
+            classifyBtn.disabled = false;
+            resultDiv.innerHTML = '';
+            resultDiv.className = 'result';
+        };
+        reader.readAsDataURL(file);
+    } else {
+        previewImg.style.display = 'none';
+        classifyBtn.disabled = true;
+    }
+});
+
+classifyBtn.addEventListener('click', async () => {
+    const file = imageInput.files[0];
+    if (!file) return;
+
+    classifyBtn.disabled = true;
+    classifyBtn.innerText = '🔍 Analizando...';
+    resultDiv.innerHTML = '<em>Procesando imagen...</em>';
+
+    const formData = new FormData();
+    formData.append('image', file);
+
+    try {
+        const response = await fetch('/predict', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || 'Error del servidor');
+        }
+
+        const data = await response.json();
+        const genero = data.genero;
+        const confianza = data.confianza; // Capturamos la nueva variable
+
+        // Actualizamos el HTML para mostrar tanto el género como la confianza
+        resultDiv.innerHTML = `
+            🧬 La persona es <strong>${genero}</strong>.<br>
+            🎯 Precisión: <strong>${confianza}</strong>
+        `;
+        
+        // Removemos clases anteriores por si acaso
+        resultDiv.classList.remove('mujer', 'hombre', 'error');
+        // Añadimos la clase correspondiente
+        resultDiv.classList.add(genero === 'mujer' ? 'mujer' : 'hombre');
+
+    } catch (error) {
+        console.error(error);
+        resultDiv.innerHTML = `❌ Error: ${error.message}`;
+        resultDiv.classList.remove('mujer', 'hombre'); // Limpiar estilos previos
+        resultDiv.classList.add('error');
+    } finally {
+        classifyBtn.disabled = false;
+        classifyBtn.innerText = '🔍 Clasificar';
+    }
+});