emilwallner/screenshot-to-code

This project is a neural network (an AI system modeled loosely on how the brain works) that takes a screenshot or design mockup image and automatically converts it into working HTML and CSS code, the markup languages used to build web pages. Instead of a designer handing a mockup to a developer who then manually translates it into code, this AI does that translation step automatically. The system is built in three stages. The simplest version (called "Hello World") handles basic layouts, the middle version works with raw HTML, and the most capable version uses a component framework called Bootstrap. The Bootstrap version achieves 97% accuracy and is the only one that can handle new, unseen design mockups reliably. It works by learning 16 design tokens, simplified labels for UI components, that it then translates into HTML and CSS. The model is built using Keras, a deep learning library, running on top of a Jupyter Notebook environment, which is an interactive coding tool popular in data science. It uses an encoder-decoder architecture: the encoder reads the design image, and the decoder generates code token by token. The best-performing model uses a GRU (a type of recurrent neural network unit) instead of an older variant called LSTM. You would use this project if you are a developer or researcher interested in experimenting with AI-driven front-end code generation, or if you want to learn how image-to-code translation models work. It is more of a research prototype than a production tool, the dataset it was trained on is small and homogeneous, so performance on complex real-world layouts may vary.