ADadamnemecek·Jan 13, 2018Submission
Translate screenshot into HTML using neural networks
71 points · Open discussionemilwallner
Screenshot-to-code
HTML2018–2023
emilwallner / Screenshot-to-code
Screenshot-to-code
A neural network that transforms a design mock-up into a static website.
5Distinct people
5Mentions
0Explicit recommenders
16.5KGitHub stars
What to know before exploring
What it is
A neural network that transforms a design mock-up into a static website.
GitHub
Where it is used
No documented product use has been verified yet.
What people are saying
No recommendation phrase was found in the indexed comments.
No classified warning is attached to this page. Read the discussions before treating silence as approval.
Also in these discussions
No other repository is repeatedly linked in the same discussions.
This week on Hacker News
Nov 7–Nov 14 UTC · Direct repository links and separately labeled related project stories. Indexed through 11/14/2026, 11:23:53 PM UTC.
No direct repository links were found in the indexed HN discussions over the past seven days. Older discussions are available below.
Mentions over time
HN mentions by year5 dated mentions
Observed mentions: 2018-01-10 20:55:12 UTC to 2023-11-22 16:31:29 UTC.
Counts come from the repository’s dated source evidence. Index cutoff: 2026-11-02 08:16:59 UTC.
View mention counts and date ranges
| Period | Start (UTC) | End (exclusive, UTC) | Mentions | Submissions | Comments |
|---|---|---|---|---|---|
| 2018 | 2018-01-01 00:00:00 UTC | 2019-01-01 00:00:00 UTC | 4 | 2 | 2 |
| 2019 | 2019-01-01 00:00:00 UTC | 2020-01-01 00:00:00 UTC | 0 | 0 | 0 |
| 2020 | 2020-01-01 00:00:00 UTC | 2021-01-01 00:00:00 UTC | 0 | 0 | 0 |
| 2021 | 2021-01-01 00:00:00 UTC | 2022-01-01 00:00:00 UTC | 0 | 0 | 0 |
| 2022 | 2022-01-01 00:00:00 UTC | 2023-01-01 00:00:00 UTC | 0 | 0 | 0 |
| 2023 | 2023-01-01 00:00:00 UTC | 2024-01-01 00:00:00 UTC | 1 | 0 | 1 |
What Hacker News says
4 sourcesA lot of people in this thread seem to think that this is a neural network that takes an image and produces HTML, when that's not the case here at all.
This is a neural network that takes an image and predicts very simple blocks (like BODY, TEXT, BTN-GREEN in the bootstrap example) and then uses a map to convert them to well-formed HTML. While I think it's a great learning example I think it's important to note that this does generalize at all to any other websites -- you are NOT going to replace an actual person writing HTML with anything like this.
You can see the mapping here: https://github.com/emilwallner/Screenshot-to-code-in-Keras/b...
In Turning web design mockups into code with Deep LearningIt's not rocket science, I think you can figure it out. To get started:
git clone https://github.com/emilwallner/Screenshot-to-code-in-Keras
pip install -U floyd-cli
(login to floydhub.com, a super simple platform for cloud GPUs)
cd Screenshot-to-code-in-Keras/floydhub
floyd init picturetocode
floyd run --gpu --env tensorflow-1.4 --data emilwallner/datasets/imagetocode/2:data --mode jupyter
Then, navigate to the folder floydhub/Bootstrap/test_model_accuracy.ipynb in your Jupyter Notebook and click on Cell > Run all
Now you can see the prediction and the correct markup for all the evaluation images. Ping me on twitter: @emilwallner, if you get stuck.
In Turning web design mockups into code with Deep Learning