Corregir estructura frontend y metadata para Space

README.md

@@ -1,3 +1,16 @@
+---
+language: es
+license: mit
+tags:
+  - salud-mental
+  - psicologia
+  - deteccion-de-riesgo
+  - education
+  - fastapi
+  - groq
+  - docker
+---
+
 # Modelo de Detección Temprana de Riesgo Psicológico en Estudiantes
 
 Este proyecto es una aplicación web que analiza textos académicos en español y detecta señales tempranas de riesgo psicológico (ansiedad/depresión) usando FastAPI y la API de Groq.

frontend/js/app.js

@@ -0,0 +1,174 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('analisisForm');
+  const texto = document.getElementById('texto');
+  const fileInput = document.getElementById('fileInput');
+  const dropZone = document.getElementById('dropZone');
+  const loading = document.getElementById('loading');
+  const resultado = document.getElementById('resultado');
+  const nivelEl = document.getElementById('nivel');
+  const indicadoresEl = document.getElementById('indicadores');
+  const analisisEl = document.getElementById('analisis');
+  const recomendacionesEl = document.getElementById('recomendaciones');
+  const submitBtn = document.getElementById('submitBtn');
+  const fileStatus = document.getElementById('fileStatus');
+  const fileName = document.getElementById('fileName');
+  const fileSize = document.getElementById('fileSize');
+  const clearFileBtn = document.getElementById('clearFileBtn');
+  const uploadProgress = document.getElementById('uploadProgress');
+  const progressFill = document.getElementById('progressFill');
+  const progressText = document.getElementById('progressText');
+
+  // Validar tipo de archivo
+  const validateFile = (file) => {
+    const validTypes = ['text/plain', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+    const validExtensions = ['.txt', '.docx'];
+    const fileName = file.name.toLowerCase();
+    const hasValidExt = validExtensions.some(ext => fileName.endsWith(ext));
+    const hasValidType = validTypes.includes(file.type) || fileName.endsWith('.docx');
+    const maxSize = 5 * 1024 * 1024; // 5MB
+
+    if (!hasValidExt) return { valid: false, error: 'Formato no válido. Solo .txt y .docx' };
+    if (file.size > maxSize) return { valid: false, error: 'Archivo muy grande (máx. 5MB)' };
+    return { valid: true };
+  };
+
+  // Mostrar archivo seleccionado
+  const showFileStatus = (file) => {
+    const validation = validateFile(file);
+    if (!validation.valid) {
+      alert('❌ ' + validation.error);
+      fileInput.value = '';
+      fileStatus.classList.add('hidden');
+      return false;
+    }
+    
+    fileName.textContent = file.name;
+    fileSize.textContent = (file.size / 1024).toFixed(1) + ' KB';
+    fileStatus.classList.remove('hidden');
+    return true;
+  };
+
+  // Limpiar archivo
+  clearFileBtn.addEventListener('click', () => {
+    fileInput.value = '';
+    fileStatus.classList.add('hidden');
+    texto.focus();
+  });
+
+  // Eventos de archivo
+  fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+      showFileStatus(e.target.files[0]);
+    }
+  });
+
+  // Drag and drop
+  ;['dragenter','dragover'].forEach(evt => {
+    dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.add('drag'); });
+  })
+  ;['dragleave','drop'].forEach(evt => {
+    dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.remove('drag'); });
+  })
+
+  dropZone.addEventListener('drop', (e) => {
+    const f = e.dataTransfer.files[0];
+    if (f) {
+      fileInput.files = e.dataTransfer.files;
+      showFileStatus(f);
+    }
+  });
+
+  // Click on drop zone opens file selector
+  dropZone.addEventListener('click', () => fileInput.click());
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    // Validación: texto o archivo
+    if (!texto.value.trim() && fileInput.files.length === 0) {
+      alert('Por favor ingrese texto o suba un archivo (.txt o .docx).');
+      return;
+    }
+
+    // Preparar FormData
+    const fd = new FormData();
+    if (texto.value.trim()) fd.append('texto', texto.value.trim());
+    if (fileInput.files.length > 0) fd.append('archivo', fileInput.files[0]);
+
+    // UI: mostrar carga
+    loading.classList.remove('hidden');
+    submitBtn.disabled = true;
+    resultado.classList.add('hidden');
+
+    try {
+      // Simular progreso
+      uploadProgress.classList.remove('hidden');
+      let progress = 0;
+      const progressInterval = setInterval(() => {
+        progress += Math.random() * 30;
+        if (progress > 90) progress = 90;
+        progressFill.style.width = progress + '%';
+        progressText.textContent = Math.floor(progress) + '%';
+      }, 200);
+
+      const res = await fetch('/api/analizar', {
+        method: 'POST',
+        body: fd
+      });
+
+      clearInterval(progressInterval);
+      progressFill.style.width = '100%';
+      progressText.textContent = '100%';
+
+      if (!res.ok) {
+        const err = await res.json().catch(()=>({detail:res.statusText}));
+        throw new Error(err.detail || 'Error en la petición');
+      }
+
+      const data = await res.json();
+      
+      // Éxito
+      setTimeout(() => {
+        uploadProgress.classList.add('hidden');
+        progressFill.style.width = '0%';
+        progressText.textContent = '0%';
+        renderResultado(data);
+      }, 300);
+
+    } catch (err) {
+      uploadProgress.classList.add('hidden');
+      progressFill.style.width = '0%';
+      progressText.textContent = '0%';
+      alert('❌ Error: ' + (err.message || err));
+    } finally {
+      loading.classList.add('hidden');
+      submitBtn.disabled = false;
+    }
+  });
+
+  function renderResultado(data) {
+    // Nivel de riesgo
+    const nivel = (data.nivel_riesgo || '').toLowerCase();
+    nivelEl.textContent = `Nivel de riesgo: ${data.nivel_riesgo || 'N/A'}`;
+    nivelEl.className = 'nivel';
+    if (nivel === 'bajo') nivelEl.classList.add('bajo');
+    else if (nivel === 'medio') nivelEl.classList.add('medio');
+    else if (nivel === 'alto') nivelEl.classList.add('alto');
+
+    // Indicadores
+    indicadoresEl.innerHTML = '';
+    if (Array.isArray(data.indicadores_detectados)) {
+      data.indicadores_detectados.forEach(it => {
+        const li = document.createElement('li'); li.textContent = it; indicadoresEl.appendChild(li);
+      });
+    }
+
+    // Analisis y recomendaciones
+    analisisEl.textContent = data.analisis_linguistico || '';
+    recomendacionesEl.textContent = data.recomendaciones_psicologicas || '';
+
+    resultado.classList.remove('hidden');
+    // Scroll to results
+    resultado.scrollIntoView({behavior:'smooth'});
+  }
+});