人們的不斷探索下，「使用人工智能自動生成網(wǎng)頁」的方法已經(jīng)變得越來越接近實(shí)用化了。本文介紹的這種名為 SketchCode 的卷積神經(jīng)網(wǎng)絡(luò)能夠把網(wǎng)站圖形用戶界面的設(shè)計(jì)草圖直接轉(zhuǎn)譯成代碼行，為前端開發(fā)者們分擔(dān)部分設(shè)計(jì)流程。目前，該模型在訓(xùn)練后的 BLEU 得分已達(dá) 0.76。

你可以在 GitHub 上找到這個項(xiàng)目的代碼：https://github.com/ashnkumar/sketch-code

為用戶創(chuàng)造直觀、富有吸引力的網(wǎng)站是各家公司的重要目標(biāo)，而且這是個快速進(jìn)行原型、設(shè)計(jì)、用戶測試循環(huán)的過程。像 Facebook 這樣的大公司有著讓整個團(tuán)隊(duì)專注于設(shè)計(jì)流程的人力，改動可能需要幾周的時間，并涉及到多種利益相關(guān)者；而小型企業(yè)就沒有這樣的資源，因此其用戶界面可能受到一些影響。

我在 Insight 當(dāng)中的目標(biāo)是使用現(xiàn)代深度學(xué)習(xí)算法大大簡化設(shè)計(jì)工作流程，并使得任何規(guī)模的公司都能快速地創(chuàng)造并測試網(wǎng)頁。

現(xiàn)有的設(shè)計(jì)工作流程

現(xiàn)有工作流程涉及多個利益相關(guān)者

一個典型的設(shè)計(jì)工作流程如下所示：

• 產(chǎn)品經(jīng)理進(jìn)行用戶研究，從而制定技術(shù)參數(shù)表

• 設(shè)計(jì)人員將接受這些要求并嘗試創(chuàng)建低保真原型，最終創(chuàng)建高保真原型

• 工程師將這些設(shè)計(jì)轉(zhuǎn)化為代碼并最終將產(chǎn)品交付給用戶

開發(fā)周期的時間長度很快就會變成瓶頸，像 Airbnb 這樣的公司已經(jīng)開始使用機(jī)器學(xué)習(xí)來提高這個過程的效率了。（參見：https://airbnb.design/sketching-interfaces/）

Airbnb 內(nèi)部 AI 工具演示：從草圖到代碼

雖然這種工具很有希望成為機(jī)器輔助設(shè)計(jì)的例子，但是尚不清楚這種模型在端到端的情況下能完全訓(xùn)練到什么程度，也不清楚它在多大程度上依賴于手工制作的圖像特征。這肯定是無法知道的，因?yàn)樗壳斑€是 Airbnb 專有的非開源方案。我想創(chuàng)造一個「從繪圖到代碼」技術(shù)的開源版本，可供更多開發(fā)者和設(shè)計(jì)者使用。

理想情況下，我的模型可以采用簡單的網(wǎng)站設(shè)計(jì)手繪原型，并立即從該圖像生成一個可用的 HTML 網(wǎng)站：

SketchCode 模型需要繪制好的網(wǎng)站線框圖并能生成 HTML 代碼

實(shí)際上，上面的例子是一個從我模型測試集圖像生成的實(shí)際網(wǎng)站！你可以在我的 Github 頁面中查看它：https://github.com/ashnkumar/sketch-code

從圖像標(biāo)注中獲取靈感

我正在解決的問題屬于程序綜合（https://en.wikipedia.org/wiki/Program_synthesis）這個廣義任務(wù)范疇，即工作源代碼的自動生成。盡管很多程序綜合能處理從自然語言要求或執(zhí)行軌跡所生成的代碼，但在我這個案例中，我可以從一個源圖像（手繪線框圖）開始，自動獲得想要的代碼。

機(jī)器學(xué)習(xí)領(lǐng)域中，有一個名為圖像字幕生成的領(lǐng)域（https://cs.stanford.edu/people/karpathy/deepimagesent/），該領(lǐng)域有著充分的研究，旨在學(xué)習(xí)將圖像和文本相連的模型，特別是生成關(guān)于源圖片內(nèi)容的描述。

圖像標(biāo)注模型生成源圖片的描述

我從最近一篇名為 pix2code 的論文和 Emil Wallner 使用該方法的一個相關(guān)項(xiàng)目獲得了靈感（參見：前端慌不慌？用深度學(xué)習(xí)自動生成 HTML 代碼），并決定將我的任務(wù)重構(gòu)成圖像字幕生成問題的一部分，即將線框圖作為輸入圖像，將對應(yīng)的 HTML 代碼作為輸出文本。

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

