Resumen Técnico: Animation2Code

Declaración del Problema

Si bien los Modelos de Lenguaje-Visión (VLMs) han demostrado una competencia significativa en tareas estáticas de visión-a-código (por ejemplo, generar código para páginas web, gráficos o SVGs a partir de imágenes), su capacidad para recuperar la dinámica temporal de los videos permanece inexplorada. La de-renderización estática requiere mapear una sola imagen a un programa, mientras que la de-renderización dinámica requiere razonar sobre secuencias de fotogramas, rastrear trayectorias de objetos y comprender el tiempo del movimiento. Los benchmarks actuales de comprensión de video se centran principalmente en preguntas y respuestas o clasificación, lo cual no requiere que el modelo produzca código ejecutable que reproduzca de forma determinista movimientos complejos. Existe una falta de un benchmark que evalúe si los modelos pueden inferir cambios visuales continuos impulsados por el tiempo y traducirlos en representaciones programáticas (HTML/CSS/JavaScript).

Metodología

El Benchmark Animation2Code

Los autores presentan Animation2Code, un benchmark diseñado para evaluar el razonamiento visual temporal a través de la tarea de de-renderización de animaciones.

• Dataset: El conjunto de datos consiste en 1,069 videos de animaciones web de alta calidad extraídos de CodePen. Cada video está emparejado con su código ejecutable de referencia (HTML con CSS en línea y/o JavaScript).
• Diversidad de Datos: Las animaciones cubren diversos aspectos visuales y patrones de movimiento, incluyendo rotación, traslación, escalado y cambios de opacidad. La complejidad del código varía desde 7 hasta más de 10,000 líneas, siendo el 86% puro CSS y el 14% incorporando JavaScript.
• Definición de la Tarea: Dado un video de referencia ($V_{ref}$) renderizado a partir del código de referencia, el modelo debe generar un archivo HTML autocontenido y ejecutable ($C$). Cuando se ejecuta, $C$ debe producir un video renderizado ($V_{gen}$) que coincida con $V_{ref}$ tanto en apariencia espacial como en dinámica temporal.
• Pipeline de Renderizado: Para garantizar una evaluación justa, el benchmark utiliza un pipeline de Chromium sin cabeza (headless) para renderizar determinísticamente el código en videos MP4 (1024×768, 30 FPS), sincronizando las animaciones de CSS y JavaScript.

Métricas de Evaluación

Para desvincular la fidelidad visual del alineamiento temporal, los autores proponen dos métricas automatizadas alineadas con la percepción humana:

1. Similitud de Apariencia: Mide la semejanza visual entre las animaciones generadas y las de referencia.
   • Proceso: Las regiones animadas se recortan para eliminar confusiones posicionales. Los fotogramas se alinean mediante Dynamic Time Warping (DTW).
   • Puntuación: Utiliza embeddings de DreamSim (entrenados en la percepción humana) para calcular la similitud media a lo largo de la ruta de alineación óptima.
2. Similitud Temporal: Mide la similitud de las trayectorias de movimiento de forma independiente a la apariencia visual.
   • Proceso: Utiliza CoTracker3 para extraer tracklets de movimiento. Para manejar la falta de correspondencia píxel a píxel entre las animaciones generadas y las de referencia, el sistema inicializa puntos de seguimiento programáticamente sobre una cuadrícula.
   • Puntuación: Calcula la correlación entre los desplazamientos de los tracklets basándose en el acuerdo de dirección (similitud de coseno) y el acuerdo de velocidad (razón de magnitud). La puntuación final agrega las correlaciones por pares utilizando una distancia de Chamfer.

Configuración Experimental

Los autores evaluaron una suite de VLMs comerciales y de código abierto de última generación (Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6 y LLaMA 4 Scout) bajo tres configuraciones:

• Prompting Zero-Shot: Generación directa a partir de la entrada de video (video nativo o fotogramas muestreados a 2 FPS).
• Ajuste Fino Supervisado (SFT): Ajuste fino de Qwen3-VL-8B-Instruct en el dataset utilizando métodos LoRA y de parámetros completos.
• Refinamiento Iterativo: Un framework multi-agente (adaptado de METAL) donde el modelo compara iterativamente su salida renderizada contra el objetivo y revisa el código.

Resultados Clave

• Éxito de Ejecución: La mayoría de los modelos lograron altas tasas de ejecución de código (hasta el 100%), lo que indica que pueden generar HTML/CSS/JS sintácticamente válidos.
• Brecha de Apariencia vs. Temporal:
  • Los modelos lograron una fuerte similitud de apariencia (hasta 0.84 para GPT-5.4), sugiriendo que pueden reproducir layouts visuales estáticos de manera efectiva.
  • La similitud temporal se mantuvo uniformemente baja en todos los modelos y configuraciones (puntuación máxima de 0.31 para Gemini 3 Flash Preview).
• Impacto del Entrenamiento y el Refinamiento:
  • Ajuste Fino (Finetuning): Aunque el SFT mejoró el éxito de ejecución, degradó significativamente tanto la similitud de apariencia como la temporal, sugiriendo que los modelos dependieron de priors de código aprendidos en lugar de fundamentarse en el video de entrada.
  • Refinamiento Iterativo: Este enfoque produjo las mejoras más consistentes, particularmente en la primera iteración, pero las puntuaciones temporales siguieron siendo bajas en comparación con las de apariencia.
• Modalidad de Entrada: Aumentar la tasa de fotogramas de la entrada (de 2 FPS a 24 FPS) proporcionó solo ganancias marginales, indicando que simplemente proporcionar señales temporales más densas es insuficiente para que los modelos actuales aprendan dinámicas de animación continuas.
• Fallos Cualitativos: Los modelos a menudo fallaron al reproducir trayectorias correctas (por ejemplo, el movimiento circular se convirtió en lineal o estático) y tuvieron dificultades con las relaciones espaciales, incluso cuando el estilo visual general era correcto.

Significado y Reivindicaciones

El artículo afirma ser el primer benchmark que evalúa la de-renderización de animaciones web en código ejecutable, apuntando específicamente a la razonamiento visual temporal.

• Revelación de una Limitación Fundamental: El hallazgo principal es que los VLMs actuales poseen una brecha significativa en su capacidad para interpretar y replicar el movimiento mediante la generación de código. Pueden reconstruir "qué" es un objeto, pero fallan en reconstruir "cómo" se mueve a través del tiempo.
• Suite de Evaluación: Las métricas propuestas (Similitud de Apariencia y Temporal) están validadas contra juicios humanos, mostrando una fuerte correlación y proporcionando un proxy automatizado confiable para evaluar la calidad de la animación.
• Dirección de Investigación: El benchmark aísla el desafío de recuperar la dinámica temporal, que a menudo se ve confundida con desajustes de apariencia en los benchmarks existentes. Sirve como banco de pruebas para la investigación futura en síntesis de programas multimodales y razonamiento temporal.
• Abastecimiento Ético: El dataset está construido a partir de proyectos de CodePen con licencia MIT, con el fin de mitigar los riesgos asociados con la clonación no autorizada de visuales web.

Los autores concluyen que, si bien los modelos pueden producir de manera confiable código ejecutable y visuales estáticos fuertes, fallan consistentemente en capturar la dinámica temporal correcta, resaltando un área crítica para la mejora futura en los VLMs.