[[315476]]

作為今年阿里經(jīng)濟(jì)體前端委員會(huì)的四大技術(shù)方向之一，前端智能化方向一被提及，就不免有人好奇：前端結(jié)合 AI 能做些什么，怎么做，未來會(huì)不會(huì)對(duì)前端產(chǎn)生很大的沖擊等等。本篇文章將圍繞這些問題，以「設(shè)計(jì)稿自動(dòng)生成代碼」場(chǎng)景為例，從背景分析、競品分析、問題拆解、技術(shù)方案等幾個(gè)角度切入，細(xì)述相關(guān)思考及過程實(shí)踐。

背景分析

業(yè)界機(jī)器學(xué)習(xí)之勢(shì)如火如荼，「AI 是未來的共識(shí)」頻頻出現(xiàn)在各大媒體上。簡單的、重復(fù)性的工作有較大的可能性會(huì)受到AI的沖擊。并且，白領(lǐng)比藍(lán)領(lǐng)的工作更容易被影響;因?yàn)樗{(lán)領(lǐng)的工作可能還需要機(jī)器人和軟硬件相關(guān)技術(shù)都突破才能被實(shí)現(xiàn)，而白領(lǐng)工作一般只需要軟件技術(shù)突破就可以實(shí)現(xiàn)。那AI會(huì)對(duì)前端這個(gè)“白領(lǐng)”工作產(chǎn)生什么樣的影響?

[[315477]]

回看 2010 年，軟件幾乎“吞噬”了所有行業(yè)，帶來近幾年軟件行業(yè)的繁榮;而到了 2019 年，軟件開發(fā)行業(yè)本身卻又在被 AI 所“吞噬”。你看：DBA 領(lǐng)域出現(xiàn)了 Question-to-SQL，針對(duì)某個(gè)領(lǐng)域只要問問題就可以生成 SQL 語句;基于機(jī)器學(xué)習(xí)的源碼分析工具 TabNine 可以輔助代碼生成;設(shè)計(jì)師行業(yè)也出了 P5 Banner 智能設(shè)計(jì)師“鹿班”，測(cè)試領(lǐng)域的智能化結(jié)合也精彩紛呈。那前端領(lǐng)域呢?

那就不得不提一個(gè)我們?cè)偈煜げ贿^的場(chǎng)景了，它就是設(shè)計(jì)稿自動(dòng)生成代碼(Design2Code，以下簡稱 D2C)，阿里經(jīng)濟(jì)體前端委員會(huì)-前端智能化方向當(dāng)前階段就是聚焦在如何讓 AI 助力前端這個(gè)職能角色提效升級(jí)，杜絕簡單重復(fù)性工作，讓前端工程師專注更有挑戰(zhàn)性的工作內(nèi)容!

相關(guān)產(chǎn)品分析

2017 年，一篇關(guān)于圖像轉(zhuǎn)代碼的 Pix2Code 論文掀起了業(yè)內(nèi)激烈討論的波瀾，講述如何從設(shè)計(jì)原型直接生成源代碼。隨后社區(qū)也不斷涌現(xiàn)出基于此思想的類似 Screenshot2Code 的作品，2018 年微軟 AI Lab 開源了草圖轉(zhuǎn)代碼 工具 Sketch2Code，同年年底，設(shè)計(jì)稿智能生成前端代碼的新秀 Yotako 也初露鋒芒， 機(jī)器學(xué)習(xí)首次以不可小覷的姿態(tài)正式進(jìn)入了前端開發(fā)者的視野。

基于上述分析，我們能夠得到以下幾點(diǎn)啟發(fā)：

1. 深度學(xué)習(xí)目前在圖片方面的目標(biāo)檢測(cè)能力適合較大顆粒度的可復(fù)用的物料識(shí)別(模塊識(shí)別、基礎(chǔ)組件識(shí)別、業(yè)務(wù)組件識(shí)別)。
2. 完整的直接由圖片生成代碼的端到端模型復(fù)雜度高，生成的代碼可用度不高，要達(dá)到所生成代碼工業(yè)級(jí)可用，需要更細(xì)的分層拆解和多級(jí)子網(wǎng)絡(luò)模型協(xié)同，短期可通過設(shè)計(jì)稿生成代碼來做 D2C 體系建設(shè)。
3. 當(dāng)模型的識(shí)別能力無法達(dá)到預(yù)期準(zhǔn)確度時(shí)，可以借助設(shè)計(jì)稿人工的打底規(guī)則協(xié)議;一方面人工規(guī)則協(xié)議可以幫助用戶強(qiáng)干預(yù)得到想要的結(jié)果，另一方面這些人工規(guī)則協(xié)議其實(shí)也是高質(zhì)量的樣本標(biāo)注，可以當(dāng)成訓(xùn)練樣本優(yōu)化模型識(shí)別準(zhǔn)確度。

