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

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-24 19:11
浙ICP备14020137号-1 $访客地图$