# ashnkumar/sketch-code

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ashnkumar-sketch-code).**

5,143 stars · 681 forks · Python

## Links

- GitHub: https://github.com/ashnkumar/sketch-code
- awesome-repositories: https://awesome-repositories.com/repository/ashnkumar-sketch-code.md

## Topics

`augmentation` `deep-learning` `image-processing` `keras` `tensorflow`

## Description

Sketch-code is a deep learning web prototyping tool and image-to-HTML converter designed to transform hand-drawn website mockups into structural HTML code. It utilizes a neural network wireframe parser to recognize visual elements in sketches and map them to corresponding web layout representations.

The system employs a Keras-based architecture for training and evaluating recognition models using datasets of hand-drawn wireframes and reference HTML. It decouples structural layout from visual design by allowing the injection of custom CSS layers during the compilation process.

The project covers automated frontend prototyping and UI layout generation, including supervised image-to-code mapping and prediction accuracy evaluation to measure generated output against ground-truth references.

## Tags

### User Interface & Experience

- [Sketch-to-HTML Converters](https://awesome-repositories.com/f/user-interface-experience/sketch-to-html-converters.md) — Transforms hand-drawn website sketches into structured HTML code using a deep learning model for rapid prototyping. ([source](https://github.com/ashnkumar/sketch-code#readme))
- [Hand-Drawn Code Conversion](https://awesome-repositories.com/f/user-interface-experience/wireframing-software/wireframe-to-code-conversion/hand-drawn-code-conversion.md) — Turns hand-drawn sketches of website layouts into functional HTML code using deep learning.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/css-styling.md) — Supports applying custom visual styles through a decoupled CSS injection layer during the compilation process. ([source](https://github.com/ashnkumar/sketch-code/blob/master/Document_kr.md))
- [Generative UI Layouts](https://awesome-repositories.com/f/user-interface-experience/generative-ui-layouts.md) — Generates structural UI layouts from image inputs, allowing for a separate layer of visual design.

### Artificial Intelligence & ML

- [Mockup-to-HTML Converters](https://awesome-repositories.com/f/artificial-intelligence-ml/mockup-to-html-converters.md) — Provides a deep learning model that translates visual mockups of website layouts into functional HTML code.
- [Keras Model Implementations](https://awesome-repositories.com/f/artificial-intelligence-ml/neural-network-implementations/keras-model-implementations.md) — Uses the Keras API to define and optimize the neural network layers responsible for visual-to-code translation.
- [Image-to-Code Networks](https://awesome-repositories.com/f/artificial-intelligence-ml/neural-networks/image-to-code-networks.md) — Implements a neural network specialized in mapping visual pixels from hand-drawn sketches to structural markup language.
- [Visual Element Recognition Training](https://awesome-repositories.com/f/artificial-intelligence-ml/visual-element-recognition-training.md) — A capability in the project to train a network to identify wireframe elements using custom datasets and pretrained weights. ([source](https://github.com/ashnkumar/sketch-code/blob/master/README.md))
- [Wireframe Parsers](https://awesome-repositories.com/f/artificial-intelligence-ml/wireframe-parsers.md) — Utilizes a neural network designed to recognize hand-drawn visual elements and map them to web layout representations.
- [Hybrid CNN-RNN Architectures](https://awesome-repositories.com/f/artificial-intelligence-ml/machine-learning/frameworks/model-construction/neural-network-layers/convolution-layers/layered-architectures/sequential-text-processing-pipelines/hybrid-cnn-rnn-architectures.md) — Implements a hybrid CNN-RNN architecture to translate visual wireframe features into structural HTML sequences.
- [Vision Model Training](https://awesome-repositories.com/f/artificial-intelligence-ml/machine-learning/infrastructure/model-training-and-tuning/training-frameworks/model-training-frameworks/vision-model-training.md) — Implements a framework for training vision models to recognize hand-drawn wireframes and map them to HTML.
- [Image-To-Code Model Training](https://awesome-repositories.com/f/artificial-intelligence-ml/text-to-image-model-training/image-to-code-model-training.md) — Trains a neural network to map hand-drawn visual elements to HTML representations using specialized datasets. ([source](https://github.com/ashnkumar/sketch-code#readme))

### Development Tools & Productivity

- [Deep Learning Design Tools](https://awesome-repositories.com/f/development-tools-productivity/deep-learning-design-tools.md) — Acts as a deep learning-powered prototyping tool that converts sketches into functional HTML.

### Web Development

- [Frontend Prototyping Tools](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-prototyping-tools.md) — Provides automated tools to convert visual mockups and sketches into functional frontend code to accelerate prototyping.
- [CSS Style Injections](https://awesome-repositories.com/f/web-development/client-side-components/script-injection-mechanisms/dom-script-injection/ui-element-injection/css-style-injections.md) — Provides a mechanism to inject custom CSS layers post-generation to decouple structural layout from visual styling.