HTML Code Generation from Website Images and Sketches using Deep Learning-Based Encoder-Decoder Model

Making mockups of the website’s numerous pages is the first step in website design. Mock-ups can be created manually, using graphic design software, or using specialist tools. Then, software engineers turn the mock-up into structured HTML code. It takes a lot of time and effort to build the required template by repeating this method several times. This work proposes two deep learning-based encoder-decoder models that automatically generate HTML (Hypertext Markup Language) code from screenshot images of web pages and hand-drawn sketches. The webpage images are pre-processed using grayscaling, binarization and contour detection techniques before being handed over to the model as input. With an F1score of 0.91, the CNN-LSTM-based encoder-decoder model has outclassed the RNN-LSTM-based encoder-decoder model, which has an F1-score of 0.74.

I. Introduction

The relevance of Internet websites is continuously increasing due to technological advances. A website can build goodwill among customers and prospects regardless of our profession or business. The user may quickly access the website and express their wants with a clear next step. Many websites are developed with the aim of advertising and product marketing. A website is a collection of online pages linked together and uniquely identified by a domain name. A website must be mobile-friendly, accessible to all users, have a well-designed information architecture, be quick to load, and have good navigation and error handling. As a result, designing the most dynamic web pages is one of the most significant aspects of developing a website. Websites must be straightforward and appealing so the user can interact easily. However, creating a web page with such functional elements is time-consuming. To construct a web page, graphic designers, software engineers, end users, experts, and employed individuals from various professions must work together. Creating a web page often begins with a mock-up design on paper or with graphic editing software by mock-up artists or graphic designers. Based on these mock-ups, the software specialists next construct the code for the websites. The final web pages could alter in response to user feedback. As a result, the transformation process could include many repeating actions. Rewriting code for web page components and page structure changes over time makes the process arduous. In this instance, a better approach for designing web pages is required. Small businesses focus more on components and value than converting structures into applicable application codes. To avoid the frustrations frontend engineers and designers have while creating exact GUIs (Graphical User Interfaces), more effective resolution in web page design is required. The use of automatic code generation to design web pages is becoming more popular as a research area. The time spent programming, the expense of the process, and the number of resources used is reduced when web pages are generated automatically. The faster dynamic plan arrangements deliver the finished site in less time.