目前，自動(dòng)化前端開(kāi)發(fā)的最大障礙是計(jì)算能力。不過(guò)，我們可以使用當(dāng)前的深度學(xué)習(xí)算法和人造的訓(xùn)練數(shù)據(jù)來(lái)探索人工前端自動(dòng)化。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了攸縣免費(fèi)建站歡迎大家使用！

在這篇文章中，我們將教會(huì)一個(gè)神經(jīng)網(wǎng)絡(luò)如何基于一張?jiān)O(shè)計(jì)原型圖片來(lái)編寫(xiě)基本的 HTML 和 CSS 代碼。以下是該過(guò)程的簡(jiǎn)要概述：

1）為神經(jīng)網(wǎng)絡(luò)提供的設(shè)計(jì)圖

2）神經(jīng)網(wǎng)絡(luò)將圖片轉(zhuǎn)化成 HTML 代碼

3）渲染輸出

我們將通過(guò)三次迭代來(lái)構(gòu)建神經(jīng)網(wǎng)絡(luò)。

第一次迭代得到的是最基礎(chǔ)的版本，先了解圖樣中的活動(dòng)部件。第二次迭代得到的是 HTML 代碼，將著重于自動(dòng)化所有步驟，并解釋神經(jīng)網(wǎng)絡(luò)層。最后一次迭代得到的是 bootstrap 版本，我們將創(chuàng)建一個(gè)模型可用于泛化和探索 LSTM 層。

所有的代碼都放在了 Github 和 FloydHub 上。

這些模型是基于 Beltramelli 的 pix2code 論文和 Jason Brownlee 的圖像自然語(yǔ)言描述教程而構(gòu)建的，代碼使用 Python 和 Keras（一個(gè)基于 Tensorflow 的框架）編寫(xiě)。

如果你是剛接觸深度學(xué)習(xí)的新手，建議你先大概了解下 Python，反向傳播和卷積神經(jīng)網(wǎng)絡(luò)。

核心邏輯 

讓我們?cè)俸?jiǎn)明扼要地復(fù)述下我們的目標(biāo)。我們想構(gòu)建一個(gè)神經(jīng)網(wǎng)絡(luò)，生成與屏幕截圖對(duì)應(yīng)的 HTML/CSS 代碼。

在訓(xùn)練神經(jīng)網(wǎng)絡(luò)時(shí)，你可以給它幾個(gè)截圖和與之對(duì)應(yīng)的 HTML 代碼。

在學(xué)習(xí)過(guò)程中，它會(huì)逐一預(yù)測(cè)所有匹配的 HTML 標(biāo)簽。在預(yù)測(cè)下一個(gè)標(biāo)簽時(shí)，它會(huì)接收到屏幕截圖以及在那一個(gè)點(diǎn)上所有匹配的標(biāo)簽。

這個(gè) Google Sheet 包含了一個(gè)簡(jiǎn)單的訓(xùn)練數(shù)據(jù)樣本。

創(chuàng)建一個(gè)能夠逐字預(yù)測(cè)的模型是現(xiàn)在最常見(jiàn)的方式，也是我們?cè)谶@個(gè)教程中將會(huì)使用的方式，雖然還有其他的方式。

請(qǐng)注意，對(duì)于每次預(yù)測(cè)，神經(jīng)網(wǎng)絡(luò)得到的都是相同的截圖。也就是說(shuō)，如果要預(yù)測(cè) 20 個(gè)單詞的話，它將會(huì)收到相同的圖樣 20 次。在現(xiàn)在這個(gè)階段，請(qǐng)不要擔(dān)心神經(jīng)網(wǎng)絡(luò)的工作原理，而是著重關(guān)注神經(jīng)網(wǎng)絡(luò)的輸入輸出。

讓我們看下之前的標(biāo)簽。假設(shè)我們要訓(xùn)練網(wǎng)絡(luò)來(lái)預(yù)測(cè)“I can code”這句話。當(dāng)它收到“I”的時(shí)候，它能預(yù)測(cè)到“can”。下一次，它將收到“I can”，并且預(yù)測(cè)到“code”。每次它會(huì)收到之前所有的單詞，并且只需預(yù)測(cè)接下來(lái)的一個(gè)單詞。

A

