Research And System Implementation On Web Front-end Code Generation

During Web development,designers need to design beautiful UIs(User Interface)and front-end developers need to reproduce these UIs with HTML(HyperText Markup Language)and CSS(Cascading Style Sheets)code.Designers would refer to some screenshots of competing software and analyze the types of UI components when designing a new UI..Moreover,the front-end developers also need to analyze the UI component categories and write HTML and CSS code for the components while reproducing the UI.However,the above two steps of UI component identification and UI component code writing are both boring,time-consuming and laborious.To alliviate the above-mentioned problems,this thesis conducts studies on the analysis and coding of UI components for the Web front-end development.First,we study the recognition of Web UI components from the perspective of object detection.Second,we study the code generation of Web UI component from the perspective of text generation.Finally,based on the Web UI component recognizer and Web UI component code generator,we build a web front-end code generation system.The specific work is as follows:(1)The recognition of Web UI components based on object detection.First,we compare two UI libraries of Bootstrap and Semantic UI from 10 aspects,and select Semantic UI as the target UI library.Second,based on the Semantic UI,we design an automatic Web UI dataset collecting algorigthm.The evaluation result shows that this algorithm could generates tens of thousands of dataset within an hour.Third,we propose a model for the Web UI component recognition based on Faster R-CNN.The evaluation result shows that this appraoch can be used to identify components with an AP(Average Precision)being more than 80%.(2)The code generation of Web UI component based on text generation.First,we design an algorithm to convert the HTML code to the emmet code.Second,we present a model along with its training hyperparameters for the Web UI code generation.Finally,we carry out the experimental evaluation which shows that the approach can generate component code with the accuracy being more than 60%(3)The Web front-end code generation system based on machine learning.This system has three modules:system management,Web UI component identification,and Web UI component code generation.It provides Web UI component identification and component code generation services for relevant personnel in the Web domain,and provides remote management of datasets for system administrators.