基于深度學(xué)習(xí)的Web 用戶界面代碼生成技術(shù)研究

張瑋

（華北科技學(xué)院，河北 廊坊065201）

1 簡(jiǎn)介

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

2 相關(guān)工作

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

為了解決上述問題，本文提出了一種快速聯(lián)合模型RCM(Rapid Combined Model)，模型結(jié)構(gòu)如圖1 所示。該模型綜合利用原始代碼序列信息和圖像特征信息，借助預(yù)訓(xùn)練的詞嵌入模型和深度全連接網(wǎng)絡(luò)進(jìn)行詞的預(yù)測(cè)。

圖1 快速聯(lián)合模型結(jié)構(gòu)示意圖

3 模型的設(shè)計(jì)

3.1 詞嵌入模型

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

3.2 視覺模型設(shè)計(jì)

近些年來CNN 在圖像識(shí)別領(lǐng)域表現(xiàn)突出，因此視覺模型也采用卷積型的網(wǎng)絡(luò)，但為了提高模型的訓(xùn)練和預(yù)測(cè)速度，視覺模型直接使用在ImageNet 數(shù)據(jù)集上預(yù)訓(xùn)練好的InceptionV3 模型[7]生成對(duì)應(yīng)的圖像特征向量，其大小為（1，2048）。

3.3 預(yù)測(cè)模型設(shè)計(jì)

在Web UI 的DSL（Domain Specified Language）序列預(yù)測(cè)任務(wù)上，全連接網(wǎng)絡(luò)在保證基本準(zhǔn)確率的前提下，比循環(huán)網(wǎng)絡(luò)和卷積網(wǎng)絡(luò)在訓(xùn)練時(shí)間上有很大優(yōu)勢(shì)，因此在預(yù)測(cè)模型中采用全連接層堆疊的形式，本文的預(yù)測(cè)模型結(jié)構(gòu)如圖2 所示。

圖2 預(yù)測(cè)模型的結(jié)構(gòu)示意圖

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

4 實(shí)驗(yàn)

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

4.1 訓(xùn)練集上的模型訓(xùn)練

采用pix2code 中的Web UI 訓(xùn)練數(shù)據(jù)進(jìn)行實(shí)驗(yàn)，批次大小512，迭代周期200，學(xué)習(xí)率為0.00001，采用Adam 梯度下降算法進(jìn)行學(xué)習(xí)，采用多分類交叉熵進(jìn)行損失評(píng)估，模型的訓(xùn)練曲線如圖3 所示。

圖3 快速聯(lián)合模型的訓(xùn)練準(zhǔn)確率曲線和損失曲線圖

快速聯(lián)合模型的總參數(shù)為4,942,630 個(gè)（詞嵌入模型和預(yù)測(cè)模型待訓(xùn)練的參數(shù)），其在筆者的臺(tái)式機(jī)上，訓(xùn)練過程共耗時(shí)29分鐘（詞嵌入模型8 分鐘、預(yù)測(cè)模型21 分鐘），準(zhǔn)確率最高為97.685 %，交叉熵?fù)p失最小為0.04805，保存準(zhǔn)確率最高的模型作為最佳模型。

在同等軟硬件環(huán)境下，由于pix2code 模型的訓(xùn)練參數(shù)為109,824,307 個(gè)，訓(xùn)練過程設(shè)為10 個(gè)周期，批次縮小為20，其訓(xùn)練過程約400 分鐘，準(zhǔn)確率為91.8%，交叉熵?fù)p失為0.140。

4.2 測(cè)試集上的代碼生成測(cè)試

使用測(cè)試集中的WebUI 圖像，輸入快速聯(lián)合模型進(jìn)行代碼序列的生成預(yù)測(cè)（使用貪婪搜索算法），并計(jì)算每個(gè)樣本的錯(cuò)誤率，最后求得平均錯(cuò)誤率為8.89%。需要說明的是，當(dāng)生成序列的長度與真實(shí)序列長度不匹配時(shí)，長度差部分也全部計(jì)入錯(cuò)誤計(jì)數(shù)。快速聯(lián)合模型的預(yù)測(cè)錯(cuò)誤率優(yōu)于pix2code 模型在WebUI測(cè)試集的預(yù)測(cè)錯(cuò)誤率12.14%[3]，進(jìn)一步證明了快速模型在明顯提高訓(xùn)練速度的同時(shí)，在生成預(yù)測(cè)序列方面也存在一定優(yōu)勢(shì)。

5 結(jié)論

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