D2C&低代碼在騰訊音樂人業務中的探索實踐_朱明鵬.pdf

《D2C&低代碼在騰訊音樂人業務中的探索實踐_朱明鵬.pdf》由會員分享，可在線閱讀，更多相關《D2C&低代碼在騰訊音樂人業務中的探索實踐_朱明鵬.pdf（54頁珍藏版）》請在三個皮匠報告上搜索。

1、D2C&D2C&低代碼在騰訊音樂人低代碼在騰訊音樂人業務的探索實踐業務的探索實踐騰訊音樂騰訊音樂 /TMETME研發部研發部 /朱明鵬朱明鵬現任騰訊音樂人平臺前端組長現任騰訊音樂人平臺前端組長從業從業1111年，專注于年，專注于效能工具的設計研發效能工具的設計研發曾出版企業低碼實踐書籍曾出版企業低碼實踐書籍活動中臺活動中臺大綱大綱1 1、優化前端開發模式優化前端開發模式&流程流程2 2、D2C D2C 轉碼轉碼技術技術的關鍵實現的關鍵實現3 3、低碼與、低碼與D2CD2C合力完成合力完成“端到端端到端”4 4、總結與展望、總結與展望1.1.優化前端開發模式優化前端開發模式&流程流程1.11.1

2、 現狀前端模式現狀前端模式1.21.2 發現的問題發現的問題1.31.3 探索方案探索方案1.41.4 流程鏈路流程鏈路現狀前端開發模式現狀前端開發模式低代碼開發低代碼開發工程化開發工程化開發類型：存量項目、體系的項目。特點：邏輯復雜、復用性低、低配置性。類型：B端管理系統、C端運營頁特點：組件、模版可復用、邏輯可配置、高配置性。發現的發現的問題問題設計師要設計師要“效果效果”好好“研發還原度低，很明顯的問題很明顯的問題沒有發現?！薄霸O計走查太太浪費時間浪費時間，細節問題多，按時上線都有風險?！毖邪l要研發要“效率效率”高高“哪種開發模式都繞不開切圖還原設計稿，過程過程成就感低成就感低?！薄耙恍?/p>

3、顯而易見的業務和組件，能不能自動生成自動生成？”“還要用走查工具去細節比較，我想專注更有價值的工作專注更有價值的工作?！碧剿鞣桨柑剿鞣桨冈O計稿圖層節點設計稿圖層節點DesginDesgin to to DesginDesgin to to 識別識別組件圖層組件圖層計算節點計算節點訓練模型訓練模型UIUI 代碼代碼組件組件代碼代碼流程鏈路流程鏈路設計稿設計稿上架低碼上架低碼轉碼轉碼組件識別組件識別本地工程本地工程D2CD2C2.2.D2C D2C 轉碼轉碼技術技術的關鍵實現的關鍵實現2.12.1 設計稿清洗設計稿清洗2.22.2 圖標合并圖標合并2.32.3 還原空間關系還原空間關系2.42.4

4、 分行分列分行分列2.52.5 提取循環節點提取循環節點2.62.6 轉化樣式轉化樣式2.72.7 構建骨架構建骨架2.82.8 多平臺生成多平臺生成完全遮擋元素完全遮擋元素D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /1.1.設計稿清洗設計稿清洗 /去除干擾元素去除干擾元素識別無效元素，確保生成的結構不包含冗余代碼。識別無效元素，確保生成的結構不包含冗余代碼。視覺干擾元素視覺干擾元素透明元素透明元素寬高異常元素寬高異常元素隱藏、空元素隱藏、空元素非可視區域非可視區域1 1.去除干擾元素去除干擾元素歌手歌手D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /1.1.設計稿清洗設計稿清洗 /合并合并&

5、轉換節轉換節點點將設計稿中的圖層將設計稿中的圖層，統一封裝成標準的四種元素。，統一封裝成標準的四種元素。2.2.合并合并&轉換節點轉換節點1.1.原始節點合并原始節點合并 3.3.標記切圖標記切圖#ICON#IMG2.2.節點增加類型節點增加類型圖標圖標圖片圖片容器容器文本文本D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /2.2.圖標合并圖標合并圖標二次合并圖標二次合并多元素組成圖標的情況多元素組成圖標的情況合并策略合并策略尺寸閾值尺寸閾值&類型類型 +（相切、相交、包相切、相交、包含含 ）現實現實問題問題實際合并后，層級發生不正確覆蓋實際合并后，層級發生不正確覆蓋解決方案解決方案檢測檢測圖標

