基于UI 圖像的Web 前端代碼自動(dòng)生成

葛 進(jìn), 陸雪松

（華東師范大學(xué) 數(shù)據(jù)科學(xué)與工程學(xué)院, 上海 200062）

0 引 言

在應(yīng)用程序中, Web (world wide web)前端扮演著與用戶交互的重要角色. 近年來隨著移動(dòng)互聯(lián)網(wǎng)的普及, Web 前端不再僅僅是桌面應(yīng)用的一種選擇, 它也成為了移動(dòng)應(yīng)用提供服務(wù)的主要方式之一. 越來越多的應(yīng)用程序?qū)⑵溆脩艚缑孓D(zhuǎn)移到Web 前端, 使得其應(yīng)用場(chǎng)景愈發(fā)廣泛而深入. 當(dāng)前主流的Web 開發(fā)流程是, 先由用戶交互設(shè)計(jì)師設(shè)計(jì)用戶界面 (user interface, UI) 稿, 再由前端開發(fā)工程師根據(jù)設(shè)計(jì)稿編寫代碼實(shí)現(xiàn)設(shè)計(jì)稿的效果. 這樣開發(fā)的弊端是顯而易見的, 主要有兩個(gè)缺點(diǎn): ① 行業(yè)壁壘較高, 沒有開發(fā)崗位的公司很難根據(jù)自己的需求產(chǎn)出前端界面; ② 開發(fā)周期過長(zhǎng), 無法滿足產(chǎn)品快速落地的需求. 一個(gè)可能的解決方案是根據(jù)UI 圖像自動(dòng)生成前端代碼[1]. 最近十年, 深度學(xué)習(xí)技術(shù)在包括計(jì)算機(jī)視覺、自然語言處理等領(lǐng)域的發(fā)展迅速, 使得根據(jù)網(wǎng)頁截圖生成Web 前端代碼成為了可能, 即訓(xùn)練深度學(xué)習(xí)模型根據(jù)網(wǎng)頁截圖或者UI 設(shè)計(jì)稿圖像自動(dòng)生成Web 前端布局代碼. 這可以使得傳統(tǒng)Web 開發(fā)方式的弊端在一定程度上得到緩解.

在Web 前端代碼生成的研究中, 網(wǎng)頁元素結(jié)構(gòu)布局的關(guān)系捕捉構(gòu)成了一項(xiàng)較大的挑戰(zhàn). 現(xiàn)有的研究方法主要使用Encoder-Decoder 模型架構(gòu)來實(shí)現(xiàn)網(wǎng)頁截圖中元素結(jié)構(gòu)關(guān)系的捕捉和相應(yīng)的前端代碼生成. Beltramelli[2]提出的pix2code 第一次把深度學(xué)習(xí)技術(shù)應(yīng)用在Web 前端代碼生成任務(wù)上.Pix2code 基于卷積神經(jīng)網(wǎng)絡(luò)(convolutional neural network, CNN)[3]和長(zhǎng)短期記憶網(wǎng)絡(luò)(long shortterm memory, LSTM)[4], 由單個(gè)UI 截圖生成領(lǐng)域特定語言 (domain specific languages, DSL). 為提高模型準(zhǔn)確率, Zhu 等[5]提出了加入注意力機(jī)制的改進(jìn)模型, 取得了比基準(zhǔn)模型更高的代碼生成準(zhǔn)確率.Xu 等[6]改進(jìn)了pix2code 的CNN 結(jié)構(gòu), 并且使用LSTM 生成可以轉(zhuǎn)化為HTML (hyper text markup language) + CSS (cascading style sheets)代碼的Emmet 代碼. 相比HTML + CSS 代碼, Emmet 代碼更加簡(jiǎn)潔、長(zhǎng)度更短, 因此可以提高模型訓(xùn)練效率. 從上述模型可以看出, 從UI 圖像生成Web 前端代碼可以被視為圖像描述任務(wù)[7-8]的一種形式. 圖像描述任務(wù)的目標(biāo)是從給定的圖像中生成相應(yīng)的文本描述. 作為類比, UI 圖像可以作為輸入圖像, 而生成的Web 前端代碼則可以被視為對(duì)該截圖的描述.

