(Keras)基於深度學習SketchCode將線框原型圖轉換成HTML程式碼

摘要： 本文主要講述如何使用現代深度學習演算法來簡化設計工作流程，並使任何人都能夠快速建立和測試網頁。如何使用SketchCode五秒鐘將線框原型圖轉換成HTML程式碼。

Ashwin Kumar在Insight中開發了一個模型——允許使用者將手繪線框轉換為HTML頁面，這明顯加快了設計過程。

為使用者創造直觀且引人入勝的體驗是各個公司的重要目標，而這是一個由原型設計、設計和使用者測試組成的快速迴圈的過程。像Facebook這樣的大公司足夠將整個團隊投入到設計流程中，但是這可能需要幾星期的時間，並且涉及多個利益相關者。然而小型企業沒有這些資源，因此他們的使用者介面可能會因此減少

我的目標是使用現代深度學習演算法來簡化設計工作流程，並使任何人都能夠快速建立和測試網頁。

現在的設計工作流程

設計工作流經過多個利益相關者

典型的設計工作流程可能如下所示：

·產品經理根據使用者調查表生成規格列表。

·設計師們根據這些要求探索出低精確度的原型，最終創造出高保真的模型。

·工程師將這些設計應用到程式碼中，最終將產品交給使用者。

開發週期的長短很快就會變成一個瓶頸，像Airbnb這樣的公司已經開始使用機器學習來提高這個過程的效率了。

用Airbnb的內部AI工具演示從圖紙到程式碼

雖然該模型有望成為機器輔助設計的一個例子，但是我們還不清楚這個模型有多少是經過端對端訓練的，以及多少依賴於手工製作的影像特徵，因為它是公司專有的封閉原始碼解決方案。所以，我想建立一個開源版本的原型圖到程式碼的技術，以供更廣泛的開發人員和設計人員使用。

理想情況下，我的模型能夠將手繪的線框原型圖立即轉換成一個工作的HTML網站。

SketchCode模型將繪製線框圖並生成HTML程式碼  

實際上，上面的例子是從我的測試集影像模型中生成的一個實際網站！可以在我的GitHub上檢視程式碼。

從影像字幕中汲取靈感

我所解決的問題屬於一個更廣泛的任務：程式合成，即自動生成原始碼。儘管大部分的程式合成是根據自然語言規範或者執行軌跡生成程式碼，但是在我的模型中能夠利用源影像（手繪線框圖）開始生成程式碼。

在機器學習中有一個很好的研究領域，該模型叫做影像字幕，旨在將影像和文字結合在一起並生成對源影像內容的描述。

影像字幕模型生成對源影像內容的描述

我從一篇名為pix2code的論文和Emily Wallner的相關專案中獲得靈感，決定將任務重設為一個影像字幕，手繪的網站線框圖作為輸入影像，而相應的HTML程式碼作為輸出文字。

獲得正確的資料集

考慮到影像字幕的方法，我理想的資料集應該包含成千上萬對的手繪線框圖和對應的HTML程式碼。然而找不到，所以我不得不為這個任務建立自己的資料集。

首先從pix2code檔案中獲取一個開源資料集，該資料集包含1750個綜合生成網站的截圖和相應的原始碼。

生成網站影像和原始碼的pix2code資料集

這是一個很好的資料集，包括以下幾點：

·資料集中的每個生成網頁都由幾個簡單的引導元素組成，比如按鈕、文字框和div。儘管這意味著我的模型將僅限於在這些少數元素中選擇來生成網站，但也更容易推廣到更大的元素列表。

·每個樣本的原始碼由來自特定領域語言（DSL）的標識組成，論文的作者為其任務建立了標識。每個標識對應HTML和CSS的一個片段，而編譯器則被用來將DSL轉換為工作的HTML程式碼。

使影像看起來像手繪

將豐富多彩的網站影像變成手繪版本

為了修改任務的資料集，我需要讓網站的影像看起來像手工繪製的一樣。我探索使用過OpenCV和Python中的PIL library這樣的工具對每個影像進行修改，比如灰度轉換和輪廓檢測。

最終，我決定直接修改原始網站的CSS樣式表，對其進行以下操作：

