D2C&低代码在腾讯音乐人业务中的探索实践

1. D2C & 低代码在腾讯音乐人业务的探索实践腾讯音乐 / TME研发部 / 朱明鹏

2. 现任腾讯音乐人平台前端组长从业11年，专注于效能工具的设计研发曾出版企业低码实践书籍《活动中台》

3. 大纲 1、优化前端开发模式&流程 2、D2C 转码技术的关键实现 3、低码与D2C合力完成“端到端” 4、总结与展望

4. 1. 优化前端开发模式&流程 1.1 现状前端模式 1.2 发现的问题 1.3 探索方案 1.4 流程链路

5. 现状前端开发模式工程化开发低代码开发类型：存量项目、体系的项目。类型：B端管理系统、C端运营页特点：逻辑复杂、复用性低、低配置性。特点：组件、模版可复用、逻辑可配置、高配置性。

6. 发现的问题 “研发还原度低，很明显的问题没有发现。” 研发要“效率”高 “设计走查太浪费时间，细节问题多，按时上线都有风险。” “哪种开发模式都绕不开切图还原设计稿，过程成就感低。” “一些显而易见的业务和组件，能不能自动生成？” 设计师要“效果”好 “还要用走查工具去细节比较，我想专注更有价值的工作。”

7. 探索方案 Desgin to </> 设计稿图层节点识别组件图层计算节点训练模型 UI 代码组件代码

8. 流程链路 D2C 设计稿转码组件识别本地工程上架低码

9. 2. D2C 转码技术的关键实现 2.1 设计稿清洗 2.5 提取循环节点 2.2 图标合并 2.6 转化样式 2.3 还原空间关系 2.7 构建骨架 2.4 分行分列 2.8 多平台生成

10. D2C 转码关键实现 / 1.设计稿清洗 / 去除干扰元素 1.去除干扰元素识别无效元素，确保生成的结构不包含冗余代码。透明元素完全遮挡元素非可视区域隐藏、空元素视觉干扰元素宽高异常元素歌手

11. D2C 转码关键实现 / 1.设计稿清洗 / 合并&转换节点 2.合并&转换节点将设计稿中的图层，统一封装成标准的四种元素。 1. 原始节点合并 2. 节点增加类型图标 3. 标记切图 #ICON #IMG 图片容器文本

12. D2C 转码关键实现 / 2.图标合并合并策略尺寸阈值 && 类型 + （相切、相交、包图标二次合并多元素组成图标的情况含）现实问题实际合并后，层级发生不正确覆盖解决方案检测图标组成元素的层级，二次裁剪后合并

13. D2C 转码关键实现 / 3.还原空间关系包含 - 父子关系子元素需要矫正透明度、旋转、背景等属性。相交 – 任意定位任意定位元素有相对父级相离 – 正常定位相离的节点，进入分行分列计算

14. D2C 转码关键实现 / 4.分行分列 row B A col col C A 求多个连续区间在某个方向上的并集 B C

15. D2C 转码关键实现 / 思考 A B A、B、C C 规律：依次分行分列？

16. D2C 转码关键实现 / 4.分行分列 / 最优布局算法 1 分行分列 ? 2 5 4 6 分列 3 7 分行 ? 标题1 标题2 标题3

17. D2C 转码关键实现 / 4.分行分列 / 最优布局算法 1.分别求行列布局特征 1 2 3 5 4 6 求【行】布局特征 7 每一行布局特征：上、中、下 1 2 3 5 4 6 求【列】布局特征 7 每一列布局特征：左、中、右结论：6个布局特征中，最小【斜率】特征的归属，则为最优布局

18. D2C 转码关键实现 / 4.分行分列 / 最优布局算法标题1 标题2 标题 3 标题2 标题 3 思考：当特征【斜率】相等，该怎么分？标题1

19. D2C 转码关键实现 / 4.分行分列 / 最优布局算法行相似度：2 1 2.对比行列相似度标题1 0 标题2 标题3 0 0 结论：行相似度 > 列相似度？分列：分行 1 列相似度：0

