大家好，我們是來自阿里巴巴淘系技術(shù)部的狼叔、卓風(fēng)。感謝 D2 組委會，讓我們有機(jī)會在這里分享，關(guān)于《前端智能化實(shí)踐—— P2C 從需求文檔生成代碼》。

淘系技術(shù)微信公眾號后臺回復(fù)「D2」即可下載第十五屆 D2前端技術(shù)論壇 PPT 集合！！！

狼叔（上圖左），Node.js 技術(shù)布道者，Node 全棧公眾號運(yùn)營者，曾就職于去哪兒、新浪、網(wǎng)秦，做過前端、后端、數(shù)據(jù)分析，是一名全棧技術(shù)的實(shí)踐者。已出版《狼書(卷1) 更了不起的 Node.js》《狼書(卷2) Node.js Web 應(yīng)用開發(fā)》。入職阿里的三年時間，主要是在優(yōu)酷 PC/H5 端從 0 到 1 的落地 Node.js 全棧，使用 SSR 對 Web 頁面進(jìn)行優(yōu)化和重構(gòu)，建設(shè) SSR 應(yīng)用的容災(zāi)、發(fā)布、灰度等能力，是集團(tuán)內(nèi)第一大 QPS 的 SSR 應(yīng)用。在支撐好業(yè)務(wù)的同時，與組內(nèi)同學(xué)一起孵化出開源框架 egg-react-ssr。2020 年到淘寶技術(shù)部，開啟前端智能化的旅程，目前負(fù)責(zé) P2C，和卓風(fēng)是搭檔。

卓風(fēng)（上圖右），入職阿里的八年時間，主要是在淘寶負(fù)責(zé)天貓、聚劃算大促及日常營銷業(yè)務(wù)產(chǎn)品的落地，曾負(fù)責(zé)面向天貓、淘寶、聚劃算等商家的搭建產(chǎn)品建設(shè)和淘系智能 UI 體系建設(shè)和業(yè)務(wù)落地，相關(guān)產(chǎn)品和體系已陸續(xù)在向集團(tuán)落地。近 1 年投身到前端智能化領(lǐng)域，致力于 Service to Code 體系建設(shè)，推動服務(wù)端智能出碼的落地，目前相關(guān)體系具備一定雛形，在團(tuán)隊(duì)內(nèi)業(yè)務(wù)范圍進(jìn)行閉環(huán)試驗(yàn)。

今天的主題我們會以 4 個維度進(jìn)行展開，會詳細(xì)介紹 P2C 這個產(chǎn)品概念的來龍去脈以及我們解決問題的思路，歡迎各位上車。

因?yàn)榻裉斓脑掝}是延續(xù)去年甄焱鯤（甄子）在 D2 的前端智能化實(shí)踐的分享，所以在講我們的話題之前，還是先介紹阿里前端智能化實(shí)踐的整體布局情況是怎樣的。如下這張大圖，可以按三部分進(jìn)行理解：

• 底層是以 Pipcook 為代表的“前端算法框架層”，其目的是通過它讓前端工程師具備了踏入算法工程師門檻的可能，這點(diǎn)非常類似于 Node.js 對于前端工程師的作用，目前 Pipcook 已經(jīng)發(fā)布到 v1.3 版本，開源社區(qū)也非常活躍，歡迎自取使用；

• 中層“研發(fā)能力層”是面向前端提升研發(fā)效率的產(chǎn)品工具，并且對這邊提效的能力我們進(jìn)行了抽象，分為 D2C（Design to Code）、P2C（PRD to Code）、S2C、和 C2C 等，今天我們要重點(diǎn)講的就是前兩者；

• 而頂層是應(yīng)用底層、中層前端智能化能力服務(wù)的上層業(yè)務(wù)產(chǎn)品，在過去三年里我們前端智能化的產(chǎn)品能力已經(jīng)覆蓋集團(tuán) 17+ 個 BU（Business Unit） 70%+ 的前端，當(dāng)然這個數(shù)字不算太新，新的數(shù)字在不斷上升。

