AI在设计稿生成代码平台imgcook中的应用场景和落地实践

1. AI在设计稿生成代码平台imgcook 中的应用场景和落地实践常艳芳（苏川）阿里巴巴高级前端开发工程师

2.

3. 常艳芳（苏川） 2017 年底加入阿里巴巴淘系技术部智能生成代码平台 imgcook 核心开发目前负责 imgcook 的产品建设

4. 1、设计稿生成代码平台 imgcook 介绍 2、机器学习技术在 D2C 领域的应用场景 3、前端视⻆下，D2C 领域机器学习实践落地 4、D2C 双 11 零研发工程实践 5、未来展望

5. 设计稿智能生成代码平台 imgcook 将设计稿 (Sketch、Figma、PSD、图片) 一键生成可维护的前端代码(HTML、React、Vue、小程序、Flutter 等) imgcook 1.0 imgcook 2.0 imgcook 3.0 从 0 到 1 建设 2019.1 正式对外开放产品链路基本完善引入机器学习技术技术体系完善智能化程度提升覆盖双 11 新增模块 90.4%，智能生成代码可用率 79.26%，编码效率提升 68%

6. imgcook 3.0 技术原理设计稿输入（描述设计稿文件的 JSON Schema）机器学习算法设计稿协议程序算法通过人工设置设计稿协议规范通过有限的规则/步骤实现的程序算法通过机器学习算法学习UI特征训练模型标记设计稿自动识别设计稿智能识别设计稿 D2C JSON Schema （具有合理的嵌套布局结构和代码语义的 JSON 描述）前端代码（React、Vue、小程序、Flutter 等）

7. 机器学习算法在 imgcook 中的应用场景

8. 人工智能、机器学习与深度学习输入样例机器学习输入大量的学习资料人工智能机器学习深度学习人为设计特征机器学习特征机器学习算法模型输出结果类似的任务人类学习一定的样本资料学习、归纳整理、总结知识、经验行动、决定

9. 机器学习解决的问题类型 (a) 图片分类任务 (b) 目标检测任务 (c) 语义分割任务 (c) 实体分割任务计算机视觉(CV) 4 大基本任务 (a) 序列标注任务句子关系判断任务 (c) (c) 句子关系判断任务 (b) 文本分类任务 (d) 生成式任务 (d) 生成式任务自然语言处理(NLP) 4 大基本任务

10. imgcook 中 UI 语义识别图标返回back、更多 more、… 图标识别图片品牌logo、头像 avatar、… 图片识别文本店铺名shop-title、商品名item-title、… 组件按钮 button、tabbar、… 组件识别模块店铺、内容、商品、… 模块识别文本识别

11. 模型识别结果的应用场景模块化无障碍属性 Class 命名引用外部组件循环结构字段绑定

12. 前端视⻆下，D2C 领域机器学习实践落地

13. 使用机器学习技术解决问题的一般步骤问题定义样本准备算法选型模型训练模型服务部署模型应用

14. 组件识别的问题定义要解决什么业务问题？是否适合使用机器学习？引入 antd-mobile input Ant Design Input input button 组件识别 Button 代码表达

15. 组件识别的问题定义确定属于机器学习能解决的哪一种任务类型？ input input input input button button button 目标检测任务图像分类任务

16. 样本准备图像分类任务问题定义样本准备算法选型模型训练模型服务部署模型应用

17. 如何收集组件样本数据？确定需要识别的组件类别进度条 progressbar button seachbar stepper input switch tabbar button 0.15 searchbar 0.6 stepper 0.1 input 0.15 switch 0.05 tabbar 0.05

18. 如何收集组件样本数据？收集⻚面、获取组件截图、样本打标 Payment Explore Card Number Find your location... Enter your card number Enjoy your traveling Exp Date mm/yy Winter in Portugal Lisbon Log In 7 day 143 $3 000 Country winter United states Capital of Thailand Email CCV 30°C Bangkok, Thailand Sesimbra e Arrabida Sesimbra, Lisbon $5 000 3 day Dabit Card $2 000 1397 summer Password $10 000 Service Japan Most Unique Country Forgot Password? Sesimbra, Lisbon Log In Bangkok, Thailand’s capital, is a large city known for ornate shrines and vibrant street life. The boat-filled Chao Phraya River feeds its network of canals, flowing past the Rattanakosin royal district, home Or to opulent Grand Palace and its sacred Wat Phra Kaew Temple. earby is Wat Pho Temple with an enormous reclining Buddha and, Log In With Google Sign Up Here Exp Date Hasan Mahmud on the opposite shore. 3 day winter $3 000 Confirm Payment 7/21

