💻 computer science

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

Cet article introduit Animation2Code, un benchmark comprenant 1 069 paires vidéo-animation et de nouvelles métriques alignées sur l'humain pour évaluer et révéler les limites des modèles de vision-langage actuels dans la reconstruction d'animations web exécutables avec une dynamique temporelle précise.

Auteurs originaux : Anya Ji, Abhijith Varma Mudunuri, David M. Chan, Alane Suhr

Publié 2026-06-30

📖 5 min de lecture🧠 Analyse approfondie

CC BY 4.0

Auteurs originaux : Anya Ji, Abhijith Varma Mudunuri, David M. Chan, Alane Suhr

Article original sous licence CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). ✨ Ceci est une explication générée par l'IA de l'article ci-dessous. Elle n'a pas été rédigée ni approuvée par les auteurs. Pour une précision technique, consultez l'article original. Lire la clause de non-responsabilité complète

Imaginez que vous possédez un projecteur de cinéma magique. Vous y insérez une vidéo d'une balle qui rebondit, d'un logo qui tourne ou d'une main qui ondule. Votre objectif ? Demander à un ordinateur super intelligent d'écrire le code informatique exact (la « recette ») qui permettrait de recréer cette vidéo à partir de zéro.

C'est ce dont traite l'article « Animation2Code ». Il s'agit d'un nouveau test pour voir si les modèles d'IA les plus avancés d'aujourd'hui peuvent regarder une vidéo et écrire les instructions pour faire se produire ce mouvement à nouveau.

Voici une décomposition simple de leurs découvertes, en utilisant des analogies de la vie quotidienne :

1. Le défi : Statique vs Dynamique

Considérez les modèles d'IA actuels comme des photographes. Ils sont incroyables pour regarder une photo unique d'une page web ou d'un graphique et écrire le code pour le dessiner parfaitement. Si vous leur montrez l'image d'un carré bleu, ils peuvent écrire le code pour dessiner un carré bleu.

Mais cet article pose la question suivante : peuvent-ils être des chorégraphes ?
Peuvent-ils regarder une vidéo d'un carré qui tourne, rétrécit, puis devient rouge, et écrire le code qui fait effectuer exactement cette séquence de mouvements au carré ? Cela nécessite de comprendre le temps et le mouvement, et pas seulement une image fixe.

2. Le test : « Animation2Code »

Les chercheurs ont construit un « examen » géant appelé Animation2Code.

Le guide d'étude : Ils ont collecté 1 069 courtes vidéos d'animations web (comme des balles rebondissantes, des spinners de chargement, des drapeaux qui ondulent) ainsi que le code réel qui les a créées.
L'examen : Ils ont montré ces vidéos aux meilleurs modèles d'IA (comme Gemini, GPT-4, Claude, etc.) et leur ont demandé : « Écris le code pour faire cette vidéo. »
La notation : Ils n'ont pas seulement vérifié si le code fonctionnait. Ils ont utilisé deux « règles » spéciales pour noter les résultats :
- La règle de l'apparence (Aspect) : Est-ce que la vidéo générée ressemble à l'originale ? (Est-ce que la balle est bleue ? Est-elle ronde ?)
- La règle du mouvement (Temporel) : Est-ce que la vidéo générée bouge comme l'originale ? (Est-ce que la balle rebondit à la bonne vitesse ? Est-ce qu'elle tourne dans le bon sens ?)

3. La grande découverte : « Bon pour le dessin, mauvais pour la danse »

Les résultats étaient surprenants et un peu amusants.

L'IA est un excellent artiste : Les modèles étaient fantastiques pour la « règle de l'apparence ». Ils pouvaient écrire un code qui produisait une vidéo presque identique à l'originale. Les couleurs, les formes et les styles étaient parfaitement respectés.
L'IA est un danseur maladroit : Cependant, lorsqu'il s'agissait de la « règle du mouvement », les modèles avaient beaucoup de mal. Même quand la vidéo était visuellement parfaite, le mouvement était souvent erroné.
- Analogie : Imaginez une IA essayant de recréer une vidéo d'une personne faisant un salto arrière. L'IA écrit le code pour dessiner un corps humain parfait avec les bons vêtements. Mais dans la vidéo, la personne reste simplement debout, ou tombe, ou tourne dans le mauvais sens. Le « costume » est parfait, mais la « danse » est brisée.

4. Pourquoi cela importe

