技術的概要：UIBenchKit

問題定義

マルチモーダル大規模言語モデル（MLLM）の登場により、自動化されたデザインからコード（UI2Code）への生成分野は著しく進展し、視覚入力から直接 HTML と CSS を生成することが可能になりました。Vercel の v0 や Lovable などのツールによる商業的な採用や、研究の蓄積が進んでいるにもかかわらず、この分野には標準化の欠如という重大な課題が存在します。現在の評価は断片的であり、特定の LLM バックボーン、設定、プロンプトに密接に結びついていることが多く、さらに統一された評価指標とパイプラインが存在しないため、報告された改善が優れた手法に起因するのか、それとも単に実験プロトコルの違いに由来するのかを判断することが困難です。この断片化は、公平な比較、再現性、および体系的な研究の進展を阻害しています。

手法：UIBenchKit アーキテクチャ

これらの課題に対処するため、著者は環境設定、モデル推論、コードレンダリングの複雑さを抽象化するように設計されたオープンソースの統一ツールキットであるUIBenchKitを導入します。システムのアーキテクチャはモジュール式であり、以下のコアコンポーネントで構成されています。

1. データセットマネージャー: ベンチマークデータセット（例：Design2Code、DCGen）またはカスタムスクリーンショットフォルダを共有入力形式に正規化し、すべての手法が同一の構造で動作することを保証します。
2. 実行オーケストレーター: 実験設定を管理し、個々のインスタンスの進捗を追跡し、生成出力とメタデータを保存して再現性を確保し、失敗からの回復をサポートします。
3. メソッドディスパッチャー: 正規化された入力をさまざまな UI2Code モデルにルーティングします。共通の実行インターフェースを通じて、分割統治やレイアウト認識生成などの異なる戦略を公開します。
4. 推論抽象化: API 呼び出し、トークン集計、入力フォーマットなど、プロバイダー固有の詳細を抽象化し、異なる MLLM ファミリー間で手法をシームレスに評価できるようにします。
5. ポストプロセッシングおよび評価レイヤー: Playwrightを使用して生成された HTML をスクリーンショットにレンダリングします。コードレベル、視覚的、および微細な次元を網羅する拡張可能な評価指標スイートを適用します。

このツールキットは、実行エンジン用にPython/Flask バックエンドを、対話型可視化用にReact/TypeScript フロントエンドを実装しています。大規模実験用の CLI/REST API と、定性的検査用のグラフィカルユーザーインターフェースの両方をサポートしています。

主要な貢献

本論文は、以下の 3 つの主要な貢献を概説しています。

1. 統一実行フレームワーク: 多様なデータセット、バックボーン LLM、および手法にわたってデザインからコードへのツールを評価するための標準化されたパイプライン。単一のインターフェースを通じて、データセットの準備から出力生成までの全ワークフローを処理します。
2. 分析インターフェース: 多次元比較を可能にする報告および可視化モジュール。定量的指標を基盤となるアーティファクト（入力スクリーンショット、生成された HTML、レンダリングされた Web ページ）に直接リンクし、研究者が特定の失敗を追跡できるようにします。
3. 大規模ベンチマーク研究: 著者は UIBenchKit を活用し、GPT、Claude、Qwen、LLaMA などのプロプライエタリおよびオープンソースファミリーにまたがる16 の MLLMと、2 つのデータセットにおける5 つの異なる手法を含む包括的な研究を実施しました。その結果、統一された設定下で832 の評価インスタンスが得られました。

評価結果と知見

ベンチマーク研究は、高レベルの類似性、微細な要素の一致、およびリソース効率の 3 つの次元にわたるパフォーマンスを評価しました。

• 使用された指標:
  • 高レベル: 構造的コード類似性（正規化されたレーベンシュタイン距離）および視覚的画像類似性（CLIP スコア）。
  • 微細: ブロック一致、テキスト類似性、色類似性、および位置類似性を評価する要素一致スイート。
  • 効率: 生成あたりのトークン消費量（テキストおよび視覚）。
• 主要な知見:
  • 分解対直接プロンプト: 分解ベースのフレームワーク（例：LaTCoder、LayoutCoder）は、複雑な Web ページにおいて、特に前景のブロック一致と位置決めにおいて、レイアウト忠実度を一般的に向上させます。ただし、これらの改善はすべての指標で一様ではなく、単純なケースでは直接プロンプトが依然として競争力があります。
  • 指標の限界: CLIP スコアなどのグローバル類似性指標は、特定のレイアウトエラーを不明瞭にする可能性があり、実用的な UI 忠実度を評価するための微細な指標の必要性を強化します。
  • 失敗分析: 著者は、分解がコンテキスト長を短縮し並列生成を可能にする一方で、システム的なトレードオフを導入することを特定しました。初期段階でのエラー（例：不正確なバウンディングボックスの識別）は、下流で増幅されます。
  • セグメンテーションのボトルネック: 画像セグメンテーションは依然として失敗の主要な原因です。現在の手法は、意味構造を捉えられない低レベルの視覚的手がかりに依存しています。軸方向の要素を前提とするアルゴリズムは傾斜したコンポーネントに苦しみ、強力な視覚的境界に依存するものは装飾的な線やテキストを過剰にセグメント化することが多いです。

意義と将来の方向性

本論文は、UIBenchKit を、ストリーミングされた再現可能な環境を提供することで、将来のベンチマークと Web エンジニアリングにおけるイノベーションを加速する基盤ツールとして位置づけています。著者は、LLM のコード生成能力は向上したものの、「最も重大な障壁」は既存の画像セグメンテーション技術の限界にあると強調しています。

著者は、将来の研究は画像セグメントの構造認識表現へと進むべきであると示唆し、DOM ツリーを推論する UICopilot のアプローチを有望な方向性として挙げています。UIBenchKit 自体の将来の作業には、動的 Web コンポーネントのサポート拡大と、マルチモーダル AI 研究と実用的なソフトウェアエンジニアリングワークフローの間のギャップをさらに埋めるための React などのモダンなフロントエンドフレームワークの統合が含まれます。