·更改頁面上元素的邊框半徑以彎曲按鈕和div的邊角。

·調整邊框的粗細以模仿繪製的草圖，並新增陰影。

·將字型更改為看起來像手寫的字型。

我在最終的pipeline中又增加了一個步驟，通過新增傾斜移動和旋轉來增強這些影像，以模仿實際繪製的草圖中的變化。

使用影像字幕模型架構

資料已準備妥當，現在可以將它輸入模型了。我使用了影像字幕中的模型架構，它由三個主要部分組成：

·計算機視覺模型，使用卷積神經網路（CNN）從源影像中提取影像特徵。

·由編碼了一系列原始碼令牌的門控迴圈單元（GRU）組成的一種語言模型。

·解碼器模型（也是GRU），它將前兩個步驟的輸出作為輸入，並預測序列中的下一個標記。

使用令牌序列作為輸入來訓練模型

為了訓練模型，我將原始碼拆分為不同的令牌序列。模型的單個輸入是其中一個序列及其源影像，其標籤是文件中的下一個令牌序列。該模型使用交叉熵成本作為其損失函式，將模型的下一個令牌預測與實際的下一個令牌進行比較。

在推理過程中模型的任務是從頭開始生成程式碼，這個過程比較困難。影像仍然通過CNN網路進行處理，但文字程式將以一個序列開始進行傳遞。在每個步驟中模型將對序列的下一個令牌進行預測，並將預測令牌作為輸入序列輸入到模型中，重複此步驟直到模型預測標記或程式達到每個文件的預定義標記數。

一旦從模型中生成了一組預測令牌，編譯器就會將DSL令牌轉換成HTML，這些HTML可以在任何瀏覽器中呈現。

用BLEU評分評估模型

我選擇用BLEU評分來評估模型。因為他是機器翻譯任務中常用的一個度量標準。它用來衡量相同的輸入下，機器生成的文字與人類生成內容的相似程度。實質上，BLEU會比較生成的文字和參考文字的n-gram序列，以生成修改後的精度樣式。它非常適合這個專案，因為影響了生成的HTML中的實際元素以及它們之間的關係。它最大的優點是可以通過檢查生成的網站看到BLEU的分數！

視覺化的BLEU分數

在給定源影像的情況下，當正確的元素都在正確的位置上時BLEU評分能達到1.0，當元素預測錯誤或者元素放在了錯誤的位置上時會得到較低的分數。最終模型在BLEU評分中得到了0.76的分數。

Bonus-Custom樣式

該方法有一個額外的好處，因為模型只生成頁面的骨架（文件的標記），所以可以在編譯過程中新增自定義的CSS層，這可以立即改變網站的外觀風格。

一個繪圖=>同時生成多種風格

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

·前端工程師想要將SketchCode模型融入到自己公司的產品中，可以使用現有的模型，只需要修改一個CSS檔案就能符合公司的風格。

·可伸縮性內建一個源影像，模型輸出可以立即被編譯成5、10或50個不同的預定義樣式，這樣使用者可以在瀏覽器中檢視多個版本的網站可能的外觀。

結論和未來的發展方向

通過利用影像字幕，SketchCode能夠在幾秒鐘內將手繪網站線框圖轉換為可用的HTML網站。

但是該模型也有一些侷限性，這也是未來的發展方向：

·由於該模型僅使用由16個元素組成的詞彙表進行訓練，所以它無法預測資料之外的令牌。下一步可能是使用更多的元素組成額外的網站示例——引導元件是一個很好的開始研究的方向。

·實際生成網站時會有很多的變化。所以要建立能夠更好應對這些變化的訓練資料集，而濾掉實際的網站，捕獲它們的HTML/CSS程式碼以及網站的螢幕截圖是一個好方法。

·繪圖也有很多CSS修改技巧無法完全捕捉到的變化。在手繪草圖資料中產生更多變化的一個好方法是使用生成的Adversarial網路來建立逼真的繪製網站影像。

該專案原始碼請點選我的GitHub頁面檢視。

本文由阿里云云棲社群組織翻譯。

文章原標題《Automated front-end development using deep learning》

作者：Ashwin Kumar

文章為簡譯，詳細內容請檢視原文