6、圖標組成元素的組成元素的層級，二次裁剪后合并層級，二次裁剪后合并D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /3.3.還原空間關系還原空間關系子子元素需要矯正透明度元素需要矯正透明度、旋轉旋轉、背景等屬性。背景等屬性。任意定位元素有相對父級任意定位元素有相對父級相交相交 任意定位任意定位包含包含 -父子關系父子關系相離相離 正常定位正常定位相離的節點，進入分行分列計算相離的節點，進入分行分列計算D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /4.4.分行分列分行分列A AB BC C求多個連續區間在某個方向上的并集rowrowcolcolcolcolA AC CB BD D2C 2C 轉碼關鍵實

7、現轉碼關鍵實現 /思考思考A AB BC CA A、B B、C C 規律：依次分行分列？規律：依次分行分列？D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /4.4.分行分列分行分列 /最優布局算法最優布局算法標題標題1 1標題標題2 2標題標題3 31 13 35 56 67 74 42 2分行分行 分列分列?分列分列 分行分行?1 13 35 56 67 74 42 23 31 15 56 67 74 42 2每一行布局特征：上、中、下每一行布局特征：上、中、下結論：結論：6 6個布局特征中，個布局特征中，最小最小【斜率斜率】特征的歸屬，則為最優布局特征的歸屬，則為最優布局求求【行行】布局特征

8、布局特征每一列布局特征：左、中、每一列布局特征：左、中、右右求求【列列】布局特征布局特征D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /4.4.分行分列分行分列 /最優布局算法最優布局算法1.1.分別求行列布局特征分別求行列布局特征D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /4.4.分行分列分行分列 /最優布局算法最優布局算法標題標題1 1標題標題2 2標題標題3 3標題標題1 1標題標題2 2標題標題3 3思考：當特征思考：當特征【斜率斜率】相等，該怎么分？相等，該怎么分？D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /4.4.分行分列分行分列 /最優布局算法最優布局算法標題標題1 1標題標題

9、2 2標題標題3 3結論：結論：行相似度行相似度 列相似度列相似度？分列分列 ：分行：分行2 2.對比對比行列相似度行列相似度1 11 1行相似度：行相似度：2 20 00 00 0列相似度：列相似度：0 0 D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /思考思考標題標題1 1標題標題2 2標題標題3 3思考：如何提取可循環節點？思考：如何提取可循環節點？D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /5.5.提取循環節點提取循環節點 /提取相似元素提取相似元素1 1、根據元素類型將元素進行相似提取、根據元素類型將元素進行相似提取相似分組元素相似分組元素噪點元素噪點元素D D2C 2C 轉碼關鍵

10、實現轉碼關鍵實現 /5.5.提取循環節點提取循環節點 /相似投影相似投影2 2、對相似元素進行方向投影編組、對相似元素進行方向投影編組D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /5.5.提取循環節點提取循環節點 /投影分組投影分組3 3、對投影特征進行算法分組、對投影特征進行算法分組 規則：分組隊列中出現重復項，則單獨成組，否則聚合繼續檢測。1 11 11 11 12 21 12 21 12 21 12 21 11 12 22 21,1,11,1,112,1212,1212,1,1212,1,1212,2,1212,2,121 12 2D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /5.5.提

11、取循環節點提取循環節點 /節點歸組節點歸組4 4、將相似分組、將相似分組 +噪聲元素進行區塊還原噪聲元素進行區塊還原噪聲元素回填噪聲元素回填布局重塑D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /6.6.轉化樣式轉化樣式文字樣式文字樣式透明度透明度陰影陰影邊框樣式邊框樣式圓角圓角寬度寬度高高度度基礎類基礎類baseStyle效果類效果類effect描邊類描邊類stroke文字類文字類text橫坐標橫坐標縱縱坐標坐標顏色顏色字號字號行高行高字距字距粗細粗細字體字體填充背景填充背景混合模式混合模式旋轉角度旋轉角度D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /7.7.構建骨架構建骨架A AB B瀑布流

