Open Access iconOpen Access



Transforming Hand Drawn Wireframes into Front-End Code with Deep Learning

Saman Riaz1, Ali Arshad2, Shahab S. Band3,*, Amir Mosavi4

1 Department of Computer Science, National University of Technology, Islamabad, 44000, Pakistan
2 Department of Computer Science, Institute of Space Technology, Islamabad, 44000, Pakistan
3 Future Technology Research Center, National Yunlin University of Science and Technology, Douliu, 64002, Yunlin, Taiwan
4 Faculty of Civil Engineering, Technische Universitat Dresden, Dresden 01069, Germany

* Corresponding Author: Shahab S. Band. Email: email

Computers, Materials & Continua 2022, 72(3), 4303-4321.


The way towards generating a website front end involves a designer settling on an idea for what kind of layout they want the website to have, then proceeding to plan and implement each aspect one by one until they have converted what they initially laid out into its Html front end form, this process can take a considerable time, especially considering the first draft of the design is traditionally never the final one. This process can take up a large amount of resource real estate, and as we have laid out in this paper, by using a Model consisting of various Neural Networks trained on a custom dataset. It can be automated into assisting designers, allowing them to focus on the other more complicated parts of the system they are designing by quickly generating what would rather be straightforward busywork. Over the past 20 years, the boom in how much the internet is used and the sheer volume of pages on it demands a high level of work and time to create them. For the efficiency of the process, we proposed a multi-model-based architecture on image captioning, consisting of Convolutional neural network (CNN) and Long short-term memory (LSTM) models. Our proposed approach trained on our custom-made database can be automated into assisting designers, allowing them to focus on the other more complicated part of the system. We trained our model in several batches over a custom-made dataset consisting of over 6300 files and were finally able to achieve a Bilingual Evaluation Understudy (BLEU) score for a batch of 50 hand-drawn images at 87.86%


Cite This Article

S. Riaz, A. Arshad, S. S. Band and A. Mosavi, "Transforming hand drawn wireframes into front-end code with deep learning," Computers, Materials & Continua, vol. 72, no.3, pp. 4303–4321, 2022.

cc This work is licensed under a Creative Commons Attribution 4.0 International License , which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.
  • 1301


  • 602


  • 0


Share Link