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

D2C&低代码在腾讯音乐人业务的探索实践D2C&低代码在腾讯音乐人业务的探索实践大大纲纲1 1、优优化化前前端端开开发发模模式式&流流程程2 2、D D2 2C C 转转码码技技术术的的关关键键实实现现3 3、低低码码与与D D2 2C C合合力力完完成成“端端到到端端”4 4、总总结结与与展展望望1 1.优优化化前前端端开开发发模模式式&流流程程1 1.1 1 现现状状前前端端模模式式1 1.2 2 发发现现的的问问题题1 1.3 3 探探索索方方案案1 1.4 4 流流程程链链路路现现状状前前端端开开发发模模式式低低代代码码开开发发工工程程化化开开发发类型：存量项目、体系的项目。特点：逻辑复杂、复用性低、低配置性。类型：B端管理系统、C端运营页特点：组件、模版可复用、逻辑可配置、高配置性。发发现现的的问问题题设设计计师师要要“效效果果”好好“研发还原度低，很很明明显显的的问问题题没有发现。”“设计走查太太浪浪费费时时间间，细节问题多，按时上线都有风险。”研研发发要要“效效率率”高高“哪种开发模式都绕不开切图还原设计稿，过过程程成成就就感感低低。”“一些显而易见的业务和组件，能不能自自动动生生成成？”“还要用走查工具去细节比较，我想专专注注更更有有价价值值的的工工作作。”探探索索方方案案设设计计稿稿图图层层节节点点D De es sg gi in n t to o D De es sg gi in n t to o 识识别别组组件件图图层层计计算算节节点点训训练练模模型型U UI I 代代码码组组件件代代码码流流程程链链路路设设计计稿稿上上架架低低码码转转码码组组件件识识别别本本地地工工程程D D2 2C C2 2.D D2 2C C 转转码码技技术术的的关关键键实实现现2 2.1 1 设设计计稿稿清清洗洗2 2.2 2 图图标标合合并并2 2.3 3 还还原原空空间间关关系系2 2.4 4 分分行行分分列列2 2.5 5 提提取取循循环环节节点点2 2.6 6 转转化化样样式式2 2.7 7 构构建建骨骨架架2 2.8 8 多多平平台台生生成成完完全全遮遮挡挡元元素素D D2 2C C 转转码码关关键键实实现现 /1 1.设设计计稿稿清清洗洗 /去去除除干干扰扰元元素素识识别别无无效效元元素素，确确保保生生成成的的结结构构不不包包含含冗冗余余代代码码。视视觉觉干干扰扰元元素素透透明明元元素素宽宽高高异异常常元元素素隐隐藏藏、空空元元素素非非可可视视区区域域1 1.去去除除干干扰扰元元素素歌歌手手D D2 2C C 转转码码关关键键实实现现 /1 1.设设计计稿稿清清洗洗 /合合并并&转转换换节节点点将将设设计计稿稿中中的的图图层层，统统一一封封装装成成标标准准的的四四种种元元素素。2 2.合合并并&转转换换节节点点1 1.原原始始节节点点合合并并 3 3.标标记记切切图图#ICON#IMG2 2.节节点点增增加加类类型型图图标标图图片片容容器器文文本本D D2 2C C 转转码码关关键键实实现现 /2 2.图图标标合合并并图图标标二二次次合合并并多多元元素素组组成成图图标标的的情情况况合合并并策策略略尺尺寸寸阈阈值值&类类型型 +（相相切切、相相交交、包包含含 ）现现实实问问题题实实际际合合并并后后，层层级级发发生生不不正正确确覆覆盖盖解解决决方方案案检检测测图图标标组组成成元元素素的的层层级级，二二次次裁裁剪剪后后合合并并D D2 2C C 转转码码关关键键实实现现 /3 3.还还原原空空间间关关系系子子元元素素需需要要矫矫正正透透明明度度、旋旋转转、背背景景等等属属性性。任任意意定定位位元元素素有有相相对对父父级级相相交交 任任意意定定位位包包含含 -父父子子关关系系相相离离 正正常常定定位位相相离离的的节节点点，进进入入分分行行分分列列计计算算D D2 2C C 转转码码关关键键实实现现 /4 4.分分行行分分列列A AB BC C求多个连续区间在某个方向上的并集r ro ow wc co ol lc co ol lA AC CB BD D2 2C C 转转码码关关键键实实现现 /思思考考A AB BC CA A、B B、C C 规规律律：依依次次分分行行分分列列？D D2 2C C 转转码码关关键键实实现现 /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个个布布局局特特征征中中，最最小小【斜斜率率】特特征征的的归归属属，则则为为最最优优布布局局求求【行行】布布局局特特征征每每一一列列布布局局特特征征：左左、中中、右右求求【列列】布布局局特特征征D D2 2C C 转转码码关关键键实实现现 /4 4.分分行行分分列列 /最最优优布布局局算算法法1 1.分分别别求求行行列列布布局局特特征征D D2 2C C 转转码码关关键键实实现现 /4 4.分分行行分分列列 /最最优优布布局局算算法法标标题题1 1标标题题2 2标标题题3 3标标题题1 1标标题题2 2标标题题3 3思思考考：当当特特征征【斜斜率率】相相等等，该该怎怎么么分分？D D2 2C C 转转码码关关键键实实现现 /4 4.分分行行分分列列 /最最优优布布局局算算法法标标题题1 1标标题题2 2标标题题3 3结结论论：行行相相似似度度 列列相相似似度度？分分列列 ：分分行行2 2.对对比比行行列列相相似似度度1 11 1行行相相似似度度：2 20 00 00 0列列相相似似度度：0 0 D D2 2C C 转转码码关关键键实实现现 /思思考考标标题题1 1标标题题2 2标标题题3 3思思考考：如如何何提提取取可可循循环环节节点点？D D2 2C C 转转码码关关键键实实现现 /5 5.提提取取循循环环节节点点 /提提取取相相似似元元素素1 1、根根据据元元素素类类型型将将元元素素进进行行相相似似提提取取相相似似分分组组元元素素噪噪点点元元素素D D2 2C C 转转码码关关键键实实现现 /5 5.提提取取循循环环节节点点 /相相似似投投影影2 2、对对相相似似元元素素进进行行方方向向投投影影编编组组D D2 2C C 转转码码关关键键实实现现 /5 5.提提取取循循环环节节点点 /投投影影分分组组3 3、对对投投影影特特征征进进行行算算法法分分组组 规则：分组队列中出现重复项，则单独成组，否则聚合继续检测。1 11 11 11 12 21 12 21 12 21 12 21 11 12 22 2 1 1,1 1,1 1 1 12 2,1 12 2 1 12 2,1 1,1 12 2 1 12 2,2 2,1 12 2 1 12 2D D2 2C C 转转码码关关键键实实现现 /5 5.提提取取循循环环节节点点 /节节点点归归组组4 4、将将相相似似分分组组 +噪噪声声元元素素进进行行区区块块还还原原噪噪声声元元素素回回填填布局重塑D D2 2C C 转转码码关关键键实实现现 /6 6.转转化化样样式式透透明明度度阴阴影影边边框框样样式式圆圆角角宽宽度度高高度度基基础础类类baseStyle效效果果类类effect描描边边类类stroke文文字字类类text横横坐坐标标纵纵坐坐标标颜颜色色字字号号行行高高字字距距粗粗细细字字体体填填充充背背景景混混合合模模式式旋旋转转角角度度D D2 2C C 转转码码关关键键实实现现 /7 7.构构建建骨骨架架A AB B瀑瀑布布流流的的特特性性：从从上上而而下下，从从左左到到右右PTPLPBPRMBMLA AB BPTPBPLPRMTMR分分行行分分列列D D2 2C C 转转码码关关键键实实现现 /8 8.多多平平台台生生成成理理论论上上 D D2 2C C 技技术术可可完完成成任任何何图图形形编编码码语语言言的的静静态态U UI I还还原原需需求求V Vu ue eR Re ea ac ct tT Ta ar ro oH Hi ip pp py yC Co od de e S Sc ch he emma aD D2 2C C 转转码码关关键键实实现现 /更更多多思思考考图图层层集集合合文本图标图片容器思思考考：前前面面只只完完成成切切图图工工作作，我我们们如如何何知知道道图图层层的的含含义义？没没有有含含义义和和交交互互3 3.低低码码与与D D2 2C C合合力力完完成成“端端到到端端”3 3.1 1 基基于于 Y YO OL LO O 完完成成目目标标识识别别3 3.2 2 搭搭建建WWE EB B训训练练平平台台3 3.3 3 存存量量组组件件识识别别3 3.4 4 低低代代码码组组件件开开发发3 3.5 5 低低码码组组件件转转化化器器3 3.6 6 人人工工介介入入识识别别是是什什么么组组件件转转化化真真实实组组件件代代码码样样式式还还原原是是下下限限代代码码还还原原是是上上限限端端到到端端的的演演进进设设计计端端用用户户终终端端2 2.组组件件含含义义识识别别 +功功能能还还原原1 1.节节点点合合理理布布局局 端端到到端端的的演演进进 /1 1.基基于于 Yolo 完完成成目目标标检检测测目目标标分分类类目目标标检检测测语语意意分分割割实实例例分分割割目目标标检检测测更更符符合合组组件件识识别别的的场场景景，单单阶阶段段的的 YOLO 算算法法精精度度和和速速度度都都非非常常出出色色。端端到到端端的的演演进进 /1 1.基基于于 Yolo 完完成成目目标标检检测测 /识识别别步步骤骤1 1.标标注注数数据据图图片片，收收集集Y YO OL LO O训训练练数数据据2 2.调调整整训训练练参参数数，进进行行模模型型训训练练3 3.调调用用预预测测模模型型问问题题：如如何何将将模模型型训训练练和和预预测测 应应用用在在WWE EB B端端？端端到到端端的的演演进进 /2 2.构构建建训训练练WWE EB B平平台台上上传传本本地地图图片片下下载载在在线线图图片片数数据据源源管管理理配配置置标标注注组组件件标标签签语语义义标标签签1 1.收收集集训训练练数数据据格格式式转转换换数数据据归归档档模模型型训训练练3 3.生生成成预预测测模模型型Y YO OL LO O训训练练模模型型验验证证参参数数生生成成预预览览/导导出出过过程程观观测测矩矩形形框框选选图图片片标标注注标标注注管管理理2 2.在在线线生生成成标标注注数数据据放放大大缩缩小小增增删删改改模模型型载载入入辅辅助助标标注注模模型型内内网网托托管管在在线线模模型型WWE EB B-S SD DK K4 4.使使用用预预测测模模型型完完成成检检测测预预测测区区域域绘绘制制失失败败c ca as se e上上传传多多任任务务预预测测二二次次调调整整生生成成模模型型I ID D配配置置截截图图服服务务组组件件间间互互不不干干扰扰团团队队间间互互不不干干扰扰共共享享训训练练素素材材端端到到端端的的演演进进 /2 2.构构建建训训练练WWE EB B平平台台 /WWE EB B模模型型导导出出应应用用t te en ns so or rf fl lo ow w_ _c co on nv ve er rt to on nn nx x-t tf ft to or rc ch h.o on nn nx x.e ex xp po or rt t.o on nn nx xt tf fj js s w we eb b_ _mmo od de el l初初始始训训练练框框架架模模型型转转换换支支持持WWE EB B端端调调用用的的模模型型WWE EB B端端模模型型加加载载调调用用器器o on nn nx xr ru un nt ti imme e-w we eb bt te en ns so or rf fl lo ow wj js s模模型型文文件件训训练练端端部部署署端端端端到到端端的的演演进进 /思思考考思思考考：难难道道所所有有的的组组件件，都都要要经经过过模模型型训训练练，才才能能检检测测识识别别？模模型型训训练练量量暴暴增增，数数据据收收集集困困难难端端到到端端的的演演进进 /3 3.存存量量组组件件识识别别 /采采集集标标记记选选中中图图层层节节点点清清洗洗节节点点存存储储选选中中组组件件拖拖拽拽至至画画布布节节点点还还原原设设计计师师采采集集节节点点设设计计师师应应用用节节点点识识别别方方案案1 1：标标记记端端到到端端的的演演进进 /思思考考思思考考：存存量量设设计计稿稿中中，应应用用的的组组件件太太多多，无无法法全全量量标标记记？识识别别方方案案2 2：视视觉觉算算法法端端到到端端的的演演进进 /3 3.存存量量组组件件识识别别 /视视觉觉算算法法1 1.边边缘缘提提取取去去除除色色彩彩干干扰扰，提提高高匹匹配配准准确确度度业业务务组组件件设设计计稿稿快快照照灰灰阶阶图图组组件件的的透透明明背背景景灰灰阶阶后后是是黑黑色色端端到到端端的的演演进进 /3 3.存存量量组组件件识识别别 /视视觉觉算算法法2 2.模模版版匹匹配配计计算算组组件件图图与与设设计计稿稿相相似似度度高高的的位位置置S SI IF FT T算算法法额额外外确确定定组组件件透透明明背背景景的的边边界界阈阈值值0 0.7 7阈阈值值0 0.4 4端端到到端端的的演演进进 /3 3.存存量量组组件件识识别别 /视视觉觉算算法法3 3.非非最最大大值值抑抑制制N NMMS S去去除除重重复复检检测测结结果果和和保保留留最最优优目目标标框框端端到到端端的的演演进进 /3 3.存存量量组组件件识识别别 /总总结结基基于于 C CN NN N 的的目目标标检检测测模模型型基基于于视视觉觉计计算算的的检检测测算算法法适适用用于于变变化化多多，尺尺寸寸、形形状状不不固固定定的的组组件件，如如按按钮钮，表表单单等等组组件件。适适用用于于尺尺寸寸固固定定，差差异异较较小小的的组组件件，如如业业务务卡卡片片等等固固化化的的搭搭配配。端端到到端端的的演演进进 /图图层层如如何何转转代代码码？含含义义：按按钮钮组组件件代代码码工工程程代代码码根根据据标标识识替替换换对对应应源源码码接接入入低低代代码码？端端到到端端的的演演进进 /4 4.低低代代码码组组件件开开发发组组件件开开发发规规范范子子组组件件目目录录U UI I 代代码码配配置置代代码码预预设设配配置置数数据据低低码码系系统统端端到到端端的的演演进进 /5 5.低低码码组组件件转转换换器器目目标标输输出出配配置置数数据据c co ommp po on ne en nt t/s se et tt ti in ng g.j js so on n组组件件U UI I层层c co ommp po on ne en nt t/i in nd de ex x.t ts s组组件件配配置置层层c co ommp po on ne en nt t/s se et tt ti in ng g.t ts s识识别别输输入入C Co od de e S Sc ch he emma a组组件件标标识识按按钮钮、热热区区、表表单单项项、文文本本等等（固固定定）提提取取预预定定的的配配置置并并写写入入数数据据 基基础础组组件件配配置置提提取取写写入入歌歌单单列列表表，播播放放卡卡片片 .保保留留变变量量，替替换换U UI I层层复复杂杂组组件件U UI I层层对对比比替替换换转转化化器器低低代代码码组组件件D D2 2C C 输输出出结结果果端端到到端端的的演演进进 /思思考考思思考考：完完成成了了图图层层转转译译，组组件件映映射射，是是否否完完成成了了全全链链路路？缺缺少少了了真真实实场场景景上上下下文文辅辅助助，算算法法覆覆盖盖度度约约在在9 95 5%。组组件件间间，与与载载体体都都会会有有逻逻辑辑关关系系，独独立立组组件件不不足足以以满满足足完完整整需需求求。依依托托低低码码平平台台，人人工工介介入入来来完完成成最最后后一一公公里里端端到到端端的的演演进进 /6 6.人人工工介介入入 /预预设设配配置置预预设设全全局局脚脚本本尺尺寸寸单单位位C CO OS S地地址址&前前缀缀特特殊殊字字体体上上传传各各业业务务团团队队可可以以根根据据自自己己的的工工程程化化需需求求，进进行行定定制制转转化化配配置置端端到到端端的的演演进进 /6 6.人人工工介介入入 /调调整整转转化化结结果果 节节点点删删除除 /隐隐藏藏处处理理冗冗余余算算法法误误伤伤的的节节点点二二次次节节点点编编组组优优化化分分组组算算法法不不正正确确划划分分自自定定义义合合图图解解决决合合图图算算法法误误差差&补补充充字字体体转转图图行行列列二二次次拆拆合合行行列列算算法法斜斜率率、相相似似度度的的误误差差上上下下文文和和开开发发习习惯惯端端到到端端的的演演进进 /6 6.人人工工介介入入 /低低码码能能力力复复用用逻逻辑辑绑绑定定事事件件编编排排循循环环渲渲染染条条件件渲渲染染自自定定义义方方法法数数据据源源绑绑定定事事件件编编排排自自定定义义变变量量条条件件渲渲染染自自定定义义方方法法元元素素配配置置属属性性编编辑辑样样式式编编辑辑动动画画预预设设容容器器插插槽槽工工程程化化能能力力版版本本管管理理性性能能优优化化埋埋点点监监控控远远程程调调试试端端到到端端的的演演进进 /6 6.人人工工介介入入 /低低码码能能力力复复用用 /逻逻辑辑绑绑定定让让逻逻辑辑轻轻松松被被理理解解，低低码码交交接接无无负负担担，逻逻辑辑快快速速被被定定位位。4 4.总总结结与与展展望望宣宣推推活活动动线线下下演演出出管管理理后后台台业业务务回回顾顾低低码码端端业业务务端端低低码码提提效效的的基基础础上上再再次次提提升升3 30 0%音音乐乐人人开开平平由由你你榜榜单单生生态态厂厂牌牌涉涉及及多多端端提提升升3 30 0%人人效效上上传传设设计计稿稿整整体体架架构构回回顾顾动动态态映映射射l la ay ye er r-t to o-c co ommp po on ne en nt t静静态态转转化化d de es sg gi in n-t to o-u ui i-c co od de e清清洗洗设设计计稿稿冗冗余余元元素素删删除除图图标标合合并并蒙蒙层层裁裁剪剪元元素素转转换换还还原原节节点点关关系系父父子子关关系系识识别别循循环环节节点点求求最最优优布布局局策策略略分分行行分分列列生生成成多多端端代代码码构构建建样样式式全全局局元元素素注注入入构构建建骨骨架架多多平平台台生生成成在在线线模模型型训训练练&预预测测数数据据采采集集模模型型训训练练模模型型验验证证模模型型应应用用C CV V算算法法匹匹配配推推测测特特征征提提取取模模版版匹匹配配阈阈值值调调整整二二次次确确认认接接入入低低代代码码c co od de e-t to o-d de ev ve el lo op pmme en nt t组组件件转转化化器器低低码码组组件件开开发发配配套套转转化化器器人人工工介介入入，二二次次调调整整预预设设尺尺寸寸调调整整节节点点二二次次合合并并基基础础属属性性调调整整节节点点二二次次重重组组渲渲染染变变量量提提取取基基础础能能力力复复用用数数据据源源接接入入版版本本管管理理动动画画设设置置逻逻辑辑编编排排未未来来展展望望A AI IG GC CA AG GI I L LL LMM我需要一个中秋主题的歌单宣推H5页，头图有中秋和歌曲的元素，该页面主要内容是中秋相关的歌单列表。歌单的歌曲需要根据去年的收藏量进行排序，并且歌曲数限制在10首。拆解任务中T Te el ll l mme e w wh ha at t y yo ou u n ne ee ed d?逻逻辑辑交交互互数数据据绑绑定定样样式式动动画画出出码码转转换换C Co op pi il lo ot tT TH HA AN NK KS S