スタンフォード大・ジョージア工科大・マイクロソフト・DeepMindの研究者らは共同で、スクリーンショットからHTMLとCSSのコードをGPT-4やGemini Proなどで生成するプロンプト手法を考案しました。
さらに本タスクでGemini Proに匹敵する新しいオープンソースモデルも開発されました。
AIスキル人材と企業をつなぐマッチングサービス「AIDB HR」を開始しました！現在、期間限定で、ギフト券が必ずもらえる新規登録キャンペーンも行っています。
参照論文情報
- タイトル：Design2Code: How Far Are We From Automating Front-End Engineering?
- 著者：Chenglei Si, Yanzhe Zhang, Zhengyuan Yang, Ruibo Liu, Diyi Yang
- 所属：スタンフォード大学、ジョージア工科大学、マイクロソフト、Google DeepMind
背景
ウェブアプリケーションを作るのは一般に難しい仕事で、アイデア通りに実装できないこともしばしばあります。その理由は、ウェブサイトのデザインを実際に機能するコードで作るのが難しいためです。レイアウトを理解した上で、構造化されたコードを作成するには、専門的なスキルを要します。
もしデザインから自動的にコードを生成できれば、フロントエンド開発の民主化と言えます。しかし、自然言語からのコード生成は進歩している一方で、ユーザーインターフェース(UI)デザインからのコード生成はあまり注目されていません。
UIには多様な視覚的・テキスト的要素があり、自動コード生成には様々な課題があります。これまでにもいくつかの試みはありましたが、単純な例に限定されていて、実際のフロントエンド開発に役立つものではありませんでした。
一方で最近、高い性能を持つマルチモーダルLLMが台頭しています。代表例はGPT-4VやGemini（そして新たにClaude3も）です。UIデザインのスクリーンショットを入力として、望むウェブページにレンダリングできるHTMLコードを出力するという、全く新しいパラダイムが実現可能になりました。研究者らは、このようなタスクを「Design2Code」と呼び、現在利用可能なマルチモーダルモデルを用いてベンチマークを行い、フロントエンドエンジニアリングの自動化がどこまで進んでいるかを理解することにしました。また、その過程で、効果的なプロンプト手法と新しいモデルの開発を行いました。
以下で詳しく紹介します。
また記事の購読には、アカウント作成後の決済が必要です。
※ログイン/初回登録後、下記ボタンを押してください。
AIDBとは
プレミアム会員（記事の購読）について
■サポートのお願い
AIDBを便利だと思っていただけた方に、任意の金額でサポートしていただけますと幸いです。
PAGE TOP