你能夠在 GitHub 上找到這個項目的代碼：https://github.com/ashnkumar/sketch-codepython
爲用戶創造直觀、富有吸引力的網站是各家公司的重要目標，並且這是個快速進行原型、設計、用戶測試循環的過程。像 Facebook 這樣的大公司有着讓整個團隊專一於設計流程的人力，改動可能須要幾周的時間，並涉及到多種利益相關者；而小型企業就沒有這樣的資源，所以其用戶界面可能受到一些影響。git
我在 Insight 當中的目標是使用現代深度學習算法大大簡化設計工做流程，並使得任何規模的公司都能快速地創造並測試網頁。github
現有的設計工做流程算法
現有工做流程涉及多個利益相關者bootstrap
一個典型的設計工做流程以下所示：瀏覽器
-
產品經理進行用戶研究，從而制定技術參數表網絡
-
設計人員將接受這些要求並嘗試建立低保真原型，最終建立高保真原型前端工程師
-
工程師將這些設計轉化爲代碼並最終將產品交付給用戶架構
開發週期的時間長度很快就會變成瓶頸，像 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 文件以符合其公司的樣式要求
-
可擴展性已內置 - 使用一張源圖像，模型輸出可當即編譯爲 五、10 或 50 種不一樣的預約義樣式，所以用戶能夠看到他們網站的多個版本，並在瀏覽器中瀏覽這些網站
總結與展望
經過利用圖像標註的研究成果，SketchCode 可以在幾秒鐘內將手繪網站線框圖轉換爲可用的 HTML 網站。
該模型有些侷限性，大概包括如下幾點：
-
因爲這個模型是用一個只有 16 個元素的詞彙進行訓練的，它不能預測訓練數據以外的標記。下一步多是使用更多元素（如圖像，下拉菜單和表單）生成其餘樣例網站——Bootstrap components 是個練手的好網站：https://getbootstrap.com/docs/4.0/components/buttons/
-
實際生產環境中，網站有不少變化。建立一個更能反映這種變化的訓練數據集的好方法是去爬取實際的網站，捕獲他們的 HTML / CSS 代碼以及網站內容的截圖
-
手繪素描也有不少變化，CSS 修改技巧沒有被模型徹底學會。在手繪素描上生成更多變化的一種好方法是使用生成對抗網絡來建立逼真的繪製網站圖像
我很期待看到項目的進一步發展！
轉載自：https://www.jiqizhixin.com/articles/automated-front-end-development-using-keras