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

如果无法正常显示，请先停止浏览器的去广告插件。

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.