圖像描述任務(wù)已經(jīng)廣泛使用基于Transformer 的編碼器提取圖像特征[9-11]. 但是, Transformer 模型中, 計(jì)算注意力機(jī)制的開銷較大, 最后導(dǎo)致的結(jié)果是訓(xùn)練效率不高、擬合文本的準(zhǔn)確率欠佳. 這對(duì)于Web 前端代碼生成任務(wù)的影響較大. 首先, UI 圖像不像普通圖像那樣包含復(fù)雜的元素, 其主要構(gòu)成元素是各類組件, 包含文本框、按鈕、復(fù)選框等, 并且組件的布局較為結(jié)構(gòu)化, 因此對(duì)整個(gè)圖像進(jìn)行全局注意力計(jì)算性價(jià)比較低; 其次, 代碼不同于自然語言描述, 不允許有任何語法錯(cuò)誤, 否則會(huì)導(dǎo)致生成的代碼無法編譯, 因此Web 前端代碼生成對(duì)于生成代碼的準(zhǔn)確率要求較高.

為了解決上述兩個(gè)問題, 本文提出了一個(gè)編碼器-解碼器模型image2code, 用于基于UI 圖像自動(dòng)生成相應(yīng)的Web 前端代碼. 在編碼器端, 為了降低注意力計(jì)算的開銷, image2code 在編碼UI 圖像時(shí)采用在圖像描述任務(wù)中已經(jīng)得到驗(yàn)證的Swin Transformer[12]結(jié)構(gòu), 通過滑窗的方式將注意力運(yùn)算限制在圖像局部區(qū)域, 減小運(yùn)算開銷, 同時(shí)保證不同窗口的元素間仍然可以互相交互; 在解碼器端, 為了提高代碼生成的效率, image2code 生成較為精簡(jiǎn)的Emmet 代碼[6], 從而提高生成代碼的準(zhǔn)確率. 利用官方插件(https://emmet.io)可以將Emmet 代碼轉(zhuǎn)換為HTML 代碼, 實(shí)現(xiàn)Web 前端生成. 實(shí)驗(yàn)結(jié)果表明, 本文提出的image2code 模型在兩個(gè)數(shù)據(jù)集上生成的Web 前端代碼, 相比對(duì)比模型在準(zhǔn)確性上有更好的表現(xiàn). 此外, 本文通過敏感性實(shí)驗(yàn)分析了編碼器中的滑窗平移步長(zhǎng)大小對(duì)于模型的影響, 并且展示了利用image2code 生成的代碼編譯的Web 前端例子.

1 相關(guān)工作介紹

1.1 Web 前端代碼生成

在Web 前端代碼生成任務(wù)上, Beltramelli[2]提出的pix2code 模型第一次把深度學(xué)習(xí)技術(shù)應(yīng)用在Web 前端代碼生成任務(wù)上. 它基于卷積神經(jīng)網(wǎng)絡(luò)和循環(huán)神經(jīng)網(wǎng)絡(luò), 由單個(gè)UI 屏幕截圖生成HTML 源代碼. 在pix2code 的基礎(chǔ)上, 研究者們提出了提升模型有效性的改進(jìn)方案, 且大多是由Encoder-Decoder 模型架構(gòu)的. Zhu 等[5]提出了加入了注意力機(jī)制的改進(jìn)模型并且構(gòu)建了自己的數(shù)據(jù)集. Xu 等[6]提出了包含HTML 和CSS 代碼的數(shù)據(jù)集并改進(jìn)了模型的卷積層結(jié)構(gòu). Chen 等[7]提出的編碼器-解碼器模型參照?qǐng)D片描述任務(wù)的方法, 采用GRU(gate recurrent unit)作為解碼器并加入了注意力機(jī)制,取得了比pix2code 模型更高的代碼準(zhǔn)確率. Bajammal 等[13]提出了從UI 界面生成可重用的Web 組件的VizMoD 工具. 盡管Web 前端代碼生成研究已經(jīng)廣泛開展, 但尚未有基于Transformer 的模型提出,并且Web 前端代碼生成的任務(wù)在提高數(shù)據(jù)集質(zhì)量、提升代碼生成準(zhǔn)確率和模型效率等方面還有很大的探索空間.

1.2 圖像描述

