web/README.md

🌐 Interfaz Web - Transformer Sentiment Analysis

Una interfaz web interactiva y moderna para demostrar las capacidades del proyecto de análisis de sentimientos con transformers.

✨ Características

🎯 Demo Interactivo

• Análisis individual: Analiza texto en tiempo real
• Análisis por lotes: Procesa múltiples textos simultáneamente
• Selección de modelo: Cambia entre modelo pre-entrenado y fine-tuneado
• Visualización de probabilidades: Gráficos de distribución de confianza

📊 Visualización de Métricas

• Curvas de entrenamiento: Loss y accuracy por época
• Métricas de rendimiento: Accuracy, F1-score, Loss
• Arquitectura del modelo: Información detallada del transformer

🏗️ Arquitectura del Sistema

• Diagrama interactivo: Flujo de datos desde input hasta predicción
• Stack tecnológico: Tecnologías utilizadas en el proyecto
• Información del proyecto: Características y capacidades

🚀 Uso Rápido

Opción 1: Servidor Web Integrado

# Desde el directorio raíz del proyecto
python serve_web.py

# Con opciones personalizadas
python serve_web.py --port 8080 --no-browser

Opción 2: Servidor Web Manual

# Navegar al directorio web
cd web

# Servir con Python
python -m http.server 8080

# O con Node.js (si está instalado)
npx serve -p 8080

Opción 3: Usar con API

# Terminal 1: Iniciar la API
python -m src.api --host 127.0.0.1 --port 8000

# Terminal 2: Iniciar la interfaz web
python serve_web.py --port 8080

🔧 Configuración

URLs y Endpoints

• Interfaz Web: http://localhost:8080
• API Backend: http://localhost:8000
• API Docs: http://localhost:8000/docs
• Health Check: http://localhost:8000/health

Configuración de API

La interfaz se conecta automáticamente a la API en http://127.0.0.1:8000. Para cambiar:

// En web/app.js, línea 2
const API_BASE_URL = 'http://tu-servidor:puerto';

📱 Funcionalidades

1. Análisis de Texto Individual

• Input: Textarea para ingreso de texto
• Output: Sentimiento detectado, confianza, gráfico de probabilidades
• Ejemplos: Botón para generar textos de prueba

2. Análisis por Lotes

• Input: Múltiples textos (uno por línea)
• Output: Lista de resultados + gráfico de distribución
• Límite: 10 textos por lote (configurable)

3. Configuración del Modelo

• Selector de modelo: Pre-entrenado vs Fine-tuneado
• Toggle de probabilidades: Mostrar/ocultar distribución
• Estado de API: Conectado/Desconectado/Cargando

4. Métricas y Visualización

• Gráfico de entrenamiento: Loss y accuracy por época
• Círculos de rendimiento: Métricas clave animadas
• Información de arquitectura: Detalles del modelo

🎨 Diseño y UX

Características Visuales

• Diseño responsive: Adaptable a móviles y tablets
• Tema moderno: Gradientes, sombras y animaciones
• Tipografía: Inter font para legibilidad
• Iconos: Font Awesome para iconografía consistente

Interactividad

• Navegación suave: Scroll automático entre secciones
• Estados de carga: Spinners y overlays
• Feedback visual: Colores para sentimientos positivos/negativos
• Animaciones: Transiciones suaves en hover y click

Accesibilidad

• Contraste adecuado: Cumple estándares WCAG
• Navegación por teclado: Enter para enviar, Tab para navegar
• Mensajes descriptivos: Estados de error claros
• Responsive design: Funciona en todos los dispositivos

🔗 Integración con Backend

Endpoints Utilizados

// Health check
GET /health

// Modelo info
GET /model/info

// Predicción individual
POST /predict
POST /predict/probabilities

// Predicción por lotes
POST /predict/batch

Manejo de Errores

• API desconectada: Modo demo con datos simulados
• Errores de red: Mensajes informativos al usuario
• Timeout: Reintentos automáticos
• Validación: Verificación de input en frontend

📊 Datos de Demo

Cuando la API no está disponible, la interfaz usa datos simulados:

