程序猿（ID：OpenSourceTop）猿妹 編譯

原文：https://github.com/emilwallner/Screenshot-to-code-in-Keras、https://blog./Turning-design-mockups-into-code-with-deep-learning/

近日，阮一峰@ruanyf 發(fā)了一條微博：Github 排行榜第一名，是一個夢幻項目。神經(jīng)網(wǎng)絡通過深度學習，自動把設計稿變成 HTML 代碼。 作者號稱三年后，人工智能徹底改變前端開發(fā)。

該項目作者Emil Wallner表示：三年后，人工智能將徹底改變前端開發(fā)，提高原型設計的速度，降低構(gòu)建軟件的障礙。

Tony Beltramelli去年發(fā)布了pix2code，Airbnb推出了sketch2code。目前，自動化前端開發(fā)的最大障礙是計算能力。但是，我們現(xiàn)在可以使用當前的深度學習算法，以及合成的訓練數(shù)據(jù)來探索人工智能前端構(gòu)建。

在這篇文章中，我們將講述一個神經(jīng)網(wǎng)絡如何基于設計模型的圖片來編寫一個基本的HTML和CSS網(wǎng)站。以下為構(gòu)建過程：

構(gòu)建過程

給訓練的神經(jīng)網(wǎng)絡提供設計圖像

神經(jīng)網(wǎng)絡將圖像轉(zhuǎn)換成HTML標記

渲染輸出

我們分為三步迭代來構(gòu)建神經(jīng)網(wǎng)絡：

在第一個版本中，我們將構(gòu)建最低版本來控制移動部件的一個組件。第二個版本HTML將著重于自動執(zhí)行所有步驟并解釋神經(jīng)網(wǎng)絡層。在最終版本Bootstrap中，我們將創(chuàng)建一個可以概括和探索LSTM層的模型。

所有的代碼都在Github和FloydHub上。其中，floydhub目錄中，本地notebook在local目錄下。

代碼地址如下：https://github.com/emilwallner/Screenshot-to-code-in-Keras

https://www./emilwallner/projects/picturetocode

核心邏輯

我們旨在建立一個神經(jīng)網(wǎng)絡，夠生成與截圖對應的 HTML/CSS 標記語言。

訓練神經(jīng)網(wǎng)絡時，你先給它提供幾個截圖以及相對應HTML代碼，它通過逐個預測所有匹配的 HTML 標記來學習。當它預測下一個標記語言的標簽時，就會接收到截圖和之前所有正確的標記。

這里提供一個簡單的訓練數(shù)據(jù)示例：https://docs.google.com/spreadsheets/d/1xXwarcQZAHluorveZsACtXRdmNFbwGtN3WMNhcTdEyQ/edit?usp=sharing

創(chuàng)建一個逐詞預測模型是當今最常見的方法，本文將在整個教程中使用此方法。

注意：每次預測時，神經(jīng)網(wǎng)絡接收的是同樣的截圖。也就是說如果網(wǎng)絡需要預測 20 個單詞，它就會得到 20 次同樣的設計截圖?，F(xiàn)在，不用管神經(jīng)網(wǎng)絡的工作原理，只需要專注于神經(jīng)網(wǎng)絡的輸入和輸出。

讓我們把重點放在以前的標記上。假設我們訓練網(wǎng)絡來預測“I can code”的句子。當它收到“I”，那么它預測“can”。下一次它會收到“I can”并預測“code”。它收到所有以前的單詞，只需要預測下一個單詞。

神經(jīng)網(wǎng)絡從數(shù)據(jù)中創(chuàng)建特征。神經(jīng)網(wǎng)絡構(gòu)建了鏈接數(shù)據(jù)輸入和輸出的功能。它必須創(chuàng)建特征來了解它預測的每個屏幕截圖中的內(nèi)容（HTML語法）。這都是為了預測下一個標簽的構(gòu)建。

我們無需輸入正確的 HTML 標記，網(wǎng)絡會接收它目前生成的標記，然后預測下一個標記。預測從「起始標簽」（start tag）開始，到「結(jié)束標簽」（end tag）終止，或者達到最大限制時終止。

安裝方法

FloydHub

FloydHub是在云GPU上運行模型的最佳選擇：https://www./

本地

文件夾結(jié)構(gòu)

Hello World 版本

HTML

Bootstrap

前端開發(fā)是深度學習應用的理想空間。數(shù)據(jù)容易生成，并且當前深度學習算法可以映射大部分邏輯。

一個最讓人激動的領域是專注于在 LSTM 上的應用。這不僅會提升精確度，還可以使我們直觀的感受到 CNN 在生成標記時所聚焦的地方。注意力一樣是標記、樣式表、腳本和終端之間通信的關鍵。注意力層可以追蹤變量，使網(wǎng)絡可以在編程語言之間進行通信。

但以后，最大的影響將會來自建立綜合數(shù)據(jù)的可擴展方式。然后一步步添加字體、顏色和動畫。目前為止，大多數(shù)進步發(fā)生在草圖（sketches）轉(zhuǎn)化為模版應用。在不到兩年的時間里，我們將創(chuàng)建一個草圖，它會在一秒之內(nèi)找到相應的前端。

目前，Airbnb 設計團隊與 Uizard 已經(jīng)創(chuàng)建了兩個正在使用的原型。