ashnkumar/sketch-code
Sketch Code
Sketch-code est un outil de prototypage web par deep learning et un convertisseur image-vers-HTML conçu pour transformer des maquettes de sites web dessinées à la main en code HTML structurel. Il utilise un analyseur de wireframes par réseau de neurones pour reconnaître les éléments visuels dans les croquis et les mapper vers des représentations de mise en page web correspondantes.
Le système emploie une architecture basée sur Keras pour entraîner et évaluer des modèles de reconnaissance à l'aide de jeux de données de wireframes dessinés à la main et de HTML de référence. Il découple la mise en page structurelle du design visuel en permettant l'injection de couches CSS personnalisées lors du processus de compilation.
Le projet couvre le prototypage frontend automatisé et la génération de mise en page UI, incluant le mapping supervisé image-vers-code et l'évaluation de la précision des prédictions pour mesurer la sortie générée par rapport aux références de vérité terrain.
Features
- Sketch-to-HTML Converters - Transforms hand-drawn website sketches into structured HTML code using a deep learning model for rapid prototyping.
- Mockup-to-HTML Converters - Provides a deep learning model that translates visual mockups of website layouts into functional HTML code.
- Keras Model Implementations - Uses the Keras API to define and optimize the neural network layers responsible for visual-to-code translation.
- Image-to-Code Networks - Implements a neural network specialized in mapping visual pixels from hand-drawn sketches to structural markup language.
- Visual Element Recognition Training - A capability in the project to train a network to identify wireframe elements using custom datasets and pretrained weights.
- Wireframe Parsers - Utilizes a neural network designed to recognize hand-drawn visual elements and map them to web layout representations.
- Deep Learning Design Tools - Acts as a deep learning-powered prototyping tool that converts sketches into functional HTML.
- Hand-Drawn Code Conversion - Turns hand-drawn sketches of website layouts into functional HTML code using deep learning.
- Frontend Prototyping Tools - Provides automated tools to convert visual mockups and sketches into functional frontend code to accelerate prototyping.
- Hybrid CNN-RNN Architectures - Implements a hybrid CNN-RNN architecture to translate visual wireframe features into structural HTML sequences.
- Vision Model Training - Implements a framework for training vision models to recognize hand-drawn wireframes and map them to HTML.
- Image-To-Code Model Training - Trains a neural network to map hand-drawn visual elements to HTML representations using specialized datasets.
- CSS Styling - Supports applying custom visual styles through a decoupled CSS injection layer during the compilation process.
- Generative UI Layouts - Generates structural UI layouts from image inputs, allowing for a separate layer of visual design.
- CSS Style Injections - Provides a mechanism to inject custom CSS layers post-generation to decouple structural layout from visual styling.
