Web development usually follows with analyzing the functionality, designing the user interface (UI) prototype, implementing the UI by front-end (FE) developers and implementing the REpresentational State Transfer (RESTful) application programming interface (API) by back-end (BE) programmers. Unfortunately, web development is a tedious, cumbersome, and time-consuming task, which makes it a challenge for the FE programmers to work in an efficient way. In this paper, we propose an approach, image2emmet, to assist FE programmers in implementing the UI. First, we collect HyperText Markup Language, Cascading Style Sheets (HTML-CSS) dataset in an automatic and efficient way. The HTML-CSS dataset used for model training consists of HTML-CSS code and its display images. Second, the faster region-based convolutional neural network (CNN) (R-CNN) is utilized to detect the UI component. Finally, we build a model combining CNN and long short-term memory (LSTM) to transform the UI component into the HTML-CSS code. The empirical study demonstrates that image2emmet can achieve a precision of 80% on the UI component detection and 60% on the transformation of UI component into HTML-CSS code. K E Y W O R D S code generation, HTML-CSS code, UI component, web development
| INTRODUCTIONNowadays, there are over 1.2 billion websites 1 on the world wide web. [1][2][3] Websites are available in almost every field of the blog, business, brochure, crowdfunding, e-commerce, education, media or entertainment, and so on. A nice user interface (UI) of the website can attract people and allow them to conveniently find the information they need. The development steps of the website in recent years follow with analyzing the functionality, designing the UI prototype, implementing the UI by front-end (FE) developers, and implementing the RESTful (REpresentational State Transfer) application programming interface (API) by back-end (BE) programmers. 4 Besides, FE web development is a practice of producing HTML, CSS, and JS (JavaScript) files for a website. Once the designers finish designing a UI prototype, FE developers need to implement the UI via various tools or libraries such as Semantic UI. 2 Unfortunately, the procedure of implementing the UI is a tedious, cumbersome, and timeconsuming task and makes it a challenge for the FE programmers to work in an uneconomical way.