Resumo Técnico: Video2Code

Formulação do Problema

O artigo aborda o desafio de gerar código front-end executável (HTML, CSS, JavaScript) a partir de vídeos de interação de interface de usuário (UI). Embora os Modelos de Linguagem de Visão (VLMs) tenham avançado em tarefas estáticas de UI-para-código (reconstrução de layout a partir de capturas de tela), eles têm dificuldade com o comportamento dinâmico. Os autores identificam um modo de falha crítico nos VLMs atuais capazes de vídeo, denominado desalinhamento de transição de estado.

Os modelos atuais geralmente dependem de amostragem esparsa de quadros ou representações temporais comprimidas para gerenciar orçamentos de contexto. Embora eficaz para vídeos naturais, essa abordagem é frágil para interações de UI, onde a evidência relevante para o código está concentrada em torno de curtas fronteiras de ação (por exemplo, um clique que aciona um menu suspenso). A amostragem esparsa frequentemente perde essas transições breves, quebrando a sequência estado-ação-estado necessária para implementar o comportamento correto da página web. Consequentemente, os modelos podem reconstruir a aparência visual, mas falham em recuperar a lógica executável desencadeada por ações do usuário.

Os autores formulam a tarefa não apenas como reconstrução visual, mas como recuperação de transição de estado executável. O objetivo é preservar a evidência completa da transição: o estado da UI antes de uma ação, a execução da ação em si e o estado da UI resultante.

Metodologia: Video2Code

Para abordar o desalinhamento de transição de estado, os autores propõem o Video2Code, uma abordagem de vídeo-para-código consciente de ação. Em vez de alocar o orçamento visual uniformemente ao longo do vídeo, o Video2Code emprega uma estratégia de Coarse-to-Fine (do grosseiro ao refinado) centrada na Revisita Consciente de Ação.

1. Processo de Revisita Consciente de Ação

O método opera em duas rodadas:

• Leitura de Vídeo Grosseira (Rodada 1): O modelo realiza uma passagem inicial sobre o vídeo de interação de UI completo em uma resolução temporal grosseira. Seu objetivo é inferir o fluxo de interação global e prever segmentos temporais críticos de ação. Esses segmentos são definidos como intervalos que cobrem três elementos: o estado pré-ação, a execução da ação e o estado pós-ação.
• Ferramenta de Clipping Temporal: Com base nos segmentos previstos, o modelo invoca uma ferramenta (extract_multi_segment) para recuperar clipes de alta resolução desses intervalos específicos.
• Revisita de Segmento Focado (Rodada 2): Os clipes de alta resolução recuperados são reintroduzidos no contexto do modelo. O modelo combina o contexto global da passagem grosseira com a evidência de alta fidelidade local dos clipes revisitados para gerar o código executável final.

2. Definição de Segmentos Críticos de Ação

O artigo distingue dois tipos de segmentos críticos para garantir a evidência de transição completa:

• Segmentos de Ação Pura: Contêm uma única operação (clique, entrada de texto, seleção, rolagem), incluindo os estados pré-ação, execução e pós-ação.
• Segmentos de Ação-Rolagem: Agrupam uma ação com uma rolagem subsequente se a rolagem for necessária para revelar o resultado da ação (por exemplo, clicar em um link que carrega conteúdo que só se torna visível após rolar). Isso evita que o modelo perca dependências contextuais.

3. Supervisão e Treinamento Alinhados à Ação

Para treinar o modelo, os autores construíram o WebVidCoding, um conjunto de dados de 12.000 pares vídeo-código alinhados por ação.

• Coleta de Dados: Um agente de exploração de navegador automatizado interage com páginas web, gravando vídeos de interação de UI. Uma marca visual leve (uma barra de 12 pixels) é injetada para fornecer âncoras temporais explícitas para as fronteiras de ação.
• Estrutura de Supervisão: O treinamento segue a mesma estrutura de inferência de duas rodadas:
  • Rodada 1: Supervisiona o modelo para prever janelas temporais para a ferramenta de clipping baseada na linha do tempo de ação.
  • Rodada 2: Supervisiona a geração de código executável usando o contexto global do vídeo e os clipes específicos retornados da Rodada 1.
• Modelo Base: A abordagem é instanciada através do ajuste fino (fine-tuning) do GLM-4.6V-100B neste conjunto de dados usando aprendizado supervisionado.

Principais Contribuições

1. Formulação do Problema: Os autores definem a geração de vídeo-para-código de UI como recuperação de transição de estado executável e identificam o desalinhamento de transição de estado como o principal gargalo na observação de vídeo com orçamento limitado.
2. Inovação Metodológica: Eles propõem o Video2Code, que utiliza uma Ferramenta de Clipping Temporal para revisitar regiões críticas de ação em uma resolução temporal mais alta. Isso permite que o modelo recupere evidências de transição locais sem densificar todo o vídeo.
3. Conjunto de Dados e Supervisão: Eles introduzem o WebVidCoding, um conjunto de dados com supervisão de vídeo-código alinhada por ação, permitindo que o modelo aprenda tanto o planejamento de revisita quanto a geração de código a partir de evidências de transição recuperadas.

Resultados Experimentais

Os autores avaliam o Video2Code no WebVideo2Code-Bench, que compreende cenários de páginas web reais e sintéticos. As métricas de avaliação incluem Similaridade Visual (correspondência de estados renderizados) e Corretude Funcional (reprodução de mudanças de estado após executar ações via verificação baseada em navegador).

• Ganhos de Desempenho: No subconjunto de mundo real (WebVideo2Code-Real), o Video2Code supera significativamente o modelo base GLM-4.6V.
  • Similaridade Visual: Melhorou de 70,94% para 82,06%.
  • Corretude Funcional: Melhorou de 29,85% para 61,99%.
• Comparação com Baselines: Embora modelos de código fechado (ex: Kimi-K2.6, Gemini-3.1-Pro) alcancem resultados fortes, modelos de código aberto usando observação direta de vídeo lutam com a corretude funcional. O Video2Code fortalece substancialmente o modelo de código aberto subjacente, particularmente em interações de múltiplos passos densos.
• Estudos de Ablação: Remover o mecanismo de "Revisita" (desativando a ferramenta de clipping temporal) causa uma queda significativa no desempenho, especialmente na corretude funcional (caindo de 61,99% para 47,84%), confirmando que a revisita focada é crucial para recuperar evidências de transição executáveis.
• Robustez: O modelo mantém um desempenho relativamente estável através de diferentes contagens de interações (1–16 passos) e comprimentos de vídeo, embora a corretude funcional diminua ligeiramente com maior diversidade de tipos de interação.

Significância e Alegações

O artigo afirma que o Video2Code demonstra que a Revisita Consciente de Ação é um mecanismo necessário para a geração de vídeo-para-código de UI fiel ao comportamento. Os autores argumentam que simplesmente aumentar o orçamento visual de forma uniforme é insuficiente; em vez disso, o modelo deve alocar recursos dinamicamente para recuperar as transições estado-ação-estado que definem o comportamento interativo.

O trabalho posiciona-se como um passo em direção à geração de páginas web que não são apenas visualmente precisas, mas funcionalmente executáveis, preenchendo a lacuna entre a reconstrução de UI estática e a modelagem de interação dinâmica. Os autores observam modestamente que seu escopo atual é limitado a interações comuns (cliques, rolagens, entradas) e ainda não cobre cenários complexos como arrastar-e-soltar, upload de arquivos ou comportamentos altamente dependentes de backend assíncronos.