技術要約: VisRefiner

1. 問題提起

**スクリーンショットからのコード生成（Screenshot-to-Code Generation）**というタスクは、静的なユーザーインターフェース（UI）のスクリーンショットを、ターゲットとなるレイアウトやスタイルを忠実に再現する実行可能なフロントエンドコード（HTML/CSSなど）へと変換することを目的としている。近年のマルチモーダル大規模言語モデル（MLLM）は、この領域においてエンドツーエンドの能力を示しているが、それらは通常、デザインからコードへの一方向の教師ありマッピングに依存している。これらの既存手法における決定的な限界は、モデルが生成したコードの視覚的な結果を観察することなく学習されている点にある。その結果、モデルは特定の視覚的な不一致が、どのようなコード変更を必要とするのかという関係性を学習することができない。

対照的に、人間の開発者は、**レンダリング・比較・修正（render–compare–revise）**という反復プロセスを用いる。彼らは実装をレンダリングし、それをデザインと比較し、視覚的な不整合を特定した上で、基礎となるコードを洗練させる。現在のMLLMベースのシステムはこのメカニズムを内面化しておらず、視覚的な差異を単なる外部的な診断信号として扱っており、内部的な学習の手がかりとしては扱っていない。

2. 手法: VisRefiner

このギャップを埋めるために、著者らはVisRefinerを提案する。これは、レンダリングされた予測とリファレンスデザインの間の視覚的な差異から、MLLMが直接学習できるように設計されたトレーニングフレームワークである。本フレームワークは、差分駆動型の学習を通じて、フィードフォワードな予測からパラダイムをシフトさせる。これは以下の2つの明確なステージで構成される。

A. 差分整合型監督 (Stage 1: Difference-Aligned Supervision)

このステージでは、観察された視覚的な不一致と、それを解決するために必要な特定のコード更新との間に、明示的な対応関係を確立する。

• データ構築 (VisDiffUI): 著者らは、視覚的な偏差とその対応するコード編集を含むペアの例を含むデータセット、VisDiffUIを構築した。このデータセットは、公開ソース（Vision2UI, WebSight）から派生しており、以下の2つの方法で拡張されている：
  1. ルールベースの摂動: HTML/CSSトークンを修正するライブラリを用いて、色、レイアウト、配置、コンポーネント、画像、テキストの6つの次元にわたる局所的なUIの不一致をシミュレートする。
  2. モデル予測による不完全性: 初期の段階のモデルによる不完全な出力をグラウンドトゥルース（正解）と組み合わせることで、ルールによる合成が困難な現実的なアーティファクト（例：配置ミスのあるコンテナ、冗長なラッパー）を捉える。
• 学習目的: モデルは、ターゲットのスクリーンショット ($I_{gt}$)、現在のコード ($C_t$)、および現在のコードのレンダリング画像 ($I_t$) が与えられたときに、洗練されたコード ($C_{t+1}$) を予測するように学習される。目的関数は負の対数尤度を最小化する：
  $$L_{SFT} = -\log P_\theta(C_{t+1} | I_t, I_{gt}, C_t)$$
  これにより、実装の変更が視覚的な外観にどのように影響するかについてのモデルの理解を定着させる。

B. 自己洗練を伴う強化学習 (Stage 2: Reinforcement Learning with Self-Refinement)

教師あり学習の基礎の上に、このステージでは、**グループ相対方策最適化（GRPO）**を用いて、視覚的なフィードバックを通じてモデル自身が出力を洗練することを可能にする。

• 改善の定量化: CLIPベースの知覚的類似性に基づき、**相対改善スコア（RIS）**を定義する。これは、現在のレンダリングとターゲットの間の視覚的な差異の減少における相対的な進捗を測定し、スケール不変性を確保するために正規化される。
• 報酬設計: 複合的な報酬関数が最適化を導く：
  1. フォーマット報酬 ($r_{format}$): 構文的に無効なコードに対してペナルティを与える。
  2. 洗練報酬 ($r_{improve}$): 新しいレンダリングが視覚的類似性を向上させた場合に正の信号を割り当てる。
  3. 品質報酬 ($r_{quality}$): 連続的なRIS値を使用して、改善の度合いを測定する。