L'article a révélé que même lorsque l'IA recevait plus d'images (plus d'indices sur le mouvement) ou qu'on lui donnait un entraînement supplémentaire pour corriger ses erreurs, elle ne parvenait toujours pas à comprendre le timing et la physique du mouvement.

Le fossé : Il existe un écart énorme entre voir un mouvement et comprendre la logique de ce mouvement assez bien pour écrire le code qui le génère.
La limite : Les modèles semblent deviner l'« ambiance » du mouvement plutôt que de calculer la trajectoire réelle. Ils peuvent imiter l'aspect d'une vague, mais ils ne peuvent pas écrire le code pour faire couler l'eau réellement.

5. L'essentiel

Les chercheurs ont créé ce test de référence pour prouver que, bien que l'IA soit excellente pour les tâches statiques (comme dessiner une page web à partir d'une photo), elle est encore très mauvaise en matière de raisonnement temporel (comprendre comment les choses bougent dans le temps) lorsqu'on lui demande de générer du code.

Ils ne disent pas que l'IA est inutile ; ils disent qu'elle est comme un étudiant qui a mémorisé les définitions du manuel pour « sauter » et « tourner », mais qui n'a jamais appris à faire un véritable salto arrière. Le code qu'il écrit semble correct sur le papier, mais quand on l'exécute, l'animation ne bouge pas comme elle le devrait.

En bref : L'IA actuelle peut dessiner une image parfaite d'un robot qui danse, mais elle ne peut pas écrire le code pour faire danser le robot.

Résumé Technique : Animation2Code

Énoncé du Problème

