💻 computer science

Animation2Code: Evaluating Temporal Visual Reasoning in Video-to-Code Generation

Questo articolo introduce Animation2Code, un benchmark composto da 1.069 coppie video-animazione e nuovi parametri allineati all'uomo per valutare e rivelare i limiti degli attuali modelli visione-linguaggio nella ricostruzione di animazioni web eseguibili con dinamiche temporali accurate.

Autori originali: Anya Ji, Abhijith Varma Mudunuri, David M. Chan, Alane Suhr

Pubblicato 2026-06-30

📖 4 min di lettura☕ Lettura da pausa caffè

CC BY 4.0

Autori originali: Anya Ji, Abhijith Varma Mudunuri, David M. Chan, Alane Suhr

Articolo originale sotto licenza CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Questa è una spiegazione generata dall'IA dell'articolo qui sotto. Non è stata scritta né approvata dagli autori. Per precisione tecnica, consulta l'articolo originale. Leggi il disclaimer completo

Immagina di avere un proiettore cinematografico magico. Carichi nel proiettore il video di una palla che rimbalza, un logo che ruota o una mano che saluta. Qual è il tuo obiettivo? Chiedere a un computer super intelligente di scrivere l'esatto codice (la "ricetta") che ricreerebbe quel video da zero.

Questo è ciò di cui parla il documento "Animation2Code". È un nuovo test per vedere se i più avanzati modelli di IA di oggi possono guardare un video in movimento e scrivere le istruzioni per far accadere di nuovo quel movimento.

Ecco una semplice analisi delle loro scoperte, utilizzando alcune analogie quotidiane:

1. La Sfida: Statico vs Dinamico

Pensa ai modelli di IA attuali come a dei fotografi. Sono incredibili nel guardare una singola foto di una pagina web o di un grafico e scrivere il codice per disegnarla perfettamente. Se mostri loro l'immagine di un quadrato blu, possono scrivere il codice per disegnare un quadrato blu.

Ma questo documento si chiede: Possono essere dei coreografi?
Possono guardare un video di un quadrato che ruota, si rimpicciolisce e poi diventa rosso, e scrivere il codice che faccia compiere a quel quadrato esattamente quella sequenza di movimenti? Ciò richiede la comprensione del tempo e del movimento, non solo di un singolo scatto.

2. Il Test: "Animation2Code"

I ricercatori hanno costruito un enorme "esame" chiamato Animation2Code.

La Guida allo Studio: Hanno raccolto 1.069 brevi video di animazioni web (come palle che rimbalzano, spinner di caricamento e bandiere che ondeggiano) insieme al codice effettivo che le ha create.
L'Esame: Hanno mostrato questi video ai migliori modelli di IA (come Gemini, GPT-4, Claude, ecc.) e hanno chiesto: "Scrivi il codice per fare questo video".
** La Valutazione:** Non si sono limitati a controllare se il codice funzionasse. Hanno usato due speciali "righelli" per valutare i risultati:
- Il Righello dell'Aspetto (Appearance): Il video generato sembra quello originale? (La palla è blu? È rotonda?)
- Il Righello del Movimento (Temporal): Il video generato si muove come l'originale? (La palla rimbalza alla velocità giusta? Ruota nella direzione corretta?)

3. La Grande Scoperta: "Bravi a Disegnare, Scarsi a Danzare"

I risultati sono stati sorprendenti e un po' divertenti.

L'IA è una Grande Artista: I modelli sono stati fantastici con il "Righello dell'Aspetto". Sono stati in grado di scrivere codice che creava un video quasi identico all'originale. I colori, le forme e gli stili erano impeccabili.
L'IA è una Danzatrice Goffa: Tuttavia, quando si è trattato del "Righello del Movimento", i modelli hanno faticato terribilmente. Anche quando il video appariva perfetto, il movimento era spesso errato.
- Analogia: Immagina un'IA che cerca di ricreare il video di una persona che fa un salto mortale all'indietro. L'IA scrive il codice per disegnare un corpo umano perfetto con i vestiti giusti. Ma nel video, la persona sta semplicemente ferma, oppure cade, o ruota nel verso sbagliato. Il "costume" è perfetto, ma la "danza" è rotta.

4. Perché Questo è Importante

Il documento ha scoperto che anche quando l'IA riceveva più fotogrammi video (più "indizi" sul movimento) o riceveva un addestramento extra per correggere i propri errori, non riusciva comunque a comprendere il tempismo e la fisica del movimento.

