圖1
圖2
圖3
人們的不斷探索下,「使用人工智能自動生成網(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ū)S谜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>
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。