Automatic HTML Code Generation from Mock-Up Images Using Machine Learning Techniques

The design cycle for a web site starts with creating mock-ups for individual web pages either by hand or using graphic design and specialized mock-up creation tools. The mockup is then converted into structured HTML or similar markup code by software engineers. This process is usually repeated many more times until the desired template is created. In this study, our aim is to automate the code generation process from hand-drawn mock-ups. Hand drawn mock-ups are processed using computer vision techniques and subsequently some deep learning methods are used to implement the proposed system. Our system achieves 96% method accuracy and 73% validation accuracy.