Resumo Técnico: Animation2Code

Declaração do Problema

Embora os Modelos de Visão-Linguagem (VLMs) tenham demonstrado proficiência significativa em tarefas estáticas de visão-para-código (ex: gerar código para páginas web, gráficos ou SVGs a partir de imagens), sua capacidade de recuperar a dinâmica temporal de vídeos permanece inexplorada. A desrenderização estática requer o mapeamento de uma única imagem para um programa, enquanto a desrenderização dinâmica exige o raciocínio sobre sequências de frames, o rastreamento de trajetórias de objetos e a compreensão do tempo de movimento. Os benchmarks atuais de compreensão de vídeo focam principalmente em perguntas e respostas ou classificação, o que não exige que o modelo produza código executável que reproduza deterministicamente movimentos complexos. Há uma carência de um benchmark que avalie se os modelos conseguem inferir mudanças visuais contínuas e orientadas pelo tempo e traduzi-las em representações programáticas (HTML/CSS/JavaScript).

Metodologia

O Benchmark Animation2Code

Os autores introduzem o Animation2Code, um benchmark projetado para avaliar o raciocínio visual temporal através da tarefa de desrenderização de animação.

• Dataset: O conjunto de dados consiste em 1.069 vídeos de animações web de alta qualidade extraídos do CodePen. Cada vídeo é pareado com seu código executável de referência (HTML com CSS inline e/ou JavaScript).
• Diversidade de Dados: As animações cobrem diversos aspectos visuais e padrões de movimento, incluindo rotação, translação, escala e mudanças de opacidade. A complexidade do código varia de 7 a mais de 10.000 linhas, sendo 86% puro CSS e 14% incorporando JavaScript.
• Definição da Tarefa: Dado um vídeo de referência ($V_{ref}$) renderizado a partir do código real, o modelo deve gerar um arquivo HTML autossuficiente e executável ($C$). Quando executado, $C$ deve produzir um vídeo renderizado ($V_{gen}$) que corresponda a $V_{ref}$ tanto em aparência espacial quanto em dinâmica temporal.
• Pipeline de Renderização: Para garantir uma avaliação justa, o benchmark utiliza um pipeline Chromium headless para renderizar deterministicamente códigos em vídeos MP4 (1024×768, 30 FPS), sincronizando animações CSS e JavaScript.

Métricas de Avaliação

Para desvincular a fidelidade visual do alinhamento temporal, os autores propõem duas métricas automatizadas e alinhadas ao julgamento humano:

1. Similaridade de Aparência: Mede a semelhança visual entre as animações geradas e a de referência.
   • Processo: Regiões animadas são recortadas para remover confusões posicionais. Os frames são alinhados usando Dynamic Time Warping (DTW).
   • Pontuação: Utiliza embeddings DreamSim (treinados em percepção humana) para calcular a similaridade média ao longo do caminho de alinhamento ideal.
2. Similaridade Temporal: Mede a similaridade das trajetórias de movimento independentemente da aparência visual.
   • Processo: Utiliza o CoTracker3 para extrair tracklets de movimento. Para lidar com a falta de correspondência pixel a pixel entre as animações geradas e as reais, o sistema inicializa pontos de rastreamento programaticamente em uma grade.
   • Pontuação: Calcula a correlação entre os deslocamentos dos tracklets baseando-se em acordo de direção (similaridade de cosseno) e acordo de velocidade (razão de magnitude). A pontuação final agrega correlações de pares usando uma distância de Chamfer.

Configuração Experimental

Os autores avaliaram uma suíte de VLMs comerciais e de código aberto de última geração (Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6 e LLaMA 4 Scout) sob três configurações:

• Prompting Zero-Shot: Geração direta a partir da entrada de vídeo (vídeo nativo ou frames amostrados a 2 FPS).
• Fine-tuning Supervisionado (SFT): Fine-tuning do Qwen3-VL-8B-Instruct no dataset usando métodos LoRA e de parâmetros totais.
• Refinamento Iterativo: Um framework de múltiplos agentes (adaptado do METAL) onde o modelo compara iterativamente sua saída renderizada contra o alvo e revisa o código.

Principais Resultados

• Sucesso de Execução: A maioria dos modelos alcançou altas taxas de execução de código (até 100%), indicando que conseguem gerar HTML/CSS/JS sintaticamente válidos.
• Lacuna entre Aparência e Temporalidade:
  • Os modelos alcançaram uma forte similaridade de aparência (até 0,84 para o GPT-5.4), sugerindo que podem reproduzir layouts visuais estáticos efetivamente.
  • A similaridade temporal permaneceu uniformemente baixa em todos os modelos e configurações (pontuação máxima de 0,31 para o Gemini 3 Flash Preview).
• Impacto do Treinamento e Refinamento:
  • Fine-tuning: Embora o SFT tenha melhorado o sucesso de execução, ele degradou significamente tanto a similaridade de aparência quanto a temporal, sugerindo que os modelos confiaram em priors de código aprendidos em vez de se fundamentarem no vídeo de entrada.
  • Refinamento Iterativo: Esta abordagem proporcionou as melhorias mais consistentes, particularmente na primeira iteração, mas as pontuações temporais permaneceram baixas em comparação com as de aparência.
• Modalidade de Entrada: Aumentar a taxa de quadros da entrada (de 2 FPS para 24 FPS) proporcionou ganhos marginais, indicando que fornecer sinais temporais mais densos não é suficiente para que os modelos atuais aprendam dinâmicas de animação contínuas.
• Falhas Qualitativas: Os modelos frequentemente falharam em reproduzir trajetórias corretas (ex: movimento circular tornando-se linear ou estático) e tiveram dificuldades com relações espaciais, mesmo quando o estilo visual geral estava correto.

Significância e Alegações

O artigo afirma ser o primeiro benchmark a avaliar a desrenderização de animações web em código executável, visando especificamente o raciocínio visual temporal.

• Revelação de uma Limitação Fundamental: O principal achado é que os atuais VLMs possuem uma lacuna significativa em sua capacidade de interpretar e replicar o movimento via geração de código. Eles conseguem reconstruir "o que" um objeto parece, mas falham em reconstruir "como" ele se move ao longo do tempo.
• Suíte de Avaliação: As métricas propostas (Similaridade de Aparência e Temporal) são validadas contra julgamentos humanos, mostrando forte correlação e fornecendo um proxy automatizado confiável para avaliar a qualidade da animação.
• Direção de Pesquisa: O benchmark isola o desafio de recuperar dinâmicas temporais, que é frequentemente confundido com discrepâncias de aparência em benchmarks existentes. Serve como um campo de testes para pesquisas futuras em síntese de programas multimodais e raciocínio temporal.
• Sourcing Ético: O dataset é construído a partir de projetos do CodePen com licença MIT, visando mitigar riscos associados à clonagem não autorizada de visuais web.

Os autores concluem que, embora os modelos possam produzir de forma confiável código executável e visuais estáticos fortes, eles falham consistentemente em capturar a dinâmica temporal correta, destacando uma área crítica para melhoria futura nos VLMs.