The Research And Implementation Of Design Diagram To Componentized HTML Code Generation System

With the popularity of the Internet,the number of network users has grown,and lots of internet companies requires creating a good participation experience for users to increase user stickiness,and ultimately to increase market share.The most intuitive part of improving user experience is to control the development of front-end pages,but small software outsourcing companies are usually unwilling to spend too much manpower and time to implement a complete design and development process.Therefore,to simplify the process and improve the development efficiency,it's necessary to research and develop a system which can automatically generate corresponding front-end HTML code based on sketch of web page from demand side,using code automatic generation technology.At present,the code generation technology based on the template-driven generation method has a wide range of applications in the Internet industry,but there are few products that generate code based on images.Existing technologies for image conversion front-end code usually generate code for web page screenshots,and the generated content is only native HTML code,which has severely deviated from the current mainstream component-based front-end development trend and obviously does not have sufficient application value.To solve the above problems,this subject will develop a front-end componentized HTML code generation system that focuses on hand-drawn design image conversion and is supplemented by visual configuration.The overall implementation of the system utilizes technologies such as the front-end React framework,the back-end Node JS Express framework,and the non-relational database Mongo DB.It includes three major functional modules: data management,page configuration,and code generation.The core algorithm of the system is based on the technology of generating DSL with sketch of web pages,drawing on the algorithm architecture of image description technology,and adopting the encoder-decoder structure.Research can be divided into three modules: image encoding module,language encoding module and decoding module.Image encoding module uses convolutional neural network combined with sparse noise reduction autoencoder for unsupervised training to extract image features.Language encoding module uses word2 vec technology and uses the CBo W model for word embedding encoding.Decoding module uses two methods based on RNN and CNN for comparison.The experiment proves that: decoding module based on CNN and containing 6 sets of convolution and attention modules is selected,and a cluster search method of size 5 is selected to generate the best effect of DSL.With the cooperation of modular components and template compilation introduced in this topic,the system can provide highly flexible visual configuration and real-time preview function,and at the same time,it can generate ideal engineering code.This project innovatively combines the characteristics of front-end code componentization with image description technology,and builds a code generation system with high practical value based on the idea of front-end configuration.The use of this system conforms to the development habits of front-end engineers.It has the function of generating componentized HTML front-end code based on hand-drawn design drawings.It allows people other than developers to easily participate in the project development process,and it facilitates developers to quickly perform subsequent logic coding,effectively saving engineering time.