LaAutopsIA: Observatorio de Fallos Reales de Inteligencia Artificial

Pipeline de incidentes (home)

El administrador lanza la busqueda desde el panel. El sistema ejecuta el siguiente flujo secuencial contra el AI Incident Database:

Pipeline de alertas de seguridad (/alertas-ia)

Pipeline independiente contra GitHub Advisory Database y NVD NIST. Mantiene los 4 niveles reales de severidad CVSS (CRITICAL / HIGH / MEDIUM / LOW) sin colapsar en ningun paso de la cadena.

Cada pipeline genera un log detallado con duracion por paso, errores y contenidos guardados, visible en el historial del panel de administracion. Toggle de automatizacion por cron externo disponible en Sistema y Sistema Alertas.

El globo 3D (home) y los graficos interactivos (/alertas-ia)

LaAutopsIA tiene dos piezas visuales centrales: un globo terrestre 3D en la home con los incidentes geolocalizados del AIID, y un panel de 7 visualizaciones interactivas en la seccion de alertas con los datos CVSS de GitHub Advisory y NVD NIST.

Globo 3D — home

El globo utiliza Mapbox GL JS v3.21 con proyeccion globe e imageria satelital real. La implementacion sigue la documentacion oficial de Mapbox en cada aspecto:

• Proyeccion: projection: 'globe' con estilo satellite-streets-v12
• Atmosfera: setFog() con space-color, star-intensity, horizon-blend
• Rotacion: Patron oficial globe-spin con deteccion de mousedown, wheel, touchstart, dragend, pitchend, rotateend. La velocidad se reduce gradualmente entre zoom 3 y 5, y se detiene a zoom > 5
• Zoom: scrollZoom.setWheelZoomRate(1/200) para respuesta rapida
• Marcadores incidentes: GeoJSON source con cluster: true + capas circle/symbol para clusters y puntos individuales, 3 niveles de gravedad AIID
• Marcadores alertas: Segundo source independiente con capas azules. Clustering propio con clusterMaxZoom: 14
• Puntos pulsantes: Canvas custom animado con ciclo de 1.5s por punto, 4 colores distintos (rojo critico, naranja medio, verde bajo, azul alertas)
• Popups: mapboxgl.Popup con maxWidth: '180px' y estilos glassmorphism. Cada popup muestra foto, severidad, pais/empresa, titulo, fecha y enlace a detalle
• Marcador destacado: 1 unico mapboxgl.Marker DOM para la noticia mas reciente, con occludedOpacity: 0

Las 7 visualizaciones de alertas (/alertas-ia)

Sobre el listado de tarjetas de alertas hay un panel con 7 vistas interactivas en Apache ECharts 6.0. El usuario cambia de una a otra con pestanas laterales. Cada una trabaja con los mismos datos reales de Firestore sin agregaciones falsas ni colapsos de severidad.

Cada vista tiene tooltip enriquecido con los datos reales (contadores, porcentajes, totales). Si alguna vista excluye alertas por falta de datos (Tipo sin CVSS/CWE, Vector sin vector parseado, Fecha sin fecha valida), aparece debajo un aviso discreto en naranja con el contador de alertas excluidas. Cero informacion oculta sin avisar al usuario.

Consistencia de severidad: los 4 niveles CVSS (CRITICAL / HIGH / MEDIUM / LOW) se preservan intactos desde los adapters hasta Firestore, admin, tarjetas, graficos, tooltips, emails newsletter, descargas PDF/MD/JSON, metadata OpenGraph y JSON-LD TechArticle. Cero fusiones ni colapsos a 3 niveles.

13 verificadores automaticos de calidad

Cada cambio en el codigo pasa por 13 verificadores antes de desplegarse. El comando npm run verify:all los ejecuta en secuencia y bloquea el despliegue si alguno falla. Ejemplo de verificacion de seguridad en produccion (verify-production-safety.ts):

// Detecta URLs hardcodeadas fuera de la constante BASE_URL
if (line.includes('https://laautopsia.com')
    && !line.includes('BASE_URL')
    && !line.includes('metadataBase')
    && !line.includes('canonical')) {
  violations.push({
    file: relPath,
    line: lineNum,
    rule: 'HARDCODED_BASE_URL',
    content: trimmed.substring(0, 100),
  });
}

Los 13 verificadores cubren: tipos TypeScript, funciones <70 lineas, colores centralizados en tema, sin strings user-facing hardcodeados, sin catch vacios, sin ?? '' en adapters, fetch con check de ok, accesibilidad WCAG, PWA, responsive real en movil, URLs y secrets seguros, contrato con la API AIID, JSON-LD valido en todas las paginas y flujo de datos de alertas (los 4 niveles CVSS end-to-end).

Este enfoque garantiza que no se introduzcan URLs hardcodeadas, colores fuera del theme, funciones demasiado complejas, errores silenciados, accesos inseguros a arrays, imagenes con tokens que caducan, ni problemas de accesibilidad o responsive.

Cifras reales del proyecto

Optimizacion de imagenes en produccion

Todas las imagenes del site pasan por la extension Firebase invertase/image-processing-api@0.2.1 desplegada en us-central1. Loader custom en next/image → Cloud Function trigger → CDN con Cache-Control: public, max-age=31536000, immutable. Formatos preferidos: avif > webp. URLs siempre en formato publico sin tokens (https://storage.googleapis.com/{bucket}/{path}), compatibles con el optimizador de forma permanente.