提到 D2C，我們先回顧下應(yīng)用 D2C 能力的 Imgcook 產(chǎn)品今日的發(fā)展現(xiàn)狀，從下圖可以看到 Imgcook 的發(fā)展數(shù)字比較可觀，且應(yīng)用覆蓋了 2020 年雙 11 會場 90%+ 的模塊開發(fā)，出碼可用率達(dá)到 79.26%，且需求吞吐量提升 1.5~2 倍，給前端研發(fā)帶來實(shí)質(zhì)性的提效。

然而，提效并不等于完全替代前端人工開發(fā)，從 79% 的數(shù)字上我們看到還有 21% 的出碼率沒有達(dá)到，且 79% 這個數(shù)字在 2019 到 2020 年一直上浮不大，所以仿佛 D2C 走到了上升瓶頸階段。

但經(jīng)過我們的調(diào)研發(fā)現(xiàn)，事實(shí)并不是 D2C 的能力達(dá)到極限，而是從 Design 視覺稿中挖掘的出碼信息達(dá)到了極限，剩余的 21% 的出碼信息，我們發(fā)現(xiàn)要從產(chǎn)研鏈路的上游 產(chǎn)品經(jīng)理（PD，Product Designer）的 PRD （Product Requirement Document）中才能拿到。

所以我們將輸入向上游鏈路擴(kuò)展到 PRD 這一環(huán)，而 PD 生產(chǎn)的 PRD 又兼顧到前端下游鏈路后端的出碼；同時前后端的出碼界限一直以來并沒有那么清晰（很多前端的代碼其實(shí)也可以放置在后端 BFF（Backend for Frontend） 層，比如初始數(shù)據(jù)的字段加工），所以我們將輸出也擴(kuò)展到下游鏈路后端這里。

因?yàn)槲覀儗⑤斎胼敵鲈诋a(chǎn)研鏈路上向上下游鏈路進(jìn)行了擴(kuò)展，所以理論上我們所做的工作也發(fā)生了本質(zhì)的變化，由原來的 設(shè)計(jì)即代碼（D2C）轉(zhuǎn)變?yōu)?需求即代碼（P2C）、需求即生產(chǎn)，將多種產(chǎn)研角色納入到我們的產(chǎn)研工作臺當(dāng)中，形成多角色的在線協(xié)同，通過這次跨界，理論上會帶來的出碼率的進(jìn)一步提升。

所以這就是 P2C（PRD to Code）的由來。我們期望借助 P2C 能進(jìn)一步的提升產(chǎn)研的交付速度，期望能給 PD 提供端到端的產(chǎn)品交付能力，期望間接提升 PD 的業(yè)務(wù) KPI 輔助業(yè)務(wù)增長。所以，可以看到相對 D2C，P2C 的目標(biāo)用戶發(fā)生了本質(zhì)性的變化（由設(shè)計(jì)師、開發(fā)者轉(zhuǎn)變成了 PD），基于這個點(diǎn)，我們對 P2C 的產(chǎn)品設(shè)計(jì)理念做了如下三方面的約束：

• 首先，要繼續(xù)基于設(shè)計(jì)稿，這部分的出碼率已達(dá)到 79%，這邊的出碼信息對 P2C 依然有用，所以這部分不能舍棄，同時，PD 基于設(shè)計(jì)稿來完成 PRD 會更佳方便直接。

• 其次，將 PD 原來書寫 PRD 的工作轉(zhuǎn)變成基于設(shè)計(jì)稿來標(biāo)注業(yè)務(wù)信息的工作，一方面這樣操作對 PD 來說更直接，另一方面這樣的操作對 PD 的工作負(fù)擔(dān)也相對較少。

• 最后，我們要確保 PD 的標(biāo)注信息能夠出碼，要做到“需求即代碼”，不能出碼的輸入信息，意味著不會進(jìn)一步提升出碼率，這就失去了 D2C → P2C 升級的意義。

