Desbloqueando la conversión de capturas de pantalla web en código HTML con el conjunto de datos WebSight

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

March 14, 2024

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

cs.AI

Resumen

El uso de modelos de visión y lenguaje (VLMs) en el desarrollo web presenta una estrategia prometedora para aumentar la eficiencia y habilitar soluciones sin código: al proporcionar una captura de pantalla o un boceto de una interfaz de usuario, un VLM podría generar el código para reproducirla, por ejemplo, en un lenguaje como HTML. A pesar de los avances en VLMs para diversas tareas, el desafío específico de convertir una captura de pantalla en un HTML correspondiente ha sido mínimamente explorado. Postulamos que esto se debe principalmente a la ausencia de un conjunto de datos adecuado y de alta calidad. Este trabajo introduce WebSight, un conjunto de datos sintético que consta de 2 millones de pares de códigos HTML y sus capturas de pantalla correspondientes. Ajustamos un VLM base en nuestro conjunto de datos y demostramos su competencia en la conversión de capturas de pantalla de páginas web a código HTML funcional. Para acelerar la investigación en esta área, liberamos WebSight como código abierto.

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.