💻 computer science

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

Dit artikel introduceert Animation2Code, een benchmark bestaande uit 1.069 video-animatieparen en nieuwe mens-gealigneerde metrieken om de beperkingen van huidige visie-taalmodellen bij het reconstrueren van uitvoerbare webanimaties met accurate temporele dynamiek te evalueren en te onthullen.

Oorspronkelijke auteurs: Anya Ji, Abhijith Varma Mudunuri, David M. Chan, Alane Suhr

Gepubliceerd 2026-06-30

📖 4 min leestijd☕ Koffiepauze-leesvoer

CC BY 4.0

Oorspronkelijke auteurs: Anya Ji, Abhijith Varma Mudunuri, David M. Chan, Alane Suhr

Oorspronkelijk artikel gelicentieerd onder CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Dit is een AI-gegenereerde uitleg van het onderstaande artikel. Het is niet geschreven of goedgekeurd door de auteurs. Raadpleeg het oorspronkelijke artikel voor technische nauwkeurigheid. Lees de volledige disclaimer

Stel je voor dat je een magische filmprojector hebt. Je voert hem een video van een stuiterende bal, een draaiend logo of een zwaaiende hand. Je doel? Een superintelligente computer vragen om de exacte computercode (het "recept") te schrijven die die video vanaf nul kan recreëren.

Dit is waar het papier "Animation2Code" over gaat. Het is een nieuwe test om te zien of de meest geavanceerde AI-modellen van vandaag een video kunnen bekijken en de instructies kunnen schrijven om die beweging opnieuw te laten plaatsvinden.

Hier is een eenvoudige uitsplitsing van hun bevindingen, met behulp van enkele alledaagse analogieën:

1. De Uitdaging: Statisch versus Dynamisch

Beschouw huidige AI-modellen als fotografen. Ze zijn geweldig in het bekijken van een enkele foto van een webpagina of een grafiek en het schrijven van de code om deze perfect te tekenen. Als je ze een foto van een blauw vierkant laat zien, kunnen ze code schrijven om een blauw vierkant te tekenen.

Maar dit papier vraagt: Kunnen ze choreografen zijn?
Kunnen ze een video bekijken van een vierkant dat draait, krimpt en vervolgens rood wordt, en code schrijven die dat vierkant precies die reeks bewegingen laat maken? Dat vereist het begrijpen van tijd en beweging, niet alleen een enkele snapshot.

2. De Test: "Animation2Code"

De onderzoekers hebben een enorme "examen" gebouwd genaamd Animation2Code.

De Studiehandleiding: Ze verzamelden 1.069 korte webanimatievideo's (zoals stuiterende ballen, ladende spinners en wapperende vlaggen) samen met de eigenlijke code die ze creëerde.
Het Examen: Ze lieten deze video's aan top AI-modellen zien (zoals Gemini, GPT-4, Claude, etc.) en vroegen: "Schrijf de code om deze video te maken."
Het Nakijken: Ze controleerden niet alleen of de code draaide. Ze gebruikten twee speciale "linialen" om de resultaten te beoordelen:
- De Kijk-liniaal (Uiterlijk): Ziet de gegenereerde video eruit als het origineel? (Is de bal blauw? Is hij rond?)
- De Beweeg-liniaal (Temporeel): Beweegt de gegenereerde video zoals het origineel? (Stuiter de bal met de juiste snelheid? Draait hij in de juiste richting?)

3. De Grote Ontdekking: "Goed in Tekenen, Slecht in Dansen"

De resultaten waren verrassend en een beetje grappig.

De AI is een Geweldige Kunstenaar: De modellen waren fantastisch in de "Kijk-liniaal". Ze konden code schrijven die een video maakte die bijna identiek was aan het origineel. De kleuren, vormen en stijlen waren spot-on.
De AI is een Onhandige Danser: Echter, wanneer het aankwam op de "Beweeg-liniaal", hadden de modellen grote problemen. Zelfs als de video er perfect uitzag, was de beweging vaak fout.
- Analogie: Stel je een AI voor die probeert een video te recreëren van een persoon die een backflip doet. De AI schrijft code die een perfect menselijk lichaam in de juiste kleding tekent. Maar in de video staat de persoon gewoon stil, of valt hij om, of draait hij de verkeerde kant op. Het "kostuum" is perfect, maar de "dans" is kapot.

4. Waarom Dit Ertoe Doet

Het papier vond dat zelfs wanneer de AI meer videoframes kreeg (meer "aanwijzingen" over de beweging) of extra training kreeg om zijn fouten te herstellen, het nog steeds niet in staat was de timing en fysica van de beweging te begrijpen.

