Screenshot-to-code README

The project's README from github.com/emilwallner/Screenshot-to-code. As one markdown file: README.md.

A detailed tutorial covering the code in this repository: Turning design mockups into code with deep learning.

Plug: 👉 Check out my 60-page guide, No ML Degree, on how to land a machine learning job without a degree.

The neural network is built in three iterations. Starting with a Hello World version, followed by the main neural network layers, and ending by training it to generalize.

The models are based on Tony Beltramelli's pix2code, and inspired by Airbnb's sketching interfaces, and Harvard's im2markup.

Note: only the Bootstrap version can generalize on new design mock-ups. It uses 16 domain-specific tokens which are translated into HTML/CSS. It has a 97% accuracy. The best model uses a GRU instead of an LSTM. This version can be trained on a few GPUs. The raw HTML version has potential to generalize, but is still unproven and requires a significant amount of GPUs to train. The current model is also trained on a homogeneous and small dataset, thus it's hard to tell how well it behaves on more complex layouts.

Dataset: https://github.com/tonybeltramelli/pix2code/tree/master/datasets

A quick overview of the process:

1) Give a design image to the trained neural network

Insert image

2) The neural network converts the image into HTML markup

3) Rendered output

Screenshot

Installation

FloydHub

Run on FloydHub

Click this button to open a Workspace on FloydHub where you will find the same environment and dataset used for the Bootstrap version. You can also find the trained models for testing.

Local

pip install keras tensorflow pillow h5py jupyter

git clone https://github.com/emilwallner/Screenshot-to-code.git
cd Screenshot-to-code/
jupyter notebook

Go do the desired notebook, files that end with '.ipynb'. To run the model, go to the menu then click on Cell > Run all

The final version, the Bootstrap version, is prepared with a small set to test run the model. If you want to try it with all the data, you need to download the data here: https://www.floydhub.com/emilwallner/datasets/imagetocode, and specify the correct dir_name.

Folder structure

  |  |-Bootstrap                           #The Bootstrap version
  |  |  |-compiler                         #A compiler to turn the tokens to HTML/CSS (by pix2code)
  |  |  |-resources											
  |  |  |  |-eval_light                    #10 test images and markup
  |  |-Hello_world                         #The Hello World version
  |  |-HTML                                #The HTML version
  |  |  |-Resources_for_index_file         #CSS,images and scripts to test index.html file
  |  |  |-html                             #HTML files to train it on
  |  |  |-images                           #Screenshots for training
  |-readme_images                          #Images for the readme page

Hello World

HTML

Bootstrap

Model weights

Acknowledgments

Screenshot-to-code (emilwallner/Screenshot-to-code)

Searching Database…

16.5K ·GitHub
Screenshot-to-code
Что это такое?Нейросеть, которая превращает картинку с макетом дизайна в HTML-разметку статического сайта — если отрисовать эту разметку, получится исходный дизайн.
Это приложение, которое можно встроить в свою работу, или скорее учебный проект?Это учебный проект, а не боевой инструмент: модели на Keras в ноутбуках Jupyter, к ним прилагается туториал, объясняющий, как устроен код.
Как его запустить?Два варианта: нажать кнопку FloydHub и получить готовое рабочее пространство с окружением, датасетом и обученными моделями, либо открыть локальный ноутбук .ipynb в Jupyter и выполнить Cell > Run all.
Что нужно на моём компьютере, чтобы запустить всё локально?Достаточно установленного Jupyter — модели представляют собой ноутбуки Keras. В версии для Bootstrap идёт небольшой тестовый набор данных, а полный датасет придётся скачать отдельно.
Можно ли скормить ему свои макеты дизайна?Только версия для Bootstrap умеет работать с новыми макетами, и обучена она на небольшом однородном датасете — в README предупреждают, что заранее сказать, как она поведёт себя на более сложных вёрстках, трудно.
Откуда взят сам подход?Модели основаны на pix2code Тони Белтрамелли (Tony Beltramelli) и вдохновлены sketching interfaces от Airbnb и im2markup из Гарварда. IBM предоставила вычислительные мощности через свою платформу PowerAI.
Какая архитектура модели работает лучше всего?GRU вместо LSTM — лучшая модель использует GRU, и предобученные веса для Bootstrap, которые лежат в репозитории, тоже построены на GRU.
Есть ли разбор, если я хочу понять, как устроен код?Да — автор написал подробный туториал «Turning design mockups into code with deep learning», в котором разбирает код из этого репозитория.
What are similar projects?TensorFlow-Examples, DeepLearning, EasyOCR, Mask_RCNN, machine-learning-zoomcamp, 100-Days-Of-ML-Code, High-Angle_Robust_Fast_FaceAlignment, homemade-machine-learning
Which topics is it in?lstm, keras, cnn, jupyter, jupyter-notebook, code-generation, dataset, neural-network, computer-vision, html, tutorial, deep-learning
Creator
emilwallner
Size
50.4 MB
Stars
16.5K
Updated
CommitAug 16
Age
9y
Commits · 90 Days