20. D2C 转码关键实现 / 思考标题1 标题2 标题3 思考：如何提取可循环节点？

21. D2C 转码关键实现 / 5.提取循环节点 / 提取相似元素 1、根据元素类型将元素进行相似提取相似分组元素噪点元素

22. D2C 转码关键实现 / 5.提取循环节点 / 相似投影 2、对相似元素进行方向投影编组

23. D2C 转码关键实现 / 5.提取循环节点 / 投影分组 3、对投影特征进行算法分组规则：分组队列中出现重复项，则单独成组，否则聚合继续检测。 1 1 2 1 1 2 1 1 1 1 2 2 [12,12] 2 1 1 [1,1,1] 2 2 [12,1,12] [12,2,12]

24. D2C 转码关键实现 / 5.提取循环节点 / 节点归组 4、将相似分组 +噪声元素进行区块还原噪声元素回填布局重塑

25. D2C 转码关键实现 / 6. 转化样式基础类 baseStyle 效果类 effect 描边类宽度高度横坐标透明度阴影填充背景圆角边框样式纵坐标旋转角度混合模式 stroke 文字类 text 颜色字号行高文字样式字距粗细字体

26. D2C 转码关键实现 / 7.构建骨架分行分列 PT PT A PL MT A PR MB PL MR B B ML PB 瀑布流的特性：从上而下，从左到右 PR PB

27. D2C 转码关键实现 / 8.多平台生成 Vue React Code Schema Taro 理论上 D2C 技术可完成任何图形编码语言的静态UI还原需求 Hippy

28. D2C 转码关键实现 / 更多思考图层集合文本没有含义和交互图标图片容器思考：前面只完成切图工作，我们如何知道图层的含义？

29. 3.低码与D2C合力完成“端到端” 3.1 基于 YOLO 完成目标识别 3.4 低代码组件开发 3.2 搭建WEB训练平台 3.5 低码组件转化器 3.3 存量组件识别 3.6 人工介入识别是什么组件转化真实组件代码

30. 端到端的演进样式还原是下限代码还原是上限设计端 1.节点合理布局 2.组件含义识别 + 功能还原用户终端

31. 端到端的演进 / 1.基于 Yolo 完成目标检测目标检测目标分类语意分割实例分割目标检测更符合组件识别的场景，单阶段的 YOLO 算法精度和速度都非常出色。

32. 端到端的演进 / 1.基于 Yolo 完成目标检测 / 识别步骤 1. 标注数据图片，收集YOLO训练数据 2. 调整训练参数，进行模型训练问题：如何将模型训练和预测应用在WEB端？ 3. 调用预测模型

33. 端到端的演进 / 2.构建训练WEB平台数据源管理下载在线图片上传本地图片配置截图服务配置标注组件标签图片标注矩形框选放大缩小标注管理模型载入辅助标注增删改语义标签 1.收集训练数据共享训练素材 2.在线生成标注数据组件间互不干扰在线模型模型内网托管生成模型ID 数据归档格式转换预览/导出 WEB-SDK 多任务预测预测区域绘制模型训练参数生成 YOLO训练二次调整失败case上传过程观测模型验证 4.使用预测模型完成检测 3.生成预测模型团队间互不干扰

34. 端到端的演进 / 2.构建训练WEB平台 / WEB模型导出应用初始训练框架模型转换训练端 tensorflow_convert onnx-tf torch.onnx.export 模型文件支持WEB端调用的模型 tfjs web_model WEB端模型加载调用器 tensorflowjs .onnx onnxruntime-web 部署端

35. 端到端的演进 / 思考思考：难道所有的组件，都要经过模型训练，才能检测识别？模型训练量暴增，数据收集困难

36. 端到端的演进 / 3.存量组件识别 / 采集标记设计师采集节点选中图层节点清洗节点存储拖拽至画布节点还原识别方案1：标记设计师应用节点选中组件

37. 端到端的演进 / 思考思考：存量设计稿中，应用的组件太多，无法全量标记？识别方案2：视觉算法

