自動(dòng)化前端開(kāi)發(fā)：用深度學(xué)習(xí)5秒鐘將網(wǎng)站草圖轉(zhuǎn)換為HTML代碼

時(shí)間：2023-09-13 17:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-13 17:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

自動(dòng)化前端開(kāi)發(fā)：用深度學(xué)習(xí)5秒鐘將網(wǎng)站草圖轉(zhuǎn)換為HTML代碼：

不管是大公司也好，小公司也罷，為用戶(hù)創(chuàng)建感性的參與體驗(yàn)都是一個(gè)重要目標(biāo)，而這個(gè)過(guò)程往往通過(guò)原型設(shè)計(jì)、程序設(shè)計(jì)和用戶(hù)測(cè)試這幾個(gè)部分之間快速循環(huán)來(lái)完成。對(duì)于大型公司，比如 Facebook，它們有足夠的專(zhuān)用帶寬，可供整個(gè)團(tuán)隊(duì)設(shè)計(jì)前面所說(shuō)的流程，通常要花費(fèi)幾周的時(shí)間；而小型公司由于沒(méi)有此類(lèi)資源支持，往往得到很不理想的用戶(hù)界面。




本文我將分享如何用深度學(xué)習(xí)算法大幅簡(jiǎn)化設(shè)計(jì)工作流，從而讓任何體量的公司都能快速創(chuàng)建測(cè)試網(wǎng)頁(yè)。




（項(xiàng)目代碼地址見(jiàn)文末）




當(dāng)前的設(shè)計(jì)工作流




當(dāng)前一個(gè)典型的設(shè)計(jì)工作流可能如下所示：

• 產(chǎn)品經(jīng)理進(jìn)行用戶(hù)調(diào)查后，列出一系列的要求。
• 設(shè)計(jì)師根據(jù)需求，探索低保真原型，最終創(chuàng)建高保真產(chǎn)品模型。
• 工程師用代碼實(shí)現(xiàn)設(shè)計(jì)，最終將產(chǎn)品傳達(dá)給用戶(hù)。

這種冗長(zhǎng)的開(kāi)發(fā)流程很多時(shí)候會(huì)成為制約企業(yè)的瓶頸問(wèn)題，因此一些公司比如 Airbnb，已經(jīng)開(kāi)始用機(jī)器學(xué)習(xí)讓開(kāi)發(fā)流程更加高效。







但是這些公司應(yīng)用的方法到底如何，外界不得而知。因此我決定研究一種開(kāi)源版的網(wǎng)頁(yè)自動(dòng)開(kāi)發(fā)技術(shù)，讓廣大開(kāi)發(fā)者和設(shè)計(jì)師都能從中受益。




理想狀況下，我的模型能夠根據(jù)網(wǎng)站設(shè)計(jì)的簡(jiǎn)單手繪圖，立刻生成可以運(yùn)行的 HTML 網(wǎng)站：







實(shí)際上，上面的例子就是我的模型根據(jù)測(cè)試照片實(shí)際生成的一個(gè)網(wǎng)站?？梢栽谖业?GitHub 上查看生成該網(wǎng)站的代碼：




從圖片描述中汲取靈感

我要解決的問(wèn)題，從大的方向上可以歸類(lèi)為一種叫做“程序綜合”的任務(wù)，也就是自動(dòng)生成能夠運(yùn)行的源代碼。雖然大部分程序綜合處理的是自然語(yǔ)言指令或執(zhí)行追蹤中生成的代碼，但我的模型還能在開(kāi)始時(shí)利用源圖像（手繪的示意圖）。




機(jī)器學(xué)習(xí)領(lǐng)域有個(gè)充分研究的方向叫做圖像描述，這種方法會(huì)學(xué)習(xí)將圖像和文本相匹配的模型，專(zhuān)為源圖像中的內(nèi)容生成文本描述。







在觀摩學(xué)習(xí)了最近發(fā)表的稱(chēng)為pix2code的論文（https://arxiv.org/abs/1705.07962）和Emil Wallner的相關(guān)項(xiàng)目（https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org）后，我獲得了一些啟發(fā)，決定將我的任務(wù)歸類(lèi)為圖像描述，也就是將手繪的網(wǎng)站示意圖看作輸入圖像，而對(duì)應(yīng)的HTML代碼就相當(dāng)于圖像的輸出文本。




獲取正確的數(shù)據(jù)集