基于設(shè)計(jì)稿已不用再過多介紹，應(yīng)用 D2C 能力的 Imgcook 已經(jīng)是一個很好的例子。那么“標(biāo)注”和“出碼”要具體怎么設(shè)計(jì)？接下來就會依次進(jìn)行介紹。

首先介紹 P2C 的標(biāo)注，想要知道標(biāo)注怎樣設(shè)計(jì)，必須預(yù)先知道 PD 是怎樣一類人，他們的工作方式是怎樣的。

從 PD 的日常的工作調(diào)研發(fā)現(xiàn)，PD 是一類聰明、有想法有意思卻又非標(biāo)的工作群體，他們沒有很多可標(biāo)準(zhǔn)化的工作具象內(nèi)容，平時消耗在產(chǎn)研鏈路上的溝通比較多、新老產(chǎn)品經(jīng)驗(yàn)傳承也是斷層的、書寫的 PRD 文檔也沒有具象標(biāo)準(zhǔn)、五花八門所以書寫的 PRD 下游角色也不怎么看，書寫這樣的 PRD 對 PD 來說本身已是一種負(fù)擔(dān)和痛苦。

PD是非常擅長產(chǎn)品業(yè)務(wù)上定義的（比如什么叫“買貴必賠”、什么叫“冰點(diǎn)價(jià)”），這是除了 PD 以外其他角色不具備的能力，比如設(shè)計(jì)師，能在設(shè)計(jì)稿中表達(dá)的業(yè)務(wù)信息非常有限。

所以，P2C 標(biāo)注的工作，就是要貼合 PD 的痛點(diǎn)和角色特點(diǎn)來進(jìn)行設(shè)計(jì)，我們期望通過以下四點(diǎn)來幫助 PD 完成產(chǎn)品需求的定義。

• 第一步，我們期望 PD 在上傳 Sketch 設(shè)計(jì)稿之后，P2C 會借助 D2C 的能力馬上對設(shè)計(jì)稿進(jìn)行第一步的解析，生成結(jié)構(gòu)化可視化的在線標(biāo)注畫布，供 PD 進(jìn)行第二步的操作；

• 第二步，我們期望 PD 在第一步的視覺畫布基礎(chǔ)上，進(jìn)行業(yè)務(wù)信息的標(biāo)注，完成業(yè)務(wù)邏輯的準(zhǔn)確定義；

• 第三步，我們期望 P2C 能夠提供給 PD 一種直觀且輕量化的標(biāo)注設(shè)計(jì)工具，輔助 PD 能快速完成類似多態(tài)等復(fù)雜業(yè)務(wù)邏輯信息的錄入；

• 第四步，我們期望 P2C 能夠提供給 PD 一種所見即所得的能力，通過預(yù)覽的交互形態(tài)間接來確認(rèn)產(chǎn)品背后的數(shù)據(jù)源信息，這就銜接到服務(wù)端的數(shù)據(jù)接口設(shè)計(jì)，下會會再講到。

• 最后，經(jīng)過所有的一個個步驟，本質(zhì)上我們期望給 PD 提供一種非常貼合他手工標(biāo)注的業(yè)務(wù)邏輯組織方式，期望 PD 的每一次標(biāo)注都映射到背后的一個邏輯單元方便 PD 進(jìn)行快速標(biāo)注，而邏輯單元又能確保出碼，這就是“邏輯點(diǎn)”概念的由來，盡管對 PD 是透明的，卻對 P2C 非常有用。

所以，經(jīng)過上面步驟對 P2C 產(chǎn)品的探索，我們也更加清晰了 P2C 的產(chǎn)品定位。概括一下如下圖所示，P2C 要在 D2C 的基礎(chǔ)上兼顧業(yè)務(wù)含義的定義和出碼量的絕對提升，這就是 P2C 的產(chǎn)品使命。

