Automated Webpage Generation from Hand-Drawn Mockups Using ResNet-50 and Deep Learning

There are usual web design and development processes used earlier, which consisted of transforms of the graphical patterns to HTML or combined with errors. On this process, frequent interaction between designers and software engineers continues to stand out. Thus, with the web development requests growing, there is a real need to seek better solutions that generate websites in the least possible time and reduce the effect of modify. Now, we suggest a new solution to fill up the gap in converting hand-drawn mockups for UI designs to application code with the help of computer vision and deep learning concepts. The proposed method begins with the use of hand-sketched mockups for the detection of the main areas of the web interface: buttons, text fields, and images. We build a deep learning model that generates HTML code for connecting design and development directly. Our system trained on a dataset of mockups, generates most web elements correctly. Our method accuracy in experiments was 93 %, with an overall validation accuracy of 80 %. These results show the value of our method and suggest that much of the manual coding currently required for web development can, in principle be minimized. The automated system not only creates web pages more effectively once the system is established but also allows designers to try out more design possibilities quickly without actually encoding. This would allow designers to focus more on their creativity rather than becoming great coders. With this, the effort of the developer is also reduced because he has to do less and less manual coding. Another important point to be noted is that the principles herein are not only concerning web development but also most of the other pertinent areas in software development.