自動化開發：用深度學習5秒鐘將網站草圖轉換爲HTML代碼

本文首發自集智專欄

不論是大公司也好，小公司也罷，爲用戶建立感性的參與體驗都是一個重要目標，而這個過程每每經過原型設計、程序設計和用戶測試這幾個部分之間快速循環來完成。對於大型公司，好比 Facebook，它們有足夠的專用帶寬，可供整個團隊設計前面所說的全部流程，一般要花費幾周的時間；而小型公司因爲沒有此類資源支持，每每獲得很不理想的用戶界面。

本文我將分享如何用深度學習算法大幅簡化設計工做流，從而讓任何體量的公司都能快速建立測試網頁。

項目代碼地址見文末

當前的設計工做流

當前一個典型的設計工做流可能以下所示：

(設計工做流中涉及的相關各方)

• 產品經理進行用戶調查後，列出一系列的要求。

• 設計師根據需求，探索低保真原型，最終建立高保真產品模型。

• 工程師用代碼實現設計，最終將產品傳達給用戶。

這種冗長的開發流程不少時候會成爲制約企業的瓶頸問題，所以一些公司好比 Airbnb，已經開始用機器學習讓開發流程更加高效。

(Airbnb內部將設計草圖轉變爲代碼的AI工具演示圖)

可是這些公司應用的方法到底如何，外界不得而知。所以我決定研究一種開源版的網頁自動開發技術，讓廣大開發者和設計師都能從中受益。

理想情況下，個人模型可以根據網站設計的簡單手繪圖，馬上生成能夠運行的 HTML 網站：

(模型能將設計草圖馬上轉換爲HTML代碼)

實際上，上面的例子就是個人模型根據測試照片實際生成的一個網站。能夠在個人 GitHub 上查看生成該網站的代碼。

從圖片描述中汲取靈感

我要解決的問題，從大的方向上能夠歸類爲一種叫作「程序綜合」的任務，也就是自動生成可以運行的源代碼。雖然大部分程序綜合處理的是天然語言指令或執行追蹤中生成的代碼，但個人模型還能在開始時利用源圖像（手繪的示意圖）。

機器學習領域有個充分研究的方向叫作圖像描述，這種方法會學習將圖像和文本相匹配的模型，專爲源圖像中的內容生成文本描述。

(圖像描述模型生成源圖像的文本描述)

在觀摩學習了最近發表的稱爲pix2code的論文和Emil Wallner的相關項目後，我得到了一些啓發，決定將個人任務歸類爲圖像描述，也就是將手繪的網站示意圖看做輸入圖像，而對應的HTML代碼就至關於圖像的輸出文本。

獲取正確的數據集

若是是用圖像描述這種方法，我理想中的訓練數據集應當是幾千張手繪的網站設計圖及其對應的 HTML 代碼。意料之中，這種正好符合要求的數據集根本找不到，所以我只能本身建立任務須要的數據集。

我首先使用來自pix2code論文的開源數據集，包含了1750張綜合生成的網站及其相關源代碼的截圖。

(pix2code數據集)

就個人項目的開始階段而言，這是個很好的數據集，有幾個頗有趣的亮點：

• 數據集中每一個生成的網站都包含幾個簡單的引導元素的組合，好比按鈕、文本框、div 等。雖然這意味着個人模型會侷限於生成這幾個元素，但這種方法也能很容易的泛化，生成更大規模的元素。
• 每一個樣本的源代碼包含了來自論文做者爲相應任務建立的 DSL（特定域語言）中的 token。每一個 token 對應一段 HTML 和 CSS 腳本，而後會用一個編譯器將 DSL 轉換爲運行的 HTML 代碼。

讓圖像具備設計草圖的效果

(將多姿多彩的網站圖像變爲手繪版設計草圖)

爲了修正數據集，更好的適應個人任務，我須要讓網站圖像看起來是用手畫出來的同樣。我用了一些工具，好比 OpenCV 和 Python 庫 PIL，修改了每張圖像的信息，好比灰度轉換、輪廓檢測等。

最終，我決定直接修改初始網站的 CSS 樣式表，進行了一系列的操做：

• 改變網頁上各元素的邊界值，將按鈕和 div 的四角變爲曲線。
• 調整邊界的厚度以模仿手繪示意圖，並添加陰影。
• 將字體改成看上去像手繪的字體。
• 最後一步，加強圖像的效果，好比爲圖像添加斜線、移位和旋轉等效果，模仿真實手繪中變化無窮的風格。