神經(jīng)網(wǎng)絡(luò)從數(shù)據(jù)中創(chuàng)建出不同的特征，用于連接輸入和輸出數(shù)據(jù)，創(chuàng)建模型，以便理解每張截圖中所包含的內(nèi)容和 HTML 語(yǔ)法，這就得到了預(yù)測(cè)下一個(gè)標(biāo)簽所需要的知識(shí)。

在將訓(xùn)練過(guò)的模型用在現(xiàn)實(shí)當(dāng)中時(shí)，情況跟訓(xùn)練模型時(shí)差不多。每次使用相同的屏幕截圖逐一生成文本。不同的是，現(xiàn)在它不會(huì)直接收到正確的 HTML 標(biāo)簽，而是會(huì)收到它迄今為止已經(jīng)生成的標(biāo)簽，然后去預(yù)測(cè)下一個(gè)標(biāo)簽。整個(gè)預(yù)測(cè)的過(guò)程會(huì)從“起始標(biāo)簽”開(kāi)始，在預(yù)測(cè)到“結(jié)束標(biāo)簽”或達(dá)到最大限度時(shí)終止。

Hello World

讓我們開(kāi)始構(gòu)建一個(gè) Hello World 的版本。我們將為神經(jīng)網(wǎng)絡(luò)提供一個(gè)顯示有“Hello World!”的網(wǎng)頁(yè)截圖，并且訓(xùn)練它生成對(duì)應(yīng)的標(biāo)簽。

首先，神經(jīng)網(wǎng)絡(luò)將圖樣映射成一組像素值列表。每個(gè)像素點(diǎn)有 RGB 三個(gè)通道，每個(gè)通道的值都在 0-255 之間。

為了讓神經(jīng)網(wǎng)絡(luò)理解這些標(biāo)記，我使用了獨(dú)熱編碼（one hot encoding）。因此“I can code”這一句就可以映射成：

上圖中包含了開(kāi)始和結(jié)束標(biāo)簽。這些標(biāo)簽控制著神經(jīng)網(wǎng)絡(luò)預(yù)測(cè)的開(kāi)始和結(jié)束時(shí)間。

對(duì)于輸入數(shù)據(jù)，我們將用不同的句子，從第一個(gè)單詞開(kāi)始，然后逐步添加每個(gè)單詞。輸出的數(shù)據(jù)總是一個(gè)單詞。

句子遵循與單詞相同的邏輯。它們也需要相同的輸入長(zhǎng)度，但是在這里我們限制的是句子最大的長(zhǎng)度，而不是單詞的數(shù)量。如果句子比最大長(zhǎng)度短，則用空詞填充它，空詞完全由零組成。

正如所看到的，單詞都是從右向左打印出來(lái)的。這樣的話，每次訓(xùn)練都會(huì)迫使每個(gè)單詞改變自己的位置，這樣模型就可以記住單詞順序而不是每個(gè)單詞的位置。

在下圖中有四次預(yù)測(cè)，每一行表示一次預(yù)測(cè)。從左邊起，是以 RGB 通道表示的圖像：紅色、綠色和藍(lán)色，還有之前提到過(guò)的單詞。括號(hào)之外，是一個(gè)接一個(gè)的預(yù)測(cè)，最后以紅色方塊結(jié)束。

在 Hello World 版本中，我們用了三個(gè)記號(hào)：“start”、“Hello World！”和“end”。記號(hào)可以是任何東西，它可以是一個(gè)字符、單詞或句子。雖然使用字符記號(hào)需要更少的詞匯量，但會(huì)限制神經(jīng)網(wǎng)絡(luò)。單詞記號(hào)往往有最好的表現(xiàn)。

這里我們做出了預(yù)測(cè)：

輸出

• 10 epochs:start start start

• 100 epochs: start

  Hello World!

  Hello World!

• 300 epochs: start

  Hello World!

  end

我掉過(guò)的坑：

• 在收集數(shù)據(jù)之前構(gòu)建了第一個(gè)版本。在這個(gè)項(xiàng)目的早期，我想辦法從 Geocities 網(wǎng)站獲得了一個(gè)舊的存檔副本，其中包含 3800 萬(wàn)多個(gè)網(wǎng)站。不過(guò)，當(dāng)時(shí)我被數(shù)據(jù)沖昏了頭腦，卻忽視了縮減 100K 詞匯所需要的巨大工作量。

