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

D2C&低代码在腾讯音乐人业务的探索实践 腾讯音乐/TME研发部/朱明鹏 现任腾讯音乐人平台前端组长 从业11年，专注于效能工具的设计研发 曾出版企业低码实践书籍《活动中台》 大纲 1、优化前端开发模式&流程 2、D2C转码技术的关键实现 3、低码与D2C合力完成“端到端” 4、总结与展望 1.优化前端开发模式&流程 1.1现状前端模式 1.2发现的问题 1.3探索方案 1.4流程链路 现状前端开发模式 工程化开发 低代码开发 类型：存量项目、体系的项目。 特点：逻辑复杂、复用性低、低配置性。 类型：B端管理系统、C端运营页 特点：组件、模版可复用、逻辑可配置、高配置性。 发现的问题 “研发还原度低，很明显的问题没有发现。” “设计走查太浪费时间，细节问题多，按时上线 都有风险。” 设计师要“效果”好 研发要“效率”高 “哪种开发模式都绕不开切图还原设计稿，过程成就感低。”“一些显而易见的业务和组件，能不能自动生成？” “还要用走查工具去细节比较，我想专注更有价值的工作。” 探索方案 Desginto</> 设计稿图层节点识别组件图层 计算节点 训练模型 UI代码组件代码 流程链路 D2C 设计稿 转码组件识别 上架低码 本地工程 2.D2C转码技术的关键实现 2.5设计稿清洗 2.6图标合并 2.7还原空间关系 2.8分行分列 2.9提取循环节点 2.10转化样式 2.11构建骨架 2.12多平台生成 D2C转码关键实现/1.设计稿清洗/去除干扰元素 1.去除干扰元素 识别无效元素，确保生成的结构不包含冗余代码。 非可视区域 透明元素 完全遮挡元素 隐藏、空元素 宽高异常元素 视觉干扰元素 D2C转码关键实现/1.设计稿清洗/合并&转换节点 1.合并&转换节点 将设计稿中的图层，统一封装成标准的四种元素。 1.原始节点合并 1.节点增加类型 2.标记切图 图标图片容器文本 #ICON#IMG D2C转码关键实现/2.图标合并 图标二次合并 多元素组成图标的情况 合并策略 尺寸阈值&&类型+（相切、相交、包含） 现实问题 实际合并后，层级发生不正确覆盖 解决方案 检测图标组成元素的层级，二次裁剪后合并 D2C转码关键实现/3.还原空间关系 包含-父子关系 相交–任意定位 相离–正常定位 子元素需要矫正透明度、旋转、背景等属性。任意定位元素有相对父级 相离的节点，进入分行分列计算 D2C转码关键实现/4.分行分列 row B Acolcol C ABC 求多个连续区间在某个方向上的并集 D2C转码关键实现/思考 AB A、B、C C规律：依次分行分列？ 标题1 标题2 标题3 D2C转码关键实现/4.分行分列/最优布局算法 1 2 3 4 5 分行分列? 6 7 分列分行? D2C转码关键实现/4.分行分列/最优布局算法 3 123 1 5 6 1.分别求行列布局特征 2 67 4 7 求【行】布局特征 每一行布局特征：上、中、下 求【列】布局特征 每一列布局特征：左、中、右 54 结论：6个布局特征中，最小【斜率】特征的归属，则为最优布局 标 题 标 标 标题3 题1 标 2 题3 D2C转码关键实现/4.分行分列/最优布局算法 题1标题2 思考：当特征【斜率】相等，该怎么分？ D2C转码关键实现/4.分行分列/最优布局算法 行相似度：2 2.对比行列相似度1 标题1标题2标题3 1 000列相似度：0 结论：行相似度>列相似度？分列：分行 D2C转码关键实现/思考 标题1标题2标题3 思考：如何提取可循环节点？ D2C转码关键实现/5.提取循环节点/提取相似元素 1、根据元素类型将元素进行相似提取 相似分组元素 噪点元素 D2C转码关键实现/5.提取循环节点/相似投影 2、对相似元素进行方向投影编组 D2C转码关键实现/5.提取循环节点/投影分组 3、对投影特征进行算法分组规则：分组队列中出现重复项，则单独成组，否则聚合继续检测。 111 1212 [1,1,1] [12,12] 12112 12212 [12,1,12] [12,2,12] D2C转码关键实现/5.提取循环节点/节点归组 4、将相似分组+噪声元素进行区块还原 噪声元素回填布局重塑 D2C转码关键实现/6.转化样式 基础类 baseStyle 宽度高度 横坐标纵坐标 旋转角度 效果类 effect 透明度阴影 填充背景混合模式 描边类 stroke 圆角边框样式 文字类 text 颜色字号行高字距粗细字体 D2C转码关键实现/7.构建骨架 分行分列 PT PT B MR PR PL MT A PR PL MB A ML B PB PB 瀑布流的特性：从上而下，从左到右 D2C转码关键实现/8.多平台生成 CodeSchema VueReact TaroHippy 理论上D2C技术可完成任何图形编码语言的静态UI还原需求 D2C转码关键实现/更多思考 图层集合 文本图标图片容器 没有含义和交互 思考：前面只完成切图工作，我们如何知道图层的含义？ 3.低码与D2C合力完成“端到端” 3.1基于YOLO完成目标识别 3.2搭建WEB训练平台 3.3存量组件识别 3.4低代码组件开发 3.5低码组件转化器 3.6人工介入 识别是什么组件转化真实组件代码 端到端的演进 设计端 样式还原是下限 代码还原是上限 1.节点合理布局 2.组件含义识别+功能还原 用户终端 端到端的演进/1.基于Yolo完成目标检测 目标检测 目标分类 语意分割实例分割 目标检测更符合组件识别的场景，单阶段的YOLO算法精度和速度都非常出色。 端到端的演进/1.基于Yolo完成目标检测/识别步骤 1.标注数据图片，收集YOLO训练数据2.调整训练参数，进行模型训练3.调用预测模型 问题：如何将模型训练和预测应用在WEB端？ 端到端的演进/2.构建训练WEB平台 数据源管理 上传本地图片下载在线图片 配置截图服务 图片标注 标注管理 矩形框选 放大缩小辅助标注 模型载入 配置标注组件标签语义标签 增删改 共享训练素材 在线模型WEB-SDK 1.收集训练数据 模型内网托管多任务预测 生成模型ID预测区域绘制 数据归档模型训练 2.在线生成标注数据 失败case上传 格式转换参数生成 预览/导出YOLO训练 组件间互不干扰团队间互不干扰 二次调整 过程观测 模型验证 4.使用预测模型完成检测 3.生成预测模型 端到端的演进/2.构建训练WEB平台/WEB模型导出应用 初始训练框架 训练端 模型转换 tensorflow_convertonnx-tftorch.onnx.export 模型文件 支持WEB端调用的模型 tfjsweb_model .onnx WEB端模型加载调用器 tensorflowjs onnxruntime-web 部署端 端到端的演进/思考 思考：难道所有的组件，都要经过模型训练，才能检测识别？ 模型训练量暴增，数据收集困难 端到端的演进/3.存量组件识别/采集标记 设计师采集节点 识别方案1：标记 选中图层节点清洗节点存储 设计师应用节点 选中组件拖拽至画布节点还原 端到端的演进/思考 思考：存量设计稿中，应用的组件太多，无法全量标记？ 识别方案2：视觉算法 端到端的演进/3.存量组件识别/视觉算法 1.边缘提取 去除色彩干扰，提高匹配准确度 业务组件 设计稿快照 灰阶图 组件的透明背景灰阶后是黑色 端到端的演进/3.存量组件识别/视觉算法 阈值0.7阈值0.4 SIFT算法 2.模版匹配 计算组件图与设计稿相似度高的位置 额外确定组件透明背景的边界 端到端的演进/3.存量组件识别/视觉算法 3.非最大值抑制 NMS去除重复检测结果和保留最优目标框 端到端的演进/3.存量组件识别/总结 基于CNN的目标检测模型基于视觉计算的检测算法 适用于变化多，尺寸、形状不固定的组件，如 按钮，表单等组件。 适用于尺寸固定，差异较小的组件，如业务卡 片等固化的搭配。 端到端的演进/图层如何转代码？ 含义：按钮 组件代码 工程代码 根据标识替换对应源码 接入低代码？ 端到端的演进/4.低代码组件开发 组件开发规范低码系统 子组件目录 UI代码配置代码 预设配置数据 端到端的演进/5.低码组件转换器 D2C输出结果 识别输入 组件标识 CodeSchema 转化器 基础组件 配置提取写入 按钮、热区、表单项、文本等（固定） 提取预定的配置并写入数据 复杂组件 UI层对比替换 歌单列表，播放卡片...保留变量，替换UI层 目标输出配置数据 component/setting.json 低代码组件 组件配置层 component/setting.ts 组件UI层 component/index.ts 端到端的演进/思考 思考：完成了图层转译，组件映射，是否完成了全链路？ 助，算法 缺少了真实场景上下文辅覆盖度约在95%。 组件间，与载体都会有逻辑关系，独立组件不足以满足完整需求。 依托低码平台，人工介入来完成最后一公里 端到端的演进/6.人工介入/预设配置 各业务团队可以根据自己的工程化需求，进行定制转化配置 预设全局脚本尺寸单位COS地址&前缀特殊字体上传 端到端的演进/6.人工介入/调整转化结果 节点删除/隐藏 处理冗余算法误伤的节点 二次节点编组 优化分组算法不正确划分 行列二次拆合 行列算法斜率、相似度的误差 上下文和开发习惯 自定义合图 解决合图算法误差&补充字体转图 端到端的演进/6.人工介入/低码能力复用 逻辑绑定 事件编排循环渲染条件渲染自定义方法 数据源绑定 事件编排自定义变量条件渲染自定义方法 元素配置 属性编辑样式编辑动画预设容器插槽 工程化能力 版本管理性能优化埋点监控远程调试 端到端的演进/6.人工介入/低码能力复用/逻辑绑定 让逻辑轻松被理解，低码交接无负担，逻辑快速被定位。 4.总结与展望 业务回顾 业务端 音乐人开平由你榜单生态厂牌 涉及多端提升30%人效 低码端 宣推活动线下演出管理后台 低码提效的基础上再次提升30% 上传设计稿 整体架构回顾 静态转化 清洗设计稿 还原节点关系 生成多端代码 desgin-to-ui-code 冗余元素删除蒙层裁剪 元素转换图标合并 父子关系 求最优布局策略 分行分列识别循环节点 构建样式全局元素注入 构建骨架多平台生成 动态映射 layer-to-component 在线模型训练&预测 数据采集模型训练模型验证模型应用 CV算法匹配推测 特征提取模版匹配阈值调整二次确认 接入低代码 code-to-development 组件转化器 低码组件开发配套转化器渲染变量提取 人工介入，二次调整 预设尺寸调整基础属性调整 节点二次重组节点二次合并 基础能力复用数据源接入动画设置 逻辑编排版本管理 未来展望 AGILLM AIGC Copilot 我需要一个中秋主题的歌单宣推H5页，头图有中秋和歌曲的元素，该页面主要内容是中秋相关的歌单列表。 歌单的歌曲需要根据去年的收藏量进行排序，并且歌曲数限制在10首。 拆解任务中… Tellmewhatyouneed? 逻辑交互 数据绑定样式动画出码转换 … THANKS