WebSight データセットと Sightseer モデル

Hugging Face は、WebSight という大規模な合成データセットをリリースしました。このデータセットは、ビジョン・ランゲージモデル (VLM) がウェブサイトのスクリーンショットを機能的な HTML コードに変換できるように設計されています。この取り組みは、開発者が UI デザインを実際のウェブサイトに変換する際の手作業を削減し、非開発者がウェブインターフェースを作成するハードルを下げることを目的としています。

WebSight: UI 変換のための大規模合成データセット

WebSight は、スクリーンショットと HTML コードのペアを大量に提供し、AI モデルが視覚的なウェブデザインをコードに変換する訓練に使用できます。合成データを活用することで、実際の HTML に見られるノイズや複雑さを回避し、モデルの学習をより効率的に行うことができます。

このデータセットは、主に 2 つのバージョンにわたって進化しています：

  • WebSight-v0.1: 2024 年 1 月にリリースされ、HTML コードと対応するスクリーンショットのペアが 823,000 件含まれています。
  • WebSight-v0.2: 2 百万件に規模拡大された更新版です。このバージョンでは、スクリーンショット内に実画像が導入され、従来の CSS から Tailwind CSS へと移行しています。

Sightseer: スクリーンショットを機能的な HTML に変換

Sightseer は、WebSight データセットでファインチューニングされたビジョン・ランゲージモデルです。このモデルは、ウェブページのスクリーンショットを入力として受け取り、対応する機能的な HTML コードを生成することができます。

基本的な構造やスタイリングに加えて、Sightseer は生成された HTML に、元の入力スクリーンショットに含まれる画像に非常に近い画像を組み込むことができます。

Web 開発と UI デザインへの影響

WebSight と Sightseer のようなモデルが利用可能になることで、UI 開発のワークフローが変化しつつあることが示唆されます。紙の UI スケッチを含む視覚的デザインを迅速に機能的なコードへ変換できるため、これらのツールはプロの開発者にとって反復作業の時間を大幅に短縮できます。

さらに、この技術により、正式なコーディング経験がない人でも機能的なウェブインターフェースを作成しやすくなり、ローコードソフトウェア開発におけるビジュアル言語モデルの実用的な応用例が示されています。

Sources