// Análisis basado en palabras clave
const positiveWords = ['good', 'great', 'excellent', 'amazing', 'love'];
const negativeWords = ['bad', 'terrible', 'awful', 'hate', 'horrible'];

// Confianza simulada basada en coincidencias
confidence = 0.7 + (matches * 0.1);

🛠️ Tecnologías

Frontend

• HTML5: Estructura semántica
• CSS3: Flexbox, Grid, animaciones
• JavaScript ES6+: Async/await, fetch API
• Chart.js: Gráficos interactivos
• Font Awesome: Iconografía

Backend Integration

• Fetch API: Comunicación con FastAPI
• JSON: Intercambio de datos
• CORS: Configuración cross-origin
• Error Handling: Manejo robusto de errores

🔧 Personalización

Colores y Tema

/* Variables principales en styles.css */
--primary-color: #667eea;
--secondary-color: #764ba2;
--success-color: #28a745;
--danger-color: #dc3545;

Configuración de API

// Configuración en app.js
const API_BASE_URL = 'http://127.0.0.1:8000';
const POLLING_INTERVAL = 5000; // ms

Textos de Ejemplo

// Personalizar ejemplos en app.js
const exampleTexts = [
    "Tu texto de ejemplo aquí",
    "Otro ejemplo personalizado"
];

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Adaptaciones automáticas:

• Navegación collapse en móvil
• Grid responsive para métricas
• Arquitectura vertical en pantallas pequeñas

🚀 Deployment

Servidor Web Local

# Desarrollo
python serve_web.py --port 8080

# Producción simple
python -m http.server 8080 --directory web

Servidor Web Avanzado

# Con nginx (ejemplo de configuración)
server {
    listen 80;
    root /path/to/transformer/web;
    index index.html;
    
    location /api/ {
        proxy_pass http://localhost:8000/;
    }
}

Docker

FROM nginx:alpine
COPY web /usr/share/nginx/html
EXPOSE 80

🔍 Testing

Tests Manuales

1. ✅ Conexión a API: Verificar estado en header
2. ✅ Análisis individual: Probar con textos positivos/negativos
3. ✅ Análisis por lotes: Múltiples textos simultáneos
4. ✅ Responsive: Redimensionar ventana
5. ✅ Navegación: Links y scroll suave

Tests Automatizados (Futuro)

// Ejemplo con Jest/Cypress
describe('Sentiment Analysis Interface', () => {
    it('should analyze text and show results', () => {
        cy.visit('http://localhost:8080');
        cy.get('#text-input').type('Great movie!');
        cy.get('#analyze-btn').click();
        cy.get('#single-result').should('be.visible');
    });
});

📈 Métricas de Uso

La interfaz registra (localmente):

• Textos analizados
• Tiempo de respuesta
• Errores de API
• Patrones de uso

🎯 Próximas Mejoras

• Authentication: Login y perfiles de usuario
• History: Historial de análisis
• Export: Descargar resultados en CSV/JSON
• Themes: Modo oscuro/claro
• Real-time: WebSocket para análisis en vivo
• Mobile App: PWA o React Native
• Analytics: Google Analytics integration
• A/B Testing: Comparar diferentes modelos

🆘 Troubleshooting

Problemas Comunes

Q: La API no se conecta

# Verificar que la API esté corriendo
curl http://localhost:8000/health

# Revisar CORS en app.js
# Verificar puertos correctos

Q: Los gráficos no se muestran

# Verificar Chart.js en consola del navegador
# Comprobar dimensiones de canvas
# Revisar datos en console.log

Q: Estilos no se cargan

# Verificar ruta de styles.css
# Comprobar servidor web corriendo
# Revisar permisos de archivos

Q: JavaScript no funciona

# Abrir DevTools (F12)
# Revisar errores en Console
# Verificar que app.js se carga correctamente

---

🎉 ¡Disfruta de la Demo!

La interfaz está diseñada para mostrar de forma atractiva y profesional las capacidades del proyecto de análisis de sentimientos con transformers.

¿Preguntas o mejoras? ¡Experimenta con el código y personaliza según tus necesidades!