如何为搭建物料智能生成代码 - 自动编码
如果无法正常显示,请先停止浏览器的去广告插件。
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.