一場腦洞實驗
雲栖大會雲上 Hello World 活動火熱進行中！每位參與者都可收獲一份阿裡雲出品的全球唯一序列号紀念證書！
作為阿裡經濟體前端委員會的四大技術方向之一，前端智能化方向一被提及，就不免有人好奇：前端結合機器學習能做些什麼，怎麼做，未來會不會對前端産生很大的沖擊等等。本文以「設計稿自動生成代碼」場景為例，細述我們的思考及過程實踐。
前端智能化與雲 IDE 的結合，通過後者打通的各種服務與接口，再加上設計稿生成代碼的能力，可以進一步地提升前端開發者的開發體驗，由原來的設計稿生成代碼，轉變為生成可随時可部署的應用/頁面，是以本文最後會介紹如何在
阿裡雲雲開發平台使用
imgcook插件，一鍵完成設計稿稿生成應用，開啟您的智能開發之旅。
前端智能化背景
業界機器學習之勢如火如荼，「AI 是未來的共識」頻頻出現在各大媒體上。李開複老師也在《AI · 未來》指出，将近 50％ 的人類工作将在 15 年内被人工智能所取代，尤其是簡單的、重複性的工作。并且，白領比藍領的工作更容易被取代；因為藍領的工作可能還需要機器人和軟硬體相關技術都突破才能被取代，而白領工作一般隻需要軟體技術突破就可以被取代，那我們前端這個“白領”工作會不會被取代，什麼時候能被取代多少？
回看 2010 年，軟體幾乎吞噬了所有行業，帶來近幾年軟體行業的繁榮；而到了 2019 年，軟體開發行業本身卻又在被 AI 所吞噬。你看：DBA 領域出現了 Question-to-SQL，針對某個領域隻要問問題就可以生成 SQL 語句；基于機器學習的源碼分析工具 TabNine 可以輔助代碼生成；設計師行業也出了 P5 Banner 智能設計師“鹿班”，測試領域的智能化結合也精彩紛呈。那前端領域呢？
那就不得不提一個我們再熟悉不過的場景了，它就是設計稿自動生成代碼（Design2Code，以下簡稱 D2C），阿裡經濟體前端委員會 - 前端智能化方向目前階段，就是聚焦在如何讓 AI 助力前端這個職能角色提效更新，杜絕簡單重複性工作，讓前端工程師專注更有挑戰性的工作内容！
imgcook 是什麼？
imgcook 使用 Sketch、PSD、靜态圖檔等形式作為輸入，通過智能化技術一鍵生成可維護的前端代碼，包含視圖代碼、資料字段綁定、元件代碼、部分業務邏輯代碼等。
它期望能夠利用智能化手段，讓自己成為一位前端工程師，在對設計稿輕限制的前提下實作高度還原，釋放前端生産力，助力前端與設計師高效協作，讓工程師們專注于更具挑戰性的工作！
設計稿生成代碼的目标是讓 AI 助力前端這個職能角色提效更新，杜絕簡單重複性工作内容。那我們先來分析下，“正常”前端尤其是面向 C 端業務的同學，一般的工作流程日常工作内容大緻如下：
“正常”前端一般的開發工作量，主要集中在視圖代碼、邏輯代碼和資料聯調這幾大塊，接下來，我們逐塊拆解分析。
1. 問題定義
視圖代碼研發，一般是根據視覺稿編寫 HTML 和 CSS 代碼。如何提效？當面對 UI 視圖開發重複性的工作時，自然想到元件化、子產品化等封裝複用物料的解決方案，基于此解決方案會有各種 UI 庫的沉澱，甚至是可視化拼裝搭建的更高階的産品化封裝，但複用的物料不能解決所有場景問題。個性化業務、個性化視圖遍地開花，直面問題本身，直接生成可用的 HTML 和 CSS 代碼是否可行？
這是業界一直在不斷嘗試的命題，通過設計工具的開發插件可以導出圖層的基本資訊，但這裡的主要難點還是對設計稿的要求高、生成代碼可維護性差，這是核心問題，我們來繼續拆解。
1）設計稿要求高
對設計稿的要求高，會導緻設計師的成本加大，相當于前端的工作量轉嫁給了設計師，導緻推廣難度會非常大。
一種可行的辦法是采用 CV（ComputerVision, 計算機視覺） 結合導出圖層資訊的方式，以去除設計稿的限制，當然對設計稿的要求最好是直接導出一張圖檔，那樣對設計師沒有任何要求，也是我們夢寐以求的方案，我們也一直在嘗試從靜态圖檔中分離出各個适合的圖層，但目前在生産環境可用度不夠（小目辨別别精準度問題、複雜背景提取問題仍待解決），畢竟設計稿自帶的元資訊，比一張圖檔提取處理的元資訊要更多更精準。
2）代碼可維護性
生成的代碼結構一般都會面臨可維護性方面的挑戰：
- 合理布局嵌套：包括絕對定位轉相對定位、備援節點删除、合理分組、循環判斷等方面；
- 元素自适應：元素本身擴充性、元素間對齊關系、元素最大寬高容錯性；
- 語義化：類名的多級語義化；
- 樣式 CSS 表達：背景色、圓角、線條等能用 CV 等方式分析提取樣式，盡可能用 CSS 表達樣式代替使用圖檔。
将這些問題拆解後，分門别類專項解決，解決起來看似沒完沒了，但好在目前發現的大類問題基本解決。
很多人質疑道：這部分能力的實作看起來和智能化一點關系都沒有，頂多算個布局算法相關的專家規則系統。沒錯，現階段這部分比較适合規則系統，對使用者而言布局算法需要接近 100% 的可用度，另外這裡涉及的大部分是無數屬性值組合問題，目前用規則更可控。如果非要使用模型，那這個可被定義為多分類問題。同時，任何深度學習模型的應用都是需要先有清晰的問題定義過程，把問題規則定義清楚本就是必備過程。
但在規則解決起來麻煩的情況下，可以使用模型來輔助解決。比如 合理分組（如下圖） 和 循環項 的判斷，實踐中我們發現，在各種情況下還是誤判不斷，算法規則難以枚舉，這裡需要跨元素間的上下文語義識别，這也是接下來正在用模型解決的重點問題。
2. 技術方案
基于上述的概述和問題分解後，我們對現有的 D2C 智能化技術體系做了能力概述分層，主要分為以下三部分：
- 識别能力：即對設計稿的識别能力，智能從設計稿分析出包含的圖層、基礎元件、業務元件、布局、語義化、資料字段、業務邏輯等多元度的資訊；如果智能識别不準，就可視化人工幹預補充糾正，一方面是為了可視化低成本幹預生成高可用代碼，另一方面這些幹預後的資料就是标注樣本，反哺提升智能識别的準确率；
- 表達能力：主要做資料輸出以及對工程部分接入：a）通過 DSL 适配将标準的結構化描述做 Schema2Code；b）通過 IDE 插件能力做工程接入；
- 算法工程：為了更好的支撐 D2C 需要的智能化能力，将高頻能力服務化，主要包含資料生成處理、模型服務部分：
- 樣本生成：主要處理各管道來源樣本資料并生成樣本；
- 模型服務：主要提供模型 API 封裝服務以及資料回流。
（前端智能化 D2C 能力概要分層）
在整個方案裡，我們用同一套資料協定規範（D2C Schema）來連接配接各層的能力，確定其中的識别能夠映射到具體對應的字段上，在表達階段也能正确地通過出碼引擎等方案生成代碼。
1）智能識别技術分層
在整個 D2C 項目中，最核心的是上述識别能力部分的機器智能識别部分，這層的具體再分解如下：
- 物料識别層：主要通過圖像識别能力識别圖像中的物料（子產品識别、原子子產品識别、基礎元件識别、業務元件識别）；
- 圖層處理層：主要将設計稿或者圖像中圖層進行分離處理，并結合上一層的識别結果，整理好圖層元資訊；
- 圖層再加工層：對圖層處理層的圖層資料做進一步的規範化處理；
- 布局算法層：轉換二維中的絕對定位圖層布局為相對定位和 Flex 布局；
- 語義化層：通過圖層的多元特征對圖層在生成代碼端做語義化表達；
- 字段綁定層：對圖層裡的靜态資料結合資料接口做接口動态資料字段綁定映射；
- 業務邏輯層：對已配置的業務邏輯通過業務邏輯識别和表達器來生成業務邏輯代碼協定；
- 出碼引擎層：最後輸出經過各層智能化處理好的代碼協定，經過表達能力（協定轉代碼的引擎）輸出各種 DSL 代碼。
（D2C 識别能力技術分層）
2）技術痛點
當然，這其中的識别不全面、識别準确度不高一直是 D2C 老生常談的話題，也是 imgcook 的核心技術痛點。我們嘗試從這幾個角度來分析引起這個問題的因素：
- 識别問題定義不準确：問題定義不準确是影響模型識别不準的首要因素，很多人認為樣本和模型是主要因素，但在這之前，可能一開始對問題的定義就出現了問題，我們需要判斷我們的識别訴求模型是否合适做，如果合适那該怎麼定義清楚這裡面的規則等；
- 高品質的資料集樣本缺乏：我們在識别層的各個機器智能識别能力需要依賴不同的樣本，那我們的樣本能覆寫多少前端開發場景，各個場景的樣本資料品質怎麼樣，資料标準是否統一，特征工程處理是否統一，樣本是否存在二義性，互通性如何，這是我們當下所面臨的問題；
- 模型召回低、存在誤判：我們往往會在樣本裡堆積許多不同場景下不同種類的樣本作為訓練，期望通過一個模型來解決所有的識别問題，但這卻往往會讓模型的部分分類召回率低，對于一些有二義性的分類也會存在誤判。
【問題定義】
深度學習裡的計算機視覺類模型目前比較适合解決的是分類問題和目标檢測問題，我們判斷一個識别問題是否該使用深度模型的前提是——我們自己是否能夠判斷和了解，這類問題是否有二義性等，如果人也無法準确地判斷，那麼這個識别問題可能就不太合适。
假如判斷适合用深度學習的分類來做，那就需要繼續定義清楚所有的分類，這些分類之間需要嚴謹、有排他性、可完整枚舉。比如在做圖檔的語義化這個命題的時候，一般圖檔的 ClassName 通用正常命名有哪些，舉個例子，其分析過程如下：
- 第一步：盡可能多地找出相關的設計稿，一個個枚舉裡面的圖檔類型；
- 第二步：對圖檔類型進行合理歸納歸類，這是最容易有争論的地方，定義不好有二義性會導緻最有模型準确度問題；
- 第三步：分析每類圖檔的特征，這些特征是否典型，是否是最核心的特征點，因為關系到後續模型的推理泛化能力；
- 第四步：每類圖檔的資料樣本來源是否有，沒有的話能否自動造；如果資料樣本無法有，那就不适合用模型，可以改用算法規則等方式替代先看效果。
D2C 項目中很多這樣的問題，問題本身的定義需要非常精準，并且需要有科學的參考依據，這一點本身就比較難，因為沒有可借鑒的先例，隻能先用已知的經驗先試用，使用者測試有問題後再修正，這是一個需要持續疊代持續完善的痛點。
【樣本品質】
針對樣本問題，我們需要對這部分資料集建立标準規範，分場景建構多元度的資料集，将收集的資料做統一的處理和提供，并以此期望能建立一套規範的資料體系。
在這套體系中，我們使用統一的樣本資料存儲格式，提供統一的針對不同問題（分類、目标檢測）的樣本評估工具來評估各項資料集的品質，針對部分特定模型可采取效果較好的特征工程（歸一化、邊緣放大等）來處理，同類問題的樣本也期望能在後續不同的模型裡能夠流通作比較，來評估不同模型的準确度和效率。
（資料樣本工程體系）
【模型】
針對模型的召回和誤判問題，我們嘗試收斂場景來提高準确度。往往不同場景下的樣本會存在一些特征上的相似點或者影響部分分類局部關鍵特征點，導緻産生誤判、召回低，我們期望能夠通過收斂場景來做模式化的識别，提高模型準确度。
我們把場景收斂到如下三個場景：無線 C 端營銷頻道場景、小程式場景以及 PC 中背景場景。這裡面幾個場景的設計模式都有自己的特色，針對各個場景來設計垂直的識别模型可以高效地提高單一場景的識别準确度。
（D2C 場景）
3）思考與解法
總的來說，既然使用了深度模型，有一個比較現實的問題是，模型的泛化能力不夠，識别的準确率必然不能 100% 讓使用者滿意，除了能夠在後續不斷地補充這批識别不到的樣本資料外，在這之前我們能做什麼？
在 D2C 的整個還原鍊路裡，對于識别模型，我們還遵守一個方法論，即設計一套協定或者規則能通過其他方式來兜底深度模型的識别效果，保障在模型識别不準确的情況下使用者仍可完成訴求：手動約定 > 規則政策 > 機器學習 > 深度模型。舉個例子比如需要識别設計稿裡的一個循環體：
- 初期，我們可以在設計稿裡手動約定循環體的協定來達成；
- 根據圖層的上下文資訊可做一些規則的判斷，來判斷是否是循環體；
- 利用機器學習的圖層特征，可嘗試做規則政策的更上遊的政策優化；
- 生成循環體的一些正負樣本來通過深度模型進行學習。
其中手動約定的設計稿協定解析優先級最高，這樣也能確定後續的流程不受阻塞和錯誤識别的幹擾。
imgcook x 雲開發平台
了解前端智能化和 imgcook 大緻思路之後，那麼為什麼會選擇在雲開發平台上內建 imgcook 呢？那就是 imgcook 和雲開發平台通過彼此的打通，将能夠為雙方解決彼此的痛點，無論是為雲上開發者，還是 imgcook 開發者都提供了全新的使用者體驗。
對于 imgcook 開發者來說，其中一個痛點就來自于對于設計稿的管理，以及前後端互動的邏輯，然而通過雲開發平台，開發者不再需要在本地安裝 Sketch，通過雲開發平台直接上傳設計稿即可開始生成代碼，真正做到了0成本一鍵生成。
另外雲開發平台上直接提供了
Midway Serverless架構，我們通過雲開發平台的插件定制化，可以讓開發者直接選擇某個頁面所使用的函數（Function），這樣就節省掉編寫一些前後端互動的基礎邏輯或請求代碼。
對于雲開發平台的開發者來說，最想得到的便是極速的上線體驗和更加便捷的開發體驗，imgcook 可以降低雲開發平台的使用門檻，比如一位 FaaS 應用工程師不再需要學習如何切圖，如何寫 CSS，而隻需要編寫 FaaS 函數的邏輯即可，剩下的前端邏輯代碼都可以通過 imgcook 插件在開發平台内即可完成，這是多麼棒的體驗啊！
那麼，接下來就看看如何快速地從0到1生成代碼吧。
首先需要先打開
雲開發平台建立應用，選擇 imgcook 建立應用：
然後在應用的 WebIDE 中通過右鍵打開 imgcook 雲插件，就可以正式開始使用了。
第一步，在插件中選擇“導入”，打開上傳設計稿界面：
第二步，imgcook 可視化編輯器：
第三步，生成代碼：
第四步，導出代碼到應用：
第五步，上線應用：
$ npm install
$ npm run dev
正在啟動，請稍後...
---------------------------------------
開發伺服器已成功啟動
請打開 >>> http://*****-3000.xide.aliyun.com/
---------------------------------------
感謝使用 Midway Serverless，歡迎 Star!
https://github.com/midwayjs/midway
--------------------------------------- 啟動成功後通過指令行的位址打開頁面效果如下，是不是很簡單呢？
總結
本文通過介紹前端智能化的背景，imgcook 的問題定義以及技術方案，以及如何在雲開發平台上使用 imgcook 開始智能開發，總的來說，還是希望讓業内的前端工程師們從使用 imgcook 開始，将日常工作中的一些繁瑣、耗時的工作交給 AI 來完成，這樣能關注工程師本身更感興趣，也更有價值的事情，也相信不久的将來，前端工程師将借助于 AI 能更加快樂與從容地工作！
點選連結立即體驗：
https://yunqi.aliyun.com/2020/hol“ 阿裡巴巴雲原生 關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的公衆号。”