La forma más elegante de depurar imágenes Base64 en respuestas JSON

La pesadilla del Base64 en JSON

Las APIs de IA multimodal (generación de imágenes, OCR, síntesis de voz) suelen devolver medios como cadenas codificadas en Base64 dentro de respuestas JSON. Los visores JSON tradicionales las tratan como texto plano, inundando tu pantalla con muros interminables de caracteres codificados, haciendo imposible ver el contenido real.

La decodificación manual es una completa pérdida de tiempo: localizar el campo, copiar la cadena con cuidado, abrir un sitio decodificador, pegar, decodificar y descargar. Ya es frustrante para un solo campo, pero cuando la respuesta contiene múltiples valores Base64, este trabajo manual se convierte en una pesadilla que consume el tiempo del desarrollador.

Estructura típica de una respuesta de API de IA

Aquí tienes un ejemplo simplificado de una respuesta de generación de imágenes de GPT-IMAGE-2 con múltiples variaciones:

{
  "created": 1709055842,
  "data": [
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgAAA...",
      "revised_prompt": "A serene mountain landscape at sunset"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgBBB...",
      "revised_prompt": "A serene mountain landscape at sunrise"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgCCC...",
      "revised_prompt": "A serene mountain landscape at noon"
    }
  ]
}

Cada campo "b64_json" contiene una imagen PNG completa codificada en Base64. En un visor JSON normal, verías tres bloques enormes de texto. No puedes visualizarlos, compararlos ni siquiera confirmar que son imágenes válidas sin decodificar cada uno individualmente.

Una forma mejor: detección automática y vista previa integrada

ViewJSON detecta automáticamente los medios codificados en Base64 dentro de tu JSON y los renderiza como vistas previas integradas: imágenes como miniaturas, audio como reproductores, videos como reproductores embebidos y PDF como vistas previas de documento.

¿Cómo funciona la detección?

ViewJSON no adivina basándose en nombres de campo o longitud de cadenas. En su lugar, utiliza detección por números mágicos, la misma técnica que usan los sistemas operativos para identificar tipos de archivo.

El proceso es directo:

1. Para cada valor de cadena en tu JSON, ViewJSON decodifica solo los primeros 64 bytes del contenido Base64
2. Compara esos bytes con una biblioteca de firmas de formato de archivo conocidas (números mágicos)
3. Si encuentra una coincidencia (por ejemplo, 89 50 4E 47 para PNG, o FF D8 FF para JPEG), renderiza la vista previa correspondiente

Este método es muy rápido. Incluso una cadena Base64 de 100 MB se identifica en menos de un milisegundo, porque solo se decodifican los primeros 64 bytes para la detección. El contenido completo solo se decodifica cuando abres la vista previa.

Formatos compatibles

ViewJSON actualmente detecta y previsualiza más de 15 formatos de medios:

En la práctica: cómo depurar tu respuesta de API al instante

1. Abre ViewJSON — Ve a viewjson.net
2. Pega tu JSON — Copia la respuesta completa de la API desde tu terminal, Postman o código, y pégala en el editor. El JSON mal formado (comas finales, comentarios, claves sin comillas) se repara automáticamente.
3. Revisa las vistas previas — Los campos Base64 se detectan automáticamente. Haz clic en el ícono del ojo (👁) junto a cualquier campo de medios detectado para mostrar u ocultar su vista previa integrada.
4. Compara resultados — Con todas las vistas previas visibles, puedes desplazarte por el JSON para comparar múltiples imágenes lado a lado, sin herramientas adicionales.
5. Comparte con tu equipo — Usa el botón de compartir para generar una URL comprimida con la estructura JSON. Ten en cuenta que los datos Base64 muy grandes pueden truncarse en el enlace compartido debido a los límites de longitud de URL.

¿Cuándo es más útil?

• Validar salidas de GPT-IMAGE-2 / Stable Diffusion — Las APIs de generación de imágenes suelen devolver múltiples variaciones en Base64. ViewJSON te permite ver todas las imágenes lado a lado para elegir la mejor, sin decodificar cada una por separado.
• Inspeccionar regiones de recorte OCR — Los pipelines de OCR por lotes devuelven docenas de regiones de imagen recortadas en Base64. Verlas integradas revela inmediatamente áreas desalineadas o mal recortadas.
• Comparar variaciones de voz TTS — Al probar diferentes voces o estilos de habla en APIs de síntesis de voz, puedes reproducir cada clip de audio directamente en el JSON para compararlos.
• Revisar capturas HTTP — Pega JSON del historial de solicitudes de Postman o Fiddler para ver los medios reales que se enviaron o recibieron, en lugar de desplazarte por cadenas codificadas.

Privacidad

Todo el procesamiento ocurre en tu navegador. Tu JSON y tus datos Base64 nunca se envían a ningún servidor, lo que hace que ViewJSON sea seguro para respuestas de API propietarias y contenido sensible.