12、的特性：瀑布流的特性：從上而下從上而下，從左到右，從左到右PTPLPBPRMBMLA AB BPTPBPLPRMTMR分行分行分列分列D D2C 2C 轉碼關鍵實現轉碼關鍵實現 /8.8.多平臺生成多平臺生成理論上理論上 D2CD2C 技術可完成任何圖形編碼語言的靜態技術可完成任何圖形編碼語言的靜態UIUI還原需求還原需求VueVueR ReacteactTaroTaroHippyHippyC Code Schemaode SchemaD D2C 2C 轉碼關鍵實現轉碼關鍵實現 /更多思考更多思考圖層集合圖層集合文本圖標圖片容器思考：前面只完成切圖工作，我們如何知道圖層的含義？思考：前面只完成

13、切圖工作，我們如何知道圖層的含義？沒有沒有含義和交互含義和交互3.3.低碼與低碼與D2CD2C合力完成合力完成“端到端端到端”3.13.1 基于基于 YOLOYOLO 完成目標識別完成目標識別3.23.2 搭建搭建WEBWEB訓練平臺訓練平臺3.33.3 存量組件識別存量組件識別3.43.4 低代碼組件開發低代碼組件開發3.53.5 低碼組件轉化器低碼組件轉化器3.63.6 人工介入人工介入識別是什么組件識別是什么組件轉化真實組件代碼轉化真實組件代碼樣式還原是下限樣式還原是下限代碼還原是代碼還原是上限上限端到端的演進端到端的演進設計端設計端用戶終用戶終端端2.2.組件含義識別組件含義識別 +功

14、能還原功能還原1.1.節點合理布局節點合理布局 端到端的演進端到端的演進 /1.1.基于基于 Yolo 完成目標檢測完成目標檢測目標目標分類分類目標檢測目標檢測語意分割語意分割實例實例分割分割目標檢測更符合組件識別的場景，單階段的目標檢測更符合組件識別的場景，單階段的 YOLO 算法精度和速度都非常出色。算法精度和速度都非常出色。端到端的演進端到端的演進 /1.1.基于基于 Yolo 完成目標檢測完成目標檢測 /識別步驟識別步驟1.1.標注標注數據圖片，收集數據圖片，收集YOLOYOLO訓練數據訓練數據2 2.調整訓練參數，進行模型訓練調整訓練參數，進行模型訓練3.3.調用預測模型調用預測模型

15、問題：如何將模型訓練和預測問題：如何將模型訓練和預測 應用在應用在WEBWEB端？端？端到端的演進端到端的演進 /2.2.構建訓練構建訓練WEBWEB平臺平臺上傳本地圖片上傳本地圖片下載在線圖片下載在線圖片數據源管理數據源管理配置標注配置標注組件標簽組件標簽語義標簽語義標簽1.1.收集訓練數據收集訓練數據格式轉換格式轉換數據歸檔數據歸檔模型訓練模型訓練3.3.生成預測模型生成預測模型YOLOYOLO訓練訓練模型驗證模型驗證參數生成參數生成預覽預覽/導出導出過程觀測過程觀測矩形框選矩形框選圖片標注圖片標注標注管理標注管理2.2.在線生成標注數據在線生成標注數據放大縮小放大縮小增刪改增刪改模型載入

16、模型載入輔助標注輔助標注模型內網托管模型內網托管在線模型在線模型WEBWEB-SDK-SDK4.4.使用預測模型完成檢測使用預測模型完成檢測預測區域繪制預測區域繪制失敗失敗casecase上傳上傳多任務預測多任務預測二次調整二次調整生成模型生成模型IDID配置截圖服務配置截圖服務組件間互不干擾組件間互不干擾團隊間團隊間互不干擾互不干擾共享訓練素材共享訓練素材端到端的演進端到端的演進 /2.2.構建訓練構建訓練WEBWEB平臺平臺 /WEBWEB模型導出應用模型導出應用t tensorflow_convertensorflow_convertonnx-tfonnx-tftorch.onnx.ex

17、porttorch.onnx.export.onnx.onnxtfjs web_modeltfjs web_model初始訓練框架初始訓練框架模型轉換模型轉換支持支持WEBWEB端端調用的模型調用的模型WEBWEB端模型端模型加載調用器加載調用器onnxruntime-webonnxruntime-webt tensorflowjsensorflowjs模型文件模型文件訓練端訓練端部署端部署端端到端的演進端到端的演進 /思考思考思考：難道所有的組件，都要經過模型訓練，才能檢測識別？思考：難道所有的組件，都要經過模型訓練，才能檢測識別？模型訓練量暴增，數據收集困難模型訓練量暴增，數據收集困難端到