Il Divario: C'è un enorme divario tra vedere un movimento e comprendere la logica di quel movimento abbastanza bene da scriverne il codice.
Il Limite: I modelli sembrano indovinare la "vibrazione" del movimento piuttosto che calcolare la reale traiettoria. Possono imitare l'aspetto di un'onda, ma non possono scrivere il codice per far fluire l'acqua.

5. In Breve

I ricercatori hanno creato questo benchmark per dimostrare che, sebbene l'IA stia diventando brava nei compiti statici (come disegnare una pagina web da una foto), è ancora molto scarsa nel ragionamento temporale (capire come le cose si muovono nel tempo) quando le viene chiesto di generare codice.

Non stanno dicendo che l'IA sia inutile; stanno dicendo che è come uno studente che ha imparato a memoria le definizioni del libro di testo su "saltare" e "ruotare", ma non ha mai imparato davvero come eseguire un salto mortale fisico. Il codice che scrivono sembra corretto sulla carta, ma quando lo esegui, l'animazione non si muove come dovrebbe.

In breve: L'IA attuale può disegnare un robot che danza perfettamente, ma non sa scrivere il codice per far danzare davvero il robot.

Riepilogo Tecnico: Animation2Code

Definizione del Problema

Sebbene i modelli vision-language (VLM) abbiano dimostrato una capacità significativa nei compiti di de-rendering visivo-codice statici (ad esempio, la generazione di codice per pagine web, grafici o SVG da immagini), la loro capacità di recuperare la dinamica temporale dai video rimane inesplorata. Il de-rendering statico richiede la mappatura di un'immagine singola verso un programma, mentre il de-rendering dinamico richiede il ragionamento su sequenze di frame, il tracciamento delle traiettorie degli oggetti e la comprensione dei tempi di movimento. I benchmark attuali per la comprensione del video si concentrano principalmente sul question-answering o sulla classificazione, che non richiedono al modello di produrre codice eseguibile che riproduca deterministicamente movimenti complessi. Manca un benchmark che valuti se i modelli possano inferire cambiamenti visivi continui e guidati dal tempo e tradurli in rappresentazioni programmatiche (HTML/CSS/JavaScript).

Metodologia

Il Benchmark Animation2Code

Gli autori introducono Animation2Code, un benchmark progettato per valutare il ragionamento visivo temporale attraverso il compito del de-rendering di animazioni.

Dataset: Il dataset è composto da 1.069 video di animazioni web di alta qualità provenienti da CodePen. Ogni video è accoppiato con il proprio codice eseguibile ground-truth (HTML con CSS inline e/o JavaScript).
Diversità dei Dati: Le animazioni coprono diversi aspetti visivi e pattern di movimento, inclusi rotazione, traslazione, scala e variazioni di opacità. La complessità del codice varia da 7 a oltre 10.000 righe, con l'86% che consiste in puro CSS e il 14% che incorpora JavaScript.
Definizione del Task: Dato un video di riferimento ( $V_{ref}$ ) renderizzato dal codice ground-truth, il modello deve generare un file HTML autosufficiente ed eseguibile ( $C$ ). Quando eseguito, $C$ deve produrre un video renderizzato ( $V_{gen}$ ) che corrisponda a $V_{ref}$ sia in termini di aspetto spaziale che di dinamica temporale.
Pipeline di Rendering: Per garantire una valutazione equa, il benchmark utilizza una pipeline Chromium headless per renderizzare deterministicamente il codice in video MP4 (1024×768, 30 FPS), sincronizzando le animazioni CSS e JavaScript.

Metriche di Valutazione

Per separare la fedeltà visiva dall'allineamento temporale, gli autori propongono due metriche automatizzate, allineate al giudizio umano:

Similitudine dell'Aspetto (Appearance Similarity): Misura la somiglianza visiva tra le animazioni generate e quelle di riferimento.
- Processo: Le regioni animate vengono ritagliate per rimuovere i confondimenti posizionali. I frame vengono allineati tramite Dynamic Time Warping (DTW).
- Punteggio: Utilizza gli embedding di DreamSim (addestrati sulla percezione umana) per calcolare la similitudine media lungo il percorso di allineamento ottimale.
Similitudine Temporale (Temporal Similarity): Misura la similitudine delle traiettorie di movimento indipendentemente dall'aspetto visivo.
- Processo: Utilizza CoTracker3 per estrarre i tracklet di movimento. Per gestire la mancanza di corrispondenza pixel a pixel tra le animazioni generate e quelle ground-truth, il sistema inizializza programmaticamente i punti di tracciamento su una griglia.
- Punteggio: Calcola la correlazione tra gli spostamenti dei tracklet basandosi sull'accordo di direzione (similarità del coseno) e sull'accordo di velocità (rapporto di magnitudo). Il punteggio finale aggrega le correlazioni pairwise utilizzando una distanza di Chamfer.