圖像描述是一個(gè)將計(jì)算機(jī)視覺和自然語言處理技術(shù)相結(jié)合的綜合性研究問題[8]. 其主要過程是設(shè)計(jì)算法檢測(cè)圖像中的關(guān)鍵物體, 并且能夠準(zhǔn)確理解圖像中物體與物體之間的邏輯關(guān)系, 然后用自然語言描述關(guān)鍵物體以及它們之間的關(guān)系. 目前解決圖像描述任務(wù)主要有3 種方法[14]: 基于模板填充的方法, 基于檢索的方法和基于生成的方法. 基于模板填充的方法在人為規(guī)定的一系列句法模板中留出部分空白, 然后基于提取出的圖像特征獲得目標(biāo)、動(dòng)作及屬性, 將它們填充進(jìn)空白部分, 從而獲得對(duì)圖像的描述[15]. 基于檢索的方法將大量的圖像描述存儲(chǔ)為一個(gè)集合, 然后通過比較待描述圖像和訓(xùn)練集中圖像描述的相似性獲得一個(gè)待選句集, 最后設(shè)計(jì)算法從待選句集中選取最合適的描述[8]. 近年來研究較多的是基于生成的方法, 過程是先將圖像信息編碼, 作為輸入送入語言模型, 再利用語言模型生成圖像描述[16]. Wang 等[17]提出了基于滑動(dòng)窗口的Swin Transformer 模型完成圖像描述任務(wù), 在多個(gè)評(píng)價(jià)指標(biāo)上取得了較好的效果. Xian 等[10]提出了全局加強(qiáng)Transformer 來更好地捕捉圖像中的全局信息. Tan 等[11]提出了在不影響測(cè)試性能的前提下盡可能減小模型大小的ACORT 模型. Wei 等[15]提出了基于原始 Transformer 結(jié)構(gòu)的順序變換器框架S-Transformer, 其中解碼器是outside-in attention和 RNN (recurrent neural network)相結(jié)合的結(jié)構(gòu). Luo 等[18]提出了一種專為圖像描述設(shè)計(jì)的基于擴(kuò)散模型的框架. Ramos 等[19]提出了輕量級(jí)的SmallCap 模型, 使得模型在參數(shù)量較小的情況下依然有良好的表現(xiàn). Wei 等[20]提出了一種基于Transformer 模型的端到端的圖像描述框架EURAIC (enhance understanding and reasoning ability for image captioning), 增強(qiáng)了圖像描述的理解和推理能力. 盡管圖像描述的模型眾多, 但是在Web 前端代碼生成任務(wù)中, UI 圖像的結(jié)構(gòu)性和生成代碼的規(guī)范性對(duì)模型的計(jì)算效率和代碼生成的準(zhǔn)確率提出了更高的要求.

2 Image2code 模型

2.1 數(shù)據(jù)集構(gòu)建

