This project provides a neural network that converts design mockup images into HTML markup. The Bootstrap version generalizes to new mockups with 97% accuracy, while the raw HTML version remains unproven.
Project overview
This project provides a neural network that converts design mockup images into HTML markup. The Bootstrap version generalizes to new mockups with 97% accuracy, while the raw HTML version remains unproven.
Project type
AI Coding · Model Runtime
Use cases
Coding & Development
Deployment
Refer to project documentation
License
License pending
Best for
Developers and researchers looking to convert design mockups into Bootstrap-based HTML markup.
Key capabilities
A neural network built in three iterations that takes a design image as input and converts it into HTML markup.
Only the Bootstrap version can generalize on new design mockups. It uses 16 domain-specific tokens which are translated into HTML/CSS. It has a 97% accuracy. The best model uses a GRU instead of an LSTM.
Limitations and risks
The current model is trained on a homogeneous and small dataset, making it difficult to determine how well it performs on more complex layouts.
The raw HTML version has potential to generalize, but remains unproven and requires a significant amount of GPUs to train.
Getting started
Requires installing multiple Python dependencies and running via Jupyter notebooks. Install Python dependencies via pip, clone the repository, start Jupyter notebook, and run all cells in the desired notebook.
Evidence and sources
README: The neural network is built in three iterations. Starting with a Hello World version, followed by the main neural network layers, and ending by training it to generalize.
README: 1) Give a design image to the trained neural network
README: 2) The neural network converts the image into HTML markup
README: pip install keras tensorflow pillow h5py jupyter
README: Click this button to open a Workspace on FloydHub