所以 P2C 的整個標(biāo)注體系，就是如下的這套結(jié)構(gòu)設(shè)計(jì)，基于設(shè)計(jì)稿的 Canvas 畫布，提供給 PD 基于邏輯點(diǎn)的標(biāo)注操作面板，非常直觀、方便地輔助 PD 對產(chǎn)品需求的定義。

那么在這里有人會問，沒什么不給 PD 一個 PRD 的文檔編輯器來對需求進(jìn)行錄入呢？

這樣的方案我們嘗試過，甚至嘗試過不止一個方案，但過去的失敗都告訴我們 100% 采用純的自然語言來描述需求，對 PD 雖然可行，但對出碼卻不可行，至少當(dāng)下 NL2Code 這個學(xué)術(shù)業(yè)界難題還沒有非常好的攻克掉，所以這對 P2C 不利，而且純的自然語言描述并不如這種基于設(shè)計(jì)稿的標(biāo)注對 PD 來說操作更直接、更簡潔，所以當(dāng)下這套標(biāo)注的產(chǎn)品設(shè)計(jì)，也是我們經(jīng)歷種種失敗后選擇的一條非常貼合 PD 且可行的一條道路。

那么 PD 究竟怎樣標(biāo)注？操作方式是什么樣的？

以下兩張圖就是 P2C 里對標(biāo)注這一產(chǎn)品能力的具體設(shè)計(jì)思路，可供大家參考。

背后使用的是一套上卷下鉆的交互設(shè)計(jì)理念，同時對于 PD 如果從 P2C 推薦的標(biāo)注點(diǎn)（邏輯點(diǎn)）列表中找不到他所需的標(biāo)注點(diǎn)的話，P2C 還給其提供的自定義的工單鏈路，方便其完成需求的定義。工單的背后是借助人工、機(jī)器學(xué)習(xí)來對 PD 定義的需求進(jìn)行出碼定義和訓(xùn)練，下文會再介紹。

所以從 PD 是視角來看完整的需求迭代動線就如下圖所示（圖中的 S2C 賦能可以理解為 P2C 背后的智能化出碼能力，下文就會重點(diǎn)提到），需求從創(chuàng)建到標(biāo)注到產(chǎn)出一份完整的可供預(yù)覽和匯報(bào)的 PRD 文檔和預(yù)覽 Demo，再到視覺稿的更新升級如何借助以圖搜圖（即以圖搜存量標(biāo)注信息）進(jìn)行存量基礎(chǔ)上的迭代，完整地展示了需求迭代的整個過程。

而第二張圖就是以真實(shí)的產(chǎn)品需求為例，完成這整個產(chǎn)品迭代過程背后的一些具體技術(shù)過程，如“布局識別”、“各種邏輯點(diǎn)的識別”等等。

從上圖我們基本看到了邏輯點(diǎn)的獲取途徑有三種，具體如下圖所示：

• 第一種是 D2C 視覺識別這一步驟中從視覺稿中獲取到的邏輯點(diǎn)信息，比如從“N 件 N 折”、“商品白底圖”“淘搶購坑位”等這樣的視覺表達(dá)挖掘到的邏輯點(diǎn)信息；

• 第二種是從 PD 的組織結(jié)構(gòu)信息、產(chǎn)品背景信息中挖掘到的一些需求基本信息，比如“淘搶購頻道”、“大促會場”等，這部分信息可以輔助 P2C 確定業(yè)務(wù)領(lǐng)域，縮小邏輯點(diǎn)的推薦分范圍；

• 第三種是從 PD 直接在需求工作臺的視覺稿畫布上標(biāo)注的業(yè)務(wù)邏輯信息，比如“無門檻的定義”、“冰點(diǎn)價(jià)的定義”等，這部分信息可直接作為視覺稿的補(bǔ)償信息，方便 P2C 挖掘更多出碼所必需的業(yè)務(wù)邏輯信息。

