WebサイトのスクリーンショットをHTMLコードに変換するWebSightデータセット
Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset
WebサイトのデザインやスクリーンショットをHTMLコードに変換する作業を効率化するため、ビジョン・言語モデル(VLM)を活用したローコードソリューションの研究が行われた。この分野の課題である高品質なデータセットの不足を解消するため、合成データセット「WebSight」が開発された。2024年1月に公開されたWebSight-v0.1は82万3千件のHTMLコードとスクリーンショットのペアから構成されていたが、コミュニティからのフィードバックを受け、2024年3月にリアルな画像とTailwind CSSを採用し、200万件にスケールアップしたWebSight-v0.2がリリースされた。このデータセットを用いてファインチューニングされたモデル「Sightseer」は、ウェブページスクリーンショットから機能的なHTMLコードへの変換能力を示し、生成されたHTMLにスクリーンショットに類似した画像を組み込むことも可能である。この技術は、UIデザインからコード生成までのイテレーション時間を短縮し、開発者だけでなく非開発者にもUI開発プロセスへのアクセスを容易にすることを目指している。WebSightデータセットはオープンソースとして公開されている。
- 合成データセット「WebSight-v0.1」(82万3千件のHTMLコードとスクリーンショットのペア)が2024年1月に公開された
- コミュニティからのフィードバックを受け、リアルな画像とTailwind CSSを採用した200万件スケールの「WebSight-v0.2」が2024年3月にリリースされた
- WebSightデータセットでファインチューニングされたモデル「Sightseer」が開発され、スクリーンショットから機能的なHTMLコードへの変換能力を示した
画像からHTMLコードを生成するVLM向けデータセット「WebSight」は、ローコード/ノーコードのUI開発を大きく進展させる可能性がある。特にv0.2では200万件の高品質ペアとTailwind CSSを採用しており、実用性が向上している。UIデザインから実装までのイテレーションを短縮し、開発者・非開発者双方の生産性向上に寄与する技術であり、今後同様のVLM活用型コード生成ツールの普及を後押しする可能性があるため、関連スタートアップやOSSエコシステムの動向に注目したい。