[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9608":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":40,"discoverSource":41},9608,"Screenshot-to-code","emilwallner\u002FScreenshot-to-code","emilwallner","A neural network that transforms a design mock-up into a static website.","",null,"HTML",16482,1543,528,18,0,3,9,2,44.57,"Other",false,"master",true,[26,27,28,29,30,31,32,33,34,35,36],"cnn","cnn-keras","deep-learning","encoder-decoder","floydhub","jupyter","jupyter-notebook","keras","lstm","machine-learning","seq2seq","2026-06-12 02:02:10","\u003Cimg src=\"\u002FREADME_images\u002Fscreenshot-to-code.svg?raw=true\" width=\"800px\">\n\n---\n\n**A detailed tutorial covering the code in this repository:** [Turning design mockups into code with deep learning](https:\u002F\u002Femilwallner.medium.com\u002Fhow-you-can-train-an-ai-to-convert-your-design-mockups-into-html-and-css-cc7afd82fed4).\n\n**Plug:** 👉 Check out my 60-page guide, [No ML Degree](https:\u002F\u002Fwww.emilwallner.com\u002Fp\u002Fno-ml-degree), on how to land a machine learning job without a degree.\n\nThe 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. \n\nThe models are based on Tony Beltramelli's [pix2code](https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code), and inspired by Airbnb's [sketching interfaces](https:\u002F\u002Fairbnb.design\u002Fsketching-interfaces\u002F), and Harvard's [im2markup](https:\u002F\u002Fgithub.com\u002Fharvardnlp\u002Fim2markup).\n\n**Note:** only the Bootstrap version can generalize on new design mock-ups. It uses 16 domain-specific tokens which are translated into HTML\u002FCSS. 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.\n\nDataset: https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code\u002Ftree\u002Fmaster\u002Fdatasets\n\nA quick overview of the process: \n\n### 1) Give a design image to the trained neural network\n\n![Insert image](https:\u002F\u002Fi.imgur.com\u002FLDmoLLV.png)\n\n### 2) The neural network converts the image into HTML markup \n\n\u003Cimg src=\"\u002FREADME_images\u002Fhtml_display.gif?raw=true\" width=\"800px\">\n\n### 3) Rendered output\n\n![Screenshot](https:\u002F\u002Fi.imgur.com\u002FtEAfyZ8.png)\n\n\n## Installation\n\n### FloydHub\n\n[![Run on FloydHub](https:\u002F\u002Fstatic.floydhub.com\u002Fbutton\u002Fbutton.svg)](https:\u002F\u002Ffloydhub.com\u002Frun?template=https:\u002F\u002Fgithub.com\u002Ffloydhub\u002Fpix2code-template)\n\nClick this button to open a [Workspace](https:\u002F\u002Fblog.floydhub.com\u002Fworkspaces\u002F) on [FloydHub](https:\u002F\u002Fwww.floydhub.com\u002F?utm_medium=readme&utm_source=pix2code&utm_campaign=aug_2018) where you will find the same environment and dataset used for the *Bootstrap version*. You can also find the trained models for testing.\n\n### Local\n``` bash\npip install keras tensorflow pillow h5py jupyter\n```\n```\ngit clone https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code.git\ncd Screenshot-to-code\u002F\njupyter notebook\n```\nGo do the desired notebook, files that end with '.ipynb'. To run the model, go to the menu then click on Cell > Run all\n\nThe 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:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode, and specify the correct ```dir_name```.\n\n## Folder structure\n\n``` bash\n  |  |-Bootstrap                           #The Bootstrap version\n  |  |  |-compiler                         #A compiler to turn the tokens to HTML\u002FCSS (by pix2code)\n  |  |  |-resources\t\t\t\t\t\t\t\t\t\t\t\n  |  |  |  |-eval_light                    #10 test images and markup\n  |  |-Hello_world                         #The Hello World version\n  |  |-HTML                                #The HTML version\n  |  |  |-Resources_for_index_file         #CSS,images and scripts to test index.html file\n  |  |  |-html                             #HTML files to train it on\n  |  |  |-images                           #Screenshots for training\n  |-readme_images                          #Images for the readme page\n```\n\n\n## Hello World\n\u003Cp align=\"center\">\u003Cimg src=\"\u002FREADME_images\u002FHello_world_model.png?raw=true\" width=\"400px\">\u003C\u002Fp>\n\n\n## HTML\n\u003Cp align=\"center\">\u003Cimg src=\"\u002FREADME_images\u002FHTML_model.png?raw=true\" width=\"400px\">\u003C\u002Fp>\n\n\n## Bootstrap\n\u003Cp align=\"center\">\u003Cimg src=\"\u002FREADME_images\u002FBootstrap_model.png?raw=true\" width=\"400px\">\u003C\u002Fp>\n\n## Model weights\n- [Bootstrap](https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode) (The pre-trained model uses GRUs instead of LSTMs)\n- [HTML](https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fhtml_models)\n\n## Acknowledgments\n- Thanks to IBM for donating computing power through their PowerAI platform\n- The code is largely influenced by Tony Beltramelli's pix2code paper. [Code](https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code) [Paper](https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962)\n- The structure and some of the functions are from Jason Brownlee's [excellent tutorial](https:\u002F\u002Fmachinelearningmastery.com\u002Fdevelop-a-caption-generation-model-in-keras\u002F)\n","Screenshot-to-code 是一个将设计原型转换为静态网页的神经网络项目。其核心技术基于深度学习，特别是卷积神经网络（CNN）和序列到序列（seq2seq）模型，使用Keras框架实现。项目中包含了一个从简单到复杂的迭代开发过程，最终版本能够以97%的准确率将设计图转化为HTML\u002FCSS代码，并且特别适用于Bootstrap风格的设计。它适合于需要快速将UI设计转化为前端代码的场景，比如在快速原型设计或小型项目中，可以显著提高开发效率。不过需要注意的是，当前模型训练所用的数据集较小且相对单一，因此对于复杂布局的支持仍有待验证。","2026-06-11 03:23:46","top_topic"]