總得來看，有這三部分的信息即可確定全量的邏輯點(diǎn)，同時通過這些豐富的邏輯點(diǎn)一步一步地指引標(biāo)注，通過標(biāo)注自動更新邏輯點(diǎn)，最后通過選擇的邏輯點(diǎn)和標(biāo)注信息出碼。

說到這里，大家可以看到邏輯點(diǎn)和標(biāo)注之間是有關(guān)系的（上文也提到邏輯點(diǎn)就是為了貼合標(biāo)注使用的），標(biāo)注信息的顆粒度也直接決定邏輯點(diǎn)出碼的可能性效果，簡單來說，粗略一點(diǎn)的標(biāo)注，比如像用自然語言來標(biāo)注，對于邏輯點(diǎn)的出碼效果不是太理想（當(dāng)然我們也在研究這部分的能力）；詳細(xì)一點(diǎn)的標(biāo)注，比如像 KV 表單，對于邏輯點(diǎn)的出碼效果肯定是最好的，但對 PD 來說太具有挑戰(zhàn)了，在讓 PD 做完型填空，工作方式既死板又不靈活，PD 很不喜歡這種工作方式。

所以，PD 喜歡的理想標(biāo)注狀態(tài)就是 0 標(biāo)注（即在產(chǎn)品需求迭代過程中，對于存量已標(biāo)注過的信息不要再重復(fù)標(biāo)注，甚至可以做到跨產(chǎn)品的標(biāo)注復(fù)用），這就是標(biāo)注的未來發(fā)展走向，通過 P2C 的智能化手段來逼近這個目標(biāo)；與此同時，借助邏輯點(diǎn)與標(biāo)注的映射關(guān)系，能實(shí)現(xiàn) 0 標(biāo)注，意味著首先要實(shí)現(xiàn)存量邏輯點(diǎn)迭代的 0 研發(fā)（即在產(chǎn)品需求迭代過程中，借助智能化能力對于存量邏輯點(diǎn)可以通過細(xì)微地變種形成迭代所需的新邏輯點(diǎn)，甚至也做到跨產(chǎn)品、跨技術(shù)的邏輯點(diǎn)復(fù)用和生成），才能對 0 標(biāo)注提供可能性。

所以，從 0 標(biāo)注、0 研發(fā)的角度來看 P2C 產(chǎn)品從現(xiàn)在到未來的發(fā)展路徑，基本符合下面的發(fā)展規(guī)律（如下圖所示）：

• 階段一，就是當(dāng)下借助 Sketch 視覺稿和 Sketch 標(biāo)注信息生成代碼的過程；

• 階段二，是將 PD 角色的完整生命周期的工作內(nèi)容搬到線上需求工作臺當(dāng)中，同時打通產(chǎn)研完整的產(chǎn)研鏈路，形成一定程度在線協(xié)同，完成需求的交付過程；

• 階段三，是大量借助 AI 提供大量可替代人工重復(fù)標(biāo)注和出碼的服務(wù)可能，節(jié)省產(chǎn)研鏈路上的人力的重復(fù)性開銷，形成一定自動化程度上的需求交付過程；

• 階段四，是在前面基礎(chǔ)上，擁有大量歷史標(biāo)注、出碼數(shù)據(jù)的基礎(chǔ)上，將 AI 的能力進(jìn)一步提升，從而達(dá)到視覺稿/PRD 的上傳即出碼過程，即需求即代碼的交付過程。當(dāng)然，這是后話。

上文講完“標(biāo)注”的產(chǎn)品設(shè)計(jì)過程，那么接下來再重點(diǎn)介紹下“出碼”的產(chǎn)品設(shè)計(jì)過程。

講出碼之前，還是要先關(guān)注下 D2C 目前版本中運(yùn)用邏輯點(diǎn)來進(jìn)行出碼的實(shí)現(xiàn)過程。

