Upload app.js

app.js

@@ -0,0 +1,167 @@
+const API_URL = window.location.origin + '/predict'; // Ajusta si es necesario
+
+const uploadArea = document.getElementById('uploadArea');
+const fileInput = document.getElementById('fileInput');
+const previewSection = document.getElementById('previewSection');
+const previewImage = document.getElementById('previewImage');
+const predictBtn = document.getElementById('predictBtn');
+const spinner = document.getElementById('spinner');
+const btnText = document.getElementById('btnText');
+const resultSection = document.getElementById('resultSection');
+const resultIcon = document.getElementById('resultIcon');
+const resultPrediction = document.getElementById('resultPrediction');
+const confidenceBar = document.getElementById('confidenceBar');
+const confidenceValue = document.getElementById('confidenceValue');
+const probabilitiesList = document.getElementById('probabilitiesList');
+const uploadAnotherBtn = document.getElementById('uploadAnotherBtn');
+
+let selectedFile = null;
+
+// Prevenir comportamientos por defecto para drag and drop
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, preventDefaults, false);
+});
+
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+['dragenter', 'dragover'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, () => uploadArea.classList.add('dragover'));
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+    uploadArea.addEventListener(eventName, () => uploadArea.classList.remove('dragover'));
+});
+
+uploadArea.addEventListener('drop', handleDrop);
+uploadArea.addEventListener('click', () => fileInput.click());
+fileInput.addEventListener('change', handleFileSelect);
+
+function handleDrop(e) {
+    const dt = e.dataTransfer;
+    const files = dt.files;
+    if (files.length) {
+        handleFiles(files);
+    }
+}
+
+function handleFileSelect(e) {
+    handleFiles(e.target.files);
+}
+
+function handleFiles(files) {
+    if (!files || files.length === 0) return;
+    const file = files[0];
+    if (!file.type.startsWith('image/')) {
+        alert('Por favor selecciona una imagen válida (JPG, PNG, etc.)');
+        return;
+    }
+    selectedFile = file;
+
+    // Mostrar vista previa
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        previewImage.src = e.target.result;
+        previewSection.classList.add('active');
+        predictBtn.disabled = false;
+        // Ocultar resultado anterior
+        resultSection.classList.remove('active');
+        uploadAnotherBtn.style.display = 'none';
+    };
+    reader.readAsDataURL(file);
+}
+
+predictBtn.addEventListener('click', classifyImage);
+
+async function classifyImage() {
+    if (!selectedFile) return;
+
+    // Estado de carga
+    predictBtn.disabled = true;
+    spinner.style.display = 'inline-block';
+    btnText.textContent = 'Analizando...';
+    resultSection.classList.remove('active');
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+
+    try {
+        const response = await fetch(API_URL, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || 'Error en la API');
+        }
+
+        const data = await response.json();
+        displayResult(data);
+    } catch (error) {
+        alert('Error: ' + error.message);
+    } finally {
+        spinner.style.display = 'none';
+        btnText.textContent = '🔍 Analizar imagen';
+        predictBtn.disabled = false;
+    }
+}
+
+function displayResult(data) {
+    const classMapping = {
+        airplane: { icon: '✈️', label: 'Aéreo', color: 'linear-gradient(90deg, #4299e1, #3182ce)' },
+        car: { icon: '🚗', label: 'Terrestre', color: 'linear-gradient(90deg, #48bb78, #38a169)' },
+        ship: { icon: '🚢', label: 'Marítimo', color: 'linear-gradient(90deg, #ed8936, #dd6b20)' }
+    };
+
+    // Clase con mayor probabilidad
+    const predictedClass = Object.keys(data.probabilidades).reduce((a, b) =>
+        data.probabilidades[a] > data.probabilidades[b] ? a : b
+    );
+
+    const confianza = data.probabilidades[predictedClass];
+    const classInfo = classMapping[predictedClass];
+
+    resultIcon.textContent = classInfo.icon;
+    resultPrediction.textContent = classInfo.label;
+    confidenceBar.style.background = classInfo.color;
+
+    const percent = Math.round(confianza * 100);
+    confidenceBar.style.width = percent + '%';
+    confidenceValue.textContent = percent + '%';
+
+    // Construir lista de probabilidades
+    probabilitiesList.innerHTML = '';
+    const labels = {
+        airplane: '✈️ Aéreo',
+        car: '🚗 Terrestre',
+        ship: '🚢 Marítimo'
+    };
+
+    for (const [key, prob] of Object.entries(data.probabilidades)) {
+        const probPercent = Math.round(prob * 100);
+        const item = document.createElement('div');
+        item.className = 'prob-item';
+        item.innerHTML = `
+            <div class="prob-label">
+                <span>${labels[key]}</span>
+            </div>
+            <span class="prob-value">${probPercent}%</span>
+        `;
+        probabilitiesList.appendChild(item);
+    }
+
+    resultSection.classList.add('active');
+    uploadAnotherBtn.style.display = 'inline-block';
+}
+
+uploadAnotherBtn.addEventListener('click', () => {
+    fileInput.value = '';
+    selectedFile = null;
+    previewSection.classList.remove('active');
+    resultSection.classList.remove('active');
+    predictBtn.disabled = true;
+    uploadAnotherBtn.style.display = 'none';
+});