使用圖像描述模型架構

如今，須要的數據已經備好，終於能夠將數據輸入到模型中了！

我採用了應用於圖像描述部分的模型架構，主要包含 3 個主要部分：

• 一個使用了卷積神經網絡的計算機視覺模型，用以從源圖像中提取圖像特徵。
• 一個包含 GRU 的語言模型，可以編碼源代碼 token 的序列。
• 一個編碼器模型（也是個 GRU），它會將前面兩個部分的輸出用做輸入，預測序列中的下一個 token。

(用token序列做爲輸入來訓練模型)

爲了能訓練模型，我將源代碼拆分爲 token 的序列。模型的每一個輸入就是一個 token 序列，並配有和序列對應的源圖像，其標籤爲文件中的下一個 token。模型使用交叉熵代價函數做爲其損失函數，它會將模型預測的下一個 token 和實際的下一個 token 進行比較。

在推理階段，當模型從零開始生成代碼時，過程會有所不一樣。圖像仍然是經過 CNN 神經網絡處理，但只用起始序列進行文本處理。模型對序列中下一個 token 的預測，在每一步都會添加至當前輸入序列，並做爲一個新的輸入序列輸入到模型中。這個過程會反覆進行，直到模型預測出一個 token 或者用盡了每一個文件中的 token 數量。

用 BLEU 得分評估模型

我決定用 BLEU 得分評估模型。BLEU 得分是應用在機器翻譯任務中的常見指標，用來衡量輸入相同的狀況下，機器生成文本和人類生成文本的接近程度。

基本上，BLEU 會比較生成文本和引用文本這二者的 N-Gram 序列，以改進的形式表示模型的精確度。這對本項目來講很是合適，由於它會將生成的 HTML 中的實際元素以及它們之間的關係考慮進來。

更棒的是，我能經過檢查生成的網站查看 BLEU 得分。

(可視化BLEU得分)

最高 BLEU 得分 1.0 表示模型能根據源圖像生成正確的網頁元素，且各元素均在正確的位置。 BLEU 得分很低則表示模型沒有正確生成元素，或將元素放在了錯誤的位置。最終用評估數據集對模型進行評估時，顯示模型獲得了 0.76 的 BLEU 得分。也就是說我搭建的模型，能正確的將 76% 的設計草圖短短几秒鐘內轉換爲 HTML 代碼。

額外福利——自定義網站風格

我後來意識到還有一個額外的福利。因爲模型只生成了網頁的框架（文件的 token），那麼我能夠在編譯過程當中添加一個自定義 CSS 層，這樣模型就能即刻讓生成的網站擁有多種不一樣的風格。

(一張設計草圖同時生成多種風格)

讓網站風格和模型生成過程相分離，能讓使用模型時具有幾個很大的優點：

• 想將個人模型整合到自家公司產品的前端工程師，在使用模型時只需改變單個 CSS 文件以符合公司的設計風格便可。
• 內置可伸縮性能。根據一張源圖像，模型輸出就能編譯爲 5 個、10 個甚至 50 個不一樣的預約義風格，所以用戶能夠在瀏覽器上預覽網站多個風格版本的效果。

結語及將來展望

經過使用圖像描述領域的研究方法，我搭建了一個深度學習模型，可以將手繪的網站設計圖在幾秒鐘內轉換爲能夠運行的 HTML 網站。

固然模型也存在一些侷限，將來我可能從如下幾個方面優化：

• 因爲只用了 16 個元素訓練模型，所以模型尚不能預測它沒有見過的 token。將來我會用更多元素，好比圖像、下拉菜單和表格等訓練模型生成更多的網站樣本，先從引導元素開始。
• 現實中的網站都有不少變化。將來我會建立更能靈活應對這些變化的訓練數據集，完全弄懂實際中真實的網站，捕捉它們的 HTML/CSS 代碼以及網站內容的截圖。
• 手繪圖一樣變化無窮，CSS 修改技巧也沒法徹底捕捉到。用生成式對抗網絡建立看起來真實感很強的網站圖像，可讓手繪草圖數據具備更多的變化。

---

本項目所有代碼見個人GitHub庫

限時折扣中：0806期《人工智能-從零開始到精通》（前25位同窗可領取￥200優惠券）