問題分解

設(shè)計(jì)稿生成代碼的目標(biāo)是讓 AI 助力前端這個(gè)職能角色提效升級(jí)，杜絕簡單重復(fù)性工作內(nèi)容。那我們先來分析下，“常規(guī)”前端尤其是面向 C 端業(yè)務(wù)的同學(xué)，一般的工作流程日常工作內(nèi)容大致如下：

“常規(guī)”前端一般的開發(fā)工作量，主要集中在視圖代碼、邏輯代碼和數(shù)據(jù)聯(lián)調(diào)(甚至是數(shù)據(jù)接口開發(fā)，研發(fā) Serveless 產(chǎn)品化時(shí)可期)這幾大塊，接下來，我們逐塊拆解分析。

視圖代碼

視圖代碼研發(fā)，一般是根據(jù)視覺稿編寫 HTML 和 CSS 代碼。如何提效，當(dāng)面對(duì) UI 視圖開發(fā)重復(fù)性的工作時(shí)，自然想到組件化、模塊化等封裝復(fù)用物料的解決方案，基于此解決方案會(huì)有各種 UI 庫的沉淀，甚至是可視化拼裝搭建的更 High Level 的產(chǎn)品化封裝，但復(fù)用的物料不能解決所有場(chǎng)景問題。個(gè)性化業(yè)務(wù)、個(gè)性化視圖遍地開花，直面問題本身，直接生成可用的 HTML 和 CSS 代碼是否可行?

這是業(yè)界一直在不斷嘗試的命題，通過設(shè)計(jì)工具的開發(fā)插件可以導(dǎo)出圖層的基本信息，但這里的主要難點(diǎn)還是對(duì)設(shè)計(jì)稿的要求高、生成代碼可維護(hù)性差，這是核心問題，我們來繼續(xù)拆解。

★ 設(shè)計(jì)稿要求高問題

對(duì)設(shè)計(jì)稿的要求高，會(huì)導(dǎo)致設(shè)計(jì)師的成本加大，相當(dāng)于前端的工作量轉(zhuǎn)嫁給了設(shè)計(jì)師，導(dǎo)致推廣難度會(huì)非常大。一種可行的辦法是采用 CV(ComputerVision, 計(jì)算機(jī)視覺) 結(jié)合導(dǎo)出圖層信息的方式，以去除設(shè)計(jì)稿的約束，當(dāng)然對(duì)設(shè)計(jì)稿的要求最好是直接導(dǎo)出一張圖片，那樣對(duì)設(shè)計(jì)師沒有任何要求，也是我們夢(mèng)寐以求的方案，我們也一直在嘗試從靜態(tài)圖片中分離出各個(gè)適合的圖層，但目前在生產(chǎn)環(huán)境可用度不是非常高(小目標(biāo)識(shí)別精準(zhǔn)度問題、復(fù)雜背景提取等問題正在解決)，因?yàn)楫吘乖O(shè)計(jì)稿自帶的元信息，比一張圖片提取處理的元信息要更多更精準(zhǔn)。

★ 可維護(hù)性問題

生成的代碼結(jié)構(gòu)一般都會(huì)面臨可維護(hù)性方面的挑戰(zhàn)：

• 合理布局嵌套：包括絕對(duì)定位轉(zhuǎn)相對(duì)定位、冗余節(jié)點(diǎn)刪除、合理分組、循環(huán)判斷等方面;
• 元素自適應(yīng)：元素本身擴(kuò)展性、元素間對(duì)齊關(guān)系、元素最大寬高容錯(cuò)性;
• 語義化：Classname 的多級(jí)語義化;
• 樣式 CSS 表達(dá)：背景色、圓角、線條等能用 CV 等方式分析提取樣式，盡可能用 CSS 表達(dá)樣式代替使用圖片;

……