18、端的演進端到端的演進 /3.3.存量組件識別存量組件識別 /采集標記采集標記選中圖層選中圖層節點清洗節點清洗節點存儲節點存儲選中組件選中組件拖拽至畫布拖拽至畫布節點還原節點還原設計師采集節點設計師采集節點設計師應用節點設計師應用節點識別方案識別方案1 1：標記：標記端到端的演進端到端的演進 /思考思考思考思考：存量設計稿中，應用的組件太多，無法全量標記？：存量設計稿中，應用的組件太多，無法全量標記？識別方案識別方案2 2：視覺算法：視覺算法端到端的演進端到端的演進 /3.3.存量組件識別存量組件識別 /視覺算法視覺算法1.1.邊緣提取邊緣提取去除色彩干擾，提高匹配準確度去除色彩干擾，提高匹配準

19、確度業務組件業務組件設計稿快照設計稿快照灰階圖灰階圖組件的透明背景灰階后是黑色組件的透明背景灰階后是黑色端到端的演進端到端的演進 /3.3.存量組件識別存量組件識別 /視覺算法視覺算法2 2.模版匹配模版匹配計算組件圖與設計稿相似度高的位置計算組件圖與設計稿相似度高的位置SIFTSIFT算法算法額外確定組件透明背景的邊界額外確定組件透明背景的邊界閾值閾值0.70.7閾值閾值0.40.4端到端的演進端到端的演進 /3.3.存量組件識別存量組件識別 /視覺算法視覺算法3.3.非最大值抑制非最大值抑制NMSNMS去除重復檢測結果和保留最優目標框去除重復檢測結果和保留最優目標框端到端的演進端到端的演進

20、 /3.3.存量組件識別存量組件識別 /總結總結基于基于 CNNCNN 的目標檢測模型的目標檢測模型基于基于視覺計算的檢測視覺計算的檢測算法算法適用于變化多，尺寸、形狀不固定的組件，如適用于變化多，尺寸、形狀不固定的組件，如按鈕，表單等組件。按鈕，表單等組件。適用于尺寸固定，差異較小的組件，如業務卡適用于尺寸固定，差異較小的組件，如業務卡片等固化的搭配。片等固化的搭配。端到端的演進端到端的演進 /圖層如何轉代碼？圖層如何轉代碼？含義：按鈕含義：按鈕組件代碼組件代碼工程代碼工程代碼根據標識根據標識替換對應源碼替換對應源碼接入低代碼？接入低代碼？端到端的演進端到端的演進 /4.4.低代碼組件開發低

21、代碼組件開發組件開發規范組件開發規范子組件目錄子組件目錄UIUI 代碼代碼配置代碼配置代碼預設配置數據預設配置數據低碼系統低碼系統端到端的演進端到端的演進 /5.5.低碼組件轉換器低碼組件轉換器目標目標輸出輸出配置數據配置數據c component/omponent/setting.jsonsetting.json組件組件UIUI層層c component/omponent/index.tsindex.ts組件配置層組件配置層c component/omponent/setting.tssetting.ts識別識別輸入輸入C Code Schemaode Schema組件標識組件標識按鈕、熱區

22、、表單項、按鈕、熱區、表單項、文本等（固定）文本等（固定）提取預定的配置并寫入數據提取預定的配置并寫入數據 基礎組件基礎組件配置提取配置提取寫入寫入歌單列表，播放卡片歌單列表，播放卡片 .保留變量，替換保留變量，替換UIUI層層復雜組件復雜組件UIUI層對比替換層對比替換轉化轉化器器低代碼組件低代碼組件D2CD2C 輸輸出結果出結果端到端的演進端到端的演進 /思考思考思考思考：完成了圖層轉譯，組件映射，是否完成了全鏈路？：完成了圖層轉譯，組件映射，是否完成了全鏈路？缺少了真實場景上下文輔助，算法覆蓋度約在缺少了真實場景上下文輔助，算法覆蓋度約在95%95%。組件間，與載體都會有邏輯關系，獨立組

