基于深度學習的Web 用戶界面代碼生成技術研究

張瑋

（華北科技學院，河北 廊坊065201）

1 簡介

Web 應用的前端開發者利用HTML 和CSS（Cascading Style Sheets）語言構建Web UI 是一件較為繁瑣的工作，如果能將這一過程部分自動化則可節省較多的人力資源。隨著深度學習的不斷發展，計算機可以利用CNN 網絡從圖像中提取圖像特征，并且可以利用這些特征對圖像進行精確的分類或物體識別[1]。近幾年在圖像字幕研究中，常用的方法是利用CNN 從圖像中提取特征信息，并利用循環神經網絡單元生成圖片字幕[2]。與此同時從Web UI 圖像提取特征信息，并生成界面代碼逐漸成為機器學習中的一個熱點。

2 相關工作

一個例子是pix2code[3]，它將CNN 和LSTM 進行了結合，對輸入的圖像和原始代碼序列進行編碼，之后利用LSTM對編碼進行解碼。另一個例子是深度編碼器DeepCoder，它結合了傳統的搜索技術，并利用統計預測來生成計算機代碼序列[4]。還有學者將注意力機制引入到輸入圖像特征提取的過程，然后由提取的分塊特征信息指導解碼器中的LSTM網絡進行代碼序列的生成[5]，總體結構上仍為編碼器- 解碼器網絡，這一點與pix2code模型類似，即使用代碼序列的特征和圖像特征作為輸入，利用LSTM網絡進行代碼序列的預測。但此類網絡的一個明顯缺點是模型的時間復雜度較大，這主要是模型全部采用CNN 和LSTM單元構成所致。

為了解決上述問題，本文提出了一種快速聯合模型RCM(Rapid Combined Model)，模型結構如圖1 所示。該模型綜合利用原始代碼序列信息和圖像特征信息，借助預訓練的詞嵌入模型和深度全連接網絡進行詞的預測。

圖1 快速聯合模型結構示意圖

3 模型的設計

3.1 詞嵌入模型

詞嵌入模型能夠學習每個單詞的分布表示[6]，普遍用于自然語言的處理中。因此我們使用詞嵌入模型學習Web UI 的DSL 單詞的分布表示，詞嵌入向量矩陣大小為（19，64）。詞嵌入模型的訓練參數有199，251 個，訓練時長約8 分鐘，訓練過程中的損失最小為0.19178，準確率最大為91.824%。

3.2 視覺模型設計

近些年來CNN 在圖像識別領域表現突出，因此視覺模型也采用卷積型的網絡，但為了提高模型的訓練和預測速度，視覺模型直接使用在ImageNet 數據集上預訓練好的InceptionV3 模型[7]生成對應的圖像特征向量，其大小為（1，2048）。

3.3 預測模型設計

在Web UI 的DSL（Domain Specified Language）序列預測任務上，全連接網絡在保證基本準確率的前提下，比循環網絡和卷積網絡在訓練時間上有很大優勢，因此在預測模型中采用全連接層堆疊的形式，本文的預測模型結構如圖2 所示。

圖2 預測模型的結構示意圖

Web UI 的DSL 序列經過詞嵌入層后，轉換為詞嵌入向量形式；Web UI 的PNG 圖像經過視覺模型后，轉換為特征向量。在將詞嵌入向量和圖像特征向量連接后，輸入預測模型。預測模型由9 個全連接層堆疊而成，每個全連接層含512 個單元，最后使用一個包含19 個單元的全連接層和SoftMax 激活，輸出為19 個DSL 單詞的概率，預測模型的訓練參數為4,743,379 個。

4 實驗

為了驗證這種快速聯合模型的效果，利用pix2code 中的Web UI 數據集進行實驗。pix2code 數據集中有實例共1750 個，每個實例包含一個描述Web UI 的代碼序列和一個圖像，代碼序列采用DSL 進行描述，在pix2code 數據集中共有19 個DSL單詞。訓練過程中隨機抽取訓練集20%的樣本作為驗證集。

4.1 訓練集上的模型訓練

采用pix2code 中的Web UI 訓練數據進行實驗，批次大小512，迭代周期200，學習率為0.00001，采用Adam 梯度下降算法進行學習，采用多分類交叉熵進行損失評估，模型的訓練曲線如圖3 所示。

圖3 快速聯合模型的訓練準確率曲線和損失曲線圖

快速聯合模型的總參數為4,942,630 個（詞嵌入模型和預測模型待訓練的參數），其在筆者的臺式機上，訓練過程共耗時29分鐘（詞嵌入模型8 分鐘、預測模型21 分鐘），準確率最高為97.685 %，交叉熵損失最小為0.04805，保存準確率最高的模型作為最佳模型。

在同等軟硬件環境下，由于pix2code 模型的訓練參數為109,824,307 個，訓練過程設為10 個周期，批次縮小為20，其訓練過程約400 分鐘，準確率為91.8%，交叉熵損失為0.140。

4.2 測試集上的代碼生成測試

使用測試集中的WebUI 圖像，輸入快速聯合模型進行代碼序列的生成預測（使用貪婪搜索算法），并計算每個樣本的錯誤率，最后求得平均錯誤率為8.89%。需要說明的是，當生成序列的長度與真實序列長度不匹配時，長度差部分也全部計入錯誤計數?？焖俾摵夏Ｐ偷念A測錯誤率優于pix2code 模型在WebUI測試集的預測錯誤率12.14%[3]，進一步證明了快速模型在明顯提高訓練速度的同時，在生成預測序列方面也存在一定優勢。

5 結論

本文提出了一種用于生成Web UI 代碼序列的快速聯合模型。一方面利用64 個實數的詞嵌入向量來表示每個DSL 單詞，這比使用19 個0/1 的one-hot 向量能夠更加豐富的表達Web UI 中DSL 單詞之間的關系。另一方面利用預訓練的InceptionV3 模型從Web UI 圖像中提取特征向量，降低了聯合模型的復雜程度。預測模型綜合使用DSL 序列的特征向量和Web UI 圖像的特征向量，利用9 層全連接網絡堆疊的方式進行單詞預測，最終的聯合模型在保證相對較高的預測精度和較低的生成錯誤率的前提下，極大的提高了訓練速度。