簡介： 與大家分享，我們是如何看待人工智能在前端領域的未來發展方向，如何推進智能化能力在智能生成代碼平台 imgcook 上的應用落地和疊代更新助力今年雙 11 會場 90.4% 新子產品的代碼智能生成，編碼效率提升 68% 的。
作者 | 淘系-蘇川
2017 年，一篇論文 pix2code: Generating Code from a Graphical User Interface Screenshot 引起業界關注，論文講述了使用深度學習技術實作從一張 UI 截圖識别生成 UI 結構描述，然後将 UI 結構描述轉成 HTML 代碼。有人認為這種從 UI 截圖直接生成代碼的意義不大，AI 和 Sketch 軟體本來就是用資料結構儲存設計檔案的結構描述，不需要通過機器學習來擷取，而且生成的代碼不确定性很大。也有一部分人對這個思路給予肯定，提出讓深度學習模型學習 UI 界面特征，還可以做 UI 智能設計。
随後基于 pix2code 開發的 Screenshot2Code 項目進入 Github 排行榜第一名，該工具能夠自動将 UI 截圖轉成 HTML 代碼，該項目作者号稱 3 年後人工智能會徹底改變前端開發，對此也有不少使用者表示質疑，認為前端技術複雜架構各異，僅 HTML 代碼無法滿足需求。
2018 年，微軟 AI Lab 開源了草圖轉代碼工具 Sketch2Code ，一些人認為生成代碼效果不理想不适用于生産環境，但也有人認為代碼自動生成還處于初級階段，未來發展值得想象。
2019 年，阿裡巴巴對外開放智能生成代碼平台 imgcook，可以通過識别設計稿（Sketch/PSD/圖檔）智能生成 React、Vue、Flutter、小程式等不同種類的代碼，并在同年雙 11 大促中自動生成了 79.34% 的前端代碼，智能生成代碼不再隻是一個線下實驗産品，而是真正産生了價值。
每當這些新的自動生成代碼産品釋出，網絡上總會出現“人工智能會不會取代前端”“一大批前端程式員要失業了”這些讨論。
那人工智能到底會不會取代前端？人工智能在未來很長的一段時間内不會取代前端，但是會改變前端。一是會改變在前端智能化方向的前端領域探索者，他們除了可以成為 Nodejs 服務端工程師，還可以成為機器學習工程師，為前端智能化領域創造更多的價值和成果；二是會改變享受前端智能化成果的前端開發者，改變他們的研發方式，例如代碼智能生成、代碼智能推薦、代碼智能糾錯、UI 自動化測試等可以幫助他們完成大量簡單重複的工作，可以把更多的時間放在更有價值的事情上。
本篇文章将給大家分享作為前端智能化領域的探索者，我們是如何看待人工智能在前端領域的未來發展方向，如何推進智能化能力在智能生成代碼平台 imgcook 上的應用落地和疊代更新助力今年雙 11 會場 90.4% 新子產品的代碼智能生成，編碼效率提升 68% 的。
階段性成果
imgcook 官網首頁平均每月 PV 6519， 平均每月 UV 3059。相比于 2019 年， 2020 年月平均 PV 和 UV 均是 2019 年的 2.5 倍。
imgcook 使用者共有 18305 個，其中社群使用者占比 77%，阿裡集團内使用者占比 23%。imgcook 子產品共有 56406 個，其中外部子產品占比 68%，内部子產品占比 32%。相比 2019 年之前總量，2020 年使用者增長 2.7 倍，子產品增長 2.1 倍。
社群覆寫公司至少 150 家，集團内部覆寫 BU 10 個以上，雙 11 會場新增子產品覆寫度 90.4%，無人工輔助情況下智能生成的代碼被保留釋出上線的占比 79.26%，編碼效率（子產品複雜度和研發耗時比值）提升 68%。
與 2019 年相比，使用者感官提效提升 14%；和完全不使用 D2C 相比，固定人力機關時間子產品需求吞吐量提升約 1.5 倍。與傳統研發模式相比，使用 imgcook 研發鍊路編碼效率可提升約 68%。
（Imgcook 研發效能資料概覽）
技術産品體系更新
技術原理簡介
我們先來了解下 imgcook 智能生成代碼的原理， imgcook 能夠自動生成代碼主要是做了兩件事: 從視覺稿中識别資訊，然後将這些資訊表達成代碼。
本質是通過設計工具插件從設計稿中提取 JSON 描述資訊，通過規則系統、計算機視覺和機器學習等智能還原技術對 JSON 進行處理和轉換，最終得到一個符合代碼結構和代碼語義的 JSON，再用一個 DSL 轉換器，轉換為前端代碼。DSL 轉換器就是一個 JS 函數，輸入是一個JSON，輸出就是我們需要的代碼。例如 React DSL 的輸出就是符合 React 開發規範的 React 代碼。
（D2C 智能生成代碼使用動線）
其中核心部分在于 JSON to JSON 這部分。設計稿中隻有圖像、文本這些元資訊，位置資訊是絕對坐标，并且設計稿中的樣式與 Web 頁面中的樣式表現存在差異，例如 sketch 中透明度 opacity 屬性不會影響子節點，但在網頁中 opacity 會影響子節點，而人工編寫的代碼具有各種布局類型、DOM 結構需要合理可維護、代碼需要語義化、元件化、循環等資訊。
如何能智能生成像人工編寫這樣的代碼，這是智能還原這部分要解決的事情。我們把 D2C 智能還原部分做了能力分層，每一層的輸入和輸出都是 JSON，智能還原部分的本質是一層一層的做 JSON 轉換，這就是整個智能還原的流程。如果需要對生成的 JSON 做修改，可以通過 imgcook 編輯器可視化幹預，最終通過 DSL 開放層将得到的符合代碼結構和語義的 JSON 轉換為代碼。
（D2C 智能還原技術分層）
智能還原的核心鍊路構成了 D2C 的核心技術體系，并通過度量體系來衡量核心還原能力和研發提效效果。下層依托算法工程體系提供核心技術體系中智能化能力的底層服務，包括樣本制造、算法工程服務、前端算法工程架構，上層通過 D2C 研發體系承接智能還原的後置鍊路，通過提供可視化幹預能力滿足使用者二次疊代的需求，并通過将工程鍊路内置到 imgcook 平台實作一站式開發、調試、預覽和釋出來提升整體的工程效率。再加上支援自定義 DSL、自定義開發物料等擴充性很強的自定義能力形成的開放體系一起構成了整個 D2C 架構，服務于阿裡内部 C 端、小程式、中背景等以及外部社群各種不同的業務場景。
（D2C 技術架構圖）
今年在前端智能化大背景下，對 D2C 技術體系全鍊路進行了智能化能力更新，并為前端同學帶來了讓前端工程師能成為機器學習工程師的前端算法工程架構 Pipcook 和解決樣本收集問題的樣本制造機 Samplecook。同時帶來了營銷子產品研發鍊路産品化更新，助力全鍊路研發提效。
智能化能力更新
智能化能力分層定義
《汽車駕駛自動化分級标準》基于駕駛自動化系統能夠執行動态駕駛任務的程度，根據在執行動态駕駛任務中的角色配置設定以及有無設計運作條件限制，将駕駛自動化分成 0 至 5 級。在進階别的自動駕駛中，駕駛員的角色向乘客轉變。這種明确的标準有助于各類企業更有針對性展開研發和技術部署的工作。
（自動駕駛分級标準）
參考自動駕駛分級标準，基于 D2C 系統能夠自動生成代碼的程度，根據編碼的角色以及是否需要再人工幹預和驗證，我們定義了一個 D2C 系統傳遞的分級标準，用來幫助我們認識 D2C 系統目前所處的級别以及下一階段的發展方向。
(D2C 系統傳遞分級參考标準)
目前 imgcook 的能力處于 D2C 的 L3 級别，智能生成的代碼還需要可視化幹預或人工兜底開發後驗證上線。未來期望達到 L4 級别，我們需要對 UI 資訊架構進行拆解，對從 UI 資訊自動生成代碼的智能化能力進行細分。
（UI 資訊架構拆解）
一個應用由多個頁面組成，每個頁面中按 UI 顆粒度劃分可以分為子產品/區塊、原子子產品/區塊、元件（業務元件、基礎元件）、元件。每一個顆粒度的 UI 我們都需要識别到它的布局結構和語義，才能生成像人工編寫一樣子產品化、元件化、語義化的可維護性較高的代碼。
根據對 UI 資訊架構的拆解，我們結合 imgcook 生成代碼的技術體系從不同顆粒度對智能化能力進行分級 I0-I5（I 是 Intelligent 的首字母）。
（D2C 智能化能力分級）
其中塗色部分是目前已具備的能力，從這個次元來看 imgcook 的智能化能力目前處在 I3 和 I4 級别，并與 I2 級别的能力協同運作于生産環境。I3 級别的智能化能力需要不斷優化和疊代模型，當線上真實場景準确率達到 75% 以上或模型具備自我疊代能力則進入 I4 級别。如果達到了 I5 級别的智能化能力，根據 D2C 系統傳遞分級參考标準，D2C 系統傳遞分級可以從 L3 進入 L4， 生成的代碼将不需要人工幹預和驗證即可直接上線。
當然我們可能會長期處于 L4 級别這個人機協同程式設計的階段，這種分級的定義是為了促進智能化落地的程序，可以指導 我們提升 D2C 智能化能力，對 D2C 智能化有個更清晰的認識。
我們以生成代碼的可用度作為總體技術名額，并根據代碼生成鍊路的技術分層給出各階段的技術名額以及對代碼可用率影響的權重，其中生成代碼的理論準确度 = (各個環節準确度 * 權重)之和，而真實的代碼可用率 = imgcook 生成的代碼在最終上線的代碼中留存的占比。
（各分層技術名額與權重定義）
D2C 的智能化能力分布在還原鍊路的各個階段，我們以提升代碼可用率為目标，對全鍊路進行智能化能力更新，将技術方案細化到如何讓各階段模型識别準确率提升以及如何能将識别結果最終應用到智能還原鍊路生成代碼，如何做到從樣本收集、模型訓練、模型部署到模型應用到工程鍊路整個流程能夠自動化、自我疊代優化，不斷優化和疊代模型能力。
智能化能力的應用還需要工程鍊路的支撐，例如模型識别結果的應用、線上使用者行為召回、前端開發元件對 UI 元件識别結果的承接等，整體的 D2C 技術體系也需要同步更新。
（D2C 技術體系更新大圖）
各階段智能化能力更新
1、圖層解析階段
imgcook 通過解析設計稿圖層資訊，并通過規則系統、智能化技術等識别和生成代碼，但由于設計域與研發域的表達方式、結構和規範等差異，設計稿的圖層結構對生成代碼的合理性影響較大，一些設計不規範的設計稿需要用 imgcook 的“成組”和“圖檔合并”協定對設計稿進行調整。
開發同學在開發代碼時也經常會有寫多餘的 console.log、沒有注釋、變量重複聲明等代碼不規範的問題，為了解決這些問題，提供了 ESLint、JSLint 等工具來保障代碼規範的統一。
在設計域，我們也同樣可以開發一套設計稿規範智能檢查工具來保障設計規範，智能審查設計稿的規範性，提示錯誤并輔助調整。我們把這套工具稱為 Design Lint（DLint）
（設計規範檢查）
2、物料識别階段
UI 物料可以分為子產品/區塊、元件和元件，從 Sketch/PSD 中直接提取的資訊隻有文本、圖檔和位置資訊，直接生成的代碼都是由 div、img、span 組成，實際開發中元件化、代碼語義化必不可少，如何從設計稿中提取元件和語義資訊，這是 NLP、深度學習等智能化技術非常适合解決的問題。
去年我們在元件識别、圖檔識别、文本識别這幾個方向都有探索和實踐，識别的結果最終用于語義化和字段綁定，但使用的技術方案對識别的效果限制較大，今年我們做了如下改進：
3、元件識别
原本使用目标檢測的方案來識别 UI 元件，但這種方案既需要識别出正确的元件類别還需要識别出正确的位置，以整個視覺圖檔作為輸入，複雜的圖檔背景很容易被誤識别，并且由于識别出的位置偏差導緻很難挂載到正确的節點上，模型識别結果線上上的應用準确率較低。
基于這些原因，以及 imgcook 能夠從視覺稿中擷取每個圖層位置資訊的優勢，我們将方案轉換成了圖檔分類，并能将識别結果真正的應用到線上，這其中依托一套元件可配置、可識别、可渲染、可幹預、可出碼的智能物料體系。
（元件識别應用全鍊路）
以下是元件識别應用到線上的示範，識别視覺稿中的視訊資訊，并用 rax-video 前端元件承接生成元件粒度的代碼，需要配置自定義的元件(元件庫設定)、元件識别模型服務(模型服務設定)、支援渲染 video 元件的畫布資源（編輯器配置-畫布資源）以及應用元件識别結果的業務邏輯點（業務邏輯庫配置）。
點選檢視元件識别全鍊路示範
4、Icon 識别
Icon 識别其實是一個圖檔分類的問題，依然沿用圖檔分類的方案，但為了能夠讓模型的泛化能力能自我增強，我們設計了一個 Icon 自動收集、處理資料、自動訓練模型、自動釋出模型的模型閉環鍊路，讓模型能夠自我疊代優化。
（Icon 識别模型閉環鍊路）
自上線以來，新增訓練集總數達到了 2729 個，平均每月回撈有效資料 909 個, 模型經過幾次自我疊代測試集的準确度從 80% 提升到了 83%。
5、圖檔/文本語義識别
在 imgcook 智能化系統中有一個很關鍵的部分，就是如何對 UI 界面内的元素綁定語義化資訊，之前解決方法是基于圖檔和文本分類模型識别，該方法有很大的局限性：僅對文本進行分類，沒有考慮與整個 UI 界面内的上下文語義，導緻模型效果不好。
舉個例子：$200，這個字段文本分類是沒辦法對其進行語義識别的，因為它放到不同的場景中有着不同的意思，如：活動價、原價、優惠劵…，正确的做法是考慮該字段與在 UI 界面的聯系（即獨特的樣式）來對它進行語義分析。
是以，我們引入了一種能結合 UI 中上下文語義的方案來進行語義識别，采用圖檔元素決策+文本分類兩步走的方案解決界面元素語義化問題，具體流程是：先基于強化學習對界面元素按樣式“過濾”一遍，識别出有樣式的非純文字字段，再對純文字的字段進行文本分類。具體架構如下。
（強化學習 + 文本分類）
以下是模型算法訓練結果
（基于上下文的語義分析）
布局還原階段
布局即是代碼中每個節點與節點之間的關系，是父子關系還是兄弟關系。從顆粒度大小上劃分，可以分為頁面間子產品/區塊之前的關系、子產品/區塊内原子子產品/區塊之間的關系以及原子子產品/區塊内元件、元件之間的關系。
目前 imgcook 已具備了循環識别與多态識别的能力，識别設計稿中的循環體生成循環代碼，識别同一個節點有多種 UI 狀态時生成多狀态的 UI 代碼，并定義了布局可維護度衡量方式來衡量還原階段的準确度。
（布局還原階段識别能力更新）
邏輯生成階段
在業務邏輯生成階段優化原有的配置鍊路，将業務邏輯庫與算法工程鍊路解耦，并承接所有識别結果的應用和表達。物料識别階段隻關心 UI 中有什麼物料，不關心識别的結果如何用于生成代碼，布局還原階段的循環識别和多态識别同理。這樣做的好處是我們可以自定義識别結果的表達，并且可以讓使用者感覺智能識别的結果并選擇是否使用。
除了從業務邏輯庫生成邏輯代碼也可以從需求稿生成部分邏輯，或者來源于代碼片段推薦，或者來源于代碼智能推薦（ Code to Code，C2C）。
（通用業務邏輯庫配置）
标算法工程體系更新
樣本制造機
算法工程服務提供了 UI 特征識别的模型訓練産品，為所有想使用業務元件識别的小夥伴打造一個玩弄機器學習的鍊路。為了解決使用算法工程服務的關鍵痛點，是以有了新的衍生産品：樣本制造機，為前端 UI 識别的模型提供樣本制造捷徑。
前端算法工程架構
有很多同學會覺得，讓前端同學用機器學習技術去解決前端領域的問題，會不會難度很大。為了降低前端工程師使用機器學習的門檻，我們開發了前端算法工程架構 Pipcook。前端工程師可以用熟悉的 JavaScript 來完成機器學習任務。
Pipcook 通過提供通用的模型能力，比如圖檔分類、目标檢測、文本分類等，減少了在 imgcook 中從開發到上線這些模型的門檻，使得如此多的底層識别能力也具備快速疊代的可能性。imgcook 全鍊路的識别能力，如元件識别、Icon 識别、字段語義識别等都是基于 Pipcook 訓練。
（前端算法工程架構 Pipcook）
我們可以這樣了解 Pipcook， Node.js 的出現可以讓前端工程師成為一位服務端工程師，做服務端同學能做的事情， Pipcook 的出現可以讓前端工程師成為一位機器學習工程師，可以做機器學習工程師做的事情。
(前端與機器學習)
關于 Pipcook 是如何用 Node.js 橋接機器學習生态以及目前 Pipcook 的應用情況。
研發鍊路更新
天馬子產品研發鍊路
淘系營銷以子產品開發為主，子產品開發的完整鍊路是從子產品管理平台建立子產品 ⇥ 進入 imgcook 平台智能生成代碼&可視化研發 ⇥ 開發完成後進入 IDE 調試預覽 ⇥ 測試完成後進入工程平台釋出。整個研發流程需要切換多個平台，開發鍊路體驗和工程效率都有待提升。
建立子產品後進入 imgcook 平台智能生成代碼&可視化研發，如果能夠直接在 imgcook 平台開發、調試、預覽和釋出，一站式的 D2C 研發模式是提升整體研發效率和研發體驗的一個不錯的選擇。
是以我們自定義了具有可視化模式和源碼模式的營銷版本 imgcook 可視化編輯器，在可視化模式智能生成代碼和可視化研發，并将生成的代碼一鍵同步到源碼模式的 WebIDE，在 WebIDE 中支援界面化的調試、預覽、釋出。
(天馬子產品 imgcook 可視化研發動線)
我們通過計算使用傳統研發模式開發的子產品與使用 imgcook 可視化研發模式開發的子產品的效率值（複雜度與研發耗時比值）看到，使用 imgcook 可視化研發鍊路開發的子產品編碼效率提升 68%。
點選檢視天馬子產品 imgcook 可視化研發全鍊路示範
智能 UI 研發鍊路
智能 UI 是一種通過分析使用者特征為使用者提供個性化 UI 的方案，是以需要開發大量的 UI 界面，在淘系智能 UI 平台鲸幂中開發智能 UI 的原始鍊路是在上傳視覺稿解析物料之後會批量建立 imgcook 子產品，但每種物料都需要進入對應的 imgcook 可視化界面單獨開發、建立倉庫、單獨釋出，并且看不到智能 UI 整體的視覺效果。這樣導緻智能 UI 所需要的大量物料的開發成本很大，業務接入智能 UI 的成本比較大。
(智能 UI imgcook 可視化研發動線)
這次更新了智能 UI 的研發鍊路， D2C 可視化研發鍊路承接了智能 UI 的批量化生産。在上傳設計稿解析出 UI 物料之後，建立 imgcook 子產品，批量生成物料 UI 代碼，同時建立代碼倉庫與 imgcook 子產品關聯，并支援将已建立的物料批量導入 imgcook，批量生成 UI 方案（不同類型的 UI），在生成的 UI 方案中集中式對物料進行開發，最後還将支援物料的批量釋出，整個鍊路集中高效了很多。
落地結果
今年前端智能化助力前端研發模式更新，數個 BU 共建前端設計稿識别算法模型和資料集，并于雙 11 會場大規模應用落地。
設計稿生成代碼技術體系全面更新（如對 UI 多态、直播視訊元件、循環的智能識别增強等）帶來了營銷子產品研發鍊路産品化更新：雙十一會場有 90.4% （高于去年）新子產品的代碼智能生成。更新設計稿智能檢查能力，在可統計範圍内，無人工輔助的情況下智能生成的代碼被保留釋出上線的占比 79.26%。
相比傳統子產品開發模式，使用設計稿生成代碼技術後編碼效率（子產品複雜度和研發耗時比值）提升68%，固定人力機關時間子產品需求吞吐量增加約 1.5 倍。
目前還需要人工改動代碼的主要原因有：循環未被識别、條件展示邏輯代碼未自動生成、字段綁定猜測錯誤（字段标準化情況不佳）、業務特性必須的圖檔合并問題等，這些問題也都是接下來需要逐漸完善的。
（D2C 代碼生成使用者更改情況）
同時，imgcook 支撐了天貓淘寶的主會場和行業會場智能 UI 的批量化生産，極大的提升了智能 UI 的生産效率。
（智能 UI 批量化生産結果）
未來展望
智能化方式無論是使用計算機視覺還是深度學習技術，都會有準确率的問題，準确率低線上上環境可能無法被接受。需要建立一套與線上使用者使用資料形成閉環的算法工程鍊路，實作樣本自動化收集、算法工程鍊路的閉環才能讓模型線上識别準确率不斷提升。目前在 imgcook 的系統中，Icon 識别從樣本收集到模型識别結果的最終應用已經形成了完整的鍊路閉環，開發同學不需要花太多精力用于模型的優化。對于其他的模型，後續也會用同樣的思路讓模型具有自我疊代的能力。
另一個 D2C 智能化的難點是模型識别的結果最終如何用于生成代碼，例如元件識别模型能識别元件的類别，但最終生成代碼使用哪個元件庫的元件、如何識别 UI 中的元件屬性值這些問題，imgcook 的平台能力與智能還原技術分層架構具備解決這些問題的能力，未來會有更多的智能化方案用于生産環境。
後續我們會繼續根據對 imgcook 的 D2C 智能化能力拆解，探索更多智能化解決方案，優化現有模型能力，建立算法工程閉環機制實作每一個模型的自我疊代，不斷提高模型的泛化能力和線上識别準确度，輔助生成可維護性更高語義更強的前端代碼。
歡迎大家一起來交流。
🔥 TC39成員、Node.js的核心協作者 Ujjwal Sharma 确認出席第十五屆 D2 前端技術論壇。早鳥票倒計時五天，速搶！
關注「Alibaba F2E」
把握阿裡巴巴前端新動向
原文連結：https://developer.aliyun.com/article/779276?
版權聲明： 本文内容由阿裡雲實名注冊使用者自發貢獻，版權歸原作者所有，阿裡雲開發者社群不擁有其著作權，亦不承擔相應法律責任。具體規則請檢視《阿裡雲開發者社群使用者服務協定》和《阿裡雲開發者社群知識産權保護指引》。如果您發現本社群中有涉嫌抄襲的内容，填寫侵權投訴表單進行舉報，一經查實，本社群将立刻删除涉嫌侵權内容。