• 處理 TB 級(jí)的數(shù)據(jù)需要很好的硬件或者極大的耐心。在用我的 Mac 電腦運(yùn)行出現(xiàn)了幾次問(wèn)題以后，最后選擇了功能強(qiáng)大的遠(yuǎn)程服務(wù)器。為了保持工作的順暢，預(yù)計(jì)我將會(huì)租用包含 8 核 CPU 和一個(gè) 1GPS 網(wǎng)絡(luò)連接的遠(yuǎn)程測(cè)試機(jī)組。

• 在我明白輸入和輸出之前，很多東西都說(shuō)不通。輸入 X 是屏幕截圖和之前已經(jīng)預(yù)測(cè)的標(biāo)簽，輸出 Y 是下一個(gè)要預(yù)測(cè)標(biāo)簽。當(dāng)我明白這個(gè)以后，理解它們之間的關(guān)系就更容易了，而且構(gòu)建不同的構(gòu)架也更容易了。

• 小心兔子洞陷阱。因?yàn)檫@個(gè)項(xiàng)目跟深度學(xué)習(xí)的很多領(lǐng)域都有交叉，在研究的過(guò)程中我好多次都陷入對(duì)其他領(lǐng)域的研究中。我花了一周的時(shí)間從頭開(kāi)始編寫(xiě) RNN，過(guò)度著迷于向量空間，又被其他的實(shí)現(xiàn)所迷惑。

• 圖片到編碼網(wǎng)絡(luò)其實(shí)就是 Image Caption 模型。但即使我已經(jīng)意識(shí)到了這點(diǎn)，我仍然忽略了很多有關(guān) Image Caption 的論文，只是因?yàn)橛X(jué)得它們沒(méi)有那么酷。當(dāng)我發(fā)現(xiàn)到這點(diǎn)后，我加快了對(duì)問(wèn)題的了解。

在 Floydhub 平臺(tái)上運(yùn)行代碼

Floydhub 是一個(gè)深度學(xué)習(xí)訓(xùn)練平臺(tái)。在我剛開(kāi)始接觸深度學(xué)習(xí)時(shí)，才知道有這個(gè)平臺(tái)。從那以后，我都在用它來(lái)訓(xùn)練和管理深度學(xué)習(xí)試驗(yàn)。你可以在 10 分鐘內(nèi)安裝它并且運(yùn)行你的第一個(gè)模型。這是在云端 GPU 上訓(xùn)練模型的最佳選擇。

如果你是剛接觸 Floydhub，推薦你去看下他們的 2 分鐘安裝教程和我的 5 分鐘概覽教程。

復(fù)制倉(cāng)庫(kù)：

登錄并啟動(dòng) FloydHub 命令行工具：

在 FloydHub 的云 GPU 機(jī)器上運(yùn)行 Jupyter notebook：

所有的 notebook 都在 FloydHub 目錄中準(zhǔn)備好了。運(yùn)行起來(lái)之后，你可以在這里找到第一個(gè) notebook：floydhub/Helloworld/helloworld.ipynb。

如果想要更多詳細(xì)的指導(dǎo)和標(biāo)記說(shuō)明，請(qǐng)參閱我早期寫(xiě)的文章。

HTML 版本

在這個(gè)版本中，我們將會(huì)自動(dòng)化 Hello world 中的很多步驟。這一章節(jié)將主要關(guān)注如何創(chuàng)建一個(gè)可伸縮的實(shí)現(xiàn)和神經(jīng)網(wǎng)絡(luò)中的動(dòng)態(tài)部分。

雖然這個(gè)版本還無(wú)法基于隨機(jī)網(wǎng)站來(lái)預(yù)測(cè) HTML，但它仍然很適合用于對(duì)問(wèn)題的動(dòng)態(tài)部分進(jìn)行探索。

概覽

下圖所示的是構(gòu)架組件展開(kāi)后的樣子。

主要有兩個(gè)部分，編碼器和解碼器。編碼器用于創(chuàng)建圖像特征和標(biāo)簽特征。特征是由網(wǎng)絡(luò)創(chuàng)建用來(lái)連接圖樣和標(biāo)簽的基本構(gòu)建塊。在編碼的最后階段，我們將圖像特征和前一個(gè)標(biāo)簽中的單詞關(guān)聯(lián)起來(lái)。

然后解碼器通過(guò)圖樣和標(biāo)簽特征的組合來(lái)創(chuàng)建下一個(gè)標(biāo)簽特征，而這個(gè)特征則會(huì)通過(guò)全連接神經(jīng)網(wǎng)絡(luò)來(lái)預(yù)測(cè)下一個(gè)標(biāo)簽。

 圖樣的特征

