웹 스크린샷을 HTML 코드로 변환하는 기술의 해제: WebSight 데이터셋을 활용하여

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

March 14, 2024

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

cs.AI

초록

웹 개발에서 비전-언어 모델(VLMs)을 활용하는 것은 효율성을 높이고 노코드 솔루션의 가능성을 열어줄 유망한 전략으로 여겨집니다: 예를 들어, UI의 스크린샷이나 스케치를 제공하면 VLM이 이를 HTML과 같은 언어로 재현하는 코드를 생성할 수 있습니다. 다양한 작업을 위한 VLMs의 발전에도 불구하고, 스크린샷을 해당 HTML로 변환하는 특정 과제는 거의 탐구되지 않았습니다. 우리는 이 문제가 주로 적합한 고품질 데이터셋의 부재 때문이라고 생각합니다. 이 연구에서는 2백만 쌍의 HTML 코드와 해당 스크린샷으로 구성된 합성 데이터셋인 WebSight를 소개합니다. 우리는 이 데이터셋을 기반으로 기초 VLM을 미세 조정하여 웹페이지 스크린샷을 기능적인 HTML 코드로 변환하는 데 능숙함을 보여줍니다. 이 분야의 연구를 가속화하기 위해 WebSight를 오픈소스로 공개합니다.

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.