如下圖所示（圖中的視頻可從文章頂部的直播視頻中查閱到），借助視覺稿插件我們對視覺稿做了一定程度額外標(biāo)注，導(dǎo)出之后給到 Imgcook 工作臺，然后開發(fā)者需要在 Imgcook 的邏輯庫當(dāng)中錄入視覺稿中存在的邏輯點(diǎn)信息，邏輯點(diǎn)信息包含邏輯點(diǎn)的識別和表達(dá)兩部分，從而實(shí)現(xiàn)在設(shè)計(jì)稿導(dǎo)入到 Imgcook 工作臺之時，馬上可以識別到視覺稿中可能存在的邏輯點(diǎn)。

上面過程就是 D2C 借助邏輯點(diǎn)來實(shí)現(xiàn)出碼的完整過程，可以看到面向的用戶角色是開發(fā)者，而這點(diǎn)就是與 P2C 的本質(zhì)區(qū)別，P2C 面向的是 PD，所以不可能讓 PD 進(jìn)行邏輯點(diǎn)的預(yù)先定義和應(yīng)用。

然而不論 D2C，還是 P2C，在出碼的實(shí)現(xiàn)鏈路設(shè)計(jì)上都是可以抽象為“邏輯意圖的識別”和“邏輯意圖的表達(dá)”兩部分的，即從識別獲取到“邏輯意圖”（邏輯點(diǎn)），再基于“邏輯意圖”表達(dá)成為真正的邏輯代碼。

但 P2C 相比 D2C，它要升級點(diǎn)恰恰也是“識別”和“表達(dá)”的這兩個過程：

• “識別”要升級，原因是 D2C 原來的識別器是離散的，能識別的信息都是單模態(tài)的，比如不會把 UI 上的文本、布局、UI 樣式、上下左右的信息、業(yè)務(wù)上下文等信息綜合作為算法模型（Model）的輸入，導(dǎo)致傳統(tǒng)識別器能預(yù)測的語義信息的準(zhǔn)確程度有限，外加上今天 PD 角色標(biāo)注信息的引入，所以勢必要對“識別”的算法模型進(jìn)行根本性地升級，形成多模態(tài)的語義識別模型才可提升預(yù)測語義的準(zhǔn)確率，從而更加精準(zhǔn)地命中邏輯意圖的語義靶點(diǎn)。

• “表達(dá)”要升級，原因是 D2C 面向的是開發(fā)者，而 P2C 面向的是 PD，所以原來在 D2C 場景中開發(fā)者使用特別爽的數(shù)據(jù)源綁定、字段/事件綁定，對于 PD 來說就不人道了，否則就變成了 PD 在替開發(fā)者在編程，這是一種工作量轉(zhuǎn)移的投機(jī)取巧，不是 P2C 的設(shè)計(jì)初心。另外，PD 標(biāo)注的業(yè)務(wù)邏輯信息，他是不關(guān)心也不清楚具體是由前端開發(fā)者實(shí)現(xiàn)的，還是由后端開放者實(shí)現(xiàn)的。所以，總得來看，對“表達(dá)”的升級，就重點(diǎn)體現(xiàn)在對數(shù)據(jù)生成、事件綁定和邏輯函數(shù)塊 OP 的表達(dá)器升級上，數(shù)據(jù)生成是為了避免 PD 要預(yù)先像開發(fā)者一樣選擇一個服務(wù)端數(shù)據(jù)源，我們采用借助語義識別出來字段語義自動關(guān)聯(lián)或生成服務(wù)端數(shù)據(jù)源；事件綁定概念會隱藏避免 PD 感知，以免出現(xiàn) PD 像開發(fā)者一樣定義事件的綁定過程；函數(shù)塊 OP 的升級，是因?yàn)?PD 定義的業(yè)務(wù)邏輯，除了含有前端的邏輯代碼生成以外，還有生成服務(wù)端 BFF 層甚至更深層次的邏輯代碼。

以上這些就是要在“出碼”鏈路上對原來 D2C 邏輯點(diǎn)的識別、表達(dá)進(jìn)行升級的來龍去脈。

那么新版的邏輯點(diǎn)在上游標(biāo)注和下游數(shù)據(jù)/代碼之間是怎樣交互的？