將這些問題拆解后，分門別類專項(xiàng)解決，解決起來看似沒完沒了，但好在目前發(fā)現(xiàn)的大類問題基本已解決。很多人質(zhì)疑道，這部分的能力的實(shí)現(xiàn)看起來和智能化沒有什么關(guān)系，頂多算個(gè)布局算法相關(guān)的專家規(guī)則測(cè)量系統(tǒng)。沒錯(cuò)，現(xiàn)階段這部分比較適合規(guī)則系統(tǒng)，對(duì)用戶而言布局算法需要接近 100% 的可用度，另外這里涉及的大部分是無數(shù)屬性值組合問題，當(dāng)前用規(guī)則更可控。如果非要使用模型，那這個(gè)可被定義為多分類問題。同時(shí)，任何深度學(xué)習(xí)模型的應(yīng)用都是需要先有清晰的問題定義過程，把問題規(guī)則定義清楚本就是必備過程。

但在規(guī)則解決起來麻煩的情況下，可以使用模型來輔助解決。比如 合理分組(如下圖) 和 循環(huán)項(xiàng) 的判斷，實(shí)踐中我們發(fā)現(xiàn)，在各種情況下還是誤判不斷，算法規(guī)則難以枚舉，這里需要跨元素間的上下文語義識(shí)別，這也是接下來正在用模型解決的重點(diǎn)問題。

合理分組示意

邏輯代碼

邏輯代碼開發(fā)主要包括數(shù)據(jù)綁定、動(dòng)效、業(yè)務(wù)邏輯代碼編寫?？商嵝У牟糠?，一般在于復(fù)用的動(dòng)效和業(yè)務(wù)邏輯代碼可沉淀基礎(chǔ)組件、業(yè)務(wù)組件等。

• 接口字段綁定：從可行性上分析還是高的，根據(jù)視覺稿的文本或圖片判斷所屬哪個(gè)候選字段，可以做，但性價(jià)比不高，因?yàn)榻涌跀?shù)據(jù)字段綁定太業(yè)務(wù)，通用性不強(qiáng)。
• 動(dòng)效：這部分的開發(fā)輸入是交互稿，而且一般動(dòng)效的交付形式各種各樣參差不齊，有的是動(dòng)畫 gif 演示，有的是文字描述，有的是口述;動(dòng)效代碼的生成更適合用可視化的形式生成，直接智能生成沒有參考依據(jù)，考慮投入產(chǎn)出比不在短期范圍內(nèi)。
• 業(yè)務(wù)邏輯：這部分開發(fā)的依據(jù)來源主要是 PRD，甚至是 PD 口述的邏輯;想要智能生成這部分邏輯代碼，欠缺的輸入太多，具體得看看智能化在這個(gè)子領(lǐng)域能解決什么問題。

★ 邏輯代碼生成思考

理想方案當(dāng)然是能像其他詩歌、繪畫、音樂等藝術(shù)領(lǐng)域一樣，學(xué)習(xí)歷史數(shù)據(jù)，根據(jù) PRD 文本輸入，新邏輯代碼能直接生成，但這樣生成的代碼能直接運(yùn)行沒有任何報(bào)錯(cuò)嗎?

目前人工智能雖說發(fā)展迅速，但其能解決的問題還是有限，需要將問題定義成其擅長解決的問題類型。強(qiáng)化學(xué)習(xí)擅長策略優(yōu)化問題，深度學(xué)習(xí)目前在計(jì)算機(jī)視覺方面擅長解決的是分類問題、目標(biāo)檢測(cè)問題，文本方面擅長 NLP(Natural Language Processing, 自然語言處理) 等。

關(guān)于業(yè)務(wù)邏輯代碼，首先想到的是對(duì)歷史源代碼的函數(shù)塊利用 LSTM(Long Short-Term Memory, 長短期記憶網(wǎng)絡(luò))和 NLP 等進(jìn)行上下文分析，能得到代碼函數(shù)塊的語義，VS Code 智能代碼提醒 和 TabNine 都是類似的思路。

另外，在分析問題中(如下圖)我們還發(fā)現(xiàn)，智能化在業(yè)務(wù)邏輯領(lǐng)域還可以協(xié)助識(shí)別邏輯點(diǎn)在視圖出現(xiàn)的位置(時(shí)機(jī))，并根據(jù)視圖猜測(cè)出的邏輯語義。

綜上，我們總結(jié)一下智能化現(xiàn)階段的可助力點(diǎn)：

