如何为搭建物料智能生成代码 - 自动编码

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
1. - 智能⽣生成代码 淘宝 - 妙净(周婷婷)- 202003
2. imgcook 演示
3. ⼤大纲 1. imgcook 背景 前端⾏行行业提效分析 智能化⾏行行业提效分析 2. imgcook 介绍 功能服务 产品数据 产品技术架构 3. 核⼼心技术难点 UI 智能识别表达拆解 UI 信息架构识别 逻辑代码⽣生成 4. 总结
4. imgcook 背景 - 起源 年年增模块10000+ 年年增⻚页⾯面 100w+
5. imgcook 背景 - 发展历程 ⽬目标 全链路路前端研发提效,提效 40% - 60% PRD 交互稿 视觉稿 视图代码 HTML+CSS 产品经理理 交互设计师 视觉设计师 前端 逻辑代码 Javascript 数据处理理 Data 线上⻚页⾯面 前端 前端/开发 ⽤用户 定位升级 1.0 2.0 3.0 达芬奇 imgcook imgcook Sketch ⽣生成 UI 代码⼯工具 前端代码智能⽣生成平台 多⻆角⾊色协作智能 0 研发平台 增加业务逻辑、全链路路智能化、平台扩展性 基于 PRD 需求结构化 CV + NLP(图层分析+语义化)
6. imgcook 背景 - 前端⾏行行业提效分析 PROCODE: 基于代码做 bottom-up 式研发,成本⾼高昂 前端 } LOWCODE: 代码⽣生产物料料零件,可视化⽤用于组装,复杂逻辑可视化配置,整体提效 前端 可视化搭建 NOCODE: ⾮非编程⼈人员直接使⽤用可视化搭建能⼒力力进⾏行行⽣生产,转移⽣生产关系,释放前端 ⾮非编程⼈人员 可视化搭建 AUTOCODE: 根据设计图纸或需求⽂文档⾃自动⽣生产零件进⾏行行组装,低成本低⻔门槛 设计图纸 需求⽂文档 AUTOCODE + 可视化⼲干预 PROCODE + webIDE PROCODE hpaPaaS code
7. imgcook 背景 - 智能化相关⾏行行业提效分析 智能化的⼯工业 4.0 演进 智能化的⼯工业 4.0 组成和⽀支撑 策略略抓⼿手维度: 1.⾼高效:精益⽣生产提升设备&员⼯工效率 2.集成:与ERP、PCS⽆无缝对接 3.优质:完整标准化产品质量量体系管理理 4.协作:供应商协同商务管理理 5.智能:制造过程智能化 6.可视:制造过程可视化 全国⾸首个全⾃自动化智能码头-厦⻔门远海海 ⾏行行业之⺟母的⾦金金融⾏行行业-智能银⾏行行⽹网点 减⽹网点⾯面积、减柜员、减成本 超级柜台机、⾃自助购汇机、虚拟柜员机 ⼯工业 4.0 领头⽺羊 节省能源 25%+ 效率提升 20% ⼀一线⼈人员减少 70% ⽹网点瘦身 员⼯工转型 ⽹网点操作类⼈人员占⽐比下降15%, 整体减 少 0.3%,⽹网点⽹网均操作类柜员减少2.8 ⼈人,厅堂营销服务⼈人员增加1.6⼈人,通 过培训,⽹网点复合型⼈人才提升⾄至90% 业界智能化后成果衡量量维度: 效率提升 某类⼈人员减少,某类⼈人员升级转型 增质:带来业务增量量、产品质量量提升 节能 主流:增质提效
8. imgcook 介绍 i. 产品⽬目标 ii. 产品⼤大图 iii. 产品数据 iv. 技术⼤大图
9. imgcook 介绍- ⽬目标 全链路路前端研发提效,提效 40% - 60% PRD 交互稿 视觉稿 视图代码 HTML+CSS 产品经理理 交互设计师 视觉设计师 前端 逻辑代码 Javascript 数据处理理 Data 线上⻚页⾯面 前端 前端/开发 ⽤用户
10. imgcook 介绍 - 核⼼心功能 识别 深度学习 传统机器器 学习 表达 专家系统 算法⼯工程 UICode + LogicCode 90% 70%
11. imgcook 介绍 - 产品使⽤用动线 导⼊入(⼊入料料) 可视化⼲干预 ⽣生成代码 (DSL⾃自定义) 进⼯工程链路路 团队⾼高级⾃自定义 导出 Plugin generator-react generator-rax plugin-generate plugin-images DSL React Vue Rax DinamicX html taro
12. imgcook 介绍 - 产品⼤大图 场景 C 端营销 VSCode 插件 React C 端频道 ⼩小程序 进⼯工程链路路 编辑器器操作 外部社区 团队配置 WebIDE 插件 imgcook-cli 出码 编辑器器操作 Plugin设置 Vue DSL设置 … Rax 业务组件设置 可视化⼲干预编辑器器 视觉编排 编辑器器操作 数据编排 交互编排 数据实体设置 sketch视觉稿 ⼊入料料 编辑器器操作 psd视觉稿 字段绑定设置 图⽚片 开放服务 Plugin开放服务 DSL开放服务 模型开放服务(内部) 样本⾃自动⽣生成器器 UI 特征识别产品服务 逻辑编排 智能化理理解 中后台 业务逻辑库设置 NLP ⽂文本产品服务 业务逻辑库服务
13. imgcook 介绍 - 使⽤用情况 数据规模 提效、可⽤用率 内部双⼗十⼀一营销模块研发提效:约提升 43.6%,平均耗时 203.11 min ⽣生产模块数 20000+ 服务内外⽤用户 8000+ 跨 BU 合作 UC 浮云⼴广告模块⽣生产 阿⾥里里妈妈设计师模块量量产 阿⾥里里健康⻤鬼斧智能化研发 CBU UDPL 模块敏敏捷开发 阿⾥里里云营销坑位零开发 …… ⽇日常营销模块研发提效:约提升 59.81%,平均耗时 144.68 min 可⽤用率 78.93% = 模板代码 70.51% + 样式代码 80.69% + 逻辑代码 49.30%
14.
15. 核⼼心技术难点 UI 智能识别表达拆解 UI 信息架构识别 逻辑代码智能⽣生成
16. 核⼼心技术难点 - 智能识别表达拆解 识别 数据描述 图像描述 样式描述 ⽂文本描述 属性描述 ⾊色块描述 逻辑描述 物料料描述 …… 表达 + 素材输⼊入 ⽣生产 = 代码输出 ? DSL 逻辑物料料 UI 物料料 基础物料料 物料料属性配置 ⾃自定义物料料 …… 动态字段 渲染逻辑 循环状态 数据请求 交互逻辑 埋点逻辑 …… React Vue Rax HTML Miniapp ……
17. 核⼼心技术难点 - 智能识别表达拆解 - 技术分层 Sketch 设计稿 识别 图层处理理层 物料料识别层 Sketch 插件处理理 ⻚页⾯面分割 图层再加⼯工层 ⽆无⽤用图层检测 布局算法⽣生成布局 通⽤用布局算法 图像PNG/JPG PSD 设计稿 PS CEP 插件处理理 业务模块识别 图像图层分离+样式提取 业务组件识别 规则形状图层检测 图层规则处理理 基础组件识别 控件识别 图层合并 原始图层信息 预处理理后的图层信息 元素最⼤大宽⾼高 ⽂文本横向⾃自适应 循环检测 相对定位的语义化后的类vdom 语义化 通⽤用语义流程 字段绑定 数据类型规则 业务逻辑 可视化编排 DSL开放层 表达 ⼯工程 通⽤用逻辑节点 逻辑编排 Rax imgcook-cli 布局样式权重 图像分类模型 是否静态⽂文案 图⽚片绑定 React 视觉编排 Vue ⼩小程序IDE ⽂文本字段绑定模型 字段绑定后的的类vdom json 图推⽂文本意图 NLP逻辑推荐 数据编排 iconfont 模型 交互编排 DinamicX webIDE ⾏行行为召回 ⼩小程序 DSL …
18. 核⼼心技术难点 - UI 信息架构识别 form 应⽤用程序 APP table ⻚页⾯面 模块/区块 原⼦子模块/区块 业务组件 基础组件 Page Block/ Module Atomic Module Business Component Basic Component item item item item item item item 券 券 item btn btn shop shop shop shop shop shop shop shop shop shop shop shop shop shop shop shop shop shop shop shop user user user user user user user user user user ⻚页⾯面分割模型 单模型识别某⼀一类特征,多模型协作 当下策略略:由⼤大到⼩小,由外到内 成组模型 业务组件模型 基础组件模型 div image
19. 核⼼心技术难点 - UI 信息架构 - 识别策略略 ⻚页⾯面分割模型 Block Block 基础组件识别 局部布局样式树⽣生成 Slider 区块内布局 分组模型 循环结构识别⽣生成 Block Block Page Tabbar BottomBar
20. 核⼼心技术难点 - 基础组件识别 - ⽬目标检测 基础组件物料料 Tabbar 训练样本 业务组件物料料 特征学习 深度学习 基础组件物料料 基础组件物料料 BottomBar 训练样本
21. 核⼼心技术难点 - 基础组件识别 - ⽬目标检测模型 问题定义 样本⽣生成 算法选型 训练 预测 mAP 75% SSD YoLo Detectron2 正样本、负样本 ⼿手动标注+⾃自动 Pascal VOC
22. 核⼼心技术难点 - AutoCode 平台 UI 架构识别结果 ⻚页⾯面层级结构语义分割 ⻚页⾯面还原渲染 物料料⾃自定义属性配置
23. 核⼼心技术难点 - 逻辑物料料问题分析
24. 核⼼心技术难点 - 逻辑物料料问题分析 触发条件 触发条件 触发条件 触发条件 life cycle event drive timer event drive Action 1 State1 Action 2 State2 数据流 数据绑定 OP 数据驱动UI • • • 触发时机 触发操作 OP lifecycle • • event drive timer 数据绑定 处理理操作op • op 内容 • op 出⼊入参 • op 顺序 Action 3 State3 Action 4 State4 串串⾏行行 并⾏行行 循环 条件判断 …… State
25. 核⼼心技术难点 - 逻辑物料料识别器器、表达器器 表达器器 识别器器 UI物料料特征识别器器 表达协议 识别结果协议 • • • 触发时机 触发操作 OP lifecycle • • event drive timer ⽂文本NLP识别器器 ⾃自定义函识别器器 识别 逻辑意图 表达 数据绑定 处理理操作op • op 内容 • op 出⼊入参 • op 顺序 视图变化表达器器 数据绑定表达器器 正则识别器器 事件绑定表达器器 默认识别器器 函数块 OP 表达器器 输⼊入源 视觉稿 ⼈人⼯工规则 输⼊入源 ⼈人⼯工规则 函数语义分析
26. 核⼼心技术难点 - 逻辑物料料识别表达 识别 表达 视图 数据绑定 函数OP 通⽤用逻辑 ⼈人⼯工规则-循环逻辑 识别器器 Add Loop loop=Shops ⽆无 掉坑逻辑 ⼈人⼯工规则-通⽤用逻辑 识别器器 ⽆无 ⽆无 SliceFloor(gSize) ⽂文本NLP 识别器器 ⽆无 innerText= Shop.ActPrice ⽆无 UI特征 识别器器 type —> CustomCoupon data= [Shop, data] ⽆无 ⽆无 source= Shop.customImg AddImg2Data() 活动价 ⾃自定义组件 ⾃自定义逻辑 (纹理理图识别) ⼈人⼯工规则-⾃自定义函数 识别器器
27. 核⼼心技术难点- 业务逻辑智能⽣生成-业务逻辑库 各业务 新建业务逻辑库 新建逻辑分类 逻辑识别器器 逻辑表达器器 样本⽣生产、增强 模型训练 验证上线
28. 未来展望 前端端智能域 前端智能研发域 智能研发解决⽅方案 前端端智能业务解决⽅方案 C 端研发解决⽅方案 淘系天⻢马模块⼯工坊 B 端研发解决⽅方案 uc-浮云 alimama-boom 阿⾥里里健康-VTM aliyun-homon CBU-UDPL 淘系-智能UI CCO-or 淘系-iceluna 图像感知类 ⽬目标检测-五官-AR美妆 跳失点预测 ⽬目标检测-表情-营销玩法 回退推荐预测 youku-好莱坞 智能⽣生成代码平台 ⾯面向前端的从设计⽣生成代码的研发平台 前端端智能组件库 ⾯面向⾮非编程⼈人员的从需求⽣生成代码的研发平台 智能代码⽣生成引擎 imgcook Design2Code PRD2Code Service2Code ⽤用户意图类 采集数据 触发时机库 获取数据 交互响应库 ⽤用户⾏行行为标准 Code2Code 算法⼯工程-pipcook 样本⽣生成-samplecook 数据处理理 模型配置 模型训练 部署 基础框架 tensorflowjs-node tensorflowjs(mnnjs) …
29. 团队⻛风采 ⽤用诗⼈人的浪漫和科学家的严谨打造最懂 AI 的 smart and international 的前端团队 淘系 D2C 团队:甄⼦子、妙净、波本、卡狸、缺⽉月、笑翟、知浅、 苏川、浩知、南纪、芸明、正寻、画北北 淘宝商家与开放团队:洛洛丹丹、⼦子肃、古泽、翊⽞玄 UC 团队:喜奔、⽥田⾕谷、任宏亮、臧阳阳 闲⻥鱼团队:⻘青⻚页、仝辉、楚丰、深宇 拍卖团队:剑平、怀天、莱斯、奉⾬雨 优酷团队:倪欧、琰⽟玉、郭晓路路 CCO 团队:天可、清⽻羽 淘宝设计部团队:秒杀、英哲、⻜飞⻜飞 此时此刻,⾮非我莫属 欢迎加⼊入我们! https://www.imgcook.com/docs?slug=about-us
30. QA imgcook.com 钉钉答疑群 https://www.imgcook.com/docs?slug=about-us 微信交流
31.

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.123.1. UTC+08:00, 2024-03-29 23:55
浙ICP备14020137号-1 $访客地图$