具體過程可以如下圖所示，簡單來說就是借助上文提到的標(biāo)注信息，找到可能存在的邏輯點(diǎn)，邏輯點(diǎn)背后又分前端邏輯點(diǎn)和后端數(shù)據(jù)邏輯點(diǎn)，附帶 PD 標(biāo)注的邏輯點(diǎn)約束信息，就可以真正出碼了。

所以，概括一下，出碼鏈路從 D2C 到 P2C，升級的主要內(nèi)容就是下圖中橙色到紫色和深紫色的部分：橙色部分是原來的 D2C 出碼鏈路；紫色和深紫色是當(dāng)下 P2C 的出碼鏈路，而且深紫色部分中可以看到有服務(wù)端出碼部署的功能節(jié)點(diǎn)，比如 FaaS 代碼部署。這里也順帶提一下，P2C 在服務(wù)端的部署是進(jìn)行冗余部署的，因?yàn)樗惴ㄌ峁┙o PD 的邏輯點(diǎn)推薦信息很大程度上存在近似解，所以只用多套解進(jìn)行冗余部署 PD 才可以借助預(yù)覽效果進(jìn)行最終所需效果的甄別。

上文講到識別的升級，那么接下來就簡單介紹下邏輯點(diǎn)識別的算法設(shè)計(jì)方案，以供大家進(jìn)一步理解這一步升級的重要意義。

具體如下圖所示，借助多模信息的輸入，進(jìn)行綜合型的語義理解，提升語義識別的準(zhǔn)確率。

比如，以右圖“￥4999 ”為例，當(dāng)將該文本和圍繞該文本上下左右的周邊信息，以及文字字號、顏色、長度、粗細(xì)等信息作為算法模型的輸入，通過對其中信息的 embedding、降維、尺度歸一化等操作之后，獲取到一些語義特征的 label 信息，從而確定“￥4999 ”的最終語義為“618 大促商品活動價(jià)”。

上文講到出碼鏈路上邏輯點(diǎn)升級的設(shè)計(jì)和實(shí)現(xiàn)過程，那么接下來再介紹下在 P2C 產(chǎn)品領(lǐng)域內(nèi)，對邏輯點(diǎn)的未來階段規(guī)劃是怎樣的，以便大家能進(jìn)一步了解到，原來邏輯點(diǎn)的設(shè)計(jì)就是對未來 0 研發(fā)打基礎(chǔ)的出發(fā)點(diǎn)。

具體如下圖所示：

• 在 P2C 產(chǎn)品的起步階段，PD 來到 P2C 需求工作臺上的標(biāo)注和背后的邏輯點(diǎn)信息，都是通過人肉的方式錄入和供給的，這個過程我們認(rèn)為是 Step1 階段，目的是在為 Step2 積累算法樣本；

• 當(dāng) PD 在 P2C 需求工作臺上迭代起需求之后，平臺上沉淀的歷史數(shù)據(jù)中的標(biāo)注和邏輯點(diǎn)數(shù)據(jù)就會存在內(nèi)在的映射關(guān)系，這部分?jǐn)?shù)據(jù)會作為訓(xùn)練樣本回流給算法模型，進(jìn)一步提升算法模型識別和表達(dá)的準(zhǔn)確率，從而整體降低標(biāo)注的人工成本和出碼的開發(fā)人工成本，這個過程我們認(rèn)為是 Step2 階段；

• 緊接著，隨著 Step2 階段的不斷發(fā)展、積累和模型的演進(jìn)，P2C 的需求工作臺就具備了 AI 標(biāo)注和自動化出碼的能力，這就是我們前面暢想的 0 標(biāo)注、0 研發(fā)階段，這個過程我們認(rèn)為是 Step3 階段。