因?yàn)槲覀冃枰獮槊恳粋€(gè)單詞插入一個(gè)截圖，這就成了我們訓(xùn)練網(wǎng)絡(luò)時(shí)的一個(gè)瓶頸（例子）。因此，我們沒(méi)有直接使用圖片，而是將生成標(biāo)簽所需要的信息提取出來(lái)。

之后，我們用一個(gè)預(yù)先在 ImageNet 上預(yù)先訓(xùn)練的卷積神經(jīng)網(wǎng)絡(luò)，將這些提取出來(lái)的信息編碼到圖片特征中。

在最終分類(lèi)之前，我們將特征從層中提取出來(lái)。

最終，我們得到了 1536 張 8×8 像素的圖像作為特征圖。盡管這些特征很難被人理解，但是神經(jīng)網(wǎng)絡(luò)可以從這些特征中抽取出對(duì)象和元素的位置。

 標(biāo)簽特征

在 Hello World 的版本中，我們使用了獨(dú)熱編碼來(lái)代表標(biāo)簽。而在這個(gè)版本中，我們將在輸入中使用詞向量（word embedding），并繼續(xù)使用獨(dú)熱編碼表示輸出。

在保持每個(gè)句子的構(gòu)造方式不變的情況下，改變映射記號(hào)的方法。獨(dú)熱編碼將每個(gè)單詞視為一個(gè)獨(dú)立的單元。但在這里，我們將輸入數(shù)據(jù)中的每個(gè)單詞轉(zhuǎn)換為數(shù)值列表。這些數(shù)值代表了不同標(biāo)簽之間的關(guān)系。

詞向量的維度是 8，但受詞匯量大小的影響，維度經(jīng)常會(huì)在 50 到 500 之間變化。

每個(gè)單詞的 8 個(gè)數(shù)字類(lèi)似于一般神經(jīng)網(wǎng)絡(luò)中的權(quán)重，用于映射不同單詞之間的關(guān)系。

神經(jīng)網(wǎng)絡(luò)可以用這些特征來(lái)連接輸入數(shù)據(jù)與輸出數(shù)據(jù)?，F(xiàn)在，先不要關(guān)心它們是什么，我們將在下一節(jié)深入探討這個(gè)問(wèn)題。

編碼器

我們把詞向量送到 LSTM 中運(yùn)行，之后會(huì)返回一系列的標(biāo)簽特征。這些標(biāo)簽特征然后會(huì)被送到 TimeDistributed 密集層運(yùn)行。

在處理詞向量的同時(shí)，還會(huì)進(jìn)行另一個(gè)處理。圖像特征首先會(huì)被扁平化，所有的數(shù)值會(huì)被轉(zhuǎn)換成一個(gè)數(shù)字列表。然后我們?cè)谶@個(gè)層上應(yīng)用一個(gè)密集層來(lái)抽取高級(jí)特征，隨后這些圖像特征會(huì)被連接到標(biāo)簽特征。

這可能有點(diǎn)難以理解，所以讓我們把處理的過(guò)程拆開(kāi)來(lái)看。

 標(biāo)簽特征

我們先將詞向量送到 LSTM 層中運(yùn)行。如下圖所示，所有的句子都會(huì)被填充到三個(gè)記號(hào)的最大長(zhǎng)度。

為了混合信號(hào)并找到更高級(jí)別的模式，我們會(huì)用 TimeDistributed 密集層應(yīng)用在標(biāo)簽特征上。TimeDistributed 密集層與一般的密集層相同，只不過(guò)具有多個(gè)輸入和輸出。

 圖像特征

與此同時(shí)，我們會(huì)準(zhǔn)備圖像。我們整理了所有迷你圖像特征，然后將它們轉(zhuǎn)換成一組列表。其中的信息沒(méi)有變，只是組織方式變了。

跟之前提過(guò)的一樣，為了混合信號(hào)和提取更高級(jí)的概念，我們應(yīng)用了一個(gè)密集層。 而且由于我們只需要處理一個(gè)輸入值，所以我們可以用一個(gè)常規(guī)密集層。其后，為了將圖像特征連接到標(biāo)簽特征，我們復(fù)制了圖像特征。

