Generating Website Codes from Images

Abstract

Brainstorm website layout ideas usually start with everyone giving out their mockups, and all the team members will discuss to finalize the layout of the user interface. Once a vision of that mockup is accepted, it is given to the designer to sketch it digitally on computer software (i.e., Photoshop, Figma, Sketch). When the designer completes, the developer based on the final design to code the UI/UX of the website. As we can see, the process requires three stages, which can be time-consuming. Therefore, if anyone has an idea for the professional website layout, they can visualize it by drawing on sketches. However, it can be impossible for them to make a usable website without designers and website developers. Due to that reason, our primary goal in this paper is to help individuals transform their hand-drawn sketch images into a website that can be deployed. To achieve that goal, we present two approaches: classical computer vision techniques and the other using a deep learning model to detect the sketch and execute the conversion. Furthermore, our evaluation shows that deep learning is the most promising direction. Still, classical techniques also improve the model’s input data by applying it in the pre-processing image.