Open Access

ARTICLE

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

by Saman Riaz¹, Ali Arshad², Shahab S. Band^3,*, Amir Mosavi⁴

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:

Computers, Materials & Continua 2022, 72(3), 4303-4321. https://doi.org/10.32604/cmc.2022.024819

Received 01 November 2021; Accepted 25 January 2022; Issue published 21 April 2022

Abstract

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%

---

Keywords

---