作為今年阿里經濟體前端委員會的四大技術方向之一，前端智慧化方向一被提及，就不免有人好奇：前端結合 AI 能做些什麼，怎麼做，未來會不會對前端產生很大的衝擊等等。本篇文章將圍繞這些問題，以「設計稿自動生成程式碼」場景為例，從背景分析、競品分析、問題拆解、技術方案等幾個角度切入，細述相關思考及過程實踐。
背景分析
業界機器學習之勢如火如荼，「AI 是未來的共識」頻頻出現在各大媒體上。簡單的、重複性的工作有較大的可能性會受到AI的衝擊。並且，白領比藍領的工作更容易被影響；因為藍領的工作可能還需要機器人和軟硬體相關技術都突破才能被實現，而白領工作一般只需要軟體技術突破就可以實現。那AI會對前端這個“白領”工作產生什麼樣的影響？
回看 2010 年，軟體幾乎“吞噬”了所有行業，帶來近幾年軟體行業的繁榮；而到了 2019 年，軟體開發行業本身卻又在被 AI 所“吞噬”。你看：DBA 領域出現了 Question-to-SQL，針對某個領域只要問問題就可以生成 SQL 語句；基於機器學習的原始碼分析工具 TabNine 可以輔助程式碼生成；設計師行業也出了 P5 Banner 智慧設計師“鹿班”，測試領域的智慧化結合也精彩紛呈。那前端領域呢？
那就不得不提一個我們再熟悉不過的場景了，它就是設計稿自動生成程式碼（Design2Code，以下簡稱 D2C），阿里經濟體前端委員會-前端智慧化方向當前階段就是聚焦在如何讓 AI 助力前端這個職能角色提效升級，杜絕簡單重複性工作，讓前端工程師專注更有挑戰性的工作內容！
相關產品分析
2017 年，一篇關於影像轉程式碼的 Pix2Code 論文掀起了業內激烈討論的波瀾，講述如何從設計原型直接生成原始碼。隨後社群也不斷湧現出基於此思想的類似 Screenshot2Code 的作品，2018 年微軟 AI Lab 開源了草圖轉程式碼 工具 Sketch2Code，同年年底，設計稿智慧生成前端程式碼的新秀 Yotako 也初露鋒芒， 機器學習首次以不可小覷的姿態正式進入了前端開發者的視野。
基於上述分析，我們能夠得到以下幾點啟發：
- 深度學習目前在圖片方面的目標檢測能力適合較大顆粒度的可複用的物料識別（模組識別、基礎元件識別、業務元件識別）。
- 完整的直接由圖片生成程式碼的端到端模型複雜度高，生成的程式碼可用度不高，要達到所生成程式碼工業級可用，需要更細的分層拆解和多級子網路模型協同，短期可透過設計稿生成程式碼來做 D2C 體系建設。
- 當模型的識別能力無法達到預期準確度時，可以藉助設計稿人工的打底規則協議；一方面人工規則協議可以幫助使用者強幹預得到想要的結果，另一方面這些人工規則協議其實也是高質量的樣本標註，可以當成訓練樣本最佳化模型識別準確度。
問題分解
設計稿生成程式碼的目標是讓 AI 助力前端這個職能角色提效升級，杜絕簡單重複性工作內容。那我們先來分析下，“常規”前端尤其是面向 C 端業務的同學，一般的工作流程日常工作內容大致如下：
“常規”前端一般的開發工作量，主要集中在檢視程式碼、邏輯程式碼和資料聯調（甚至是資料介面開發，研發 Serveless 產品化時可期）這幾大塊，接下來，我們逐塊拆解分析。
檢視程式碼
檢視程式碼研發，一般是根據視覺稿編寫 HTML 和 CSS 程式碼。如何提效，當面對 UI 檢視開發重複性的工作時，自然想到元件化、模組化等封裝複用物料的解決方案，基於此解決方案會有各種 UI 庫的沉澱，甚至是視覺化拼裝搭建的更 High Level 的產品化封裝，但複用的物料不能解決所有場景問題。個性化業務、個性化檢視遍地開花，直面問題本身，直接生成可用的 HTML 和 CSS 程式碼是否可行？
這是業界一直在不斷嘗試的命題，透過設計工具的開發外掛可以匯出圖層的基本資訊，但這裡的主要難點還是對設計稿的要求高、生成程式碼可維護性差，這是核心問題，我們來繼續拆解。
★ 設計稿要求高問題
對設計稿的要求高，會導致設計師的成本加大，相當於前端的工作量轉嫁給了設計師，導致推廣難度會非常大。一種可行的辦法是採用 CV（ComputerVision, 計算機視覺） 結合匯出圖層資訊的方式，以去除設計稿的約束，當然對設計稿的要求最好是直接匯出一張圖片，那樣對設計師沒有任何要求，也是我們夢寐以求的方案，我們也一直在嘗試從靜態圖片中分離出各個適合的圖層，但目前在生產環境可用度不是非常高（小目標識別精準度問題、複雜背景提取等問題正在解決），因為畢竟設計稿自帶的元資訊，比一張圖片提取處理的元資訊要更多更精準
★ 可維護性問題
生成的程式碼結構一般都會面臨可維護性方面的挑戰：
- 合理佈局巢狀：包括絕對定位轉相對定位、冗餘節點刪除、合理分組、迴圈判斷等方面；
- 元素自適應：元素本身擴充套件性、元素間對齊關係、元素最大寬高容錯性；
- 語義化：Classname 的多級語義化；
- 樣式 CSS 表達：背景色、圓角、線條等能用 CV 等方式分析提取樣式，儘可能用 CSS 表達樣式代替使用圖片；
- ……
將這些問題拆解後，分門別類專項解決，解決起來看似沒完沒了，但好在目前發現的大類問題基本已解決。很多人質疑道，這部分的能力的實現看起來和智慧化沒有什麼關係，頂多算個佈局演算法相關的專家規則測量系統。沒錯，現階段這部分比較適合規則系統，對使用者而言佈局演算法需要接近 100% 的可用度，另外這裡涉及的大部分是無數屬性值組合問題，當前用規則更可控。如果非要使用模型，那這個可被定義為多分類問題。同時，任何深度學習模型的應用都是需要先有清晰的問題定義過程，把問題規則定義清楚本就是必備過程。
但在規則解決起來麻煩的情況下，可以使用模型來輔助解決。比如 合理分組（如下圖） 和 迴圈項 的判斷，實踐中我們發現，在各種情況下還是誤判不斷，演算法規則難以列舉，這裡需要跨元素間的上下文語義識別，這也是接下來正在用模型解決的重點問題。