在這種情況下，我們就有三個(gè)標(biāo)簽特征。因此，我們得到了相同數(shù)量的圖像特征和標(biāo)簽特征。

 連接圖像特征和標(biāo)簽特征

所有的句子都經(jīng)過(guò)填充，以便創(chuàng)建三個(gè)標(biāo)簽特征。由于我們已經(jīng)預(yù)處理過(guò)了圖像特征，現(xiàn)在我們可以為每個(gè)標(biāo)簽特征添加一個(gè)圖像特征。

在將每個(gè)圖像特征添加到對(duì)應(yīng)的標(biāo)簽特征之后，我們最終得到了三組圖像標(biāo)簽特征組合。之后，我們將它們作為解碼器的輸入。

解碼器

這里，我們使用圖像標(biāo)簽特征組合來(lái)預(yù)測(cè)下一個(gè)標(biāo)簽。

在下面的例子中，我們使用三個(gè)圖像標(biāo)簽特征組合來(lái)輸出下一個(gè)標(biāo)簽特征。

請(qǐng)注意，這里 LSTM 層的 sequence 被設(shè)置為 false。由此，LSTM 層返回的是一個(gè)預(yù)測(cè)的特征，而不是輸入序列的長(zhǎng)度。在我們的例子中，這將是下一個(gè)標(biāo)簽的特征，包含了最終預(yù)測(cè)所需的信息。

最終的預(yù)測(cè)

密集層像傳統(tǒng)前饋神經(jīng)網(wǎng)絡(luò)那樣，將下一個(gè)標(biāo)簽特征中的 512 個(gè)值與 4 個(gè)最終預(yù)測(cè)連接起來(lái)。假設(shè)我們的詞匯表中有四個(gè)詞：start、hello、world 和 end。

詞匯預(yù)測(cè)可以是 [0.1,0.1,0.1,0.7]。密集層中的 softmax 激活函數(shù)分布概率是 0 到 1，所有預(yù)測(cè)的總和等于 1。在這種情況下，它預(yù)測(cè)第 4 個(gè)單詞會(huì)是下一個(gè)標(biāo)簽。 然后，將獨(dú)熱編碼 [0，0，0，1] 轉(zhuǎn)換為映射值，比如“end”。

 輸出

這里有原始網(wǎng)站供參考。

 我掉過(guò)的坑：

對(duì)我來(lái)說(shuō)，LSTM 比 CNN 更難理解。當(dāng)我展開(kāi)所有的 LSTM 后，它們變得更容易理解。Fast.ai 在 RNN 上的視頻非常有用。另外，在嘗試了解特征的原理之前，請(qǐng)先關(guān)注輸入特征和輸出特征本身。從頭開(kāi)始構(gòu)建詞匯表比縮減巨大的詞匯表要容易的多。包括字體、div 標(biāo)簽大小、hex 顏色值、變量名稱(chēng)和普通的單詞。大多數(shù)庫(kù)被創(chuàng)建來(lái)解析文本文件而不是代碼。在文檔中，所有內(nèi)容都由空格分隔，但在代碼中，則需要使用自定義的解析方式?？梢允褂迷?ImageNet 上訓(xùn)練的模型來(lái)提取特征。這可能看起來(lái)違反直覺(jué)，因?yàn)?ImageNet 幾乎沒(méi)有 Web 圖像。然而，與從頭開(kāi)始訓(xùn)練的 pix2code 模型相比，這樣做的損失要高出 30％。當(dāng)然，我也對(duì)使用基于網(wǎng)頁(yè)截圖的預(yù)訓(xùn)練的 inception-resnet 類(lèi)型的模型很感興趣。

Bootstrap 版本

在我們的最終版本中，我們將使用 pix2code 論文中生成的 Bootstrap 網(wǎng)站的一個(gè)數(shù)據(jù)集。通過(guò)使用 Twitter 的 Bootstrap，我們可以將 HTML 和 CSS 相結(jié)合，并且縮減詞匯表的大小。

我們將確保它能夠?yàn)橹皼](méi)有看過(guò)的截圖生成標(biāo)簽，還將深入研究它是如何建立對(duì)屏幕截圖和標(biāo)簽的認(rèn)知的。