在基于UI 圖像的Web 前端代碼生成任務(wù)上, 已有的研究大多利用Beltramelli[2]在訓(xùn)練pix2code 模型時(shí)構(gòu)建的合成數(shù)據(jù)集, 以下稱之為pix2code 數(shù)據(jù)集. pix2code 數(shù)據(jù)集共包含1 742 張圖片及其對(duì)應(yīng)的Web 前端代碼, 大多只包含按鈕、段落等組件. 由于pix2code 數(shù)據(jù)集規(guī)模較小, 并且沒有考慮到其他復(fù)雜的網(wǎng)頁元素, 其實(shí)用性不夠. 因此, 有必要構(gòu)建一個(gè)更大規(guī)模、包含更豐富組件類型的數(shù)據(jù)集, 來模擬真實(shí)網(wǎng)頁. 本文延續(xù)pix2code 構(gòu)建合成數(shù)據(jù)集的思路, 將Web 前端的組件進(jìn)一步細(xì)分為標(biāo)題元素、輸入元素、列表元素、段落元素、按鈕元素和其他元素這六大類. 之后, 隨機(jī)選擇上述組件填充前端代碼, 并且確保每一大類不超過3 個(gè), 隨后利用Python 中的selenium 第三方包[21]自動(dòng)操縱瀏覽器打開文件然后截圖, 從而得到截圖及其對(duì)應(yīng)的Web 前端代碼. 這里隨機(jī)填充的前端代碼是HTML 代碼, 代碼長(zhǎng)度較長(zhǎng), 對(duì)模型的訓(xùn)練效率有一定影響. 為了減少模型訓(xùn)練時(shí)輸入和輸出的文本長(zhǎng)度以提高訓(xùn)練效率, 本文利用開源工具(https://uhc-elgg.ch/convert)將HTML 代碼轉(zhuǎn)換為較為簡(jiǎn)潔的Emmet 代碼. 圖1 展示了一段HTML 代碼和對(duì)應(yīng)的Emmet 代碼, 可以觀察到將HTML 代碼轉(zhuǎn)換為Emmet 代碼能顯著降低代碼文本的長(zhǎng)度, 并且其相互轉(zhuǎn)換過程是確定性的. 利用上述方式, 本文創(chuàng)建了14 252 張圖片及其對(duì)應(yīng)的Web 前端代碼, 并將這個(gè)數(shù)據(jù)集命名為image2code 數(shù)據(jù)集, 用于image2code 模型的訓(xùn)練.

2.2 編碼器與解碼器

原始Transformer 模型[22]的注意力計(jì)算公式如下所示. 其中,WQ,WK和WV是3 個(gè)可訓(xùn)練的參數(shù)矩陣,輸入矩陣X分別與WQ,WK和WV相乘,生成查詢矩陣Q、鍵值矩陣K和數(shù)值矩陣V.隨后Q和K相乘得到關(guān)于數(shù)值矩陣的權(quán)重分布, 并用進(jìn)行縮放,其中dk是鍵值向量的維度. 最后對(duì)權(quán)重矩陣進(jìn)行softmax 歸一化, 并對(duì)數(shù)值矩陣進(jìn)行加權(quán)求和. 這個(gè)計(jì)算過程如式(1)—(4)所示.

在利用Transformer 編碼圖像時(shí), 通常將整個(gè)圖像切分成多個(gè)互不相交的小塊區(qū)域, 每一塊區(qū)域在嵌入后對(duì)應(yīng)一個(gè)輸入token[23]. 這種處理方法使得在模型的注意力層, 圖像的每一塊區(qū)域都要和其他所有區(qū)域計(jì)算注意力分?jǐn)?shù), 造成昂貴的計(jì)算和存儲(chǔ)開銷. 由于UI 圖像通常是比較結(jié)構(gòu)化的圖像, 圖像語義集中在其中的組件以及組件之間的相互關(guān)系, 因此沒有必要對(duì)圖像的所有區(qū)域兩兩計(jì)算注意力分?jǐn)?shù). 受到Swin Transformer[12]的啟發(fā), 本文采用基于窗口的方法, 將UI 圖像劃分成若干個(gè)互不相交的窗口, 將注意力計(jì)算限制在每個(gè)窗口內(nèi)部的小塊之間, 如圖2(a)所示. 這樣注意力計(jì)算的代價(jià)大大降低, 相應(yīng)的注意力模塊被稱為基于窗口的多頭自注意力 (window-based multi-head self attention,W-MSA). 假設(shè)輸入圖像包含h×w個(gè)小塊, 每個(gè)小塊拉伸后的維度為C, 相應(yīng)地,WQ,WK和WV的維度為C×C. 那么, 在原始的多頭注意力MSA 模塊中, 計(jì)算Q,K和V的時(shí)間復(fù)雜度為 3hwC2, 計(jì)算QKT的時(shí)間復(fù)雜度為 (hw)2C, 計(jì)算 a ttention(Q,K,V) 的時(shí)間復(fù)雜度為 (hw)2C, 最后線性變換輸出編碼的時(shí)間復(fù)雜度為hwC2. 因此, 原始多頭注意力MSA 模塊的時(shí)間復(fù)雜度如式(5)所示, 是h×w的二次方, 當(dāng)h×w很大時(shí)計(jì)算代價(jià)極高.

圖2 W-MSA 與SW-MSA Fig. 2 W-MSA and SW-MSA

而在W-MSA 模塊中, 注意力計(jì)算被限制在每個(gè)窗口內(nèi)部. 假設(shè)每個(gè)窗口內(nèi)包含M×M個(gè)小塊,那么整個(gè)圖像被分割為個(gè)窗口, 則計(jì)算QKT和 a ttention(Q,K,V) 的時(shí)間復(fù)雜度降低為, 因此W-MSA 模塊的整體時(shí)間復(fù)雜度如公式(6)所示. 可以看到復(fù)雜度降低為和h×w成線性關(guān)系.

