《前端智能化实践》——逻辑代码生成

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

1. 《前端智能化实践》——逻辑代码⽣生成甄⼦子（甄焱鲲）

2. 初⼼心⽬目标（机器器视觉+机器器学习）+ 设计稿/图⽚片 = 统⼀一协作界⾯面 D2C 特征⽀支持PS、Sketch设计稿/图⽚片或线框图⽣生成 UI代码，UI语义化理理解基础上⾃自动绑定数据或部分交互逻辑，⽀支持简单动效代码⽣生成。 PRD PRD 交互稿设计稿 UI开发动效开发交互设计师视觉设计师程序员程序员机器器视觉+机器器学习部分替代程序员开发⼯工作逻辑开发联调上线程序员程序员测试⼯工程师

3. ⾥里里程碑碑 ▪ imgcook.com平台：模块数 12389 个，项⽬目数 3706 个，⽤用户数 4239 个 ▪ DSL：总数 107 个 18 个租户数： ▪ imgcook CLI: 安装总数 778 次 2019.5 2019.7 DSL和Cli VSCode 插件：安装总数站点和算法⼯工程 2019.9 站点体验优化，逻辑梳理理并重构  算法⼯工程基础搭建 DSL开放V2版本：优化 DSL编写  Cli V1发布双⼗十⼀一零研发开放平台和Cli 算法⼯工程 DSL开放V1版本、Cli alpha版发布 API开放，API使⽤用统计，限制API每⽇日调⽤用次数，CLI完整开发链路路基于Tensorflow.js链路路重构发布imgcook.com/labs 开放⾃自定义能⼒力力 2019.8 2019.11 80%逻辑代码⾃自动⽣生成 UI Code准确率92% CSS Code准确率81% ⾯面向外部开发者开放 2019.6 375 次 Escher开源 2019.10

4. 指标度量量 imgcook ⽣生成的代码（最后⼀一次智能还原） 1.指标获取⽅方式 Imgcook 还原保存保存还原保存保存保存保存保存 Gitlab publish/0.0.1 publish/0.0.2 publish/0.0.2 Master 线上代码（还原后最近的⼀一次）线上代码 2.指标计算⽅方式总⾏行行数：online 新增⾏行行数：add ⽂文件代码diff imgcook代码总⾏行行数：imgcook 删除⾏行行数：delete imgcook - delete % online 即 imgcook 在线上代码中留留存的⽐比值