• 最適化: モデルは候補となるコードのバリエーションを生成し、それらをレンダリングし、報酬のグループ相対的なアドバンテージに基づいて方策を更新することで、反復的な推論と洗練行動の内面化を促進する。

3. 主な貢献

1. VisRefinerフレームワーク: 視覚的なフィードバックをトレーニングプロセスに直接統合し、コードの修正が視覚的な結果にどのように影響するかをMLLMが学習できるようにする、新しいトレーニングパラダイム。
2. VisDiffUIデータセット: 視覚的な差異と対応するコード編集を整合させた、専門的なデータセットおよびデータパイプラインであり、外観と実装の対応関係を研究するためのリソースを提供する。
3. 実証的検証: VisRefinerが、Design2Code、Design2Code-HARD、およびホールドアウトされたVisDiffUI-Testの複数のベンチマークにおいて、視覚的な忠実度、レイアウトの整合性、および自己洗練能力において一貫した改善を達成することを広範な実験によって実証した。

4. 実験結果

著者らは、VisRefiner（特に7Bパラメータ・バリアント）を、プロプライエタリなモデル（GPT-4o, Claude 3.5 Sonnet）およびオープンソースのベースライン（Qwen2.5-VL, MiMo-VL）と比較して、Design2Code、Design2Code-HARD、およびホールドアウトされたVisDiffUI-Testで評価した。

• シングルステップ生成: VisRefiner-7Bは強力なシングルステップ精度を達成し、困難なDesign2Code-HARDベンチマークにおいて72BパラメータのQwen2.5-VL-72Bを上回り（平均スコア 85.6 vs 80.8）、構造的な整合性（Block Match: 78.1 vs 56.6）においてGPT-4oを凌駕した。
• 自己洗練の安定性: 洗練によって結果が不安定になる（性能が低下する場合もある）ベースラインとは異なり、VisRefinerはすべてのデータセットとリファインモードにおいて一貫した利得を示した。
• アブレーション研究:
  • 推進力としてのSFT: 差分整合型ペアを用いた教師あり微調整（SFT）が、構造的および視覚的な品質（例：位置の整合性と色の整合性）を向上させる主要な要因であることが特定された。
  • 洗練器としてのGRPO: GRPOは、特に細粒度の指標においてさらなる増分的な改善を提供したが、それはSFTによって構築された差分認識の基礎に依存していた。
• 人間による評価: ヒューマンアノテーターは、VisRefiner-7Bが「意図的かつ能動的な洗練」を示し、ベースラインモデルと比較して「Tie（変更なし）」のケースを大幅に減少させていることを発見した。これは、「Lose（失敗）」の割合をわずかに高めることにもつながったが（能動的ではあるが、時には不成功な編集であることを示す）、モデルが保守的な不作為ではなく、非自明な修正に従事する能力があることを裏付けた。
• マルチターン分析: マルチターンの洗練において性能は変動するものの、フィルタリングされた結果（全ターンの中で最良の出力を選択する）は引き続き改善しており、モデルが多様な修正パスを探索していることを示唆している。

5. 意義と主張

本論文は、VisRefinerがスクリーンショットからのコード生成を、純粋なフィードフォワード予測タスクから差分駆動型の学習パラダイムへと転換させるものであると主張している。視覚的な差異から学習することにより、本フレームワークは、コードの編集と視覚的な結果の間の因果関係を理解する、より人間のような推論プロセスをモデルに授ける。

著者らは、このアプローチが単に生成品質を向上させるだけでなく、標準的なMLLM、特に小規模なモデルには欠けていることが多い自己洗練能力を植え付けるものであることを強調している。本研究は、視覚的な不一致を事後的なフィードバックとしてではなく、直接的な学習信号として組み込むことが、構造化されたコード合成におけるマルチモーダル推論を進展させるための重要なステップであることを示唆している。