如果是用圖像描述這種方法，我理想中的訓(xùn)練數(shù)據(jù)集應(yīng)當(dāng)是幾千張手繪的網(wǎng)站設(shè)計(jì)圖及其對(duì)應(yīng)的 HTML 代碼。意料之中，這種正好符合要求的數(shù)據(jù)集根本找不到，因此我只能自己創(chuàng)建任務(wù)需要的數(shù)據(jù)集。




我首先使用來(lái)自pix2code論文的開(kāi)源數(shù)據(jù)集（https://github.com/tonybeltramelli/pix2code），包含了1750張綜合生成的網(wǎng)站及其相關(guān)源代碼的截圖。







就我的項(xiàng)目的開(kāi)始階段而言，這是個(gè)很好的數(shù)據(jù)集，有幾個(gè)很有趣的亮點(diǎn)：

• 數(shù)據(jù)集中每個(gè)生成的網(wǎng)站都包含幾個(gè)簡(jiǎn)單的引導(dǎo)元素的組合，比如按鈕、文本框、div 等。雖然這意味著我的模型會(huì)局限于生成這幾個(gè)元素，但這種方法也能很容易的泛化，生成更大規(guī)模的元素。
• 每個(gè)樣本的源代碼包含了來(lái)自論文作者為相應(yīng)任務(wù)創(chuàng)建的 DSL（特定域語(yǔ)言）中的 token。每個(gè) token 對(duì)應(yīng)一段 HTML 和 CSS 腳本，然后會(huì)用一個(gè)編譯器將 DSL 轉(zhuǎn)換為運(yùn)行的 HTML 代碼。

讓圖像具有設(shè)計(jì)草圖的效果







為了修正數(shù)據(jù)集，更好的適應(yīng)我的任務(wù)，我需要讓網(wǎng)站圖像看起來(lái)是用手畫(huà)出來(lái)的一樣。我用了一些工具，比如 OpenCV 和 Python 庫(kù) PIL，修改了每張圖像的信息，比如灰度轉(zhuǎn)換、輪廓檢測(cè)等。




最終，我決定直接修改初始網(wǎng)站的 CSS 樣式表，進(jìn)行了一系列的操作：

• 改變網(wǎng)頁(yè)上各元素的邊界值，將按鈕和 div 的四角變?yōu)榍€(xiàn)。
• 調(diào)整邊界的厚度以模仿手繪示意圖，并添加陰影。
• 將字體改為看上去像手繪的字體。
• 最后一步，增強(qiáng)圖像的效果，比如為圖像添加斜線(xiàn)、移位和旋轉(zhuǎn)等效果，模仿真實(shí)手繪中變化多端的風(fēng)格。

使用圖像描述模型架構(gòu)

現(xiàn)在，需要的數(shù)據(jù)已經(jīng)備好，終于可以將數(shù)據(jù)輸入到模型中了！




我采用了應(yīng)用于圖像描述部分的模型架構(gòu)，主要包含 3 個(gè)主要部分：

• 一個(gè)使用了卷積神經(jīng)網(wǎng)絡(luò)的計(jì)算機(jī)視覺(jué)模型，用以從源圖像中提取圖像特征。
• 一個(gè)包含 GRU 的語(yǔ)言模型，能夠編碼源代碼 token 的序列。
• 一個(gè)編碼器模型（也是個(gè) GRU），它會(huì)將前面兩個(gè)部分的輸出用作輸入，預(yù)測(cè)序列中的下一個(gè) token。

用token序列作為輸入來(lái)訓(xùn)練模型




為了能訓(xùn)練模型，我將源代碼拆分為 token 的序列。模型的每個(gè)輸入就是一個(gè) token 序列，并配有和序列對(duì)應(yīng)的源圖像，其標(biāo)簽為文件中的下一個(gè) token。模型使用交叉熵代價(jià)函數(shù)作為其損失函數(shù)，它會(huì)將模型預(yù)測(cè)的下一個(gè) token 和實(shí)際的下一個(gè) token 進(jìn)行比較。




在推理階段，當(dāng)模型從零開(kāi)始生成代碼時(shí)，過(guò)程會(huì)有所不同。圖像仍然是通過(guò) CNN 神經(jīng)網(wǎng)絡(luò)處理，但只用起始序列進(jìn)行文本處理。模型對(duì)序列中下一個(gè) token 的預(yù)測(cè)，在每一步都會(huì)添加至當(dāng)前輸入序列，并作為一個(gè)新的輸入序列輸入到模型中。這個(gè)過(guò)程會(huì)反復(fù)進(jìn)行，直到模型預(yù)測(cè)出一個(gè) <End> token 或者用盡了每個(gè)文件中的 token 數(shù)量。




