LaAutopsIA: Observatorio de Fallos Reales de Inteligencia Artificial
Observatorio en español de fallos y vulnerabilidades reales de IA. Globo 3D interactivo con Mapbox GL JS v3 + 7 visualizaciones ECharts para alertas CVSS. Traducción con Claude API, pipelines AIID + G
Categoría:Inteligencia Artificial / Periodismo de Datos
Si este proyecto aporta valor o podría inspirar a otros, considera difundirlo en tu red profesional.
¿Que es LaAutopsIA?
LaAutopsIA es un observatorio web en espanol que documenta dos tipos de problemas reales de la inteligencia artificial: incidentes publicos (fallos, sesgos, abusos, alucinaciones) y vulnerabilidades de seguridad (CVEs, CVSS, vectores de ataque). Cada uno se presenta en su propia seccion con su propia visualizacion interactiva.
Los datos provienen de tres fuentes publicas oficiales:
Fuente
Licencia
Uso en el site
AI Incident Database (AIID)
CC BY-SA 4.0
Incidentes de IA — globo 3D de la home
GitHub Advisory Database
MIT License
Alertas de seguridad CVSS — seccion Alertas IA
National Vulnerability Database (NVD NIST)
Dominio publico
Enriquecimiento de metadata CVSS
El administrador lanza cada pipeline desde el panel de control. El sistema consulta la fuente, traduce los textos al espanol utilizando la API de Claude (Anthropic), y los deja pendientes de revision. Cada contenido se revisa, se edita si es necesario y se publica manualmente.
Tres secciones del site
Ruta
Que muestra
Visualizacion
/ (home)
Globo terrestre 3D con incidentes geolocalizados del AIID
Mapbox GL v3 en proyeccion globe, clustering, popups, rotacion automatica
/alertas-ia
Listado de vulnerabilidades de seguridad CVSS con 7 vistas interactivas
Articulos editoriales propios y ajenos seleccionados a mano
Grid de cards con imagen + titulo + excerpt + share
Stack tecnico real
Pieza
Version
Next.js
16.2.1 (App Router, SSG, ISR on-demand)
React
19.2.4
TypeScript
5.9
Firebase client SDK
12.x
Firebase Admin SDK
13.x
Mapbox GL JS
3.21 (globo 3D)
Apache ECharts
6.0 + echarts-for-react 3.0 (7 visualizaciones de alertas)
jsPDF
4.2 (descargas PDF)
react-markdown + remark
10.x
nodemailer + Zoho SMTP
Newsletter
Tailwind CSS
4.2
Hosting: Firebase App Hosting (Cloud Run region us-central1, 1 CPU, 512 MiB), Cloud CDN global delante.
Proyecto Firebase: autopsia-45ba4, bucket autopsia-45ba4.firebasestorage.app.
Dominio: https://laautopsia.com
Pipeline de incidentes (home)
El administrador lanza la busqueda desde el panel. El sistema ejecuta el siguiente flujo secuencial contra el AI Incident Database:
Paso
Proceso
Tecnologia
1. Busqueda
Consulta GraphQL a AIID (sort DESC, ultimos 2 meses)
fetch + GraphQL
2. Deduplicacion
Compara aiidId y sourceUrl contra Firestore
Firestore queries
3. Traduccion
Envia titulo + texto a Claude API con prompt periodistico
Anthropic API
4. Clasificacion
Claude extrae: categoria MIT, pais ISO, coordenadas GPS, gravedad 1/2/3
JSON parsing
5. Imagen
Descarga imagen original, sanitiza nombre, sube al bucket propio, hace publica con helper robusto de 3 reintentos
uploadImageAndMakePublic
6. Almacenamiento
Guarda registro completo en Firestore con status: "pending"
Firestore
7. Revision
El administrador revisa, edita y aprueba desde el panel
Panel admin
8. Publicacion
Revalidacion ISR on-demand de /, /noticia/{slug} y /sitemap-news.xml
Next.js ISR
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.
Paso
Proceso
Tecnologia
1. Busqueda
Consulta REST a GitHub Advisory + NVD NIST
fetch + avid-adapter + nvd-adapter
2. Deduplicacion
Compara avidId (GHSA) y cveId contra Firestore
Firestore queries
3. Normalizacion CVSS
Parsea vector CVSS 3.1 completo: AV / AC / PR / UI / S / C / I / A. Preserva los 4 niveles de severity
Parsers nativos
4. Traduccion
Envia a Claude con reglas estrictas: NO traducir siglas (CVE, CVSS, CWE, RCE, XSS, DoS, SSRF, LLM...), NO traducir productos/empresas/frameworks, NO inventar datos ausentes
Anthropic API
5. Enriquecimiento
Claude identifica empresa responsable, pais sede y coordenadas GPS
JSON parsing
6. Imagen
Subida manual desde el admin (no viene de la fuente externa)
uploadImageAndMakePublic
7. Almacenamiento
Guarda con todos los campos CVSS en Firestore con status: "pending"
Firestore
8. Revision
El administrador revisa severity, metadata CVSS/CWE y publica
Panel admin
9. Publicacion
Revalidacion ISR de /, /alertas-ia, /vulnerabilidad/{slug} y /sitemap-news.xml
Next.js ISR
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.
#
Vista
Tipo de grafico
Que muestra
1
Empresa
Heatmap
Top 15 empresas/ecosistemas × 4 niveles CVSS. Tooltip con porcentaje por fila
2
Severidad
Gauge multi
Contador CRITICAL / HIGH / MEDIUM / LOW con valor y porcentaje sobre el total
3
Tipo
Scatter bubble
Eje X = CWE ID (top 20), eje Y = CVSS score (0-10), tamano = severidad
4
Vector
Radar
Distribucion de vectores de ataque CVSS: Network / Adjacent / Local / Physical
5
Parche
Gauge grade
% de alertas con parche disponible, con totales absolutos (N de M)
6
Productos
Sankey
Flujo Empresa → Producto → Severidad. Itera todos los productos afectados
7
Fecha
Theme river
Evolucion temporal por severidad. Agrupacion automatica: dia / semana / mes segun rango
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_URLif(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
Metrica
Valor
Lineas de codigo (src + scripts, .ts/.tsx/.css)
19.234
Archivos TypeScript/TSX
172
Componentes React
77
Endpoints API
21
Paginas generadas en build
62 (estaticas + SSG)
Verificadores automaticos
13/13 pasando
Fuentes de datos publicas
3 (AIID, GitHub Advisory, NVD NIST)
Paises/territorios soportados
249
Categorias de incidentes AIID
7 (taxonomia MIT)
Niveles de gravedad incidentes
3 (Alta/Media/Baja)
Niveles de gravedad alertas CVSS
4 (CRITICAL/HIGH/MEDIUM/LOW)
Visualizaciones ECharts en /alertas-ia
7 vistas interactivas
Formatos de descarga por alerta
3 (PDF, Markdown, JSON)
Formatos de descarga por noticia
2 (PDF, Markdown)
Build time
21.6s compile + 4.4s TypeScript
SEO Lighthouse
100/100
Accesibilidad Lighthouse
94/100
Practicas recomendadas
96/100
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.
