AI助力90.4%双11前端模块自动生成
作者 | 淘系-蘇川
2017 年，一篇論文 pix2code: Generating Code from a Graphical User Interface Screenshot 引起業(yè)界關(guān)注，論文講述了使用深度學(xué)習(xí)技術(shù)實(shí)現(xiàn)從一張 UI 截圖識(shí)別生成 UI 結(jié)構(gòu)描述，然后將 UI 結(jié)構(gòu)描述轉(zhuǎn)成 HTML 代碼。有人認(rèn)為這種從 UI 截圖直接生成代碼的意義不大，AI 和 Sketch 軟件本來就是用數(shù)據(jù)結(jié)構(gòu)保存設(shè)計(jì)文件的結(jié)構(gòu)描述，不需要通過機(jī)器學(xué)習(xí)來獲取，而且生成的代碼不確定性很大。也有一部分人對(duì)這個(gè)思路給予肯定，提出讓深度學(xué)習(xí)模型學(xué)習(xí) UI 界面特征，還可以做 UI 智能設(shè)計(jì)。
隨后基于 pix2code 開發(fā)的 Screenshot2Code 項(xiàng)目進(jìn)入 Github 排行榜第一名，該工具能夠自動(dòng)將 UI 截圖轉(zhuǎn)成 HTML 代碼，該項(xiàng)目作者號(hào)稱 3 年后人工智能會(huì)徹底改變前端開發(fā)，對(duì)此也有不少用戶表示質(zhì)疑，認(rèn)為前端技術(shù)復(fù)雜框架各異，僅 HTML 代碼無法滿足需求。
2018 年，微軟 AI Lab 開源了草圖轉(zhuǎn)代碼工具 Sketch2Code ，一些人認(rèn)為生成代碼效果不理想不適用于生產(chǎn)環(huán)境，但也有人認(rèn)為代碼自動(dòng)生成還處于初級(jí)階段，未來發(fā)展值得想象。
2019 年，阿里巴巴對(duì)外開放智能生成代碼平臺(tái) imgcook，可以通過識(shí)別設(shè)計(jì)稿（Sketch/PSD/圖片）智能生成 React、Vue、Flutter、小程序等不同種類的代碼，并在同年雙 11 大促中自動(dòng)生成了 79.34% 的前端代碼，智能生成代碼不再只是一個(gè)線下實(shí)驗(yàn)產(chǎn)品，而是真正產(chǎn)生了價(jià)值。
每當(dāng)這些新的自動(dòng)生成代碼產(chǎn)品發(fā)布，網(wǎng)絡(luò)上總會(huì)出現(xiàn)“人工智能會(huì)不會(huì)取代前端”“一大批前端程序員要失業(yè)了”這些討論。
那人工智能到底會(huì)不會(huì)取代前端？人工智能在未來很長的一段時(shí)間內(nèi)不會(huì)取代前端，但是會(huì)改變前端。一是會(huì)改變?cè)谇岸酥悄芑较虻那岸祟I(lǐng)域探索者，他們除了可以成為 Nodejs 服務(wù)端工程師，還可以成為機(jī)器學(xué)習(xí)工程師，為前端智能化領(lǐng)域創(chuàng)造更多的價(jià)值和成果；二是會(huì)改變享受前端智能化成果的前端開發(fā)者，改變他們的研發(fā)方式，例如代碼智能生成、代碼智能推薦、代碼智能糾錯(cuò)、UI 自動(dòng)化測試等可以幫助他們完成大量簡單重復(fù)的工作，可以把更多的時(shí)間放在更有價(jià)值的事情上。
本篇文章將給大家分享作為前端智能化領(lǐng)域的探索者，我們是如何看待人工智能在前端領(lǐng)域的未來發(fā)展方向，如何推進(jìn)智能化能力在智能生成代碼平臺(tái) imgcook 上的應(yīng)用落地和迭代升級(jí)助力今年雙 11 會(huì)場 90.4% 新模塊的代碼智能生成，編碼效率提升 68% 的。
階段性成果
imgcook 官網(wǎng)首頁平均每月 PV 6519， 平均每月 UV 3059。相比于 2019 年， 2020 年月平均 PV 和 UV 均是 2019 年的 2.5 倍。
imgcook 用戶共有 18305 個(gè)，其中社區(qū)用戶占比 77%，阿里集團(tuán)內(nèi)用戶占比 23%。imgcook 模塊共有 56406 個(gè)，其中外部模塊占比 68%，內(nèi)部模塊占比 32%。相比 2019 年之前總量，2020 年用戶增長 2.7 倍，模塊增長 2.1 倍。
社區(qū)覆蓋公司至少 150 家，集團(tuán)內(nèi)部覆蓋 BU 10 個(gè)以上，雙 11 會(huì)場新增模塊覆蓋度 90.4%，無人工輔助情況下智能生成的代碼被保留發(fā)布上線的占比 79.26%，編碼效率（模塊復(fù)雜度和研發(fā)耗時(shí)比值）提升 68%。
與 2019 年相比，用戶感官提效提升 14%；和完全不使用 D2C 相比，固定人力單位時(shí)間模塊需求吞吐量提升約 1.5 倍。與傳統(tǒng)研發(fā)模式相比，使用 imgcook 研發(fā)鏈路編碼效率可提升約 68%。
（Imgcook 研發(fā)效能數(shù)據(jù)概覽）
技術(shù)產(chǎn)品體系升級(jí)
技術(shù)原理簡介
我們先來了解下 imgcook 智能生成代碼的原理， imgcook 能夠自動(dòng)生成代碼主要是做了兩件事: 從視覺稿中識(shí)別信息，然后將這些信息表達(dá)成代碼。
本質(zhì)是通過設(shè)計(jì)工具插件從設(shè)計(jì)稿中提取 JSON 描述信息，通過規(guī)則系統(tǒng)、計(jì)算機(jī)視覺和機(jī)器學(xué)習(xí)等智能還原技術(shù)對(duì) JSON 進(jìn)行處理和轉(zhuǎn)換，最終得到一個(gè)符合代碼結(jié)構(gòu)和代碼語義的 JSON，再用一個(gè) DSL 轉(zhuǎn)換器，轉(zhuǎn)換為前端代碼。DSL 轉(zhuǎn)換器就是一個(gè) JS 函數(shù)，輸入是一個(gè)JSON，輸出就是我們需要的代碼。例如 React DSL 的輸出就是符合 React 開發(fā)規(guī)范的 React 代碼。
（D2C 智能生成代碼使用動(dòng)線）
其中核心部分在于 JSON to JSON 這部分。設(shè)計(jì)稿中只有圖像、文本這些元信息，位置信息是絕對(duì)坐標(biāo)，并且設(shè)計(jì)稿中的樣式與 Web 頁面中的樣式表現(xiàn)存在差異，例如 sketch 中透明度 opacity 屬性不會(huì)影響子節(jié)點(diǎn)，但在網(wǎng)頁中 opacity 會(huì)影響子節(jié)點(diǎn)，而人工編寫的代碼具有各種布局類型、DOM 結(jié)構(gòu)需要合理可維護(hù)、代碼需要語義化、組件化、循環(huán)等信息。
如何能智能生成像人工編寫這樣的代碼，這是智能還原這部分要解決的事情。我們把 D2C 智能還原部分做了能力分層，每一層的輸入和輸出都是 JSON，智能還原部分的本質(zhì)是一層一層的做 JSON 轉(zhuǎn)換，這就是整個(gè)智能還原的流程。如果需要對(duì)生成的 JSON 做修改，可以通過 imgcook 編輯器可視化干預(yù)，最終通過 DSL 開放層將得到的符合代碼結(jié)構(gòu)和語義的 JSON 轉(zhuǎn)換為代碼。
（D2C 智能還原技術(shù)分層）
智能還原的核心鏈路構(gòu)成了 D2C 的核心技術(shù)體系，并通過度量體系來衡量核心還原能力和研發(fā)提效效果。下層依托算法工程體系提供核心技術(shù)體系中智能化能力的底層服務(wù)，包括樣本制造、算法工程服務(wù)、前端算法工程框架，上層通過 D2C 研發(fā)體系承接智能還原的后置鏈路，通過提供可視化干預(yù)能力滿足用戶二次迭代的需求，并通過將工程鏈路內(nèi)置到 imgcook 平臺(tái)實(shí)現(xiàn)一站式開發(fā)、調(diào)試、預(yù)覽和發(fā)布來提升整體的工程效率。再加上支持自定義 DSL、自定義開發(fā)物料等擴(kuò)展性很強(qiáng)的自定義能力形成的開放體系一起構(gòu)成了整個(gè) D2C 架構(gòu)，服務(wù)于阿里內(nèi)部 C 端、小程序、中后臺(tái)等以及外部社區(qū)各種不同的業(yè)務(wù)場景。
（D2C 技術(shù)架構(gòu)圖）
今年在前端智能化大背景下，對(duì) D2C 技術(shù)體系全鏈路進(jìn)行了智能化能力升級(jí)，并為前端同學(xué)帶來了讓前端工程師能成為機(jī)器學(xué)習(xí)工程師的前端算法工程框架 Pipcook 和解決樣本收集問題的樣本制造機(jī) Samplecook。同時(shí)帶來了營銷模塊研發(fā)鏈路產(chǎn)品化升級(jí)，助力全鏈路研發(fā)提效。
智能化能力升級(jí)
智能化能力分層定義
《汽車駕駛自動(dòng)化分級(jí)標(biāo)準(zhǔn)》基于駕駛自動(dòng)化系統(tǒng)能夠執(zhí)行動(dòng)態(tài)駕駛?cè)蝿?wù)的程度，根據(jù)在執(zhí)行動(dòng)態(tài)駕駛?cè)蝿?wù)中的角色分配以及有無設(shè)計(jì)運(yùn)行條件限制，將駕駛自動(dòng)化分成 0 至 5 級(jí)。在高級(jí)別的自動(dòng)駕駛中，駕駛員的角色向乘客轉(zhuǎn)變。這種明確的標(biāo)準(zhǔn)有助于各類企業(yè)更有針對(duì)性展開研發(fā)和技術(shù)部署的工作。
（自動(dòng)駕駛分級(jí)標(biāo)準(zhǔn)）
參考自動(dòng)駕駛分級(jí)標(biāo)準(zhǔn)，基于 D2C 系統(tǒng)能夠自動(dòng)生成代碼的程度，根據(jù)編碼的角色以及是否需要再人工干預(yù)和驗(yàn)證，我們定義了一個(gè) D2C 系統(tǒng)交付的分級(jí)標(biāo)準(zhǔn)，用來幫助我們認(rèn)識(shí) D2C 系統(tǒng)當(dāng)前所處的級(jí)別以及下一階段的發(fā)展方向。
(D2C 系統(tǒng)交付分級(jí)參考標(biāo)準(zhǔn))
目前 imgcook 的能力處于 D2C 的 L3 級(jí)別，智能生成的代碼還需要可視化干預(yù)或人工兜底開發(fā)后驗(yàn)證上線。未來期望達(dá)到 L4 級(jí)別，我們需要對(duì) UI 信息架構(gòu)進(jìn)行拆解，對(duì)從 UI 信息自動(dòng)生成代碼的智能化能力進(jìn)行細(xì)分。
（UI 信息架構(gòu)拆解）
一個(gè)應(yīng)用由多個(gè)頁面組成，每個(gè)頁面中按 UI 顆粒度劃分可以分為模塊/區(qū)塊、原子模塊/區(qū)塊、組件（業(yè)務(wù)組件、基礎(chǔ)組件）、元件。每一個(gè)顆粒度的 UI 我們都需要識(shí)別到它的布局結(jié)構(gòu)和語義，才能生成像人工編寫一樣模塊化、組件化、語義化的可維護(hù)性較高的代碼。
根據(jù)對(duì) UI 信息架構(gòu)的拆解，我們結(jié)合 imgcook 生成代碼的技術(shù)體系從不同顆粒度對(duì)智能化能力進(jìn)行分級(jí) I0-I5（I 是 Intelligent 的首字母）。
（D2C 智能化能力分級(jí)）
其中涂色部分是目前已具備的能力，從這個(gè)維度來看 imgcook 的智能化能力目前處在 I3 和 I4 級(jí)別，并與 I2 級(jí)別的能力協(xié)同運(yùn)作于生產(chǎn)環(huán)境。I3 級(jí)別的智能化能力需要不斷優(yōu)化和迭代模型，當(dāng)線上真實(shí)場景準(zhǔn)確率達(dá)到 75% 以上或模型具備自我迭代能力則進(jìn)入 I4 級(jí)別。如果達(dá)到了 I5 級(jí)別的智能化能力，根據(jù) D2C 系統(tǒng)交付分級(jí)參考標(biāo)準(zhǔn)，D2C 系統(tǒng)交付分級(jí)可以從 L3 進(jìn)入 L4， 生成的代碼將不需要人工干預(yù)和驗(yàn)證即可直接上線。
當(dāng)然我們可能會(huì)長期處于 L4 級(jí)別這個(gè)人機(jī)協(xié)同編程的階段，這種分級(jí)的定義是為了促進(jìn)智能化落地的進(jìn)程，可以指導(dǎo) 我們提升 D2C 智能化能力，對(duì) D2C 智能化有個(gè)更清晰的認(rèn)識(shí)。
我們以生成代碼的可用度作為總體技術(shù)指標(biāo)，并根據(jù)代碼生成鏈路的技術(shù)分層給出各階段的技術(shù)指標(biāo)以及對(duì)代碼可用率影響的權(quán)重，其中生成代碼的理論準(zhǔn)確度 = (各個(gè)環(huán)節(jié)準(zhǔn)確度 * 權(quán)重)之和，而真實(shí)的代碼可用率 = imgcook 生成的代碼在最終上線的代碼中留存的占比。
（各分層技術(shù)指標(biāo)與權(quán)重定義）
D2C 的智能化能力分布在還原鏈路的各個(gè)階段，我們以提升代碼可用率為目標(biāo)，對(duì)全鏈路進(jìn)行智能化能力升級(jí)，將技術(shù)方案細(xì)化到如何讓各階段模型識(shí)別準(zhǔn)確率提升以及如何能將識(shí)別結(jié)果最終應(yīng)用到智能還原鏈路生成代碼，如何做到從樣本收集、模型訓(xùn)練、模型部署到模型應(yīng)用到工程鏈路整個(gè)流程能夠自動(dòng)化、自我迭代優(yōu)化，不斷優(yōu)化和迭代模型能力。
智能化能力的應(yīng)用還需要工程鏈路的支撐，例如模型識(shí)別結(jié)果的應(yīng)用、線上用戶行為召回、前端開發(fā)組件對(duì) UI 組件識(shí)別結(jié)果的承接等，整體的 D2C 技術(shù)體系也需要同步升級(jí)。
（D2C 技術(shù)體系升級(jí)大圖）
各階段智能化能力升級(jí)
1、圖層解析階段
imgcook 通過解析設(shè)計(jì)稿圖層信息，并通過規(guī)則系統(tǒng)、智能化技術(shù)等識(shí)別和生成代碼，但由于設(shè)計(jì)域與研發(fā)域的表達(dá)方式、結(jié)構(gòu)和規(guī)范等差異，設(shè)計(jì)稿的圖層結(jié)構(gòu)對(duì)生成代碼的合理性影響較大，一些設(shè)計(jì)不規(guī)范的設(shè)計(jì)稿需要用 imgcook 的“成組”和“圖片合并”協(xié)議對(duì)設(shè)計(jì)稿進(jìn)行調(diào)整。
開發(fā)同學(xué)在開發(fā)代碼時(shí)也經(jīng)常會(huì)有寫多余的 console.log、沒有注釋、變量重復(fù)聲明等代碼不規(guī)范的問題，為了解決這些問題，提供了 ESLint、JSLint 等工具來保障代碼規(guī)范的統(tǒng)一。
在設(shè)計(jì)域，我們也同樣可以開發(fā)一套設(shè)計(jì)稿規(guī)范智能檢查工具來保障設(shè)計(jì)規(guī)范，智能審查設(shè)計(jì)稿的規(guī)范性，提示錯(cuò)誤并輔助調(diào)整。我們把這套工具稱為 Design Lint（DLint）
（設(shè)計(jì)規(guī)范檢查）
2、物料識(shí)別階段
UI 物料可以分為模塊/區(qū)塊、組件和元件，從 Sketch/PSD 中直接提取的信息只有文本、圖片和位置信息，直接生成的代碼都是由 div、img、span 組成，實(shí)際開發(fā)中組件化、代碼語義化必不可少，如何從設(shè)計(jì)稿中提取組件和語義信息，這是 NLP、深度學(xué)習(xí)等智能化技術(shù)非常適合解決的問題。
去年我們?cè)诮M件識(shí)別、圖片識(shí)別、文本識(shí)別這幾個(gè)方向都有探索和實(shí)踐，識(shí)別的結(jié)果最終用于語義化和字段綁定，但使用的技術(shù)方案對(duì)識(shí)別的效果限制較大，今年我們做了如下改進(jìn)：
3、組件識(shí)別
原本使用目標(biāo)檢測的方案來識(shí)別 UI 組件，但這種方案既需要識(shí)別出正確的組件類別還需要識(shí)別出正確的位置，以整個(gè)視覺圖片作為輸入，復(fù)雜的圖片背景很容易被誤識(shí)別，并且由于識(shí)別出的位置偏差導(dǎo)致很難掛載到正確的節(jié)點(diǎn)上，模型識(shí)別結(jié)果在線上的應(yīng)用準(zhǔn)確率較低。
基于這些原因，以及 imgcook 能夠從視覺稿中獲取每個(gè)圖層位置信息的優(yōu)勢(shì)，我們將方案轉(zhuǎn)換成了圖片分類，并能將識(shí)別結(jié)果真正的應(yīng)用到線上，這其中依托一套組件可配置、可識(shí)別、可渲染、可干預(yù)、可出碼的智能物料體系。
（組件識(shí)別應(yīng)用全鏈路）
以下是組件識(shí)別應(yīng)用到線上的演示，識(shí)別視覺稿中的視頻信息，并用 rax-video 前端組件承接生成組件粒度的代碼，需要配置自定義的組件(組件庫設(shè)置)、組件識(shí)別模型服務(wù)(模型服務(wù)設(shè)置)、支持渲染 video 組件的畫布資源（編輯器配置-畫布資源）以及應(yīng)用組件識(shí)別結(jié)果的業(yè)務(wù)邏輯點(diǎn)（業(yè)務(wù)邏輯庫配置）。
點(diǎn)擊查看組件識(shí)別全鏈路演示
4、Icon 識(shí)別
Icon 識(shí)別其實(shí)是一個(gè)圖片分類的問題，依然沿用圖片分類的方案，但為了能夠讓模型的泛化能力能自我增強(qiáng)，我們?cè)O(shè)計(jì)了一個(gè) Icon 自動(dòng)收集、處理數(shù)據(jù)、自動(dòng)訓(xùn)練模型、自動(dòng)發(fā)布模型的模型閉環(huán)鏈路，讓模型能夠自我迭代優(yōu)化。
（Icon 識(shí)別模型閉環(huán)鏈路）
自上線以來，新增訓(xùn)練集總數(shù)達(dá)到了 2729 個(gè)，平均每月回?fù)朴行?shù)據(jù) 909 個(gè), 模型經(jīng)過幾次自我迭代測試集的準(zhǔn)確度從 80% 提升到了 83%。
5、圖片/文本語義識(shí)別
在 imgcook 智能化系統(tǒng)中有一個(gè)很關(guān)鍵的部分，就是如何對(duì) UI 界面內(nèi)的元素綁定語義化信息，之前解決方法是基于圖片和文本分類模型識(shí)別，該方法有很大的局限性：僅對(duì)文本進(jìn)行分類，沒有考慮與整個(gè) UI 界面內(nèi)的上下文語義，導(dǎo)致模型效果不好。
舉個(gè)例子：$200，這個(gè)字段文本分類是沒辦法對(duì)其進(jìn)行語義識(shí)別的，因?yàn)樗诺讲煌膱鼍爸杏兄煌囊馑?#xff0c;如：活動(dòng)價(jià)、原價(jià)、優(yōu)惠劵…，正確的做法是考慮該字段與在 UI 界面的聯(lián)系（即獨(dú)特的樣式）來對(duì)它進(jìn)行語義分析。
因此，我們引入了一種能結(jié)合 UI 中上下文語義的方案來進(jìn)行語義識(shí)別，采用圖片元素決策+文本分類兩步走的方案解決界面元素語義化問題，具體流程是：先基于強(qiáng)化學(xué)習(xí)對(duì)界面元素按樣式“過濾”一遍，識(shí)別出有樣式的非純文本字段，再對(duì)純文本的字段進(jìn)行文本分類。具體框架如下。
（強(qiáng)化學(xué)習(xí) + 文本分類）
以下是模型算法訓(xùn)練結(jié)果
（基于上下文的語義分析）
布局還原階段
布局即是代碼中每個(gè)節(jié)點(diǎn)與節(jié)點(diǎn)之間的關(guān)系，是父子關(guān)系還是兄弟關(guān)系。從顆粒度大小上劃分，可以分為頁面間模塊/區(qū)塊之前的關(guān)系、模塊/區(qū)塊內(nèi)原子模塊/區(qū)塊之間的關(guān)系以及原子模塊/區(qū)塊內(nèi)組件、元件之間的關(guān)系。
目前 imgcook 已具備了循環(huán)識(shí)別與多態(tài)識(shí)別的能力，識(shí)別設(shè)計(jì)稿中的循環(huán)體生成循環(huán)代碼，識(shí)別同一個(gè)節(jié)點(diǎn)有多種 UI 狀態(tài)時(shí)生成多狀態(tài)的 UI 代碼，并定義了布局可維護(hù)度衡量方式來衡量還原階段的準(zhǔn)確度。
（布局還原階段識(shí)別能力升級(jí)）
邏輯生成階段
在業(yè)務(wù)邏輯生成階段優(yōu)化原有的配置鏈路，將業(yè)務(wù)邏輯庫與算法工程鏈路解耦，并承接所有識(shí)別結(jié)果的應(yīng)用和表達(dá)。物料識(shí)別階段只關(guān)心 UI 中有什么物料，不關(guān)心識(shí)別的結(jié)果如何用于生成代碼，布局還原階段的循環(huán)識(shí)別和多態(tài)識(shí)別同理。這樣做的好處是我們可以自定義識(shí)別結(jié)果的表達(dá)，并且可以讓用戶感知智能識(shí)別的結(jié)果并選擇是否使用。
除了從業(yè)務(wù)邏輯庫生成邏輯代碼也可以從需求稿生成部分邏輯，或者來源于代碼片段推薦，或者來源于代碼智能推薦（ Code to Code，C2C）。
（通用業(yè)務(wù)邏輯庫配置）
標(biāo)算法工程體系升級(jí)
樣本制造機(jī)
算法工程服務(wù)提供了 UI 特征識(shí)別的模型訓(xùn)練產(chǎn)品，為所有想使用業(yè)務(wù)組件識(shí)別的小伙伴打造一個(gè)玩弄機(jī)器學(xué)習(xí)的鏈路。為了解決使用算法工程服務(wù)的關(guān)鍵痛點(diǎn)，所以有了新的衍生產(chǎn)品：樣本制造機(jī)，為前端 UI 識(shí)別的模型提供樣本制造捷徑。
前端算法工程框架
有很多同學(xué)會(huì)覺得，讓前端同學(xué)用機(jī)器學(xué)習(xí)技術(shù)去解決前端領(lǐng)域的問題，會(huì)不會(huì)難度很大。為了降低前端工程師使用機(jī)器學(xué)習(xí)的門檻，我們開發(fā)了前端算法工程框架 Pipcook。前端工程師可以用熟悉的 JavaScript 來完成機(jī)器學(xué)習(xí)任務(wù)。
Pipcook 通過提供通用的模型能力，比如圖片分類、目標(biāo)檢測、文本分類等，減少了在 imgcook 中從開發(fā)到上線這些模型的門檻，使得如此多的底層識(shí)別能力也具備快速迭代的可能性。imgcook 全鏈路的識(shí)別能力，如組件識(shí)別、Icon 識(shí)別、字段語義識(shí)別等都是基于 Pipcook 訓(xùn)練。
（前端算法工程框架 Pipcook）
我們可以這樣理解 Pipcook， Node.js 的出現(xiàn)可以讓前端工程師成為一位服務(wù)端工程師，做服務(wù)端同學(xué)能做的事情， Pipcook 的出現(xiàn)可以讓前端工程師成為一位機(jī)器學(xué)習(xí)工程師，可以做機(jī)器學(xué)習(xí)工程師做的事情。
(前端與機(jī)器學(xué)習(xí))
關(guān)于 Pipcook 是如何用 Node.js 橋接機(jī)器學(xué)習(xí)生態(tài)以及目前 Pipcook 的應(yīng)用情況。
研發(fā)鏈路升級(jí)
天馬模塊研發(fā)鏈路
淘系營銷以模塊開發(fā)為主，模塊開發(fā)的完整鏈路是從模塊管理平臺(tái)創(chuàng)建模塊 ? 進(jìn)入 imgcook 平臺(tái)智能生成代碼&可視化研發(fā) ? 開發(fā)完成后進(jìn)入 IDE 調(diào)試預(yù)覽 ? 測試完成后進(jìn)入工程平臺(tái)發(fā)布。整個(gè)研發(fā)流程需要切換多個(gè)平臺(tái)，開發(fā)鏈路體驗(yàn)和工程效率都有待提升。
創(chuàng)建模塊后進(jìn)入 imgcook 平臺(tái)智能生成代碼&可視化研發(fā)，如果能夠直接在 imgcook 平臺(tái)開發(fā)、調(diào)試、預(yù)覽和發(fā)布，一站式的 D2C 研發(fā)模式是提升整體研發(fā)效率和研發(fā)體驗(yàn)的一個(gè)不錯(cuò)的選擇。
所以我們自定義了具有可視化模式和源碼模式的營銷版本 imgcook 可視化編輯器，在可視化模式智能生成代碼和可視化研發(fā)，并將生成的代碼一鍵同步到源碼模式的 WebIDE，在 WebIDE 中支持界面化的調(diào)試、預(yù)覽、發(fā)布。
(天馬模塊 imgcook 可視化研發(fā)動(dòng)線)
我們通過計(jì)算使用傳統(tǒng)研發(fā)模式開發(fā)的模塊與使用 imgcook 可視化研發(fā)模式開發(fā)的模塊的效率值（復(fù)雜度與研發(fā)耗時(shí)比值）看到，使用 imgcook 可視化研發(fā)鏈路開發(fā)的模塊編碼效率提升 68%。
點(diǎn)擊查看天馬模塊 imgcook 可視化研發(fā)全鏈路演示
智能 UI 研發(fā)鏈路
智能 UI 是一種通過分析用戶特征為用戶提供個(gè)性化 UI 的方案，因此需要開發(fā)大量的 UI 界面，在淘系智能 UI 平臺(tái)鯨冪中開發(fā)智能 UI 的原始鏈路是在上傳視覺稿解析物料之后會(huì)批量創(chuàng)建 imgcook 模塊，但每種物料都需要進(jìn)入對(duì)應(yīng)的 imgcook 可視化界面單獨(dú)開發(fā)、創(chuàng)建倉庫、單獨(dú)發(fā)布，并且看不到智能 UI 整體的視覺效果。這樣導(dǎo)致智能 UI 所需要的大量物料的開發(fā)成本很大，業(yè)務(wù)接入智能 UI 的成本比較大。
(智能 UI imgcook 可視化研發(fā)動(dòng)線)
這次升級(jí)了智能 UI 的研發(fā)鏈路， D2C 可視化研發(fā)鏈路承接了智能 UI 的批量化生產(chǎn)。在上傳設(shè)計(jì)稿解析出 UI 物料之后，創(chuàng)建 imgcook 模塊，批量生成物料 UI 代碼，同時(shí)創(chuàng)建代碼倉庫與 imgcook 模塊關(guān)聯(lián)，并支持將已創(chuàng)建的物料批量導(dǎo)入 imgcook，批量生成 UI 方案（不同類型的 UI），在生成的 UI 方案中集中式對(duì)物料進(jìn)行開發(fā)，最后還將支持物料的批量發(fā)布，整個(gè)鏈路集中高效了很多。
落地結(jié)果
今年前端智能化助力前端研發(fā)模式升級(jí)，數(shù)個(gè) BU 共建前端設(shè)計(jì)稿識(shí)別算法模型和數(shù)據(jù)集，并于雙 11 會(huì)場大規(guī)模應(yīng)用落地。
設(shè)計(jì)稿生成代碼技術(shù)體系全面升級(jí)（如對(duì) UI 多態(tài)、直播視頻組件、循環(huán)的智能識(shí)別增強(qiáng)等）帶來了營銷模塊研發(fā)鏈路產(chǎn)品化升級(jí)：雙十一會(huì)場有 90.4% （高于去年）新模塊的代碼智能生成。升級(jí)設(shè)計(jì)稿智能檢查能力，在可統(tǒng)計(jì)范圍內(nèi)，無人工輔助的情況下智能生成的代碼被保留發(fā)布上線的占比 79.26%。
相比傳統(tǒng)模塊開發(fā)模式，使用設(shè)計(jì)稿生成代碼技術(shù)后編碼效率（模塊復(fù)雜度和研發(fā)耗時(shí)比值）提升68%，固定人力單位時(shí)間模塊需求吞吐量增加約 1.5 倍。
目前還需要人工改動(dòng)代碼的主要原因有：循環(huán)未被識(shí)別、條件展示邏輯代碼未自動(dòng)生成、字段綁定猜測錯(cuò)誤（字段標(biāo)準(zhǔn)化情況不佳）、業(yè)務(wù)特性必須的圖片合并問題等，這些問題也都是接下來需要逐步完善的。
（D2C 代碼生成用戶更改情況）
同時(shí)，imgcook 支撐了天貓?zhí)詫毜闹鲿?huì)場和行業(yè)會(huì)場智能 UI 的批量化生產(chǎn)，極大的提升了智能 UI 的生產(chǎn)效率。
（智能 UI 批量化生產(chǎn)結(jié)果）
未來展望
智能化方式無論是使用計(jì)算機(jī)視覺還是深度學(xué)習(xí)技術(shù)，都會(huì)有準(zhǔn)確率的問題，準(zhǔn)確率低在線上環(huán)境可能無法被接受。需要建立一套與線上用戶使用數(shù)據(jù)形成閉環(huán)的算法工程鏈路，實(shí)現(xiàn)樣本自動(dòng)化收集、算法工程鏈路的閉環(huán)才能讓模型線上識(shí)別準(zhǔn)確率不斷提升。目前在 imgcook 的系統(tǒng)中，Icon 識(shí)別從樣本收集到模型識(shí)別結(jié)果的最終應(yīng)用已經(jīng)形成了完整的鏈路閉環(huán)，開發(fā)同學(xué)不需要花太多精力用于模型的優(yōu)化。對(duì)于其他的模型，后續(xù)也會(huì)用同樣的思路讓模型具有自我迭代的能力。
另一個(gè) D2C 智能化的難點(diǎn)是模型識(shí)別的結(jié)果最終如何用于生成代碼，例如組件識(shí)別模型能識(shí)別組件的類別，但最終生成代碼使用哪個(gè)組件庫的組件、如何識(shí)別 UI 中的組件屬性值這些問題，imgcook 的平臺(tái)能力與智能還原技術(shù)分層架構(gòu)具備解決這些問題的能力，未來會(huì)有更多的智能化方案用于生產(chǎn)環(huán)境。
后續(xù)我們會(huì)繼續(xù)根據(jù)對(duì) imgcook 的 D2C 智能化能力拆解，探索更多智能化解決方案，優(yōu)化現(xiàn)有模型能力，建立算法工程閉環(huán)機(jī)制實(shí)現(xiàn)每一個(gè)模型的自我迭代，不斷提高模型的泛化能力和線上識(shí)別準(zhǔn)確度，輔助生成可維護(hù)性更高語義更強(qiáng)的前端代碼。
歡迎大家一起來交流。
🔥 TC39成員、Node.js的核心協(xié)作者 Ujjwal Sharma 確認(rèn)出席第十五屆 D2 前端技術(shù)論壇。早鳥票倒計(jì)時(shí)五天，速搶！
關(guān)注「Alibaba F2E」
把握阿里巴巴前端新動(dòng)向
原文鏈接：https://developer.aliyun.com/article/779276?
版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。總結(jié)
以上是生活随笔為你收集整理的AI助力90.4%双11前端模块自动生成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云端智创 | 基于视频AI原理的音视频智
- 下一篇： rpm -qa|grep xxx 命令