次回の更新記事:LLM同士による人工言語コミュニケーションで発見され…(公開予定日:2024年12月16日)

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

   

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

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

【告知】AIDB HRの人材側登録者全員に対し、業界研究の手間を削減できるように「AI事業を行う企業リスト」を配布します。無料登録後すぐに閲覧とダウンロードが可能です。▼



参照論文情報

  • タイトル: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とは
プレミアム会員(記事の購読)について


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






PAGE TOP