用 BLEU 得分評(píng)估模型

我決定用 BLEU 得分評(píng)估模型。BLEU 得分是應(yīng)用在機(jī)器翻譯任務(wù)中的常見(jiàn)指標(biāo)，用來(lái)衡量輸入相同的情況下，機(jī)器生成文本和人類(lèi)生成文本的接近程度，




基本上，BLEU 會(huì)比較生成文本和引用文本這兩者的 N-Gram 序列，以改進(jìn)的形式表示模型的精確度。這對(duì)本項(xiàng)目來(lái)說(shuō)非常合適，因?yàn)樗鼤?huì)將生成的 HTML 中的實(shí)際元素以及它們之間的關(guān)系考慮進(jìn)來(lái)。




更棒的是，我能通過(guò)檢查生成的網(wǎng)站查看 BLEU 得分。







最高 BLEU 得分 1.0 表示模型能根據(jù)源圖像生成正確的網(wǎng)頁(yè)元素，且各元素均在正確的位置。 BLEU 得分很低則表示模型沒(méi)有正確生成元素，或?qū)⒃胤旁诹隋e(cuò)誤的位置。最終用評(píng)估數(shù)據(jù)集對(duì)模型進(jìn)行評(píng)估時(shí)，顯示模型得到了 0.76 的 BLEU 得分。也就是說(shuō)我搭建的模型，能正確的將 76% 的設(shè)計(jì)草圖短短幾秒鐘內(nèi)轉(zhuǎn)換為 HTML 代碼。




額外福利——自定義網(wǎng)站風(fēng)格




我后來(lái)意識(shí)到還有一個(gè)額外的福利。由于模型只生成了網(wǎng)頁(yè)的框架（文件的 token），那么我可以在編譯過(guò)程中添加一個(gè)自定義 CSS 層，這樣模型就能即刻讓生成的網(wǎng)站擁有多種不同的風(fēng)格。







讓網(wǎng)站風(fēng)格和模型生成過(guò)程相分離，能讓使用模型時(shí)具備幾個(gè)很大的優(yōu)勢(shì)：

• 想將我的模型整合到自家公司產(chǎn)品的前端工程師，在使用模型時(shí)只需改變單個(gè) CSS 文件以符合公司的設(shè)計(jì)風(fēng)格即可。
• 內(nèi)置可伸縮性能。根據(jù)一張?jiān)磮D像，模型輸出就能編譯為 5 個(gè)、10 個(gè)甚至 50 個(gè)不同的預(yù)定義風(fēng)格，因此用戶(hù)可以在瀏覽器上預(yù)覽網(wǎng)站多個(gè)風(fēng)格版本的效果。

結(jié)語(yǔ)及未來(lái)展望




通過(guò)使用圖像描述領(lǐng)域的研究方法，我搭建了一個(gè)深度學(xué)習(xí)模型，能夠?qū)⑹掷L的網(wǎng)站設(shè)計(jì)圖在幾秒鐘內(nèi)轉(zhuǎn)換為可以運(yùn)行的 HTML 網(wǎng)站。




當(dāng)然模型也存在一些局限，未來(lái)我可能從以下幾個(gè)方面優(yōu)化：

• 由于只用了 16 個(gè)元素訓(xùn)練模型，因此模型尚不能預(yù)測(cè)它沒(méi)有見(jiàn)過(guò)的 token。未來(lái)我會(huì)用更多元素，比如圖像、下拉菜單和表格等訓(xùn)練模型生成更多的網(wǎng)站樣本，先從引導(dǎo)元素開(kāi)始。
• 現(xiàn)實(shí)中的網(wǎng)站都有很多變化。未來(lái)我會(huì)創(chuàng)建更能靈活應(yīng)對(duì)這些變化的訓(xùn)練數(shù)據(jù)集，徹底弄懂實(shí)際中真實(shí)的網(wǎng)站，捕捉它們的 HTML/CSS 代碼以及網(wǎng)站內(nèi)容的截圖。
• 手繪圖同樣變化多端，CSS 修改技巧也無(wú)法完全捕捉到。用生成式對(duì)抗網(wǎng)絡(luò)創(chuàng)建看起來(lái)真實(shí)感很強(qiáng)的網(wǎng)站圖像，可以讓手繪草圖數(shù)據(jù)具有更多的變化。

本項(xiàng)目全部代碼見(jiàn)我的GitHub庫(kù)：

---

參考資料：
https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82

歡迎關(guān)注我們的微博：@景略集智

限時(shí)折扣中：0806期《人工智能-從零開(kāi)始到精通》最低58折！