不過, W-MSA 的方法也有天然的缺陷, 即屬于不同窗口的區(qū)域互相之間無法交互, 導(dǎo)致無法捕捉屬于不同窗口的組件之間的關(guān)系. 因此, 本文沿用Swin Transformer 中的滑動(dòng)窗口思想, 將所有窗口向右和向下平移, 使得新窗口中包含原本屬于不同窗口的區(qū)域, 讓它們?cè)谛麓翱谥羞M(jìn)行局部的注意力計(jì)算(圖2(b)). 例如, 圖2(a)中的紫色列表, 原本被劃分進(jìn)了4 個(gè)不同的窗口, 左下角的3 個(gè)列表內(nèi)容無法捕捉到和其他列表的關(guān)系; 經(jīng)過滑窗后, 在圖2(b)中, 這3 個(gè)列表可以在中間窗口中發(fā)現(xiàn)與其他列表屬于同一層級(jí). 相應(yīng)的注意力模塊被稱為基于滑動(dòng)窗口的多頭自注意力 (shifted window-based multi-head self attention, SW-MSA). 一般來講, 如果滑動(dòng)窗口的大小記為S, 那么窗口平移的步長(zhǎng)可以設(shè)為在具體建模時(shí), Transformer 的每一個(gè)block 中的自注意力層, 替換為一個(gè)W-MSA 和一個(gè)SW-MSA 層, 在降低注意力計(jì)算開銷的同時(shí), 保證了不同窗口區(qū)域之間也可以進(jìn)行注意力計(jì)算.

在解碼器端, 通過編碼器得到的圖像編碼序列作為查詢, UI 圖像對(duì)應(yīng)的Emmet 代碼序列作為鍵值和數(shù)值, 輸入到Transformer 解碼器中, 將UI 圖像解碼成對(duì)應(yīng)的Emmet 代碼. 綜上所述, image2code模型的整體框架如圖3 所示.

最左側(cè)的嵌入層用于提取輸入U(xiǎn)I 圖像的特征, 經(jīng)過線性層處理后得到每個(gè)小塊區(qū)域?qū)?yīng)的查詢、鍵值和數(shù)值, 輸入到編碼器中. 編碼器由N個(gè)相同的block 連接構(gòu)成, 每個(gè)block 中依次包含WMSA 層, SW-MSA 層, 層歸一化層, 線性層和層歸一化層. 解碼器也由N個(gè)相同的block 組成, 接受編碼器的輸出和UI 圖像對(duì)應(yīng)的Emmet 代碼作為輸入, 從編碼器捕捉的UI 特征表示中解碼出目標(biāo)序列.模型訓(xùn)練的損失函數(shù)采用經(jīng)典的交叉熵, 計(jì)算生成代碼序列和目標(biāo)代碼序列的差異.

3 實(shí)驗(yàn)結(jié)果與分析

3.1 實(shí)驗(yàn)數(shù)據(jù)和評(píng)估指標(biāo)

本文的實(shí)驗(yàn)數(shù)據(jù)由兩部分組成, 分別是pix2code 模型公開的數(shù)據(jù)集[2]和本文在其構(gòu)建方法上擴(kuò)展并重新構(gòu)建的數(shù)據(jù)集. 簡(jiǎn)便起見, 將兩個(gè)數(shù)據(jù)集分別命名為pix2code 數(shù)據(jù)集和image2code 數(shù)據(jù)集. 兩個(gè)數(shù)據(jù)集的基本信息如表1 所示.

表1 實(shí)驗(yàn)數(shù)據(jù)集信息比較Tab. 1 Comparison of dataset information

在評(píng)估Web 前端代碼生成效果時(shí), 采用BLEU (bilingual evaluation understudy)和METEOR(metric for evaluation of translation with explicit ordering)這兩個(gè)在文本生成任務(wù)中被廣泛采用的技術(shù)指標(biāo). BLEU 經(jīng)常被用于評(píng)估機(jī)器翻譯中預(yù)測(cè)翻譯與目標(biāo)翻譯、生成任務(wù)中生成句子和真實(shí)句子的相似度[24]. BLEU 采用基于n-gram 的匹配規(guī)則, 比較生成文本和目標(biāo)文本之間n-gram 的相似占比.METEOR 基于BLEU 進(jìn)行了改進(jìn)[25], 其目的是解決BLEU 基于n-gram 匹配的缺陷. METEOR 使用WordNet 計(jì)算特定的序列匹配, 包括同義詞、詞根和詞綴、釋義之間的匹配關(guān)系, 改善了BLEU 的效果, 使其評(píng)估結(jié)果跟人工判別具有更強(qiáng)的相關(guān)性.

3.2 實(shí)驗(yàn)參數(shù)設(shè)定和訓(xùn)練細(xì)節(jié)