考慮到圖像標(biāo)注的方法，我心中理想的訓(xùn)練數(shù)據(jù)集是成千上萬對手繪線框圖和它們 HTML 代碼的等價物。不出所料，我無法找到這種數(shù)據(jù)集，因此我不得不為該任務(wù)創(chuàng)建自己的數(shù)據(jù)。

我從 pix2code 論文中提到的一個開源數(shù)據(jù)集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 張人工生成的網(wǎng)頁截圖和其對應(yīng)源代碼構(gòu)成。

pix2code 中生成的網(wǎng)站圖像及其源代碼數(shù)據(jù)集

這個數(shù)據(jù)集對我而言是個很好的開始，其中有一些有趣的地方：

• 數(shù)據(jù)集中每個生成的網(wǎng)站都包含幾個簡單的 Bootstrap 元素例如按鈕、文本框和 DIV。雖然這意味著我的模型將會因把這幾個元素作為「詞匯」（模型可選擇用于生成網(wǎng)站的元素）而受限制，這種方法應(yīng)該很容易推廣到更大的元素詞匯表中。

• 每個示例的源代碼包含領(lǐng)域?qū)Ｓ谜Z言（DSL）的標(biāo)記，這些符號是由論文作者創(chuàng)建的。每個標(biāo)記對應(yīng)于 HTML 和 CSS 的片段，且有一個編譯器將 DSL 轉(zhuǎn)化為工作使用的 HTML 代碼。

讓圖片更像手繪的

將網(wǎng)站的多彩主題切換成手寫主題。

為了調(diào)整數(shù)據(jù)集以適應(yīng)我的任務(wù)，我得把網(wǎng)站的圖片弄得像是手繪的。對圖片的手繪化都得益于 OpenCV 和 PIL library 的灰度轉(zhuǎn)換和輪廓檢測功能。

最終，我決定直接通過一系列操作來直接修改原網(wǎng)站的 CSS 樣式表：

• 通過改變頁面元素的邊框半徑實(shí)現(xiàn)按鈕和 div 的圓潤化

• 調(diào)整邊框的粗細(xì)以模仿手繪素描，并添加陰影

• 將字體改為類手寫字體

我的最終版本又增加了一個步驟，通過加入傾斜，偏移和旋轉(zhuǎn)來進(jìn)行數(shù)據(jù)增強(qiáng)，以模仿實(shí)際繪制的素描的不確定性。

使用圖像標(biāo)注模型架構(gòu)

現(xiàn)在我已經(jīng)準(zhǔn)備好我的數(shù)據(jù)了，我可以把它輸入模型進(jìn)行訓(xùn)練了！

我用的這個用于圖像標(biāo)注的模型包括三個主要部分：

• 一個卷積神經(jīng)網(wǎng)路（CNN）視覺模型用于提取源圖片特征

• 一種由編碼源代碼標(biāo)記序列的門控循環(huán)單元（GRU）組成的語言模型

• 一個解碼器模型（也是一個 GRU），它以前兩個步的輸出作為輸入，預(yù)測序列中的下一個標(biāo)記

使用標(biāo)記序列作為輸入來訓(xùn)練模型

為了訓(xùn)練這個模型，我把源代碼分成標(biāo)記序列。其中一個序列及其源圖像是模型的單個輸入，其標(biāo)簽是文檔中的下一個標(biāo)記。該模型使用交叉熵成本（cross-entropy cost）作為其損失函數(shù)，將模型預(yù)測的下一個標(biāo)記與實(shí)際的標(biāo)記進(jìn)行比較。

在模型從頭開始生成代碼的推理階段，該過程稍有不同。該圖像仍然通過 CNN 網(wǎng)絡(luò)進(jìn)行處理，但文本處理僅提供一個開始序列。在每一步中，模型對序列中下一個標(biāo)記的預(yù)測將返回到當(dāng)前輸入序列，同時作為新的輸入序列輸入到模型中。重復(fù)此操作直到模型預(yù)測出 <END> 標(biāo)記或進(jìn)程達(dá)到每個文檔的標(biāo)記數(shù)的預(yù)定義上限。

一旦從模型中生成了一組預(yù)測標(biāo)記，編譯器就會將 DSL 標(biāo)記轉(zhuǎn)換為 HTML，這些 HTML 可以在任何瀏覽器中展示出來。

用 BLEU 得分評估模型

