Transforming Hand Drawn Wireframes into Front-End Code with Deep Learning
Research output: Contribution to journal › Research article › Contributed › peer-review
Contributors
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%
Details
Original language | English |
---|---|
Pages (from-to) | 4302-4321 |
Number of pages | 20 |
Journal | Computers, Materials and Continua |
Volume | 72 |
Issue number | 3 |
Publication status | Published - 2022 |
Peer-reviewed | Yes |
Keywords
ASJC Scopus subject areas
Keywords
- computer vision, Deep learning, design process, dsl, front-end, high fidelity, html, low fidelity, wireframes