• 由歷史源代碼分析猜測(cè)高頻出現(xiàn)的函數(shù)塊(邏輯塊)的語義，實(shí)際得到的就是組件庫或者基礎(chǔ)函數(shù)塊的語義，可在代碼編輯時(shí)做代碼塊推薦等能力。
• 由視覺稿猜測(cè)部分可復(fù)用的邏輯點(diǎn)，如這里的字段綁定邏輯，可根據(jù)這里文本語義 NLP 猜測(cè)所屬字段，部分圖片元素根據(jù)有限范圍內(nèi)的圖片分類，猜測(cè)所屬對(duì)應(yīng)的圖片字段(如下圖示例中的，氛圍修飾圖片還是 Logo 圖片);同時(shí)還可以識(shí)別可復(fù)用的業(yè)務(wù)邏輯組件，比如這里的領(lǐng)取優(yōu)惠券邏輯。

所以，現(xiàn)階段在業(yè)務(wù)邏輯生成中，可以解決的問題比較有限，尤其是新的業(yè)務(wù)邏輯點(diǎn)以新的邏輯編排出現(xiàn)時(shí)，這些參考依據(jù)都在 PD 的 PRD 或腦海中。所以針對(duì)業(yè)務(wù)邏輯的生成方案，現(xiàn)階段的策略主要如下：

• 字段綁定：智能識(shí)別設(shè)計(jì)稿中的文本和圖片語義分類，特別是文字部分。
• 可復(fù)用的業(yè)務(wù)邏輯點(diǎn)：根據(jù)視圖智能識(shí)別，并由視圖驅(qū)動(dòng)自由組裝，含小而美的邏輯點(diǎn)(一行表達(dá)式、或一般不足以封裝成組件的數(shù)行代碼)、基礎(chǔ)組件、業(yè)務(wù)組件。
• 無法復(fù)用的新業(yè)務(wù)邏輯：PRD 需求結(jié)構(gòu)化(可視化)收集，這是一個(gè)高難度任務(wù)，還在嘗試中。

小結(jié)

目前用智能化的方式自動(dòng)生成 HTML + CSS + 部分 JS + 部分 DATA 的主要分析如上，是Design to Code 的主要過程 ，內(nèi)部項(xiàng)目名稱叫做 D2C ，后續(xù)系列文章會(huì)使用此簡稱，集團(tuán)內(nèi)外的落地產(chǎn)品名稱為 imgcook。隨著近幾年主流設(shè)計(jì)工具(Sketch、PS、XD 等)的三方插件開發(fā)能力逐漸成熟，飛速發(fā)展的深度學(xué)習(xí)那甚至超過人類識(shí)別效果的趨勢(shì)，這些都是 D2C 誕生和持續(xù)演進(jìn)的強(qiáng)大后盾。

目標(biāo)檢測(cè) 2014-2019 年 paper

技術(shù)方案

基于上述前端智能化發(fā)展概括分析，我們對(duì)現(xiàn)有的 D2C 智能化技術(shù)體系做了能力概述分層，主要分為以下三部分：

識(shí)別能力：即對(duì)設(shè)計(jì)稿的識(shí)別能力。智能從設(shè)計(jì)稿分析出包含的圖層、基礎(chǔ)組件、業(yè)務(wù)組件、布局、語義化、數(shù)據(jù)字段、業(yè)務(wù)邏輯等多維度的信息。如果智能識(shí)別不準(zhǔn)，就可視化人工干預(yù)補(bǔ)充糾正，一方面是為了可視化低成本干預(yù)生成高可用代碼，另一方面這些干預(yù)后的數(shù)據(jù)就是標(biāo)注樣本，反哺提升智能識(shí)別的準(zhǔn)確率。

表達(dá)能力：主要做數(shù)據(jù)輸出以及對(duì)工程部分接入

通過 DSL 適配將標(biāo)準(zhǔn)的結(jié)構(gòu)化描述做 Schema2Code

通過 IDE 插件能力做工程接入

算法工程：為了更好的支撐 D2C 需要的智能化能力，將高頻能力服務(wù)化，主要包含數(shù)據(jù)生成處理、模型服務(wù)部分

樣本生成：主要處理各渠道來源樣本數(shù)據(jù)并生成樣本

模型服務(wù)：主要提供模型 API 封裝服務(wù)以及數(shù)據(jù)回流

前端智能化 D2C 能力概要分層