我決定用 BLEU 評分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）來評估模型。這是機(jī)器翻譯任務(wù)中經(jīng)常會用到的評估標(biāo)準(zhǔn)，它試圖在給定相同輸入的情況下，評估機(jī)器生成的文本與人類可能寫的文本的近似程度。

實(shí)質(zhì)上，BLEU 通過比較生成文本和參考文本的 n-元 序列，生成精修改后的文本。它非常適合這個項(xiàng)目，因?yàn)樗鼤绊懮傻?HTML 中的實(shí)際元素，以及它們之間的相互關(guān)系。

然后這是最棒的——我完全可以通過檢查生成的網(wǎng)站來理解 BLEU 得分！

BLEU 得分可視化

一個完美的 1.0 的 BLEU 分?jǐn)?shù)將在正確的位置生成源圖像的正確元素，而較低的得分可以預(yù)測錯誤的元素和/或?qū)⑺鼈兎旁谙鄬τ诒舜隋e誤的位置。最終我的模型能夠在測試集上得到 0.76 的 BLEU 分?jǐn)?shù)。

福利 - 定制樣式

我覺察到的一個額外福利是，由于模型只生成頁面的骨架（文檔的標(biāo)記），我可以在編譯過程中添加一個自定義的 CSS 層，并且可以即時看到網(wǎng)站的不同風(fēng)格。

一次轉(zhuǎn)換=> 同時生成多種樣式

將樣式與模型生成過程分離，給使用模型帶來了很多好處：

• 想要將 SketchCode 模型應(yīng)用到自己公司產(chǎn)品中的前端工程師可以按原樣使用該模型，只需更改一個 CSS 文件以符合其公司的樣式要求

• 可擴(kuò)展性已內(nèi)置 - 使用一張?jiān)磮D像，模型輸出可立即編譯為 5、10 或 50 種不同的預(yù)定義樣式，因此用戶可以看到他們網(wǎng)站的多個版本，并在瀏覽器中瀏覽這些網(wǎng)站

總結(jié)與展望

通過利用圖像標(biāo)注的研究成果，SketchCode 能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的 HTML 網(wǎng)站。

該模型有些局限性，大概包括以下幾點(diǎn)：

• 由于這個模型是用一個只有 16 個元素的詞匯進(jìn)行訓(xùn)練的，它不能預(yù)測訓(xùn)練數(shù)據(jù)之外的標(biāo)記。下一步可能是使用更多元素（如圖像，下拉菜單和表單）生成其他樣例網(wǎng)站——Bootstrap components 是個練手的好網(wǎng)站：https://getbootstrap.com/docs/4.0/components/buttons/

• 實(shí)際生產(chǎn)環(huán)境中，網(wǎng)站有很多變化。創(chuàng)建一個更能反映這種變化的訓(xùn)練數(shù)據(jù)集的好方法是去爬取實(shí)際的網(wǎng)站，捕獲他們的 HTML / CSS 代碼以及網(wǎng)站內(nèi)容的截圖

• 手繪素描也有很多變化，CSS 修改技巧沒有被模型完全學(xué)會。在手繪素描上生成更多變化的一種好方法是使用生成對抗網(wǎng)絡(luò)來創(chuàng)建逼真的繪制網(wǎng)站圖像

我很期待看到項(xiàng)目的進(jìn)一步發(fā)展！

lt;head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>無標(biāo)題文檔</title>

<style>

div{

position:absolute;

}

</style>

</head>

<body>

<div id="divimg">

<img src="http://m.jungjaehyung.com/uploadfile/2024/1012/20241012075402811.png" width="150" height="150">

</div>

<script language="javascript" type="text/javascript">

//獲取圖片div對象

var img=document.getElementById("divimg");

//設(shè)置div左上角 起始點(diǎn)坐標(biāo)

var x=0,y=0;

//設(shè)置圖片的行進(jìn)速度

var xSpeed=5,ySpeed=5;

//設(shè)置圖片的最大浮動高度和寬度

var w=document.body.clientWidth-150,h=document.body.clientHeight-150;

function floatimg(){

//比較圖片是否到達(dá)邊界

//如果到達(dá)邊界以后，我控制圖片改變方向

if(x>w||x<0) xSpeed=-xSpeed;

if(y>h||y<0) ySpeed=-ySpeed;

//如果沒有到達(dá)邊界，設(shè)置圖片的左上角坐標(biāo)，

//設(shè)置坐標(biāo)值 起始坐標(biāo)+速度

x+=xSpeed;

y+=ySpeed;

img.style.top=y+"px";

img.style.left=x+"px";

setTimeout("floatimg()",50);

}

floatimg();

</script>

</body>