Sketch Code

screenshot of Sketch Code

Keras model to generate HTML code from hand-drawn website mockups. Implements an image captioning architecture to drawn source images.

Overview

SketchCode is an innovative tool that transforms hand-drawn web mockups into functional HTML code using deep learning technology. It employs an image captioning architecture, showcasing the exciting convergence of design and development. This application is particularly useful for designers looking to quickly prototype their ideas or for developers who need to convert rough sketches into code efficiently.

While still a proof-of-concept, SketchCode builds on previous advancements in synthetic datasets and model architectures, offering a glimpse into the future of automated front-end development. Although it has limitations in generalizing across diverse sketch styles, it represents a significant step forward in web development tools.

Features

  • Deep Learning Model: Utilizes advanced algorithms to interpret hand-drawn wireframes and generate corresponding HTML code.
  • Image Captioning Architecture: Adopts techniques from image captioning to create structured HTML markup from visual inputs.
  • Pre-trained Weights: Offers a straightforward way to convert images into HTML without requiring extensive training time.
  • Batch Processing: Supports converting multiple images from a folder at once, saving time for users with several designs.
  • BLEU Score Evaluation: Allows users to assess the quality of generated HTML through established metrics.
  • Python Compatibility: Built for Python 3, ensuring access to modern programming features while excluding older versions.
  • Open-Source License: Distributed under the MIT License, promoting flexibility and collaboration within the developer community.