19. 如何收集组件样本数据？收集⻚面、获取组件截图、样本打标样本标注耗时：14000⻚面 * 2个类别 == 11 个小时样本不均衡： 25647张⻚面 == 7757个button + 1177个 switch + … Find your location... Enter your card number Log In mm/yy 143 标注样本类型 dataset.zip United states Confirm Payment 组件截图组件图像分类样本

20. 如何收集组件样本数据？使用无头浏览器 puppeteer 自动生成组件样本收集⻚面组件截图提取组件样本打标样本类型标记样式随机生成随机生成组件⻚面组件随机生成逻辑数据集生成

21. 如何收集组件样本数据？使用 Puppeteer 自动生成组件样本基于有限规则生成的样本特征不够发散，且与真实样本相比有些差异自动生成的样本一般仅用做真实样本较少时的补充 Puppeteer 访问⻚面提取组件并截图保存生成的组件样本访问⻚面随机生成组件

22. 算法选型图像分类任务问题定义样本准备算法选型数据集 dataset.zip 模型训练模型服务部署模型应用

23. 算法选型图像分类经典算法几种图像分类算法的模型效果比较

24. 模型训练图像分类任务问题定义 ResNet50 算法样本准备算法选型数据集 dataset.zip 模型训练模型服务部署模型应用

25. 模型训练模型训练工作流数据收集数据接入数据处理模型定义模型训练模型评估模型部署下载数据集数据集格式转换数据集处理训练集/测试集拆分数据收集数据接入数据处理用Resnet算法定义图像分类模型模型定义模型训练用训练集训练模型用测试集做模型准确度评估模型评估模型部署

26. 模型训练数据收集前端工程师如何训练模型？ Node.js 数据接入数据处理服务端工程师模型定义前端工程师机器学习工程师模型训练 PipCook 模型评估前端机器学习框架 PipCook https://github.com/alibaba/pipcook $ pipcook run pipeline.json

27. 本地测试模型识别效果模型训练结果本地测试 Pipcook 训练产物本地预测脚本

28. 模型服务部署图像分类任务问题定义 ResNet50 算法 PipCook 算法选型模型训练样本准备数据集 dataset.zip 模型服务部署模型文件 model 模型应用

29. 模型服务部署 http://pai-eas-vpc.cn- shanghai.aliyuncs.com /api/predict/component_detect 模型文件阿里云控制台上传部署

30. 模型应用 PipCook 图像分类问题问题定义样本准备算法选型 dataset.zip 模型训练模型服务部署模型文件 model RESTful API http://pai-eas-vpc.cn-shanghai.aliyuncs.com/api/predict/component_detect VPC 地区模型名称模型应用

31. 模型应用调用模型识别服务识别组件 input input 裁剪组件图片识别 button button 更新 Schema

32. 模型应用组件识别结果应用于代码生成用户配置的 Ant Design 组件信息 import antd-mobile ？ <Input /> <Button /> D2C Schema React 代码自定义 React DSL 转换函数

33. 实践过程回顾图像分类问题问题定义 Step by Step 练习 ResNet50 算法样本准备算法选型 PipCook 模型训练 dataset.zip • 实践1：在 Colab 中使用 PipCook 分类图片中的前端组件 • 实践2：前端如何快速训练一个表单识别模型？ • 实践3：现在开始：用你的Mac训练和部署一个前端组件图片分类模型模型应用模型服务部署模型文件 model 模型识别服务 RESTful API 识别组件生成代码

34. D2C 双 11 零研发工程实践

35. 业务逻辑代码生成此模块有哪些业务逻辑？循环逻辑这里被识别为1个1排2循环结构，可以生成 map 循环绑定商品标题字段这里文本被识别为商品标题，可以绑定到商品标题字段⻚面跳转数据埋点识别到这是一个商品，点击会跳转到商品详情⻚绑定商品图字段这里图片被识别为商品图，可以绑定到商品图字段

36. 业务逻辑代码生成智能识别结果如何用于业务逻辑代码生成？业务逻辑库 D2C Schema 带有业务逻辑的 D2C Schema

37. 业务逻辑代码生成每一条业务逻辑都由一个识别器和一个表达器组成商品标题字段绑定业务逻辑识别器商品标题字段绑定业务逻辑表达器

38. 业务逻辑代码生成智能识别结果如何用于业务逻辑代码生成？ Map 循环代码⻚面跳转无障碍属性绑定 itemImage 字段 DSL 转换函数绑定 itemTitle 字段带有业务逻辑的 D2C Schema 业务逻辑代码

39. 未来展望多状态UI、微动效和复杂 UI 等代码生成问题的探索多状态 UI 示例微动效示例

40. 未来展望构建 D2C 底层认知理论体系，基于产品设计方法智能理解设计产物

41. Q & A 设计稿智能生成代码 www.imgcook.com

42.