38. 端到端的演进 / 3.存量组件识别 / 视觉算法业务组件 1.边缘提取去除色彩干扰，提高匹配准确度灰阶图设计稿快照组件的透明背景灰阶后是黑色

39. 端到端的演进 / 3.存量组件识别 / 视觉算法阈值0.7 阈值0.4 SIFT算法 2.模版匹配计算组件图与设计稿相似度高的位置额外确定组件透明背景的边界

40. 端到端的演进 / 3.存量组件识别 / 视觉算法 3.非最大值抑制 NMS去除重复检测结果和保留最优目标框

41. 端到端的演进 / 3.存量组件识别 / 总结基于 CNN 的目标检测模型基于视觉计算的检测算法适用于变化多，尺寸、形状不固定的组件，如适用于尺寸固定，差异较小的组件，如业务卡按钮，表单等组件。片等固化的搭配。

42. 端到端的演进 / 图层如何转代码？工程代码含义：按钮根据标识替换对应源码组件代码接入低代码？

43. 端到端的演进 / 4.低代码组件开发组件开发规范低码系统子组件目录 UI 代码配置代码预设配置数据

44. 端到端的演进 / 5.低码组件转换器 D2C 输出结果识别输入转化器组件标识基础组件配置提取写入 Code Schema 按钮、热区、表单项、文本等（固定）提取预定的配置并写入数据复杂组件 UI层对比替换歌单列表，播放卡片 ... 保留变量，替换UI层低代码组件目标输出配置数据组件配置层组件UI层 component/setting.json component/setting.ts component/index.ts

45. 端到端的演进 / 思考思考：完成了图层转译，组件映射，是否完成了全链路？缺少了真实场景上下文辅助，算法覆盖度约在 95%。组件间，与载体都会有逻辑关系，独立组件不足以满足完整需求。依托低码平台，人工介入来完成最后一公里

46. 端到端的演进 / 6.人工介入 / 预设配置各业务团队可以根据自己的工程化需求，进行定制转化配置预设全局脚本尺寸单位 COS地址&前缀特殊字体上传

47. 端到端的演进 / 6.人工介入 / 调整转化结果节点删除 / 隐藏处理冗余算法误伤的节点行列二次拆合行列算法斜率、相似度的误差上下文和开发习惯二次节点编组优化分组算法不正确划分自定义合图解决合图算法误差&补充字体转图

48. 端到端的演进 / 6.人工介入 / 低码能力复用逻辑绑定事件编排循环渲染条件渲染自定义方法自定义变量条件渲染自定义方法样式编辑动画预设容器插槽性能优化埋点监控远程调试数据源绑定事件编排元素配置属性编辑工程化能力版本管理

49. 端到端的演进 / 6.人工介入 / 低码能力复用 / 逻辑绑定让逻辑轻松被理解，低码交接无负担，逻辑快速被定位。

50. 4.总结与展望

51. 业务回顾业务端低码端音乐人开平宣推活动由你榜单线下演出生态厂牌管理后台涉及多端提升30%人效低码提效的基础上再次提升30% 上传设计稿

52. 整体架构回顾静态转化 desgin-to-ui-code 元素转换父子关系分行分列构建样式构建骨架蒙层裁剪图标合并求最优布局策略识别循环节点全局元素注入多平台生成在线模型训练&预测 layer-to-component 数据采集 code-to-development 生成多端代码冗余元素删除动态映射接入低代码还原节点关系清洗设计稿模型训练渲染变量提取模型应用特征提取人工介入，二次调整组件转化器低码组件开发模型验证 CV算法匹配推测配套转化器模版匹配阈值调整二次确认基础能力复用预设尺寸调整节点二次重组数据源接入逻辑编排基础属性调整节点二次合并动画设置版本管理

53. 未来展望 AGI LLM AIGC Copilot 逻辑交互我需要一个中秋主题的歌单宣推H5页，头图有中秋和歌曲的元素，该页面主要内容是中秋相关的歌单列表。 Tell me what you need ? 数据绑定歌单的歌曲需要根据去年的收藏量进行排序，并且歌曲数限制在10首。样式动画拆解任务中… 出码转换 …

54. THANKS