在整個(gè)方案里，我們用同一套 數(shù)據(jù)協(xié)議規(guī)范(D2C Schema)來連接各層的能力，確保其中的識(shí)別能夠映射到具體對(duì)應(yīng)的字段上，在表達(dá)階段也能正確地通過出碼引擎等方案生成代碼。

智能識(shí)別技術(shù)分層

在整個(gè) D2C 項(xiàng)目中，最核心的是上述識(shí)別能力部分的 機(jī)器智能識(shí)別 部分，這層的具體再分解如下，后續(xù)系列文章會(huì)圍繞這些細(xì)分的分層展開內(nèi)部實(shí)現(xiàn)原理。

• 物料識(shí)別層：主要通過圖像識(shí)別能力識(shí)別圖像中的物料(模塊識(shí)別、原子模塊識(shí)別、基礎(chǔ)組件識(shí)別、業(yè)務(wù)組件識(shí)別)。
• 圖層處理層：主要將設(shè)計(jì)稿或者圖像中圖層進(jìn)行分離處理，并結(jié)合上一層的識(shí)別結(jié)果，整理好圖層元信息。
• 圖層再加工層：對(duì)圖層處理層的圖層數(shù)據(jù)做進(jìn)一步的規(guī)范化處理。
• 布局算法層：轉(zhuǎn)換二維中的絕對(duì)定位圖層布局為相對(duì)定位和 Flex 布局。
• 語義化層：通過圖層的多維特征對(duì)圖層在生成代碼端做語義化表達(dá)。
• 字段綁定層：對(duì)圖層里的靜態(tài)數(shù)據(jù)結(jié)合數(shù)據(jù)接口做接口動(dòng)態(tài)數(shù)據(jù)字段綁定映射。
• 業(yè)務(wù)邏輯層：對(duì)已配置的業(yè)務(wù)邏輯通過業(yè)務(wù)邏輯識(shí)別和表達(dá)器來生成業(yè)務(wù)邏輯代碼協(xié)議。
• 出碼引擎層：最后輸出經(jīng)過各層智能化處理好的代碼協(xié)議，經(jīng)過表達(dá)能力(協(xié)議轉(zhuǎn)代碼的引擎)輸出各種 DSL 代碼。

D2C 識(shí)別能力技術(shù)分層

技術(shù)痛點(diǎn)

當(dāng)然，這其中的 識(shí)別不全面、識(shí)別準(zhǔn)確度不高 一直是 D2C 老生常談的話題，也是我們的核心技術(shù)痛點(diǎn)。我們嘗試從這幾個(gè)角度來分析引起這個(gè)問題的因素：

1. 識(shí)別問題定義不準(zhǔn)確：問題定義不準(zhǔn)確是影響模型識(shí)別不準(zhǔn)的首要因素，很多人認(rèn)為樣本和模型是主要因素，但在這之前，可能一開始的對(duì)問題的定義就出現(xiàn)了問題，我們需要判斷我們的識(shí)別訴求模型是否合適做，如果合適那該怎么定義清楚這里面的規(guī)則等。
2. 高質(zhì)量的數(shù)據(jù)集樣本缺乏：我們?cè)谧R(shí)別層的各個(gè)機(jī)器智能識(shí)別能力需要依賴不同的樣本，那我們的樣本能覆蓋多少前端開發(fā)場(chǎng)景，各個(gè)場(chǎng)景的樣本數(shù)據(jù)質(zhì)量怎么樣，數(shù)據(jù)標(biāo)準(zhǔn)是否統(tǒng)一，特征工程處理是否統(tǒng)一，樣本是否存在二義性，互通性如何，這是我們當(dāng)下所面臨的問題。
3. 模型召回低、存在誤判：我們往往會(huì)在樣本里堆積許多不同場(chǎng)景下不同種類的樣本作為訓(xùn)練，期望通過一個(gè)模型來解決所有的識(shí)別問題，但這卻往往會(huì)讓模型的部分分類召回率低，對(duì)于一些有二義性的分類也會(huì)存在誤判。

★ 問題定義

深度學(xué)習(xí)里的計(jì)算機(jī)視覺類模型目前比較適合解決的是分類問題和目標(biāo)檢測(cè)問題，我們判斷一個(gè)識(shí)別問題是否該使用深度模型的前提是——我們自己是否能夠判斷和理解，這類問題是否有二義性等，如果人也無法準(zhǔn)確地判斷，那么這個(gè)識(shí)別問題可能就不太合適。