De Kloof: Er is een enorme kloof tussen het zien van een beweging en het begrijpen van de logica van die beweging goed genoeg om er code voor te schrijven.
De Limiet: De modellen lijken de "vibe" van de beweging te raden in plaats van de werkelijke trajectorie te berekenen. Ze kunnen de look van een golf nabootsen, maar ze kunnen niet de code schrijven om het water daadwerkelijk te laten stromen.

5. De Kern van het Verhaal

De onderzoekers creëerden deze benchmark om te bewijzen dat hoewel AI erg goed wordt in statische taken (zoals het tekenen van een webpagina vanuit een foto), het nog steeds erg slecht is in temporeel redeneren (begrijpen hoe dingen in de loop van de tijd bewegen) wanneer het gevraagd wordt code te genereren.

Ze zeggen niet dat de AI nutteloos is; ze zeggen dat het als een student is die de tekstboekdefinities van "springen" en "draaien" heeft uit het hoofd geleerd, maar nooit echt heeft geleerd hoe hij een fysieke backflip moet doen. De code die ze schrijven ziet er op papier goed uit, maar wanneer je het uitvoert, beweegt de animatie niet zoals het zou moeten.

Kortom: De huidige AI kan een perfect plaatje tekenen van een dansende robot, maar kan niet de code schrijven om de robot daadwerkelijk te laten dansen.

Technische Samenvatting: Animation2Code

Probleemstelling

