機器學習：實現從UI設計草圖生成HTML頁面案例

最近我的團隊在做一個項目MVP，需求分析和系統架構的初版完成了，UI設計也出來了，並且和客戶做了review，現在就要開發一個Demo出來，這就要在UI設計的原型基礎上開發出前端HTML，然後加上後端的資料庫讀寫和簡單業務邏輯。

但是，問題來了，從UI設計的原型出發，開發前端HTML需要4天時間，而且一堆技術問題才能做出UI設計的效果，因此，我就想到，是否可以直接將這個設計原型轉化為HTML？如果可以，即時效果不怎麼好，在此基礎上也可以加快前端開發。

在互聯網上搜索有沒有可行的技術解決方案或者產品，發現果然是英雄所見略同，位於美國舊金山的Airbnb公司已經做了這一方面的研究，利用機器學習來將手繪的原型轉化為HTML，大大地提高了Web前端開發的效率，從某種程度上而言，利用AI完成了需要大量初級前端工程師做的工作！

仔細研究了一番，這個Airbnb搞的是close-source的演算法模型，而且申請了解決方案專利，不買Airbnb的產品和服務是用不了這個演算法模型了。

查到有一個技術大牛AshwinKumar利用類似的原理開發的一個開源解決方案，將手繪原型轉化為HTML，使前端開發者的工作大為簡單！

從Github下到這位技術大牛的源代碼（https://github.com/ashnkumar/sketch-code），經過認真的研究後，發現其實這個原理很簡單，就是利用了機器學習領域的一種圖像標註（image caption）的技術，把繪製的網站線框圖作為輸入圖像，並將其相應的HTML代碼作為其輸出內容，然後，UI設計師的網站設計草圖就直接轉化成了此前需要前端工程師才能開發出的HTML代碼了。

在這個Open Source的機器學習的Open Source案例中，用到了以下Python類庫：

Keras==2.1.2：圖像識別

tensorflow==1.4.0：Google機器學習Open Source框架

nltk==3.2.5

opencv-python==3.3.0.10：圖像處理

numpy==1.13.1

h5py==2.7.1：就是這個類庫生成了HTML5頁面

matplotlib==2.0.2

Pillow==4.3.0

tqdm==4.17.1

scipy==1.0.0

直接上我寫的一段代碼，調用了Open Source框架的基本方法：

隨手做了一個UI設計草圖：

運行程序：

生成的HTML頁面：

效果還可以，當然，客觀地講，並不完美，主要原因是訓練數據太少，看了下大概用了1700個草圖做訓練，如果可以用17000個設計草圖來訓練呢？效果值得期待！

從這個案例可以知道，前端工程師，如果不學習新技術，或者是成為全棧工程師，或者是和UI設計師結合起來做創造性的前端開發，就要被人工智慧給幹掉了！

在這個人工智慧技術快速發展的時代，如果不想被幹掉，就得堅持學習，不斷學習新技術，做有創造性的工作，而不是那些大量重複的規則明確的工作。

機器人寫代碼的時代已經到來了，再不Get一些新技能，就來不及了！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！