假如判斷適合用深度學(xué)習(xí)的分類來做，那就需要繼續(xù)定義清楚所有的分類，這些分類之間需要嚴(yán)謹(jǐn)、有排他性、可完整枚舉。比如在做圖片的語義化這個(gè)命題的時(shí)候，一般圖片的 ClassName 通用常規(guī)命名有哪些，舉個(gè)例子，其分析過程如下：

• 第一步：盡可能多地找出相關(guān)的設(shè)計(jì)稿，一個(gè)個(gè)枚舉里面的圖片類型。
• 第二步：對(duì)圖片類型進(jìn)行合理歸納歸類，這是最容易有爭論的地方，定義不好有二義性會(huì)導(dǎo)致最有模型準(zhǔn)確度問題。
• 第三步：分析每類圖片的特征，這些特征是否典型，是否是最核心的特征點(diǎn)，因?yàn)殛P(guān)系到后續(xù)模型的推理泛化能力。
• 第四步：每類圖片的數(shù)據(jù)樣本來源是否有，沒有的話能否自動(dòng)造;如果數(shù)據(jù)樣本無法有，那就不適合用模型，可以改用算法規(guī)則等方式替代先看效果。

D2C 項(xiàng)目中很多這樣的問題，問題本身的定義需要非常精準(zhǔn)，并且需要有科學(xué)的參考依據(jù)，這一點(diǎn)本身就比較難，因?yàn)闆]有可借鑒的先例，只能先用已知的經(jīng)驗(yàn)先試用，用戶測(cè)試有問題后再修正，這是一個(gè)需要持續(xù)迭代持續(xù)完善的痛點(diǎn)。

★ 樣本質(zhì)量

針對(duì) 樣本 問題，我們需要對(duì)這部分?jǐn)?shù)據(jù)集建立標(biāo)準(zhǔn)規(guī)范，分場(chǎng)景構(gòu)建多維度的數(shù)據(jù)集，將收集的數(shù)據(jù)做統(tǒng)一的處理和提供，并以此期望能建立一套規(guī)范的數(shù)據(jù)體系。

在這套體系中，我們使用統(tǒng)一的樣本數(shù)據(jù)存儲(chǔ)格式，提供統(tǒng)一的針對(duì)不同問題(分類、目標(biāo)檢測(cè))的樣本評(píng)估工具來評(píng)估各項(xiàng)數(shù)據(jù)集的質(zhì)量，針對(duì)部分特定模型可采取效果較好的特征工程(歸一化、邊緣放大等)來處理，同類問題的樣本也期望能在后續(xù)不同的模型里能夠流通作比較，來評(píng)估不同模型的準(zhǔn)確度和效率。

數(shù)據(jù)樣本工程體系

★ 模型

針對(duì)模型的召回和誤判問題，我們嘗試 收斂場(chǎng)景來提高準(zhǔn)確度。往往不同場(chǎng)景下的樣本會(huì)存在一些特征上的相似點(diǎn)或者影響部分分類局部關(guān)鍵特征點(diǎn)，導(dǎo)致產(chǎn)生誤判、召回低，我們期望能夠通過收斂場(chǎng)景來做模式化的識(shí)別，提高模型準(zhǔn)確度。我們把場(chǎng)景收斂到如下三個(gè)場(chǎng)景：無線 C 端營銷頻道場(chǎng)景、小程序場(chǎng)景以及 PC 中后臺(tái)場(chǎng)景。這里面幾個(gè)場(chǎng)景的設(shè)計(jì)模式都有自己的特色，針對(duì)各個(gè)場(chǎng)景來設(shè)計(jì)垂直的識(shí)別模型可以高效地提高單一場(chǎng)景的識(shí)別準(zhǔn)確度。

D2C 場(chǎng)景

過程思考

既然使用了深度模型，有一個(gè)比較現(xiàn)實(shí)的問題是，模型的泛化能力不夠，識(shí)別的準(zhǔn)確率必然不能 100% 讓用戶滿意，除了能夠在后續(xù)不斷地補(bǔ)充這批識(shí)別不到的樣本數(shù)據(jù)外，在這之前我們能做什么?

