WebGen-Agent: Enhancing Interactive Website Generation with Multi-Level Feedback and Step-Level Reinforcement Learning

基本情報

• arXiv ID: 2509.22644v1 (https://arxiv.org/abs/2509.22644)
• 著者: Zimu Lu, Houxing Ren, Yunqiao Yang, Ke Wang ら
• 所属: The Chinese University of Hong Kong
• 投稿日: 2025年09月30日
• カテゴリ: cs.AI, cs.LG

簡単に説明すると

この論文では、自然言語指示からWebサイトを自動生成するAIシステム「WebGen-Agent」を提案しています。
従来のコード生成エージェントは単純なコード実行フィードバックのみに依存していました。
WebGen-AgentはスクリーンショットとGUIエージェントテストによる視覚的フィードバックを活用します。
視覚言語モデル（VLM）がWebサイトのスクリーンショットを評価し、GUIエージェントが機能性をテストします。
さらに、Step-GRPO（Group Relative Policy Optimization）という新しい強化学習手法を導入し、
ステップレベルでの報酬を使用してモデルの性能を向上させています。
WebGen-BenchでClaude-3.5-Sonnetの精度を26.4%から51.9%に向上させる優秀な結果を示しました。
コードとモデルは https://github.com/mnluzimu/WebGen-Agent で公開されています。

1. 研究概要

1.1 背景と動機

大規模言語モデル（LLM）を活用したエージェントシステムは、リポジトリレベルのコード生成タスクで優れた性能を示しています。
しかし、視覚効果とユーザーインタラクションが重要なWebサイト生成タスクにおいて、
現在のコードエージェントは単純なコード実行フィードバックのみに依存しています。

このアプローチは生成されたコードの実際の品質を捉えることができません。
具体的にはコンポーネントの位置ずれや不調和な配色があります。
また、応答しないボタンや壊れたリンクなど様々なレンダリングや機能的な問題も発生する可能性があります。

従来のコード生成システムでは、コードの構文的正しさは確保できても、
実際のWebサイトとしての美しさや使いやすさを評価する仕組みが不足していました。
特にWebサイト開発では、機能的要件だけでなく美的基準も満たすことが重要です。

1.2 主要な貢献

本研究では、この問題を解決するため以下の重要な貢献を達成しています。

• スクリーンショットとGUIエージェントテストを活用してフィードバック信号を提供し、生成されるWebサイトの品質を反復的に改善するコードエージェントシステムWebGen-Agentの提案
• スクリーンショットとGUIエージェントスコアをGRPO訓練プロセスでのステップレベル監督として使用するStep-GRPOの導入により、小規模オープンソースモデルの性能を顕著に改善
• 提案システムの有効性を示す包括的実験により、Claude-3.5-Sonnetの精度を26.4%から51.9%に、外観スコアを3.0から3.9に向上させ、Bolt.diyを上回る性能を達成

2. 提案手法

2.1 手法の概要

WebGen-Agentは、自然言語指示から外観と機能の要件を指定してWebサイトを生成する、高度に自動化されたWebサイト開発プロセスを提供します。
生成されたWebサイトが機能的要件と美的基準の両方を満たすことを保証するため、実行フィードバックと視覚フィードバックの両方を活用してプロジェクトを改良します。

システムは反復的で多段階のパラダイムを採用し、各ステップはコード生成、コード実行、フィードバック収集の3つのアクションで構成されます。
エージェントは各ステップでコードベース内のファイルを作成・編集することから開始します。

コード実行中には依存関係がインストールされ、Webサイトサービスが開始されます。
実行でエラーが発生した場合、エラーがエージェントに返され、次のステップでそれらを修正します。
連続して5回のエラーが発生した場合、エージェントは以前のエラーのないステップまでバックトラックします。

2.2 技術的詳細

フィードバック収集プロセスでは、まずWebサイトのランディングページのスクリーンショットが撮影されます。
VLMがスクリーンショットに基づいて説明と外観スコアを提供します。
スクリーンショットに改善の余地がある場合、モデルは提案を提供し、
これらは次のステップで実装されてWebサイトの視覚的美学を明示的に改良します。

そうでない場合は、GUIエージェントセッションが開始されてWebサイトを探索し、
機能要件を評価して対応するフィードバックを生成します。
テストが成功した場合、タスクは完了します。そうでない場合は、
Webサイトを修正するための提案が生成され、エージェントは次のステップでコードベースを編集できます。

Step-GRPOでは、与えられた指示に対して複数のWebGen-Agentトラジェクトリが生成されます。
エージェントトラジェクトリの各ステップには、スクリーンショットスコアとGUIエージェントテストスコアが付随し、
これら2つのスコアを合計することで正確で信頼性の高いステップレベル報酬を計算できます。

2.3 新規性

本研究の主要な新規性は、視覚的品質と機能性の両方を同時に評価する統合的なフィードバックシステムの構築にあります。
従来のコード生成システムが構文的正しさや実行可能性のみを重視していたのに対し、
WebGen-Agentは実際のユーザー体験に直結する視覚的印象と操作性を評価対象に含めています。

また、Step-GRPOによるステップレベル強化学習の導入も重要な革新です。
従来の強化学習では最終結果のみを報酬として使用していましたが、
各ステップで視覚的品質と機能性の両方を評価することで、より細かい粒度での学習が可能になっています。

バックトラッキング機能付きの反復改善メカニズムも特徴的です。
単純な前進のみの改善ではなく、過去の良好な状態に戻ることで、より高速な探索が可能になっています。

3. 実験結果

3.1 実験設定

評価にはWebGen-Benchデータセットを使用しました。
これはWebサイト生成能力を評価するために設計された専用ベンチマークです。

実験では複数のベースラインモデルと比較しました。
主要な比較対象には、Claude-3.5-Sonnet、Qwen2.5-Coder-7B-Instruct、Bolt.diyなどが含まれます。

評価指標として、精度（Accuracy）と外観スコア（Appearance Score）を使用しました。
精度は生成されたWebサイトが要求仕様を満たす割合を、
外観スコアは視覚的品質を1から5の尺度で評価したものです。

実験は異なる設定で実施され、WebGen-Agentワークフローの有効性とStep-GRPO訓練の効果を分離して評価しました。

3.2 主要な結果

WebGen-Agentワークフローの適用により、Claude-3.5-Sonnetの性能が25ポイント改善されました。
精度は26.4%から51.9%に向上し、約25ポイントの向上を達成しました。
外観スコアも3.0から3.9に改善され、視覚的品質の向上が確認されています。

Step-GRPO訓練を適用したQwen2.5-Coder-7B-Instructでは、
精度が38.9%から45.4%に改善し、外観スコアが3.4から3.7に向上しました。
小規模モデルでありながら、訓練により大幅な性能向上を達成しています。

Bolt.diyとの比較では、WebGen-Agentが一貫して優れた性能を示しました。
特に、複雑な要件を含むタスクや視覚的品質が重要なタスクにおいて、大きなアドバンテージを示しています。

3.3 既存手法との比較

従来のコード生成エージェント（GitHubのissue修正や新機能実装など）と比較して、
WebGen-Agentは視覚的品質と機能性の両方を評価する点で優れています。

Bolt.diyなどの既存のWebサイト生成システムと比較すると、
多段階フィードバックシステムと強化学習による継続的改善により、
より高品質なWebサイトを生成できることが実証されています。

一般的なLLMベースのコード生成システムとの比較では、
ドメイン特化的な視覚フィードバックの重要性が明らかになりました。
汎用的なコード生成能力だけでは、Webサイトの品質を十分に確保できないことが示されています。

4. 実用性評価

4.1 実装の容易性

WebGen-Agentの実装容易性は比較的高いと評価できます。
システムは既存のVLMとGUIエージェント技術を活用しており、
新しいアーキテクチャを一から構築する必要がありません。

コードとモデルがGitHubで公開されており、再現可能性が確保されています。
WebGen-Benchデータセットも利用可能で、他の研究者が同様の実験をできます。

ただし、視覚的評価とGUIテストの統合には一定の技術的複雑さがあります。
スクリーンショット撮影、VLMによる評価、GUIエージェントの操作など、
複数のコンポーネントの協調動作が必要です。

4.2 計算効率

計算効率の観点では、複数段階の評価プロセスにより計算コストが高くなります。
各ステップでスクリーンショット生成、VLM評価、GUIテストを実行するため、
従来の単純なコード生成と比較して時間とリソースを要します。

しかし、反復的改善により最終的な品質が向上するため、
手動での修正コストを考慮すると全体的な開発時間は短縮される可能性があります。

Step-GRPO訓練は一度実行すれば持続的な性能向上が期待できるため、
長期的な観点では計算コストを削減する投資といえます。

4.3 応用可能性

WebGen-Agentの応用可能性は極めて高く、複数の分野での活用が期待されます。

Webサイト制作業界においては、初期プロトタイプの迅速な生成や
クライアント要求の視覚的確認において大きな価値を提供できます。
特に、非技術者でも自然言語でWebサイトを指定できる点は重要です。

教育分野では、Web開発の学習支援ツールとして活用できます。
学習者が要求を自然言語で記述し、それがどのようにコードに変換されるかを
視覚的に確認できるため、教育効果が期待されます。

企業の内部ツール開発においても、プロトタイプ作成の効率化や
非技術部門からの要求の迅速な実現に貢献できます。

5. まとめと所感

5.1 論文の意義

この論文は、コード生成における視覚的な品質評価の重要性を明確に示した重要な研究です。
従来のコード生成研究が構文的正しさや実行可能性に焦点を当てていた中で、
実際のユーザー体験に直結する視覚的品質と操作性を評価対象に含めた意義は大きいです。

WebGen-Agentの多段階フィードバックシステムは、AI支援による創造的作業の新しいパラダイムを示しています。
単純な1回性の生成ではなく、継続的な評価と改善を通じてより高品質な成果物を得る手法は、
他のドメインにも応用可能な汎用性があります。

Step-GRPOによるステップレベル強化学習の導入も技術的に重要な貢献です。
最終結果だけでなく過程での品質も重視する学習手法は、
複雑なタスクにおけるAIの意思決定の能力向上に寄与しています。

5.2 今後の展望

この研究により明らかになった今後の発展方向性は多岐にわたります。

まず、視覚的評価の精度向上が重要な課題です。
現在のVLMベースの評価をより客観的で一貫性のあるものに改善することで、
さらに高品質なWebサイト生成が可能になります。

より複雑なWebアプリケーションへの拡張も興味深い方向性です。
現在は比較的シンプルなWebサイトが対象ですが、
動的なコンテンツや複雑なインタラクションを持つアプリケーションへの適用が期待されます。

他のドメインへの応用も重要な展開です。
モバイルアプリ開発、デスクトップアプリケーション、ゲーム開発など、
視覚的品質が重要な他の分野での活用が考えられます。

ユーザビリティテストの自動化も発展の可能性があります。
現在のGUIエージェントテストをより高度なユーザビリティ評価に拡張することで、
より使いやすいインターフェースの自動生成が可能になります。

最終的に、この研究は人工知能による創造的な作業支援の新しい可能性を示し、
技術者と非技術者の間の境界を低くする重要な一歩を踏み出したといえます。
自然言語による要求仕様から高品質なWebサイトを自動生成する技術は、
デジタル化社会における創造性の民主化に大きく貢献すると期待されます。