本文將模型訓(xùn)練時(shí)輸入的批大小設(shè)定為10, 分割圖像的窗口大小設(shè)定為12, 滑動(dòng)的步長(zhǎng)設(shè)定為6.本文使用Adam 算法對(duì)模型進(jìn)行優(yōu)化, 學(xué)習(xí)率固定為0.001. 當(dāng)模型訓(xùn)練損失收斂時(shí), 訓(xùn)練即可停止.訓(xùn)練時(shí)觀察到所有的模型都會(huì)在30 輪后收斂.

3.3 主要結(jié)果

本文將image2code 模型和pix2code[2]、image2emmet[6]兩個(gè)Web 前端代碼生成的代表性模型進(jìn)行比較, 并且將image2code 模型中的編碼器替換為普通的Transformer 進(jìn)行消融實(shí)驗(yàn). 表2 和表3 分別展示了在pix2code 和image2code 兩個(gè)數(shù)據(jù)集上的結(jié)果.

表2 pix2code 數(shù)據(jù)集實(shí)驗(yàn)結(jié)果Tab. 2 Experimental results on the pix2code dataset

表3 Image2code 數(shù)據(jù)集實(shí)驗(yàn)結(jié)果Tab. 3 Experimental results on the image2code dataset

從表2 中可以觀察到, 本文提出的image2code 模型在衡量代碼生成相似度的所有指標(biāo)上都大幅優(yōu)于pix2code 和image2emmet 模型. 同時(shí)可以觀察到, 當(dāng)采用Swin Transformer 作為模型編碼器的骨干網(wǎng)絡(luò)時(shí), 模型會(huì)表現(xiàn)出更好的性能, 證明了采用基于滑窗的Transformer 比普通Transformer 對(duì)于Web 組件及其關(guān)系的捕捉更為精確.

表3 展示了image2code 數(shù)據(jù)集上的實(shí)驗(yàn)結(jié)果. 從表3 中可以觀察到, 和前述實(shí)驗(yàn)結(jié)果類似, 本文提出的image2code 模型在各項(xiàng)指標(biāo)上都優(yōu)于pix2code 和image2emmet 模型, 并且采用Swin Transformer 作為模型編碼器的骨干網(wǎng)絡(luò)時(shí), 模型會(huì)表現(xiàn)出更好的性能.

2.2 節(jié)分析了MSA 和W-MSA 模塊的計(jì)算復(fù)雜度, 可以看到W-MSA 相對(duì)于MSA 大幅降低了注意力計(jì)算的代價(jià). 通過實(shí)驗(yàn), 本文驗(yàn)證了這種計(jì)算代價(jià)的降低為模型訓(xùn)練效率帶來的影響. 圖4 展示了在image2code 數(shù)據(jù)集上, 各個(gè)模型在訓(xùn)練集上的損失以及在驗(yàn)證集上的準(zhǔn)確度隨epoch 的變化. 從圖中可以觀察到, 使用Transformer 作為編碼器的image2code 模型, 比使用CNN 作為編碼器的pix2code 和image2emmet 模型更快達(dá)到相同的訓(xùn)練損失和驗(yàn)證準(zhǔn)確度; 同時(shí), 使用Swin Transformer的image2code 比使用原始Transformer 的image2code 更快達(dá)到相同的訓(xùn)練損失和驗(yàn)證準(zhǔn)確度. 實(shí)驗(yàn)證明了注意力計(jì)算代價(jià)的降低, 提高了模型的整體訓(xùn)練效率.

圖4 模型的訓(xùn)練損失(a)與驗(yàn)證準(zhǔn)確度(b)Fig. 4 Training loss (a) and validation accuracy (b) of the models

3.4 敏感度分析

本節(jié)通過更改image2code 的SW-MSA 窗口滑動(dòng)步長(zhǎng)的大小, 分析這個(gè)超參對(duì)于模型性能的影響.其他超參固定, 將滑動(dòng)步長(zhǎng)大小分別設(shè)置為0、3 和6. 其中6 為image2code 模型采用的滑動(dòng)步長(zhǎng)大小.在此超參設(shè)置為0 的情況下, 模型的SW-MSA 結(jié)構(gòu)則退化為W-MSA 結(jié)構(gòu), 即沒有窗口滑動(dòng)的過程,注意力計(jì)算被限制在每個(gè)窗口的內(nèi)部元素之間. 表4 和表5 分別展示了在pix2code 數(shù)據(jù)集和image2code 數(shù)據(jù)集上的實(shí)驗(yàn)結(jié)果.

