SketchToCode

Generating HTML Code from a hand-drawn wireframe

SketchCode is a deep learning model that takes hand-drawn web mockups and converts them into working HTML code. It uses an image captioning architecture to generate its HTML markup from hand-drawn website wireframes.

For more information, check out this post: Automating front-end development with deep learning

This project is based on Ashwin Kumar's sketch to code.

Note: This project can only give HTML for inputs resembling to the core dataset and not genralized data.

Setup

Prerequisites

• Python 3 (not compatible with python 2)
• pip

Install dependencies

pip install -r requirements.txt

Download data to train the model

Downlaod weights and model

Unzip the data and use it for the training of the model.

Train the model:

python train.py --data_input_path 'path/to/all_data/' --validation_split 'validation_split default is 0.2' --vocab_path 'path/to/vocabulary.vocab' --epochs "no of epochs default is 1" --model_output_path "path/to/save/weights and model"

Converting an example drawn image into HTML code, using pretrained weights:

python convert_single_image.py --png_path 'path/to/pngfile' --output_folder 'path/to/output_folder' --model_json_file 'path/to/model_json.json' --model_weights_file 'path/to/pretrained_weights' --vocab_path 'path/to/vocabulary.vocab'