程序猿（ID：OpenSourceTop）猿妹 編譯
原文：https://github.com/emilwallner/Screenshot-to-code-in-Keras、https://blog.floydhub.com/Turning-design-mockups-into-code-with-deep-learning/
近日，阮一峰@ruanyf 發(fā)了一條微博：Github 排行榜第一名，是一個夢幻項目。神經(jīng)網(wǎng)絡(luò)通過深度學習，自動把設(shè)計稿變成 HTML 代碼。 作者號稱三年后，人工智能徹底改變前端開發(fā)。
該項目作者Emil Wallner表示：三年后，人工智能將徹底改變前端開發(fā)，提高原型設(shè)計的速度，降低構(gòu)建軟件的障礙。
Tony Beltramelli去年發(fā)布了pix2code，Airbnb推出了sketch2code。目前，自動化前端開發(fā)的最大障礙是計算能力。但是，我們現(xiàn)在可以使用當前的深度學習算法，以及合成的訓練數(shù)據(jù)來探索人工智能前端構(gòu)建。
在這篇文章中，我們將講述一個神經(jīng)網(wǎng)絡(luò)如何基于設(shè)計模型的圖片來編寫一個基本的HTML和CSS網(wǎng)站。以下為構(gòu)建過程：
構(gòu)建過程
給訓練的神經(jīng)網(wǎng)絡(luò)提供設(shè)計圖像
神經(jīng)網(wǎng)絡(luò)將圖像轉(zhuǎn)換成HTML標記
渲染輸出
我們分為三步迭代來構(gòu)建神經(jīng)網(wǎng)絡(luò)：
在第一個版本中，我們將構(gòu)建最低版本來控制移動部件的一個組件。第二個版本HTML將著重于自動執(zhí)行所有步驟并解釋神經(jīng)網(wǎng)絡(luò)層。在最終版本Bootstrap中，我們將創(chuàng)建一個可以概括和探索LSTM層的模型。
所有的代碼都在Github和FloydHub上。其中，floydhub目錄中，本地notebook在local目錄下。
代碼地址如下：https://github.com/emilwallner/Screenshot-to-code-in-Keras
https://www.floydhub.com/emilwallner/projects/picturetocode
核心邏輯
我們旨在建立一個神經(jīng)網(wǎng)絡(luò)，夠生成與截圖對應的 HTML/CSS 標記語言。
訓練神經(jīng)網(wǎng)絡(luò)時，你先給它提供幾個截圖以及相對應HTML代碼，它通過逐個預測所有匹配的 HTML 標記來學習。當它預測下一個標記語言的標簽時，就會接收到截圖和之前所有正確的標記。
這里提供一個簡單的訓練數(shù)據(jù)示例：https://docs.google.com/spreadsheets/d/1xXwarcQZAHluorveZsACtXRdmNFbwGtN3WMNhcTdEyQ/edit?usp=sharing
創(chuàng)建一個逐詞預測模型是當今最常見的方法，本文將在整個教程中使用此方法。
注意：每次預測時，神經(jīng)網(wǎng)絡(luò)接收的是同樣的截圖。也就是說如果網(wǎng)絡(luò)需要預測 20 個單詞，它就會得到 20 次同樣的設(shè)計截圖?，F(xiàn)在，不用管神經(jīng)網(wǎng)絡(luò)的工作原理，只需要專注于神經(jīng)網(wǎng)絡(luò)的輸入和輸出。
讓我們把重點放在以前的標記上。假設(shè)我們訓練網(wǎng)絡(luò)來預測“I can code”的句子。當它收到“I”，那么它預測“can”。下一次它會收到“I can”并預測“code”。它收到所有以前的單詞，只需要預測下一個單詞。
神經(jīng)網(wǎng)絡(luò)從數(shù)據(jù)中創(chuàng)建特征。神經(jīng)網(wǎng)絡(luò)構(gòu)建了鏈接數(shù)據(jù)輸入和輸出的功能。它必須創(chuàng)建特征來了解它預測的每個屏幕截圖中的內(nèi)容（HTML語法）。這都是為了預測下一個標簽的構(gòu)建。
我們無需輸入正確的 HTML 標記，網(wǎng)絡(luò)會接收它目前生成的標記，然后預測下一個標記。預測從「起始標簽」（start tag）開始，到「結(jié)束標簽」（end tag）終止，或者達到最大限制時終止。
安裝方法
FloydHub
FloydHub是在云GPU上運行模型的最佳選擇：https://www.floydhub.com/
本地
文件夾結(jié)構(gòu)
Hello World 版本
HTML
Bootstrap
前端開發(fā)是深度學習應用的理想空間。數(shù)據(jù)容易生成，并且當前深度學習算法可以映射大部分邏輯。
一個最讓人激動的領(lǐng)域是專注于在 LSTM 上的應用。這不僅會提升精確度，還可以使我們直觀的感受到 CNN 在生成標記時所聚焦的地方。注意力一樣是標記、樣式表、腳本和終端之間通信的關(guān)鍵。注意力層可以追蹤變量，使網(wǎng)絡(luò)可以在編程語言之間進行通信。
但以后，最大的影響將會來自建立綜合數(shù)據(jù)的可擴展方式。然后一步步添加字體、顏色和動畫。目前為止，大多數(shù)進步發(fā)生在草圖（sketches）轉(zhuǎn)化為模版應用。在不到兩年的時間里，我們將創(chuàng)建一個草圖，它會在一秒之內(nèi)找到相應的前端。
目前，Airbnb 設(shè)計團隊與 Uizard 已經(jīng)創(chuàng)建了兩個正在使用的原型。
