Video2Code: Generating Interactive Webpages from UI Videos via Action-Aware Revisit
Video2Codeは、複雑なインタラクティブ・ウェブページにおける機能的な正確性を大幅に向上させるために、重要なアクション領域をより高い時間解像度で特定し再訪することで、実行可能な状態遷移を正確に復元する、アクション認識型のUIビデオ・ツー・コード生成フレームワークである。
原論文は CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/) でライセンスされています。 これは以下の論文のAI生成解説です。著者が執筆または承認したものではありません。技術的な正確性については原論文を参照してください。 免責事項の全文を読む
ロボットに、ある特定のインタラクティブなウェブサイトの作り方を教えたいと想像してみてください。あなたは、そのサイトの静止した写真をたった一枚、ロボットに見せることができます。すると、ロボットは色やレイアウト、ボタンなどを完璧にコピーして、見事な模写を行うでしょう。しかし、ここに問題があります。写真は、ボタンを「クリック」したときに何が起きるのか、ボックスに文字を「入力」したときにどうなるのか、あるいはページを「スクロール」したときにどうなるのかを、ロボットに伝えることができないのです。写真は時間に凍りついています。サイトが実際にどのように機能するかという「魔法」の部分が欠落しているのです。
あるいは、誰かがそのサイトを使っている動画をロボットに見せることもできます。これはより優れた方法です。なぜなら、動きを捉えることができるからです。しかし、現在のビデオを観察するAIモデルは、非常に注意力力の短い人々のようです。彼らはビデオをちらりと見て、数フレームを捉えただけで、ユーザーがボタンをクリックしてメニューが表示されるような、ほんの一瞬の出来事を見逃してしまうことがあります。もしAIがその一瞬の遷移を見逃してしまったら、メニューを表示させるためのコードを書くことができません。見た目は美しいけれど、中身は壊れているシェル（外殻）を作り上げてしまうのです。
これこそが「Video2Code」の登場です。
この論文の著者たちは、Video2Codeと呼ばれる新しい手法を生み出しました。これは、AIにビデオからウェブサイトを作る方法を教えるための、賢い二段階の「探偵プロセス」だと考えてください。
問題点：「ぼやけたスナップショット」
ほとんどのAIモデルは、動画全体を理解するために、間隔を空けていくつかの「スナップショット」（フレーム）を撮ろうとします。
- 例え話： 手品師が帽子からウサギを取り出す直前の写真と、ウサギがいなくなった後の写真の二枚を見て、その手品を理解しようとしている状況を想像してみてください。あなたは帽子とウサギは見えますが、ウサギが「どのように」そこへ現れたのかは全く分かりません。ウサギはずっとそこにいたのだと推測するか、あるいは帽子自体がウサギの絵であると考えてしまうかもしれません。
- 結果： AIは「アクションの境界」、つまりユーザーが画面と相互作用する正確な瞬間を見逃してしまいます。その瞬間を明確に見ていなければ、AIはそのインタラクションを実現するためのコードを書くことができないのです。
解決策：「アクションを意識した再訪（Action-Aware Revisit）」
Video2Codeは、どこを注意深く見るべきかを知っている探偵のように振る舞うことで、ゲームのルールを変えます。退屈な部分をじっと眺めて時間を無駄にすることはありません。面白い部分へとズームインするのです。
ステップ1：粗いスキャン（広角レンズ）
まず、AIは本をパラパラとめくって面白い章を探すように、ビデオ全体を素早く視聴します。まだ細部を理解しようとはしません。代わりに、AIはこう問いかけます。「ユーザーはどこをクリックしたのか？ どこに入力したのか？ 何が変わったのか？」 そして、これらの場所を「アクション・クリティカル・リージョン（動作に重要な領域）」としてマークします。
ステップ2：再訪（拡大鏡）
重要なことが起きた場所を特定した後、AIは特別なツールを使って、それらの特定の瞬間を「再訪」します。AIはビデオを一時停止し、その数秒間を高精細かつスローモーションで観察します。
- 例え話： それは、キャラクターがドアを開けるシーンをカットする映画エディターのようなものです。映画全体を一度見るだけでなく、ドアが開くわずか3秒間のシーンだけを切り出し、スロー再生して、取っ手が回る様子、ラッチがカチッと鳴る様子、そしてドアが揺れる様子を詳細に研究するのです。
- 結果： これにより、AIはシーケンスの全容を把握できます。クリックする前の状態、クリックそのもの、そしてクリックした後の状態のすべてです。
トレーニング：タイムラインからの学習
AIにこれを教えるために、研究者たちは単にランダムなビデオを見せたわけではありません。彼らはWebVidCodingと呼ばれる特別なデータセットを作成しました。
- 彼らは実際のウェブサイトを使用している人のビデオを記録しました。
- さらに、ユーザーがクリックしたり入力したりした瞬間に、画面の下部でフラッシュする小さな、目に見えない「マーカー」（色の変わるバーのようなもの）を追加しました。
- これにより、AIは完璧な「タイムライン」から学ぶことができました。「バーが赤くなったとき、それがクリックだ。その直前と直後に何が起きているかを見よ」という具合に。
結果：それは機能するのか？
研究者たちは、Video2Codeを他のトップクラスのAIモデルと比較検証しました。
- ビジュアル面： すべてのモデルは、ウェブサイトを正しく「見た目」通りに作ることに長けていました。
- 機能面： ここでVideo2Codeが真価を発揮しました。他のモデルは、見た目は良くても機能しない（ボタンを押しても何も起きない）ウェブサイトを作りましたが、Video2Codeはビデオのように実際に動作するウェブサイトを構築しました。
- 「高密度（Dense）」テスト： 改善は、多くのステップ（クリック、スクロール、入力が連続して行われる場面）があるビデオで最も顕著でした。他のモデルは複雑さに混乱してしまいましたが、重要な瞬間を再訪することで、Video2Codeは論理を解明したのです。
まとめ
Video2Codeは、AIにビデオをただ「ちらりと見る」ことをさせないシステムです。その代わりに、AIに対して**「重要な瞬間を見つけ、ズームインし、コードを書く前にそれを徹底的に研究する」**ことを教えます。これにより、最終的なウェブサイトは単にビデオのように「見える」だけでなく、実際のユーザー操作における「状態ー動作ー状態（state-action-state）」のダンスを完全に捉え、ビデオのように実際に「振る舞う」ようになるのです。
自分の分野の論文に埋もれていませんか？
研究キーワードに一致する最新の論文のダイジェストを毎日受け取りましょう——技術要約付き、あなたの言語で。