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

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

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

我在 Insight 當中的目標是使用現代深度學習算法大大簡化設計工作流程，并使得任何規模的公司都能快速地創造并測試網頁。

現有的設計工作流程

現有工作流程涉及多個利益相關者

一個典型的設計工作流程如下所示：

• 產品經理進行用戶研究，從而制定技術參數表

• 設計人員將接受這些要求并嘗試創建低保真原型，最終創建高保真原型

• 工程師將這些設計轉化為代碼并最終將產品交付給用戶

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

Airbnb 內部 AI 工具演示：從草圖到代碼

雖然這種工具很有希望成為機器輔助設計的例子，但是尚不清楚這種模型在端到端的情況下能完全訓練到什么程度，也不清楚它在多大程度上依賴于手工制作的圖像特征。這肯定是無法知道的，因為它目前還是 Airbnb 專有的非開源方案。我想創造一個「從繪圖到代碼」技術的開源版本，可供更多開發者和設計者使用。

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

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

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

從圖像標注中獲取靈感

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

機器學習領域中，有一個名為圖像字幕生成的領域（https://cs.stanford.edu/people/karpathy/deepimagesent/），該領域有著充分的研究，旨在學習將圖像和文本相連的模型，特別是生成關于源圖片內容的描述。

圖像標注模型生成源圖片的描述

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

獲取正確的數據集

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

我從 pix2code 論文中提到的一個開源數據集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 張人工生成的網頁截圖和其對應源代碼構成。

pix2code 中生成的網站圖像及其源代碼數據集

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

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

• 每個示例的源代碼包含領域專用語言（DSL）的標記，這些符號是由論文作者創建的。每個標記對應于 HTML 和 CSS 的片段，且有一個編譯器將 DSL 轉化為工作使用的 HTML 代碼。

讓圖片更像手繪的

將網站的多彩主題切換成手寫主題。

為了調整數據集以適應我的任務，我得把網站的圖片弄得像是手繪的。對圖片的手繪化都得益于 OpenCV 和 PIL library 的灰度轉換和輪廓檢測功能。

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

• 通過改變頁面元素的邊框半徑實現按鈕和 div 的圓潤化

• 調整邊框的粗細以模仿手繪素描，并添加陰影

• 將字體改為類手寫字體

我的最終版本又增加了一個步驟，通過加入傾斜，偏移和旋轉來進行數據增強，以模仿實際繪制的素描的不確定性。

使用圖像標注模型架構

現在我已經準備好我的數據了，我可以把它輸入模型進行訓練了！

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

• 一個卷積神經網路（CNN）視覺模型用于提取源圖片特征

• 一種由編碼源代碼標記序列的門控循環單元（GRU）組成的語言模型

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

使用標記序列作為輸入來訓練模型

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

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

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

用 BLEU 得分評估模型

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

實質上，BLEU 通過比較生成文本和參考文本的 n-元 序列，生成精修改后的文本。它非常適合這個項目，因為它會影響生成的 HTML 中的實際元素，以及它們之間的相互關系。

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

BLEU 得分可視化

一個完美的 1.0 的 BLEU 分數將在正確的位置生成源圖像的正確元素，而較低的得分可以預測錯誤的元素和/或將它們放在相對于彼此錯誤的位置。最終我的模型能夠在測試集上得到 0.76 的 BLEU 分數。

福利 - 定制樣式

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

一次轉換 => 同時生成多種樣式

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

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

• 可擴展性已內置 - 使用一張源圖像，模型輸出可立即編譯為 5、10 或 50 種不同的預定義樣式，因此用戶可以看到他們網站的多個版本，并在瀏覽器中瀏覽這些網站

總結與展望

通過利用圖像標注的研究成果，SketchCode 能夠在幾秒鐘內將手繪網站線框圖轉換為可用的 HTML 網站。

該模型有些局限性，大概包括以下幾點：

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

• 實際生產環境中，網站有很多變化。創建一個更能反映這種變化的訓練數據集的好方法是去爬取實際的網站，捕獲他們的 HTML / CSS 代碼以及網站內容的截圖

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

我很期待看到項目的進一步發展！

何在前端JavaScript開發中使用ES新特性？babel是什么？.babelrc文件又是干什么用的？文件中的presets和plugins又是什么鬼？本文將解答上述疑問。

babel是什么

babel是一個JavaScript編譯器

為什么要babel

ES規范今年來更新較為頻繁，近幾個版本推出很多新的特性，而用戶的瀏覽器版本眾多，很多用戶用的是老版本瀏覽器，老版本瀏覽器不支持ES新特（nodejs也存在同樣問題，參見），babel就是用來讓你可以使用ES新特性，又可以使代碼運行在老版本瀏覽器上。

Babel 通過語法轉換器支持最新版本的 JavaScript 。 語法轉換插件允許你立刻使用新語法，無需等待瀏覽器支持。

babel工作流程簡介

解析-->轉換-->生成代碼

• 解析生成AST語法樹
• 根據插件對AST樹進行遍歷轉譯并得到新的AST樹（新特性轉譯）
• 生成代碼

babel使用

1.在構建工具中（以webpack為例）使用：

// 在webpack.config.js中增加babel-loader，如下所示
module: {
 rules: [
 { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
}

2.在babel-cli中使用

npm install -g babel-cli
babel src -d lib // 將src中的代碼轉譯并將生成的文件放到lib目錄下
復制代碼

babel的配置

babel的配置是要告訴babel工具使用哪些插件轉譯代碼，主要作用于babel工作的第二階段（轉譯）

babel工作前會從.babelrc文件讀取配置，根據配置對JavaScript進行轉譯。

下面以.babelrc文件的配置方式為例介紹，配置項主要有兩個，presets，plugins；

{
 "presets": ["env"],
 "plugins": ["babel-plugin-transform-object-assign"]
}

plugins配置具體插件，而對于ES新特性需要配置的插件多達幾十個，如果一一配置就太麻煩來，于是babel給我們提供一些插件集，插件集配置在presets配置項中，目前官方提供的插件集有：

1. env
2. react
3. flow

其中 env（babel-preset-env）相當于 es2015 ，es2016 ，es2017 及最新版本。

4. stage-X

Stage-x preset 中的任何轉換都是對未被批準為 JavaScript 版本一部分的語言的變化(如 es6 / es2015 )，其分為以下5各階段：

Stage 0 - 稻草人: 只是一個想法，可能是 babel 插件。
Stage 1 - 提案: 初步嘗試。
Stage 2 - 初稿: 完成初步規范。
Stage 3 - 候選: 完成規范和瀏覽器初步實現。
Stage 4 - 完成: 將被添加到下一年度發布。

上述配置的插件和插件集也是需要通過npm安裝的

npm install babel-preset-env --save-dev
npm install babel-plugin-transform-object-assign --save-dev

babel presets(轉換插件集)配置

"presets": ["env"] // 默認將運行所有transfrom和集成所有的polyfill

也可以僅僅配置項目所支持瀏覽器所需的polyfill和transform。只編譯所需的代碼會使你的代碼包更小。如下所示，該轉換只支持每個瀏覽器最后兩個版本和safari大于等于7的版本所需的polyfill和代碼轉換。