スクショからHTMLとCSSのコードをLLMが生成する『Design2Code』タスク、プロンプト手法やファインチューニングで高い性能を確認

   
★AIDB会員限定Discordを開設いたしました! ログインの上、マイページをご覧ください。

★企業と人材のマッチングサービスを準備中です。アンケートのご協力をお願いいたします!↓

スタンフォード大・ジョージア工科大・マイクロソフト・DeepMindの研究者らは共同で、スクリーンショットからHTMLとCSSのコードをGPT-4やGemini Proなどで生成するプロンプト手法を考案しました。

さらに本タスクでGemini Proに匹敵する新しいオープンソースモデルも開発されました。


AIDBの全記事が読み放題のプレミアム会員登録はこちらから↓

参照論文情報

背景

ウェブアプリケーションを作るのは一般に難しい仕事で、アイデア通りに実装できないこともしばしばあります。その理由は、ウェブサイトのデザインを実際に機能するコードで作るのが難しいためです。レイアウトを理解した上で、構造化されたコードを作成するには、専門的なスキルを要します。

もしデザインから自動的にコードを生成できれば、フロントエンド開発の民主化と言えます。しかし、自然言語からのコード生成は進歩している一方で、ユーザーインターフェース(UI)デザインからのコード生成はあまり注目されていません。

UIには多様な視覚的・テキスト的要素があり、自動コード生成には様々な課題があります。これまでにもいくつかの試みはありましたが、単純な例に限定されていて、実際のフロントエンド開発に役立つものではありませんでした。

一方で最近、高い性能を持つマルチモーダルLLMが台頭しています。代表例はGPT-4VやGemini(そして新たにClaude3も)です。UIデザインのスクリーンショットを入力として、望むウェブページにレンダリングできるHTMLコードを出力するという、全く新しいパラダイムが実現可能になりました。研究者らは、このようなタスクを「Design2Code」と呼び、現在利用可能なマルチモーダルモデルを用いてベンチマークを行い、フロントエンドエンジニアリングの自動化がどこまで進んでいるかを理解することにしました。また、その過程で、効果的なプロンプト手法と新しいモデルの開発を行いました。

以下で詳しく紹介します。

本記事を読むにはAIDBのアカウントが必要です。


※ログイン/初回登録後、下記ボタンを押してください。







■サポートのお願い
AIDBを便利だと思っていただけた方に、任意の金額でサポートしていただけますと幸いです。






業界/カテゴリー

PAGE TOP