《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端运营页特点:组件、模版可复用、逻辑可配置、高配置性。发现的发现的问题问题设计师要设计师要“效果效果”好好“研发还原度低,很明显的问题很明显的问题没有发现。”“设计走查太太浪费时间浪费时间,细节问题多,按时上线都有风险。”研发要研发要“效率效率”高高“哪种开发模式都绕不开切图还原设计稿,过程过程成就感低成就感低。”“一些
3、显而易见的业务和组件,能不能自动生成自动生成?”“还要用走查工具去细节比较,我想专注更有价值的工作专注更有价值的工作。”探索方案探索方案设计稿图层节点设计稿图层节点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