技術要約: Animation2Code

問題提起

視覚言語モデル（VLM）は、静的な視覚からコードへの変換タスク（例：画像からのウェブページ、チャート、またはSVGのコード生成）において顕著な能力を示しているが、ビデオからの**時間的ダイナミクス（temporal dynamics）**を復元する能力については未探索のままである。静的なデ・レンダリング（de-rendering）は単一の画像をプログラムにマッピングすることを必要とするが、動的なデ・レンダリングは、フレームのシーケンスを推論し、物体の軌跡を追跡し、動きのタイミングを理解することを必要とする。現在のベンチマークは主にビデオ理解に関する質問回答や分類に焦点を当てており、複雑な動きを決定論的に再現する実行可能なコードをモデルに生成させることを要求していない。モデルが連続的で時間駆動型の視覚的変化を推論し、それをプログラム的な表現（HTML/CSS/JavaScript）へと翻訳できるかどうかを評価するベンチマークが欠如している。

メソドロジー

Animation2Code ベンチマーク

著者らは、アニメーションのデ・レンダリングというタスクを通じて、時間的な視覚推論を評価するために設計されたベンチマークであるAnimation2Codeを導入する。

• データセット: このデータセットは、CodePenから収集された1,069個の高品質なウェブアニメーションビデオで構成されている。各ビデオには、正解となる実行可能なコード（インラインCSSおよび/またはJavaScriptを含むHTML）がペアになっている。
• データの多様性: アニメーションは、回転、平行移動、スケーリング、不透明度の変化を含む、多様な視覚的外観と運動パターンをカバーしている。コードの複雑さは7行から1万行以上に及び、その86%が純粋なCSSであり、14%がJavaScriptを組み込んでいる。
• タスク定義: 正解コードからレンダリングされた参照ビデオ（$V_{ref}$）が与えられたとき、モデルは自己完結した実行可能なHTMLファイル（$C$）を生成しなければならない。実行時、$C$は空間的な外観と時間的なダイナミクスの両方において$V_{ref}$と一致するレンダリングされたビデオ（$V_{gen}$）を生成しなければならない。
• レンダリング・パイプライン: 公平な評価を確保するため、本ベンチマークはヘッドレスChromiumパイプラインを使用して、CSSおよびJavaScriptのアニメーションを同期させながら、コードを決定論的にMP4ビデオ（1024×768、30 FPS）へとレンダリングする。

評価指標

著者らは、視覚的な忠実度と時間的な整合性を切り離すために、人間と整合性の取れた2つの自動化された指標を提案している。

1. 外観の類似度（Appearance Similarity）: 生成されたアニメーションと参照用アニメーションの間の視覚的な類似性を測定する。
   • プロセス: 位置による混乱を排除するために、アニメーション領域をクロップする。フレームは**動的時間伸縮法（DTW）**を用いて整列される。
   • スコアリング: 人間の知覚に基づいて訓練されたDreamSim埋め込みを使用し、最適な整列経路に沿った平均類似度を算出する。
2. 時間的類似度（Temporal Similarity）: 視覚的な外観とは独立して、運動の軌跡の類似性を測定する。
   • プロセス: CoTracker3を使用して運動のトラックレット（tracklets）を抽出する。生成されたアニメーションと正解のアニメーションの間でピクセルレベルの対応関係が欠如していることを処理するため、システムはグリッド上でプログラム的にトラッキングポイントを初期化する。
   • スコアリング: 方向の一致（コサイン類似度）と速度の一致（大きさの比率）に基づくトラックレットの変位の相関を計算する。最終的なスコアは、**チャムフェル距離（Chamfer distance）**を用いてペアワイズの相関を集計する。

実験設定

著者らは、以下の3つの設定下で、最先端の商用およびオープンソースのVLM（Gemini 3 Flash Preview, Qwen3-VL-8B-Instruct, GPT-5.4, Claude Sonnet 4.6, および LLaMA 4 Scout）を評価した。

• ゼロショット・プロンプティング: ビデオ入力（ネイティブビデオまたは2 FPSでサンプリングされたフレーム）からの直接生成。
• 教師あり微調整（SFT）: LoRAおよびフルパラメータ手法を用いて、Qwen3-VL-8B-Instructをデータセットで微調整する。
• 反復的な洗練（Iterative Refinement）: モデルが自身のレンダリング出力をターゲットと比較し、コードを繰り返し修正するマルチエージェント・フレームワーク（METALから適応）。

主な結果

• 実行成功率: ほとんどのモデルは高いコード実行率（最大100%）を達成しており、これらが構文的に有効なHTML/CSS/JSを生成できることを示している。
• 外観と時間のギャップ:
  • モデルは強力な外観の類似度（GPT-5.4で最大0.84）を達成しており、これは静的な視覚レイアウトを効果的に再現できることを示唆している。
  • 時間的類似度は、すべてのモデルおよび設定において一様に低く、（Gemini 3 Flash Previewで最大0.31）であった。
• トレーニングと洗練の影響:
  • 微調整（Finetuning）: SFTは実行成功率を向上させたが、外観および時間的類似度の両方を著しく低下させた。これは、モデルが入力ビデオへのグラウンディングよりも、学習されたコードの事前知識に依存していることを示唆している。
  • 反復的な洗練（Iterative Refinement）: このアプローチは、特に最初のイテレーションにおいて最も一貫した改善をもたらしたが、時間的スコアは外観スコアに比べて低いままだった。
• 入力モダリティ: 入力のフレームレートを増加させること（2 FPSから24 FPSへ）は、わずかな改善しか提供せず、単に時間信号を密に提供するだけでは、現在のモデルが連続的なアニメーションのダイナミクスを学習するには不十分であることを示している。
• 定性的な失敗: モデルはしばしば正しい軌跡を再現できず（例：円運動が直線運動や静止に変わる）、一般的な視覚スタイルが正しくても、空間的な関係関係の把握に苦戦した。

意義と主張

本論文は、ウェブアニメーションを実行可能なコードへとデ・レンダリングすること、特に時間的な視覚推論を対象とした最初のベンチマークであると主張している。

• 根本的な限界の露呈: 主要な発見は、現在のVLMが、コード生成を通じて動きを解釈し複製する能力において、大きなギャップを抱えているということである。モデルは物体が「どのように見えるか」を再構築できるが、「どのように動くか」を再構築することには失敗する。
• 評価スイート: 提案された指標（外観の類似度と時間的類似度）は、人間の判断と高い相関を示しており、アニメーションの品質を評価するための信頼できる自動化されたプロキシ（代理指標）となっている。
• 研究の方向性: 本ベンチマークは、既存のベンチマークでは外観の不一致と混同されがちな、時間的ダイナミクスの回収という課題を分離している。これは、マルチモーダルなプログラム合成および時間的推論の将来の研究のためのテストベッドとして機能する。
• 倫理的な調達: データセットはMITライセンスのCodePenプロジェクトから構築されており、ウェブの視覚要素の無許可のクローニングに関連するリスクを軽減することを目指している。

著者らは、モデルは実行可能なコードと強力な静的ビジュアルを確実に生成できる一方で、一貫して正しい時間的ダイナミクスを捉えることに失敗しており、これがVLMにおける将来の改善に向けた重要な領域であることを強調して結論づけている。