我們將使用 17 個(gè)簡(jiǎn)化過(guò)的記號(hào)，然后將這些記號(hào)轉(zhuǎn)成 HTML 和 CSS，而不是在 Bootstrap 標(biāo)簽上進(jìn)行訓(xùn)練。這個(gè)數(shù)據(jù)集包括 1500 個(gè)測(cè)試截圖和 250 幅驗(yàn)證圖像。每個(gè)截圖平均有 65 個(gè)記號(hào)，總共將生成 96925 個(gè)訓(xùn)練樣本。

通過(guò)對(duì) pix2code 論文中的模型做了一些調(diào)整，該模型可以以 97％的準(zhǔn)確度預(yù)測(cè)網(wǎng)頁(yè)組件（BLEU 4-ngram 貪心搜索，稍后會(huì)介紹更多）。

一種端到端的方法

在 Image Caption 模型中，從預(yù)訓(xùn)練好的模型中提取特征的效果很好。但經(jīng)過(guò)幾次實(shí)驗(yàn)后，我發(fā)現(xiàn) pix2code 的端到端方法的效果更好。預(yù)訓(xùn)練的模型尚未用網(wǎng)頁(yè)數(shù)據(jù)訓(xùn)練過(guò)，只是用在分類(lèi)上。

在這個(gè)模型中，我們用輕量級(jí)的卷積神經(jīng)網(wǎng)絡(luò)替換了預(yù)訓(xùn)練好的圖像特征。但是我們沒(méi)有使用 max-pooling 來(lái)增加信息密度，而是增加了步幅，用以維護(hù)元素的位置和顏色。

這里可以使用卷積神經(jīng)網(wǎng)絡(luò)（CNN）和遞歸神經(jīng)網(wǎng)絡(luò)（RNN）這兩種核心模型。最常見(jiàn)的 RNN 是長(zhǎng)短期記憶（LSTM）網(wǎng)絡(luò)，也是我將要講的。

我在之前的文章中已經(jīng)介紹過(guò)很多很棒的 CNN 教程了，所以這里我就只重點(diǎn)介紹下 LSTM。

 理解 LSTM 中的時(shí)間步

LSTM 的難點(diǎn)之一是時(shí)間步的概念。原始神經(jīng)網(wǎng)絡(luò)可以被認(rèn)為有兩個(gè)時(shí)間步。如果你給它“hello”，它會(huì)預(yù)測(cè)到“world”。但是，想要預(yù)測(cè)更多的時(shí)間步是很困難的。在下面的例子中，輸入四個(gè)時(shí)間步，每個(gè)單詞對(duì)應(yīng)一個(gè)。

LSTM 適用于含有時(shí)間步的輸入，是一個(gè)適合有序信息的神經(jīng)網(wǎng)絡(luò)。如果你展開(kāi)我們的模型，就會(huì)看到像下圖所示的那樣。對(duì)于每個(gè)向下遞推的步驟，你需要保持同樣的權(quán)重。對(duì)于舊的輸出和新的輸出，你可以分別設(shè)置一套權(quán)重。

將加權(quán)后的輸入和輸出用激活函數(shù)連接在一起，它就是對(duì)應(yīng)時(shí)間步的輸出。由于我們重復(fù)使用這些權(quán)重，它們將從一些輸入中提取信息，并建立起有關(guān)序列的知識(shí)。

以下是 LSTM 中每個(gè)時(shí)間步的簡(jiǎn)化版本。

為了理解這個(gè)邏輯，我建議你參考 Andrew Trask 的精彩教程，自己從頭開(kāi)始構(gòu)建一個(gè) RNN。

 理解 LSTM 層中的不同單元

每個(gè) LSTM 層的單元（unit）數(shù)量決定了它的記憶能力，以及每個(gè)輸出特征的大小。需要再次指出的是，一個(gè)特征是用于在層與層之間傳輸信息的一長(zhǎng)串?dāng)?shù)字。

LSTM 層中的每個(gè)單元會(huì)學(xué)習(xí)跟蹤語(yǔ)法的不同方面。下面是對(duì)一個(gè)單位跟蹤原始 div 信息的可視化結(jié)果，是我們用來(lái)訓(xùn)練 Bootstrap 模型的簡(jiǎn)化標(biāo)簽。

每個(gè) LSTM 單元會(huì)維護(hù)一個(gè)細(xì)胞狀態(tài)（cell state）。把細(xì)胞狀態(tài)想象成記憶，而權(quán)重和激活函數(shù)用來(lái)以不同的方式修改狀態(tài)。這使得 LSTM 層能夠微調(diào)每個(gè)輸入要保留和丟棄哪些信息。