23、件不足以滿足完整需求。組件間，與載體都會有邏輯關系，獨立組件不足以滿足完整需求。依托低碼平臺，依托低碼平臺，人工介入來完成最后一公里人工介入來完成最后一公里端到端的演進端到端的演進 /6.6.人工介入人工介入 /預設配置預設配置預設全局預設全局腳本腳本尺寸單位尺寸單位COSCOS地址地址&前綴前綴特殊字體上傳特殊字體上傳各業務團隊可以根據自己的工程化需求，進行定制轉化配置各業務團隊可以根據自己的工程化需求，進行定制轉化配置端到端的演進端到端的演進 /6.6.人工介入人工介入 /調整轉化結果調整轉化結果 節點刪除節點刪除 /隱藏隱藏處理處理冗余算法誤傷的節點冗余算法誤傷的節點二次節點二次節點編組

24、編組優化分組算法不正確劃分優化分組算法不正確劃分自定義合圖自定義合圖解決合圖算法誤差解決合圖算法誤差&補充字體轉圖補充字體轉圖行列二次拆合行列二次拆合行列算法斜率、相似度的誤差行列算法斜率、相似度的誤差上下文上下文和開發習慣和開發習慣端到端的演進端到端的演進 /6.6.人工介入人工介入 /低碼能力復用低碼能力復用邏輯綁定邏輯綁定事件編排事件編排循環渲染循環渲染條件渲染條件渲染自定義方法自定義方法數據源綁定數據源綁定事件編排事件編排自定義變量自定義變量條件渲染條件渲染自定義方法自定義方法元素元素配置配置屬性編輯屬性編輯樣式編輯樣式編輯動畫預設動畫預設容器插槽容器插槽工程化能力工程化能力版本管理版

25、本管理性能優化性能優化埋點監控埋點監控遠程調試遠程調試端到端的演進端到端的演進 /6.6.人工介入人工介入 /低碼能力復用低碼能力復用 /邏輯綁定邏輯綁定讓邏輯輕松被理解，低碼交接無負擔，邏輯快速被定位。讓邏輯輕松被理解，低碼交接無負擔，邏輯快速被定位。4.4.總結與展望總結與展望宣推宣推活動活動線下演出線下演出管理后臺管理后臺業務回顧業務回顧低碼端低碼端業務業務端端低碼提效的基礎上低碼提效的基礎上再次提升再次提升3 30%0%音樂人開平音樂人開平由你榜單由你榜單生態廠牌生態廠牌涉及多端涉及多端提升提升3 30%0%人效人效上傳設計稿上傳設計稿整體架構回顧整體架構回顧動態映射動態映射l lay

26、er-to-componentayer-to-component靜態轉化靜態轉化desgindesgin-to-to-ui-codeui-code清洗設計稿清洗設計稿冗余元素刪除冗余元素刪除圖標合并圖標合并蒙層裁剪蒙層裁剪元素轉換元素轉換還原節點關系還原節點關系父子關系父子關系識別循環節點識別循環節點求最優布局策略求最優布局策略分行分列分行分列生成多端代碼生成多端代碼構建樣式構建樣式全局元素注入全局元素注入構建骨架構建骨架多平臺生成多平臺生成在線在線模型訓練模型訓練&預測預測數據采集數據采集模型訓練模型訓練模型驗證模型驗證模型應用模型應用CVCV算法匹配推測算法匹配推測特征提取特征提取模版匹配

27、模版匹配閾值調整閾值調整二次確認二次確認接入低代碼接入低代碼code-to-developmentcode-to-development組件轉化器組件轉化器低碼組件開發低碼組件開發配套轉化器配套轉化器人工介入，二次調整人工介入，二次調整預設尺寸調整預設尺寸調整節點二次合并節點二次合并基礎屬性調整基礎屬性調整節點二次重組節點二次重組渲染變量提取渲染變量提取基礎能力復用基礎能力復用數據源接入數據源接入版本管理版本管理動畫設置動畫設置邏輯編排邏輯編排未來展望未來展望AIGCAIGCAGI AGI LLMLLM我需要一個中秋主題的歌單宣推H5頁，頭圖有中秋和歌曲的元素，該頁面主要內容是中秋相關的歌單列表。歌單的歌曲需要根據去年的收藏量進行排序，并且歌曲數限制在10首。拆解任務中Tell me what you needTell me what you need?邏輯交互邏輯交互數據綁定數據綁定樣式動畫樣式動畫出碼轉換出碼轉換C CopilotopilotTHANKSTHANKS