表4 基于pix2code 數(shù)據(jù)集調(diào)節(jié)image2code 滑動(dòng)步長(zhǎng)大小Tab. 4 Varying the stride size of image2code based on the pix2code dataset

表5 基于imag2code 數(shù)據(jù)集調(diào)節(jié)image2code 滑動(dòng)步長(zhǎng)大小Tab. 5 Varying the stride size of image2code based on the image2code dataset

從實(shí)驗(yàn)結(jié)果可以觀察到, 當(dāng)滑動(dòng)步長(zhǎng)越大時(shí), 生成代碼的準(zhǔn)確率會(huì)越高, 這也許是因?yàn)橛懈嗟脑緦儆诓煌翱诘膮^(qū)域之間產(chǎn)生了交互. 特別地, 當(dāng)滑動(dòng)步長(zhǎng)大小為0 時(shí), image2code 的編碼器不會(huì)在不同窗口之間進(jìn)行注意力計(jì)算, 可能會(huì)導(dǎo)致無法精準(zhǔn)捕捉Web 組件之間的關(guān)系, 從而導(dǎo)致生成代碼的準(zhǔn)確率欠佳.

3.5 案例分析

本節(jié)在image2code 數(shù)據(jù)集中挑選兩個(gè)UI 圖像, 采用image2code 模型和pix2code 基準(zhǔn)模型分別生成相應(yīng)的前端代碼, 然后編譯成Web 前端, 并進(jìn)行對(duì)比.

挑選的第一個(gè)UI 圖像如圖5(a)所示, 利用image2code 模型和pix2code 模型生成代碼編譯的UI 如圖5(b)和圖5(c)所示. 對(duì)比圖5 中3 個(gè)子圖可以發(fā)現(xiàn), image2code 相比pix2code 生成了更為精確的列表元素. 此外, image2code 成功捕捉了原圖中的文本框, 而pix2code 則沒有發(fā)現(xiàn)原圖中文本框的存在.

圖5 案例分析1Fig. 5 Case study 1

挑選的第二個(gè)UI 圖像如圖6(a)所示, 在image2code 模型和pix2code 基準(zhǔn)模型下生成的代碼對(duì)應(yīng)的UI 如圖6(b)和圖6c 所示. 對(duì)比圖(6)的3 個(gè)子圖可以發(fā)現(xiàn), 當(dāng)對(duì)應(yīng)的UI 原圖較為簡(jiǎn)單時(shí),image2code 模型和pix2code 模型都可以生成比較完整的標(biāo)題元素、表格元素和段落元素. 但是,image2code 模型生成的Web 前端仍然比pix2code 更加接近原始的UI 圖像.

圖6 案例分析2Fig. 6 Case study 2

4 結(jié)論和展望

本文提出了一個(gè)基于編碼器-解碼器結(jié)構(gòu)的模型image2code, 用于從UI 圖像自動(dòng)生成Web 前端代碼. 首先使用Swin Transformer 提取圖像的網(wǎng)格特征, 表示UI 圖像中組件的編碼和位置信息. 然后, 利用Swin Transformer 基于窗口和滑動(dòng)窗口的注意力機(jī)制計(jì)算方法, 緩解了普通自注意力機(jī)制計(jì)算在UI 圖像上開銷過大的問題. 解碼器接受編碼器輸出和前端代碼的輸入, 從編碼器生成的特征表示中解碼出目標(biāo)序列. 實(shí)驗(yàn)結(jié)果表明, 相比pix2code、image2emmet 等對(duì)比模型, 本文提出的image2code 在生成Web 前端代碼的準(zhǔn)確性上有更好的表現(xiàn). 在未來的工作中, 一方面將尋求在編碼器部分加入目標(biāo)檢測(cè)的算法, 以更好地捕捉UI 圖像組件, 進(jìn)一步降低注意力計(jì)算的開銷; 另一方面將利用Web 前端代碼數(shù)據(jù)集預(yù)訓(xùn)練解碼器, 改進(jìn)解碼器的解碼效果, 進(jìn)一步提升模型生成代碼的準(zhǔn)確性. 此外, 我們計(jì)劃通過挖掘開源倉庫的方法, 得到網(wǎng)頁UI 截圖及其Web 前端代碼, 在真實(shí)數(shù)據(jù)集上訓(xùn)練模型.