5. UI Code 迭代模型3 ⽬目标检测模型4 布局算法 img: 具体图⽚片； text: 具体⽂文字内容； view: 容器器 iconfont：图标 { [left:xx,top:xx,width:xx,height:xx], [left:xx,top:xx,width:xx,height:xx] [left:xx,top:xx,width:xx,height:xx] [left:xx,top:xx,width:xx,height:xx] } 模型1 fastRNN 、YOLO 算法原则"look at once" <style> .btn{color:#333 margin:0} </style> <body> <div class=“btn”> helloworld </div> </body> img:检测样式识别类型识别 JPG 语义识别 text:NLP 模型2 测量量算法 JSON ⽣生成算法 text：token(float/flex)? /color/fontSize/fontFamily/bgcolor image: border/圆⻆角(opencv 曲率)、… view: bgcolor、border、圆⻆角 DSL 模型5

6. Logic Code 启航业务场景层 sketch稿直接⽣生成代码 PSD稿直接⽣生成代码设计能⼒力力能⼒力力层⼯工程层在线视觉设计 sketch插件 PSD插件 JPG解析插件动效设计视图代码⽣生成能⼒力力布局转化逻辑代码⽣生成能⼒力力数据绑定基础能⼒力力⾃自动化测试前端⼯工程已⽀支持静态图⽚片直接⽣生成代码合理理嵌套算法⼯工程待改进语义化数据处理理截图 DSL+代码模板事件预览代码可视化可逆发布协议规范未⽀支持通⽤用

7. ⽬目录 Part1. UI Code到Logic Code有多远？ Part2. ⻚页⾯面结构和数据结构的视⻆角 Part3. 赋予开发者⾃自定义的能⼒力力 Part4. 前端智能化的未来

8. ⽬目录 Part1. UI Code到Logic Code有多远？ Part2. ⻚页⾯面结构和数据结构的视⻆角 Part3. 赋予开发者⾃自定义的能⼒力力 Part4. 前端智能化的未来

9. 翻译原理理英⽂文中⽂文 Any language 基于语义关系的抽象 TARGET LANGUAGE

10. ⽂文本的信息架构 W2V——空间 ED——语义 LSTM——时间 …… 书⽂文章节段句句词

11. UI 的信息架构 form 应⽤用程序 APP 是否可租户配置⻚页⾯面模块/区块原⼦子模块/区块 Block/ Page Atomic Module Module table 业务组件基础组件 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 NO Yes Yes Yes Yes 控件 div image

12. 翻译般⽣生成 Logic Code 视觉设计稿需求⽂文档基于逻辑的抽象 Logic Tree 线框图 / 交互稿 LOGIC CODE

13. UI Code到Logic Code有多远表达器器识别器器 • • • UI物料料特征识别⽂文本NLP识别识别结果协议识别逻辑抽象 Logic Tree 表达触发时机触发操作op lifecycle • • event drive timer 表达协议数据绑定处理理操作op • op 内容 • op 出⼊入参 • op 顺序视图逻辑数据绑定⾃自定义函数（正则等）识别事件绑定函数块 op 输⼊入源视觉稿⼈人⼯工规则输⼊入源⼈人⼯工规则函数语义分析

14. ⻚页⾯面结构和数据代表什什么 repeater 表达器器识别器器视图逻辑 View Model Data Model Trigger Processer 识别⼈人⼯工规则逻辑抽象 Logic Tree 表达表达协议数据绑定事件绑定权益｜条件⽂文案/加购输⼊入源视觉稿识别结果协议品牌/进品牌号店名/进店店名 / 进店⼦子业务数据品牌 / 进品牌号业务数据权益｜条件⽂文案 / 加购权益组件权益数据主视觉 / 主⾊色调基础样式背景 / 氛围业务样式函数块 op 输⼊入源⼈人⼯工规则函数语义分析

15. ⽬目录 Part1. UI Code到Logic Code有多远？ Part2. ⻚页⾯面结构和数据结构的视⻆角 Part3. 赋予开发者⾃自定义的能⼒力力 Part4. 前端智能化的未来

16. ⻚页⾯面结构梳理理 … 体验地址» 1vN Rows && Cols Cols_cols_rows ⼀一排N 横向 && 纵向循环循环嵌套 && ⾃自由组合

17. 智能绑定的基础相对定位布局 vdom JSON 通⽤用语义流程布局样式权重图⽚片分类模型 iconfont模型 w3c语义分类⽂文本分类模型分析决策层语义化置信度策略略应⽤用层智能绑定类名绑定业务模块对⽐比图⽚片字段绑定租户业务模型映射⽂文本字段绑定数据类型规则语义化 + 字段绑定 vdom JSON 是否静态⽂文案节点类型修正业务模块分类模型

18. ⻚页⾯面逻辑梳理理视图变化操作数据绑定操作事件绑定操作函数算⼦子编写依赖注⼊入数据绑定活动价函数算⼦子掉坑逻辑埋点(普通埋点) 视图变化数据绑定埋点(实时埋点) 视图变化数据绑定埋点组件依赖埋点组件依赖加载更更多(下滑式) 事件绑定函数算⼦子加载更更多(点击式) 事件绑定函数算⼦子体验地址»

19. Logic Code⽣生成实例例识别循环表达 (基⽯石) 布局逻辑识别器器 gSize  Shops, Shop Add Loop loop=Shops ⽆无掉坑逻辑⼈人⼯工配置识别器器⽆无⽆无⽆无 SliceFloor(gSize) 活动价⽂文本NLP 识别器器 Expression: Shop.ActPrice ⽆无 innerText= Shop.ActPrice ⽆无⾃自定义组件 UI检测识别器器⽆无 type —> CustomCoupon data= [Shop, data] ⽆无⾃自定义逻辑（纹理理图识别）函数编写识别器器 MapList= [A, B, C] ⽆无 source= Shop.customImg AddImg2Data()

20. Logic Code 的基础相对定位布局 vdom JSON 通⽤用语义流程布局样式权重图⽚片分类模型 iconfont模型 w3c语义分类⽂文本分类模型分析决策层语义化置信度策略略应⽤用层智能绑定类名绑定业务模块对⽐比图⽚片字段绑定租户业务模型映射⽂文本字段绑定数据类型规则语义化 + 字段绑定 vdom JSON 是否静态⽂文案节点类型修正业务模块分类模型

21. UI Code到Logic Code有多远？视觉设计稿需求⽂文档线框图 / 交互逻辑识别协议基于逻辑的抽象 Logic Tree LOGIC CODE 逻辑表达协议

22. UI Code到Logic Code有多远？ CNN ⽹网络数据预处理理来源于⼈人体视觉系统⼤大量量降低训练参数提取特征优势数据清洗⼈人⼯工样本制造数据增强迁移学习迁移模型建⽴立节省计算资源解决数据少带来的过拟合问题全联接层替换 layer 冻结预训练参数加载 Resnet 解决⽹网络过深带来的退化问题短路路链接，解决梯度消失问题 tensorﬂow 开源计算框架 GPU / Inference 结果流程技术选型训练集 5048个样本 99.4%准确率验证集 1462个样本 97%准确率 Inference 模型压缩预测结果测试集 737个样本 96.5%准确率

23. ⽬目录 Part1. UI Code到Logic Code有多远？ Part2. ⻚页⾯面结构和数据结构的视⻆角 Part3. 赋予开发者⾃自定义的能⼒力力 Part4. 前端智能化的未来

24. ⾃自定义能⼒力力 “ 如何在线训练⼀一个⾃自⼰己的分类模型服务 ” 创建模型添加分类和样本上传样本 odps 训练模型部署模型⽣生成服务演⽰地址»

25. 算法⼯工程能⼒力力

26. Escher开源了了 GitHub：https://github.com/alibaba/pipcook

27. ⽬目录 Part1. UI Code到Logic Code有多远？ Part2. ⻚页⾯面结构和数据结构的视⻆角 Part3. 赋予开发者⾃自定义的能⼒力力 Part4. 前端智能化的未来

28. Roadmap 2019.10 2020.03 Escher开源 imgcook.com开源 Tensorflow.js团队共建 Escher前端AI框架开源开源平台源码开源⼯工程链路路源码开源数据和模型双⼗十⼀一零研发 Sketch File Service 80%逻辑代码⾃自动⽣生成 UI Code准确率92% CSS Code准确率81% 免插件安装更更少设计师约束 PSD在线转换Sketch 2019.11 2020.12 开源 P2C ⽣生态⼒力力量量共建需求结构化收集能⼒力力启动O2C（operational to Code）开放产品到代码（P2C） 2019.11 ????.?? 开放需求结构化收集开放⾃自动化测试开放⾃自动化灰度发布开放数据字段标准化前端智能化2.0 敬请期待…… 2021.03

29. P2C 需求结构化收集

30. P2C 全流程智能化 D2C 视觉逻辑还原能⼒力力激活配置⼀一激活配置⼆二视图代码编写数据模型变化函数代码编写激活配置三 D2C 链路路升级 PRD + 设计稿 UI ⾃自动⽣生成逻辑⾃自动⽣生成逻辑预配置预配置⼀一 PRD 测试发布交互稿设计稿 UI开发动效开发交互设计师视觉设计师程序员程序员逻辑开发联调上线程序员程序员测试⼯工程师预配置⼆二预配置三 PRD 机器器视觉+机器器学习部分替代程序员开发⼯工作

31. O2C（Operational To Code）诗的远⽅方：智能体系智能营销权益端智能 { 智能场景活动 { 智能UI 眼前的苟且：⽣生产⼒力力解决体系 PD 线框需求描述收集 PD 逻辑中间表达业务 imgcook.com ⽣生产部分数据编排（graphQL）前端进化⽅方向服务编排(Fass) 业务可视化编排数据源标准化去除冗余的format代码业务域配置管理理设计稿 { 设计逻辑模型数据业务

32. 9 个部⻔门，逾 47 ⼈人，历时 18 个⽉月，倾⼒力力前端智能化实践打造的技术产品：阿⾥里里经济体前端委员会协同前端D2C代码⽣生成平台：imgcook.com 前端机器器学习开源框架：https://github.com/alibaba/pipcook 阿⾥里里经济体前端委员会前端智能化共建项⽬目组成员 • • • • • • • • • • 淘系 D2C 团队：甄⼦子、妙净、波本、卡狸、缺⽉月、笑翟、知浅、苏川、浩知、南纪、芸明、正寻、画北北淘宝商家与开放团队：灵⽟玉、洛洛丹丹、⼦子肃、古泽、翊⽞玄 UC 团队：喜奔、⽥田⾕谷、任宏亮、臧阳阳闲⻥鱼团队：⻘青⻚页、仝辉、楚丰、深宇拍卖团队：剑平、怀天、莱斯、奉⾬雨优酷团队：倪欧、琰⽟玉、郭晓路路 CCO 团队：天可、清⽻羽营销零研发全链路路智能化业务落地团队：仔寒、墨墨冥、上坡、寻壑、阿⼤大、超冉、全栈、步天淘宝设计部团队：英哲、兮和、⻜飞⻜飞

33. 我的微信⼆二维码：评分反馈⼆二维码： Q & A Thanks.