本文首發自集智專欄
不管是大公司也好，小公司也罷，為使用者建立感性的參與體驗都是一個重要目標，而這個過程往往通過原型設計、程式設計和使用者測試這幾個部分之間快速迴圈來完成。對於大型公司，比如 Facebook，它們有足夠的專用頻寬，可供整個團隊設計前面所說的所有流程，通常要花費幾周的時間；而小型公司由於沒有此類資源支援，往往得到很不理想的使用者介面。
本文我將分享如何用深度學習演算法大幅簡化設計工作流，從而讓任何體量的公司都能快速建立測試網頁。
專案程式碼地址見文末
當前的設計工作流
當前一個典型的設計工作流可能如下所示：
-
產品經理進行使用者調查後，列出一系列的要求。
-
設計師根據需求，探索低保真原型，最終建立高保真產品模型。
-
工程師用程式碼實現設計，最終將產品傳達給使用者。
這種冗長的開發流程很多時候會成為制約企業的瓶頸問題，因此一些公司比如 Airbnb，已經開始用機器學習讓開發流程更加高效。
但是這些公司應用的方法到底如何，外界不得而知。因此我決定研究一種開源版的網頁自動開發技術，讓廣大開發者和設計師都能從中受益。
理想狀況下，我的模型能夠根據網站設計的簡單手繪圖，立刻生成可以執行的 HTML 網站：
實際上，上面的例子就是我的模型根據測試照片實際生成的一個網站。可以在我的 GitHub 上檢視生成該網站的程式碼。
從圖片描述中汲取靈感
我要解決的問題，從大的方向上可以歸類為一種叫做“程式綜合”的任務，也就是自動生成能夠執行的原始碼。雖然大部分程式綜合處理的是自然語言指令或執行追蹤中生成的程式碼，但我的模型還能在開始時利用源影象（手繪的示意圖）。
機器學習領域有個充分研究的方向叫做影象描述，這種方法會學習將影象和文字相匹配的模型，專為源影象中的內容生成文字描述。
在觀摩學習了最近發表的稱為pix2code的論文和Emil Wallner的相關專案後，我獲得了一些啟發，決定將我的任務歸類為影象描述，也就是將手繪的網站示意圖看作輸入影象，而對應的HTML程式碼就相當於影象的輸出文字。
獲取正確的資料集
如果是用影象描述這種方法，我理想中的訓練資料集應當是幾千張手繪的網站設計圖及其對應的 HTML 程式碼。意料之中，這種正好符合要求的資料集根本找不到，因此我只能自己建立任務需要的資料集。
我首先使用來自pix2code論文的開源資料集，包含了1750張綜合生成的網站及其相關原始碼的截圖。
就我的專案的開始階段而言，這是個很好的資料集，有幾個很有趣的亮點：
- 資料集中每個生成的網站都包含幾個簡單的引導元素的組合，比如按鈕、文字框、div 等。雖然這意味著我的模型會侷限於生成這幾個元素，但這種方法也能很容易的泛化，生成更大規模的元素。
- 每個樣本的原始碼包含了來自論文作者為相應任務建立的 DSL（特定域語言）中的 token。每個 token 對應一段 HTML 和 CSS 指令碼，然後會用一個編譯器將 DSL 轉換為執行的 HTML 程式碼。
讓影象具有設計草圖的效果
為了修正資料集，更好的適應我的任務，我需要讓網站影象看起來是用手畫出來的一樣。我用了一些工具，比如 OpenCV 和 Python 庫 PIL，修改了每張影象的資訊，比如灰度轉換、輪廓檢測等。
最終，我決定直接修改初始網站的 CSS 樣式表，進行了一系列的操作：
- 改變網頁上各元素的邊界值，將按鈕和 div 的四角變為曲線。
- 調整邊界的厚度以模仿手繪示意圖，並新增陰影。
- 將字型改為看上去像手繪的字型。
- 最後一步，增強影象的效果，比如為影象新增斜線、移位和旋轉等效果，模模擬實手繪中變化多端的風格。
使用影象描述模型架構
現在，需要的資料已經備好，終於可以將資料輸入到模型中了！
我採用了應用於影象描述部分的模型架構，主要包含 3 個主要部分：
- 一個使用了卷積神經網路的計算機視覺模型，用以從源影象中提取影象特徵。
- 一個包含 GRU 的語言模型，能夠編碼原始碼 token 的序列。
- 一個編碼器模型（也是個 GRU），它會將前面兩個部分的輸出用作輸入，預測序列中的下一個 token。
為了能訓練模型，我將原始碼拆分為 token 的序列。模型的每個輸入就是一個 token 序列，並配有和序列對應的源影象，其標籤為檔案中的下一個 token。模型使用交叉熵代價函式作為其損失函式，它會將模型預測的下一個 token 和實際的下一個 token 進行比較。
在推理階段，當模型從零開始生成程式碼時，過程會有所不同。影象仍然是通過 CNN 神經網路處理，但只用起始序列進行文字處理。模型對序列中下一個 token 的預測，在每一步都會新增至當前輸入序列，並作為一個新的輸入序列輸入到模型中。這個過程會反覆進行，直到模型預測出一個 token 或者用盡了每個檔案中的 token 數量。
用 BLEU 得分評估模型
我決定用 BLEU 得分評估模型。BLEU 得分是應用在機器翻譯任務中的常見指標，用來衡量輸入相同的情況下，機器生成文字和人類生成文字的接近程度。
基本上，BLEU 會比較生成文字和引用文字這兩者的 N-Gram 序列，以改進的形式表示模型的精確度。這對本專案來說非常合適，因為它會將生成的 HTML 中的實際元素以及它們之間的關係考慮進來。
更棒的是，我能通過檢查生成的網站檢視 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優惠券）