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

腾讯音乐/TME研发部/朱明鹏 现任腾讯音乐人平台前端组长从业11年，专注于效能工具的设计研发曾出版企业低码实践书籍《活动中台》 大纲 1、优化前端开发模式&流程2、D2C转码技术的关键实现3、低码与D2C合力完成“端到端”4、总结与展望 1.优化前端开发模式&流程 1.1现状前端模式1.2发现的问题1.3探索方案1.4流程链路 现状前端开发模式 工程化开发 低代码开发 类型：存量项目、体系的项目。特点：逻辑复杂、复用性低、低配置性。 类型：B端管理系统、C端运营页特点：组件、模版可复用、逻辑可配置、高配置性。 发现的问题 研发要“效率”高 “研发还原度低，很明显的问题没有发现。”“设计走查太浪费时间，细节问题多，按时上线都有风险。” “哪种开发模式都绕不开切图还原设计稿，过程成就感低。”“一些显而易见的业务和组件，能不能自动生成？”“还要用走查工具去细节比较，我想专注更有价值的工作。” 设计师要“效果”好 探索方案 Desginto</>Desginto</> 流程链路 2.D2C转码技术的关键实现 2.1设计稿清洗2.2图标合并2.3还原空间关系2.4分行分列 2.5提取循环节点2.6转化样式2.7构建骨架2.8多平台生成 D2C转码关键实现/1.设计稿清洗/去除干扰元素 识别无效元素，确保生成的结构不包含冗余代码。1.去除干扰元素 D2C转码关键实现/1.设计稿清洗/合并&转换节点 将设计稿中的图层，统一封装成标准的四种元素。2.合并&转换节点 D2C转码关键实现/2.图标合并 多元素组成图标的情况 D2C转码关键实现/3.还原空间关系 D2C转码关键实现/4.分行分列 D2C转码关键实现/思考 D2C转码关键实现/4.分行分列/最优布局算法 D2C转码关键实现/4.分行分列/最优布局算法 结论：6个布局特征中，最小【斜率】特征的归属，则为最优布局 D2C转码关键实现/4.分行分列/最优布局算法 思考：当特征【斜率】相等，该怎么分？ D2C转码关键实现/4.分行分列/最优布局算法 D2C转码关键实现/5.提取循环节点/提取相似元素 1、根据元素类型将元素进行相似提取 D2C转码关键实现/5.提取循环节点/相似投影 D2C转码关键实现/5.提取循环节点/投影分组 3、对投影特征进行算法分组规则：分组队列中出现重复项，则单独成组，否则聚合继续检测。 111121212121122[1,1,1][12,12][12,1,12][12,2,12]12 D2C转码关键实现/5.提取循环节点/节点归组 4、将相似分组+噪声元素进行区块还原 D2C转码关键实现/6.转化样式 D2C转码关键实现/7.构建骨架 D2C转码关键实现/8.多平台生成 理论上D2C技术可完成任何图形编码语言的静态UI还原需求 D2C转码关键实现/更多思考 思考：前面只完成切图工作，我们如何知道图层的含义？ 3.低码与D2C合力完成“端到端” 3.1基于YOLO完成目标识别3.2搭建WEB训练平台3.3存量组件识别 3.4低代码组件开发3.5低码组件转化器3.6人工介入 识别是什么组件 转化真实组件代码 端到端的演进 样式还原是下限代码还原是上限 设计端 2.组件含义识别+功能还原1.节点合理布局 端到端的演进/1.基于Yolo完成目标检测 目标检测更符合组件识别的场景，单阶段的YOLO算法精度和速度都非常出色。 端到端的演进/1.基于Yolo完成目标检测/识别步骤 问题：如何将模型训练和预测应用在WEB端？ 端到端的演进/2.构建训练WEB平台 组件间互不干扰团队间互不干扰共享训练素材 端到端的演进/2.构建训练WEB平台/WEB模型导出应用 端到端的演进/思考 思考：难道所有的组件，都要经过模型训练，才能检测识别？ 模型训练量暴增，数据收集困难 端到端的演进/3.存量组件识别/采集标记 端到端的演进/思考 思考：存量设计稿中，应用的组件太多，无法全量标记？ 识别方案2：视觉算法 端到端的演进/3.存量组件识别/视觉算法 1.边缘提取去除色彩干扰，提高匹配准确度 组件的透明背景灰阶后是黑色 端到端的演进/3.存量组件识别/视觉算法 2.模版匹配计算组件图与设计稿相似度高的位置 额外确定组件透明背景的边界 端到端的演进/3.存量组件识别/视觉算法 3.非最大值抑制NMS去除重复检测结果和保留最优目标框 端到端的演进/3.存量组件识别/总结 基于视觉计算的检测算法 基于CNN的目标检测模型 适用于变化多，尺寸、形状不固定的组件，如按钮，表单等组件。 适用于尺寸固定，差异较小的组件，如业务卡片等固化的搭配。 端到端的演进/图层如何转代码？ 端到端的演进/4.低代码组件开发 端到端的演进/5.低码组件转换器 端到端的演进/思考 思考：完成了图层转译，组件映射，是否完成了全链路？ 缺少了真实场景上下文辅助，算法覆盖度约在95%。 组件间，与载体都会有逻辑关系，独立组件不足以满足完整需求。 依托低码平台，人工介入来完成最后一公里 端到端的演进/6.人工介入/预设配置 各业务团队可以根据自己的工程化需求，进行定制转化配置 预设全局脚本尺寸单位COS地址&前缀特殊字体上传 端到端的演进/6.人工介入/调整转化结果 节点删除/隐藏处理冗余算法误伤的节点 自定义合图 二次节点编组优化分组算法不正确划分 解决合图算法误差&补充字体转图 端到端的演进/6.人工介入/低码能力复用 端到端的演进/6.人工介入/低码能力复用/逻辑绑定 让逻辑轻松被理解，低码交接无负担，逻辑快速被定位。 4.总结与展望 业务回顾 涉及多端提升30%人效 整体架构回顾 未来展望 THANKS