Hoewel Vision-Language Models (VLM's) aanzienlijke bekwaamheid hebben getoond in statische visuele naar code-taken (bijv. het genereren van code voor webpagina's, grafieken of SVG's vanuit afbeeldingen), blijft hun vermogen om temporele dynamiek uit video te extraheren nog onverkend. Statische de-rendering vereist het mappen van een enkele afbeelding naar een programma, terwijl dynamische de-rendering redeneren over sequenties van frames, het volgen van objecttrajecten en het begrijpen van bewegingstiming vereist. Huidige benchmarks voor video-begrip richten zich voornamelijk op vraag-antwoord of classificatie, wat niet vereist dat het model uitvoerbare code produceert die complexe beweging deterministisch reproduceert. Er is een gebrek aan een benchmark die evalueert of modellen continue, door de tijd gedreven visuele veranderingen kunnen afleiden en deze kunnen vertalen naar programmatische representaties (HTML/CSS/JavaScript).

Methodologie

De Animation2Code Benchmark

De auteurs introduceren Animation2Code, een benchmark die is ontworpen om temporele visuele redenering te evalueren via de taak van animatie de-rendering.

Dataset: De dataset bestaat uit 1.069 hoogwaardige webanimatievideo's afkomstig van CodePen. Elke video is gekoppeld aan de grondwaarheid (ground-truth) uitvoerbare code (HTML met inline CSS en/of JavaScript).
Data Diversiteit: De animaties dekken diverse visuele verschijningen en bewegingspatronen, waaronder rotatie, translatie, schaling en veranderingen in opacity (doorzichtigheid). De codecomplexiteit varieert van 7 tot meer dan 10.000 regels, waarvan 86% pure CSS is en 14% JavaScript bevat.
Taakdefinitie: Gegeven een referentievideo ( $V_{ref}$ ) gerenderd uit de grondwaarheid-code, moet het model een zelfstandig, uitvoerbaar HTML-bestand ( $C$ ) genereren. Wanneer uitgevoerd, moet $C$ een gerenderde video ( $V_{gen}$ ) produceren die overeenkomt met $V_{ref}$ in zowel visuele verschijning als temporele dynamiek.
Rendering Pipeline: Om een eerlijke evaluatie te garanderen, gebruikt de benchmark een headless Chromium-pipeline om code deterministisch te renderen naar MP4-video's (1024×768, 30 FPS), waarbij CSS- en JavaScript-animaties worden gesynchroniseerd.

Evaluatiemetrieken

Om visuele getrouwheid te onderscheiden van temporele uitlijning, stellen de auteurs twee geautomatiseerde, menselijk gealigneerde metrieken voor:

Appearance Similarity (Verschijningsgelijkenis): Meet de visuele gelijkenis tussen de gegenereerde en de referentie-animaties.
- Proces: Geanimeerde regio's worden bijgesneden om positionele verwarring te voorkomen. Frames worden uitgelijnd met behulp van Dynamic Time Warping (DTW).
- Scoring: Gebruikt DreamSim embeddings (getraind op menselijke perceptie) om de gemiddelde gelijkenis langs het optimale uitlijningspad te berekenen.
Temporal Similarity (Temporele Gelijkenis): Meet de gelijkenis van bewegingstrajecten onafhankelijk van de visuele verschijning.
- Proces: Gebruikt CoTracker3 om motion tracklets te extraheren. Om het gebrek aan pixel-correspondentie tussen gegenereerde en grondwaarheid-animaties op te lossen, initialiseert het systeem trackingpunten programmatisch op een rooster.
- Scoring: Berekent de correlatie tussen tracklet-verplaatsingen op basis van richtingsovereenstemming (cosine similarity) en snelheidsovereenstemming (magnitude ratio). De definitieve score aggregeert paarcorrelaties met behulp van een Chamfer distance.

Experimentele Opstelling

De auteurs evalueerden een suite van state-of-the-art commerciële en open-source VLM's (Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6, en LLaMA 4 Scout) onder drie instellingen:

Zero-Shot Prompting: Directe generatie vanuit video-input (native video of 2 FPS gesamplede frames).
Supervised Finetuning (SFT): Finetunen van Qwen3-VL-8B-Instruct op de dataset met behulp van LoRA en full-parameter methoden.
Iteratieve Verfijning: Een multi-agent framework (aangepast van METAL) waarbij het model zijn gerenderde output iteratief vergelijkt met het doel en de code herziet.

Belangrijkste Resultaten

Executie Succes: De meeste modellen behaalden hoge code-executiesuccessen (tot 100%), wat aangeeft dat ze syntactisch geldige HTML/CSS/JS kunnen genereren.
Gap tussen Verschijning en Tijd:
- Modellen behaalden een sterke appearance similarity (tot 0.84 voor GPT-5.4), wat suggereert dat ze statische visuele lay-outs effectief kunnen reproduceren.
- Temporal similarity bleef uniform laag over alle modellen en instellingen (maximale score van 0.31 voor Gemini 3 Flash Preview).
Impact van Training en Verfijning:
- Finetuning: Hoewel SFT het executiesucces verbeterde, verslechterde het zowel de appearance als de temporal similarity aanzienlijk, wat suggereert dat modellen vertrouwden op geleerde code-priors in plaats van op het gronden in de inputvideo.
- Iteratieve Verfijning: Deze aanpak leverde de meest consistente verbeteringen op, met name in de eerste iteratie, maar de temporele scores bleven laag vergeleken met de appearance scores.
Input Modality: Het verhogen van de framerate van de input (van 2 FPS naar 24 FPS) leverde slechts marginale winst op, wat aangeeft dat het simpelweg verstrekken van dichtere temporele signalen onvoldoende is voor huidige modellen om continue animatiedynamiek te leren.
Kwalitatieve Fouten: Modellen faalden vaak in het reproduceren van correcte trajecten (bijv. circulaire beweging die lineair of statisch werd) en hadden moeite met ruimtelijke relaties, zelfs wanneer de algemene visuele stijl correct was.

Betekenis en Claims

Het artikel beweert de eerste benchmark te zijn die de de-rendering van webanimaties naar uitvoerbare code evalueert, specifiek gericht op temporele visuele redenering.

Blootleggen van een Fundamentele Beperking: De belangrijkste bevinding is dat huidige VLM's een aanzienlijke kloof hebben in hun vermogen om beweging te interpreteren en te repliceren via codegeneratie. Ze kunnen reconstrueren "wat" een object is, maar falen in het reconstrueren van "hoe" het beweegt over de tijd.
Evaluatiesuite: De voorgestelde metrieken (Appearance en Temporal Similarity) zijn gevalideerd tegen menselijke oordelen, wat een sterke correlatie laat zien en een betrouwbare, geautomatiseerde proxy biedt voor het evalueren van animatiekwaliteit.
Onderzoeksrichting: De benchmark isoleert de uitdaging van het herstellen van temporele dynamiek, wat vaak wordt verward met mismatches in verschijning in bestaande benchmarks. Het dient als een testbed voor toekomstig onderzoek in multimodale programmasynthese en temporele redenering.
Ethische Bronvermelding: De dataset is samengesteld uit MIT-gelicentieerde CodePen-projecten, met als doel de risico's van ongeautoriseerde klonen van web-visuals te beperken.

De auteurs concluderen dat hoewel modellen betrouwbaar uitvoerbare code en sterke statische beelden kunnen produceren, ze consequent falen in het vastleggen van correcte temporele dynamiek, wat wijst op een cruciaal gebied voor toekomstige verbetering in VLM's.