除了每個(gè)輸入傳遞輸出特征之外，LSTM 層還會(huì)傳遞細(xì)胞狀態(tài)，其中每個(gè)單元都分別對(duì)應(yīng)一個(gè)值。為了理解 LSTM 中的組件是如何相互作用的，我推薦 Colah 的教程、Jayasiri 的 Numpy 實(shí)現(xiàn)以及 Karphay 的講座和文章。

 測(cè)試準(zhǔn)確性

找到一個(gè)公平的方法來(lái)衡量準(zhǔn)確性非常困難。假設(shè)你選擇逐字比較，那么如果你的預(yù)測(cè)中有一個(gè)字不同步，那么你的準(zhǔn)確性就可能會(huì)是零。如果你刪掉一個(gè)符合預(yù)測(cè)的單詞，最后的準(zhǔn)確性也可能是 99%。

我用的是 BLEU 測(cè)評(píng)法，這是一種用于機(jī)器翻譯和圖像字幕模型的最佳實(shí)踐。它按照 1 到 4 個(gè)單詞序列把句子分成四個(gè) gram。在下面的預(yù)測(cè)中的“cat”應(yīng)該是“code”。

為了拿到最終的分?jǐn)?shù)，你需要將得到的數(shù)字都乘以 25%，(4/5)*0.25 + (2/4)*0.25 + (1/3)*0.25 + (0/2)*0.25 = 0.2 + 0.125 + 0.083 + 0 = 0.408。求和的結(jié)果再乘以句子長(zhǎng)度的處罰值。因?yàn)槲覀兝又械木渥娱L(zhǎng)度是正確的，所以求和的結(jié)果直接就是最終的結(jié)果。

你可以通過(guò)增加 gram 的數(shù)量讓它變得更難。四個(gè) gram 的模型是最符合人類(lèi)翻譯的模型。我建議使用下面的代碼運(yùn)行幾個(gè)例子并閱讀 Wiki 頁(yè)，來(lái)加深對(duì)這方面的了解。

 輸出
 

一些輸出樣本的鏈接：

• 生成網(wǎng)站 1——original 1

https://emilwallner.github.io/bootstrap/pred_1/

• 生成網(wǎng)站 2——original 2

https://emilwallner.github.io/bootstrap/real_2/

• 生成網(wǎng)站 3——original 3

https://emilwallner.github.io/bootstrap/pred_3/

• 生成網(wǎng)站 4——original 4

https://emilwallner.github.io/bootstrap/pred_4/

• 生成網(wǎng)站 5——original 5

https://emilwallner.github.io/bootstrap/pred_5/

 我掉過(guò)的坑：

• 理解不同模型的弱點(diǎn)，而不是測(cè)試隨機(jī)模型。開(kāi)始的時(shí)候，我使用了類(lèi)似批次標(biāo)準(zhǔn)化和雙向網(wǎng)絡(luò)這類(lèi)隨機(jī)模型，并嘗試實(shí)現(xiàn)注意力機(jī)制。然后看了測(cè)試數(shù)據(jù)，才發(fā)現(xiàn)這樣無(wú)法準(zhǔn)確預(yù)測(cè)顏色和位置，我意識(shí)到 CNN 有一個(gè)弱點(diǎn)。這就導(dǎo)致我采用更大的步幅來(lái)取代 maxpooling。之后驗(yàn)證損失就從 0.12 變?yōu)?0.02，而 BLEU 得分從 85％提高到了 97％。
• 如果它們相關(guān)的話，只使用預(yù)先訓(xùn)練好的模型。鑒于給定的數(shù)據(jù)集很小，我認(rèn)為經(jīng)過(guò)預(yù)訓(xùn)練的圖像模型會(huì)提高性能。從我的實(shí)驗(yàn)來(lái)看，端到端的模型訓(xùn)練起來(lái)比較慢，需要更多的內(nèi)存，但是精度要高出 30％。
• 在遠(yuǎn)程服務(wù)器上運(yùn)行模型時(shí)，你的計(jì)劃需要有所調(diào)整。在我的 Mac 上，它會(huì)按字母順序來(lái)讀取文件。但是在遠(yuǎn)程服務(wù)器上，它是隨機(jī)定位的。這就造成了截圖和代碼之間的不匹配。雖然它仍然收斂，但驗(yàn)證數(shù)據(jù)比我修正之后的要差 50％。
• 確保你理解庫(kù)函數(shù)。包括詞匯表中空記號(hào)的填充空格。當(dāng)我沒(méi)有添加填充空格時(shí)，預(yù)測(cè)中沒(méi)有包括任何一個(gè)空記號(hào)。這也是我看了好幾遍輸出結(jié)果之后才注意到的，而且模型從來(lái)沒(méi)有預(yù)測(cè)到一個(gè)單記號(hào)。經(jīng)過(guò)快速的檢查，我發(fā)現(xiàn)到這甚至不在詞匯表中。另外，詞匯表要以相同的順序進(jìn)行訓(xùn)練和測(cè)試。
• 試驗(yàn)時(shí)使用更輕量級(jí)的模型。使用 GRU 而不是 LSTM 會(huì)將每個(gè) epoch 周期減少 30％，并且對(duì)性能沒(méi)有太大的影響。