Bien que les modèles de langage-vision (VLM) aient démontré une compétence significative dans les tâches de dé-rendu visuel-vers-code statiques (par exemple, la génération de code pour des pages web, des graphiques ou des SVG à partir d'images), leur capacité à récupérer la dynamique temporelle à partir de vidéos reste inexplorée. Le dé-rendu statique nécessite de mapper une image unique vers un programme, tandis que le dé-rendu dynamique nécessite de raisonner sur des séquences d'images, de suivre les trajectoires d'objets et de comprendre le timing du mouvement. Les benchmarks actuels de compréhension vidéo se concentrent principalement sur le questionnement ou la classification, ce qui ne nécessite pas que le modèle produise un code exécutable reproduisant de manière déterministe des mouvements complexes. Il manque un benchmark capable d'évaluer si les modèles peuvent inférer des changements visuels continus pilotés par le temps et les traduire en représentations programmatiques (HTML/CSS/JavaScript).

Méthodologie

Le Benchmark Animation2Code

Les auteurs introduisent Animation2Code, un benchmark conçu pour évaluer le raisonnement visuel temporel à travers la tâche de dé-rendu d'animations.

Jeu de données : Le jeu de données se compose de 1 069 vidéos d'animations web de haute qualité provenant de CodePen. Chaque vidéo est associée à son code exécutable de vérité terrain (HTML avec CSS en ligne et/ou JavaScript).
Diversité des données : Les animations couvrent des apparences visuelles et des motifs de mouvement divers, incluant la rotation, la translation, l'échelle et les changements d'opacité. La complexité du code varie de 7 à plus de 10 000 lignes, avec 86 % de pur CSS et 14 % intégrant du JavaScript.
Définition de la tâche : Étant donné une vidéo de référence ( $V_{ref}$ ) rendue à partir du code de vérité terrain, le modèle doit générer un fichier HTML auto-contenu et exécutable ( $C$ ). Lors de l'exécution, $C$ doit produire une vidéo rendue ( $V_{gen}$ ) qui correspond à $V_{ref}$ tant en apparence spatiale qu'en dynamique temporelle.
Pipeline de rendu : Pour garantir une évaluation équitable, le benchmark utilise un pipeline Chromium sans tête pour rendre de manière déterministe le code en vidéos MP4 (1024×768, 30 FPS), en synchronisant les animations CSS et JavaScript.

Métriques d'Évaluation

Pour désentendre la fidélité visuelle de l'alignement temporel, les auteurs proposent deux métriques automatisées, alignées sur l'humain :

Similitude d'Apparence : Mesure la ressemblance visuelle entre les animations générées et de référence.
- Processus : Les régions animées sont découpées pour éliminer les biais de position. Les images sont alignées via l'alignement temporel dynamique (DTW).
- Score : Utilise les plongements (embeddings) DreamSim (entraînés sur la perception humaine) pour calculer la similitude moyenne le long du chemin d'alignement optimal.
Similitude Temporelle : Mesure la similitude des trajectoires de mouvement indépendamment de l'apparence visuelle.
- Processus : Utilise CoTracker3 pour extraire des segments de suivi (tracklets). Pour gérer l'absence de correspondance pixel par pixel entre les animations générées et de vérité terrain, le système initialise des points de suivi de manière programmatique sur une grille.
- Score : Calcule la corrélation entre les déplacements des segments basée sur l'accord de direction (similitude cosinus) et l'accord de vitesse (rapport de magnitude). Le score final agrège les corrélations par paires en utilisant une distance de Chamfer.

Configuration Expérimentale

Les auteurs ont évalué une suite de VLM commerciaux et open-source de pointe (Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6, et LLaMA 4 Scout) sous trois configurations :

Prompting Zero-Shot : Génération directe à partir de l'entrée vidéo (vidéo native ou images échantillonnées à 2 FPS).
Fine-tuning Supervisé (SFT) : Fine-tuning de Qwen3-VL-8B-Instruct sur le jeu de données en utilisant les méthodes LoRA et de réglage complet des paramètres.
Raffinement Itératif : Un framework multi-agents (adapté de METAL) où le modèle compare de manière itérative sa sortie rendue par rapport à la cible et révise le code.

Résultats Clés

Succès d'Exécution : La plupart des modèles ont atteint des taux d'exécution de code élevés (jusqu'à 100 %), indiquant qu'ils peuvent générer du HTML/CSS/JS syntaxiquement valides.
Écart Apparence vs Temporel :
- Les modèles ont obtenu une forte similitude d'apparence (jusqu'à 0,84 pour GPT-5.4), suggérant qu'ils peuvent reproduire efficacement les mises en page visuelles statiques.
- La similitude temporelle est restée uniformément basse pour tous les modèles et configurations (score maximum de 0,31 pour Gemini 3 Flash Preview).
Impact de l'Entraînement et du Raffinement :
- Fine-tuning : Bien que le SFT ait amélioré le succès d'exécution, il a considérablement dégradé la similitude tant d'apparence que temporelle, suggérant que les modèles se fient davantage à des priors de code appris qu'à l'ancrage dans la vidéo d'entrée.
- Raffinement Itératif : Cette approche a produit les améliorations les plus constantes, particulièrement lors de la première itération, mais les scores temporels sont restés bas par rapport aux scores d'apparence.
Modalité d'Entrée : Augmenter la fréquence d'images de l'entrée (de 2 FPS à 24 FPS) n'a apporté que des gains marginaux, indiquant que le simple fait de fournir des signaux temporels plus denses est insuffisant pour que les modèles actuels apprennent les dynamiques d'animation continues.
Échecs Qualitatifs : Les modèles ont souvent échoué à reproduire les trajectoires correctes (par exemple, un mouvement circulaire devenant linéaire ou statique) et ont eu des difficultés avec les relations spatiales, même lorsque le style visuel général était correct.

Signification et Revendications

L'article affirme être le premier benchmark évaluant le dé-rendu d'animations web en code exécutable, ciblant spécifiquement le raisonnement visuel temporel.

Révélation d'une Limitation Fondamentale : La principale conclusion est que les VLM actuels possèdent un écart significatif dans leur capacité à interpréter et à répliquer le mouvement via la génération de code. Ils peuvent reconstruire "ce qu'est" un objet, mais échouent à reconstruire "comment" il bouge au fil du temps.
Suite d'Évaluation : Les métriques proposées (Similitude d'Apparence et Temporelle) sont validées par des jugements humains, montrant une forte corrélation et fournissant un proxy automatisé fiable pour évaluer la qualité de l'animation.
Direction de Recherche : Le benchmark isole le défi de la récupération des dynamiques temporelles, qui est souvent confondue avec des écarts d'apparence dans les benchmarks existants. Il sert de banc d'essai pour les recherches futures en synthèse de programmes multimodaux et raisonnement temporel.
Sourcing Éthique : Le jeu de données est construit à partir de projets CodePen sous licence MIT, visant à atténuer les risques associés au clonage non autorisé de visuels web.

Les auteurs concluent que, bien que les modèles puissent produire de manière fiable du code exécutable et des visuels statiques solides, ils échouent systématiquement à capturer les dynamiques temporelles correctes, soulignant un domaine critique pour l'amélioration future des VLM.