Débloquer la conversion de captures d'écran web en code HTML avec le jeu de données WebSight

Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset

March 14, 2024

Auteurs: Hugo Laurençon, Léo Tronchon, Victor Sanh

cs.AI

Résumé

L'utilisation de modèles vision-langage (VLMs) dans le développement web représente une stratégie prometteuse pour accroître l'efficacité et débloquer des solutions sans code : en fournissant une capture d'écran ou un croquis d'une interface utilisateur, un VLM pourrait générer le code nécessaire pour la reproduire, par exemple dans un langage comme HTML. Malgré les avancées des VLMs pour diverses tâches, le défi spécifique de convertir une capture d'écran en un code HTML correspondant a été peu exploré. Nous postulons que cela est principalement dû à l'absence d'un jeu de données approprié et de haute qualité. Ce travail introduit WebSight, un jeu de données synthétique composé de 2 millions de paires de codes HTML et de leurs captures d'écran correspondantes. Nous affinons un VLM de base sur notre jeu de données et démontrons sa capacité à convertir des captures d'écran de pages web en code HTML fonctionnel. Pour accélérer la recherche dans ce domaine, nous rendons WebSight open-source.

English

Using vision-language models (VLMs) in web development presents a promising strategy to increase efficiency and unblock no-code solutions: by providing a screenshot or a sketch of a UI, a VLM could generate the code to reproduce it, for instance in a language like HTML. Despite the advancements in VLMs for various tasks, the specific challenge of converting a screenshot into a corresponding HTML has been minimally explored. We posit that this is mainly due to the absence of a suitable, high-quality dataset. This work introduces WebSight, a synthetic dataset consisting of 2 million pairs of HTML codes and their corresponding screenshots. We fine-tune a foundational VLM on our dataset and show proficiency in converting webpage screenshots to functional HTML code. To accelerate the research in this area, we open-source WebSight.