下一步

前端開(kāi)發(fā)是應(yīng)用深度學(xué)習(xí)的理想領(lǐng)域。因?yàn)樯蓴?shù)據(jù)很容易，并且目前的深度學(xué)習(xí)算法可以映射絕大部分的邏輯。

其中最令人興奮的領(lǐng)域之一是注意力機(jī)制在 LSTM 上的應(yīng)用。這不僅會(huì)提高準(zhǔn)確性，而且還能使我們能夠直觀地看到 CNN 在產(chǎn)生標(biāo)簽時(shí)將焦點(diǎn)放在了哪里。

注意力機(jī)制也是標(biāo)簽、樣式表、腳本和后端之間溝通的關(guān)鍵。注意力層可以跟蹤變量，確保神經(jīng)網(wǎng)絡(luò)能夠在編程語(yǔ)言之間進(jìn)行通信。

但在不久的將來(lái)，最大的問(wèn)題在于如何找到一種可伸縮的方式來(lái)生成數(shù)據(jù)，這樣就可以逐步加入字體、顏色、文字和動(dòng)畫(huà)。

到目前為止，大部分的進(jìn)步都是發(fā)生在將草圖轉(zhuǎn)化為模板應(yīng)用程序的過(guò)程中。在不到兩年的時(shí)間里，我們將可以在紙上畫(huà)一個(gè)應(yīng)用程序，并在不到一秒的時(shí)間內(nèi)就可以獲得相應(yīng)的前端代碼。Airbnb 的設(shè)計(jì)團(tuán)隊(duì)和 Uizard 已經(jīng)構(gòu)建了兩個(gè)可用的原型。

一些實(shí)驗(yàn)
開(kāi)始

• 運(yùn)行所有的模型
• 嘗試不同的超參數(shù)
• 測(cè)試一個(gè)不同的 CNN 構(gòu)架
• 添加雙向 LSTM 模型
• 用不同的數(shù)據(jù)集來(lái)實(shí)現(xiàn)模型

進(jìn)一步的試驗(yàn)

• 使用相應(yīng)的語(yǔ)法創(chuàng)建一個(gè)可靠的隨機(jī)應(yīng)用程序或網(wǎng)頁(yè)生成器。
• 從草圖到應(yīng)用模型的數(shù)據(jù)。將應(yīng)用程序或網(wǎng)頁(yè)截圖自動(dòng)轉(zhuǎn)換為草圖，并使用 GAN 創(chuàng)建不同類(lèi)型的草圖。
• 應(yīng)用一個(gè)注意力層，可視化每個(gè)預(yù)測(cè)在圖像上的焦點(diǎn)，類(lèi)似于這個(gè)模型。
• 為模塊化方法創(chuàng)建一個(gè)框架。比如，有字體的多個(gè)編碼器模型，其中一個(gè)用于顏色，另一個(gè)用于排版，之后將這些編碼器整合到一個(gè)解碼器中。獲得穩(wěn)定的固體圖像特征是一個(gè)好兆頭。
• 為神經(jīng)網(wǎng)絡(luò)提供簡(jiǎn)單的 HTML 組件，并且教它使用 CSS 生成動(dòng)畫(huà)。

當(dāng)前文章：如何用深度學(xué)習(xí)將前端設(shè)計(jì)模型自動(dòng)轉(zhuǎn)換為代碼？
文章來(lái)源：http://m.fisionsoft.com.cn/article/cccoeoo.html