Die Umwandlung von Web-Screenshots in HTML-Code mit dem WebSight-Datensatz entschlüsseln.

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

March 14, 2024

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

cs.AI

Zusammenfassung

Die Verwendung von Vision-Language-Modellen (VLMs) in der Webentwicklung bietet eine vielversprechende Strategie, um die Effizienz zu steigern und No-Code-Lösungen freizuschalten: Indem ein Screenshot oder eine Skizze einer Benutzeroberfläche bereitgestellt wird, könnte ein VLM den Code zur Reproduktion generieren, beispielsweise in einer Sprache wie HTML. Trotz der Fortschritte bei VLMs für verschiedene Aufgaben wurde die spezifische Herausforderung, einen Screenshot in entsprechendes HTML umzuwandeln, nur minimal erforscht. Wir nehmen an, dass dies hauptsächlich auf das Fehlen eines geeigneten, qualitativ hochwertigen Datensatzes zurückzuführen ist. Diese Arbeit stellt WebSight vor, einen synthetischen Datensatz, der aus 2 Millionen Paaren von HTML-Codes und ihren entsprechenden Screenshots besteht. Wir feinabstimmen ein grundlegendes VLM auf unserem Datensatz und zeigen Kompetenz bei der Umwandlung von Webseiten-Screenshots in funktionalen HTML-Code. Um die Forschung in diesem Bereich zu beschleunigen, stellen wir WebSight als Open-Source zur Verfügung.

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.