SketchCode – Image into HTML Codes

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

As a result, the process is complex and may not guarantee to get exact result but generate approximate website wire-frame. For this reason, user may not get accurate data.

Besides, this project builds on the synthetically generated dataset and model architecture from pix2code by Tony Beltramelli and the Design Mockups project from Emil Wallner.

Note: Although, this project is meant as a proof-of-concept so, the model isn’t (yet) built to generalize to the variability of sketches seen in actual wireframes .Thus, its performance relies on wireframes resembling the core dataset.

Installation Procedure


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

Install dependencies

Example :

Download the data and pretrained weights:

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

General Usage

Converting a single image into HTML code, using weights:

Converting a batch of images in a folder to HTML:

Train the model:

Evalute the generated prediction using the BLEU score

Don’t worry, File will be unlocked as soon as the following task is completed.

Thank you!



You may also like...