Configurazione Sperimentale

Gli autori hanno valutato una suite di VLM commerciali e open-source all'avanguardia (Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6 e LLaMA 4 Scout) sotto tre configurazioni:

Zero-Shot Prompting: Generazione diretta da input video (video nativo o frame campionati a 2 FPS).
Supervised Finetuning (SFT): Fine-tuning di Qwen3-VL-8B-Instruct sul dataset utilizzando metodi LoRA e a parametri completi.
Raffinamento Iterativo (Iterative Refinement): Un framework multi-agente (adattato da METAL) dove il modello confronta iterativamente il proprio output renderizzato rispetto al target e revisiona il codice.

Risultati Chiave

Successo di Esecuzione: La maggior parte dei modelli ha raggiunto alti tassi di esecuzione del codice (fino al 100%), indicando che possono generare HTML/CSS/JS sintatticamente validi.
Gap tra Aspetto e Tempo:
- I modelli hanno ottenuto una forte similitudine dell'aspetto (fino a 0,84 per GPT-5.4), suggerendo che possono riprodurre efficacemente i layout visivi statici.
- La similitudine temporale è rimasta uniformemente bassa in tutti i modelli e nelle diverse configurazioni (punteggio massimo di 0,31 per Gemini 3 Flash Preview).
Impatto di Training e Raffinamento:
- Finetuning: Sebbene il SFT abbia migliorato il successo di esecuzione, ha significativamente peggiorato sia la similitudine dell'aspetto che quella temporale, suggerendo che i modelli si siano affidati a prior del codice appresi piuttosto che al grounding nell'input video.
- Raffinamento Iterativo: Questo approccio ha prodotto i miglioramenti più consistenti, in particolare nella prima iterazione, ma i punteggi temporali sono rimasti bassi rispetto ai punteggi dell'aspetto.
Modalità di Input: Aumentare la frequenza dei frame di input (da 2 FPS a 24 FPS) ha fornito solo guadagni marginali, indicando che fornire semplicemente segnali temporali più densi non è sufficiente affinché i modelli attuali apprendano le dinamiche di animazione continua.
Fallimenti Qualitativi: I modelli spesso non riuscivano a riprodurre le traiettorie corrette (ad esempio, un movimento circolare che diventava lineare o statico) e faticavano con le relazioni spaziali, anche quando lo stile visivo generale era corretto.

Significato e Rivendicazioni

Il documento afferma di essere il primo benchmark per valutare il de-rendering di animazioni web in codice eseguibile, mirando specificamente al ragionamento visivo temporale.

Rivelazione di un Limite Fondamentale: La scoperta principale è che gli attuali VLM possiedono un divario significativo nella loro capacità di interpretare e replicare il movimento tramite la generazione di codice. Possono ricostruire "cosa" un oggetto sembra, ma falliscono nel ricostruire "come" si muove nel tempo.
Suite di Valutazione: Le proposte metriche (Similitudine dell'Aspetto e Temporale) sono validate rispetto ai giudizi umani, mostrando una forte correlazione e fornendo un proxy automatizzato affidabile per valutare la qualità dell'animazione.
Direzione della Ricerca: Il benchmark isola la sfida del recupero delle dinamiche temporali, che è spesso confusa con i mismatch di aspetto negli altri benchmark esistenti. Funge da banco di prova per la ricerca futura nella sintesi di programmi multimodali e nel ragionamento temporale.
Sourcing Etico: Il dataset è costruito da progetti CodePen con licenza MIT, con l'obiettivo di mitigare i rischi associati alla clonazione non autorizzata di visual web.

Gli autori concludono che, sebbene i modelli possano produrre in modo affidabile codice eseguibile e forti visual statici, falliscono costantemente nel catturare le corrette dinamiche temporali, evidenziando un'area critica per il miglioramento futuro dei VLM.