在 D2C 的整個(gè)還原鏈路里，對(duì)于識(shí)別模型，我們還遵守一個(gè)方法論，即設(shè)計(jì)一套協(xié)議或者規(guī)則能通過其他方式來兜底深度模型的識(shí)別效果，保障在模型識(shí)別不準(zhǔn)確的情況下用戶仍可完成訴求：手動(dòng)約定 > 規(guī)則策略 > 機(jī)器學(xué)習(xí) > 深度模型。舉個(gè)例子比如需要識(shí)別設(shè)計(jì)稿里的一個(gè)循環(huán)體：

• 初期，我們可以在設(shè)計(jì)稿里手動(dòng)約定循環(huán)體的協(xié)議來達(dá)成
• 根據(jù)圖層的上下文信息可做一些規(guī)則的判斷，來判斷是否是循環(huán)體
• 利用機(jī)器學(xué)習(xí)的圖層特征，可嘗試做規(guī)則策略的更上游的策略優(yōu)化
• 生成循環(huán)體的一些正負(fù)樣本來通過深度模型進(jìn)行學(xué)習(xí)

其中手動(dòng)約定的設(shè)計(jì)稿協(xié)議解析優(yōu)先級(jí)最高，這樣也能確保后續(xù)的流程不受阻塞和錯(cuò)誤識(shí)別的干擾。

業(yè)務(wù)落地

2019 雙十一落地

在今年的雙十一場(chǎng)景中，我們的 D2C 覆蓋了天貓?zhí)詫殨?huì)場(chǎng)的新增模塊，包括主會(huì)場(chǎng)、行業(yè)會(huì)場(chǎng)、營銷玩法會(huì)場(chǎng)、榜單會(huì)場(chǎng)等，包含了視圖代碼和部分邏輯代碼的自動(dòng)生成，在可統(tǒng)計(jì)范圍內(nèi)，D2C 代碼生成占據(jù)了大比例。目前代碼的人工改動(dòng)的主要原因有：全新業(yè)務(wù)邏輯、動(dòng)畫、字段綁定猜測(cè)錯(cuò)誤(字段標(biāo)準(zhǔn)化情況不佳)、循環(huán)猜測(cè)錯(cuò)誤、樣式自適應(yīng)修改等，這些問題也都是接下來需要逐步完善的。

D2C 代碼生成用戶更改情況

整體落地情況

我們對(duì)外的產(chǎn)品 imgcook，截止 2019.11.09 日，相關(guān)的使用數(shù)據(jù)情況如下：

• 模塊數(shù) 12681 個(gè)， 周新增 540 個(gè)左右;
• 用戶數(shù) 4315 個(gè)，周新增 150 個(gè)左右;
• 自定義DSL：總數(shù) 109 個(gè);

目前可提供的服務(wù)能力如下：

• 設(shè)計(jì)稿全鏈路還原：通過 Sketch、PhotoShop 插件一鍵導(dǎo)出設(shè)計(jì)稿圖層，生成自定義的 DSL 代碼。
• 圖像鏈路還原：支持用戶自定義上傳圖片、文件或填寫圖片鏈接，直接還原生成自定義的 DSL 代碼。

后續(xù)規(guī)劃

繼續(xù)降低設(shè)計(jì)稿要求，爭取設(shè)計(jì)稿 0 協(xié)議，其中分組、循環(huán)的智能識(shí)別準(zhǔn)確度提升，減少視覺稿協(xié)議的人工干預(yù)成本。

組件識(shí)別準(zhǔn)確度提升，目前只有 72% 的準(zhǔn)確度，業(yè)務(wù)應(yīng)用可用率低。

頁面級(jí)和項(xiàng)目級(jí)還原能力可用率提升，依賴頁面分割能力的準(zhǔn)確度提升。

小程序、中后臺(tái)等領(lǐng)域的頁面級(jí)還原能力提升，含復(fù)雜表單、表格、圖表的整體還原能力。

靜態(tài)圖片生成代碼鏈路可用度提升，真正可用于生產(chǎn)環(huán)境。

算法工程產(chǎn)品完善，樣本生成渠道更多元，樣本集更豐富。

D2C 能力開源。

未來我們希望能通過前端智能化 D2C 項(xiàng)目，讓前端智能化技術(shù)方案普惠化，沉淀更具競爭力的樣本和模型，提供準(zhǔn)確度更高、可用度更高的代碼智能生成服務(wù);切實(shí)提高前端研發(fā)效率，減少簡單的重復(fù)性工作，不加班少加班，一起專注更有挑戰(zhàn)性的工作內(nèi)容!