draw2code: AI based Auto Web Page Generation from Hand-drawn Page Mock-up

Web pages are conventionally created by first generating rough sketch outlines, then designing those individual components, following which software engineers write code in markup languages like HyperText Markup Language (HTML) and a finished product is rendered. This paper aims at automating the design process and the subsequent coding involved, by using deep learning techniques to create mock-ups from low fidelity prototypes that are hand drawn by the users. This auto code generation helps save time and reduce costs that are associated with the conventional methods of creating web pages. We propose a Document Object Model (DOM) approach which identifies the hierarchy of HTML elements in the sketches and generates its corresponding code. For this approach, we make use of Object Detector and Long Short Term Memory (LSTM) network. An implementation of the approach is also presented along with its results.