理想是美好的，也給大家看看現(xiàn)實(shí)的具體例子，以下是我們生產(chǎn)當(dāng)中的一些 Demo 案例，右側(cè)是我們在人工給算法準(zhǔn)備樣本及算法預(yù)測效果的 Demo 案例（案例中數(shù)據(jù)我們做了去敏）；左側(cè)是邏輯點(diǎn)的中文輸入，輸出就是邏輯點(diǎn)的代碼，同時這也是我們在攻堅(jiān)的研究課題—— NL2Code。

但 NL2Code 的學(xué)術(shù)研究，我們也在起步階段，背后涉及數(shù)理邏輯、機(jī)器學(xué)習(xí)、軟件工程、語言學(xué)、信息論等學(xué)科知識也比較多，門檻很高，且這個領(lǐng)域在學(xué)術(shù)界的研究也非常有限，解決方案能用到工程當(dāng)中的也幾乎少見，目前我們在各國內(nèi)外各大頂級高校進(jìn)行產(chǎn)學(xué)研的深度合作，期望在 NL2Code 領(lǐng)域真正產(chǎn)出一些根本性的進(jìn)展，可服務(wù)工程生產(chǎn)，為 P2C 帶來更深層次的效率提升。

當(dāng)然，我們在學(xué)術(shù)上的產(chǎn)出一些階段性地通過學(xué)術(shù) Paper 向外傳遞給大家，期望帶來整個前端工業(yè)的智能化。

最后，我們講一下 P2C 的產(chǎn)品展望。

講展望之前，還是先回顧下我們今天的所講內(nèi)容。

今天我們最先介紹 P2C 是怎么來的，然后介紹了 P2C 當(dāng)中兩個非常重要的產(chǎn)品環(huán)節(jié)的產(chǎn)品設(shè)計(jì)，一個是“標(biāo)注”，另一個是“邏輯點(diǎn)”，借助“標(biāo)注”我們收集到完整的需求信息，借助“邏輯點(diǎn)”我們找到需求出碼的中間橋梁，借助對“標(biāo)注”和“邏輯點(diǎn)”的“數(shù)據(jù)采集”我們找到訓(xùn)練“需求意圖-服務(wù)出碼”模型的基礎(chǔ)數(shù)據(jù)，借助這個模型我們完成了整個需求即代碼的交付過程。

同時我們也介紹到，P2C 是站在 D2C 肩膀上成長出來的產(chǎn)品，所以原來 D2C 的產(chǎn)品能力并沒有浪費(fèi)，而均作為 P2C 的基礎(chǔ)基建。當(dāng)然，讓前端在 P2C 應(yīng)用算法，也十分依賴底層 Pipcook 提供給前端的算法框架能力，所以，P2C 的建設(shè)也十分要感謝 D2C 和 Pipcook 能力的布局和建設(shè)。

最后，展望一下 P2C。P2C 的能力今年在業(yè)務(wù)當(dāng)中在邊落地邊打磨當(dāng)中，計(jì)劃明年的 4 月份提供一個對 PD 更加友好的體驗(yàn)式交付平臺，計(jì)劃明年 10 月份可以對外公測。

最后，大家如有什么疑問，都可以在下面的群里進(jìn)行交流。同時也歡迎大家使用我們的產(chǎn)品、參與我們產(chǎn)品社區(qū)的建設(shè)。另外，我們持續(xù)保持對外招聘，非常歡迎同道中人加入我們，一起共建前端的未來產(chǎn)品。

謝謝大家！謝謝 D2！

更多內(nèi)容，參考

• Imgcook Product：https://imgcook.com

• Imgcook Github：https://github.com/imgcook

• Pipcook Github：https://github.com/alibaba/pipcook

• IUI 2021 Paper - Auto-Icon: An Automated Code Generation Tool for Icon Designs Assisting In ?UI Development：

• • https://www.yuque.com/docs/share/ec67f566-60c6-4cb4-967f-118829b7e63b?#

???拓展閱讀

作者|狼叔、卓風(fēng)

編輯|橙子君

總結(jié)

以上是生活随笔為你收集整理的前端智能化实践（附：D2 前端技术论坛 PPT 合集）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。