设计生成代码的前端智能研发实践 甄焱鲲(甄子)

QCon大会

2019/05/14 发布于 技术 分类

QCon  QCon2019 

文字内容
1. ⼀一个前端的智能化实践 甄焱鲲
3. 背景 兼容强度 应 ⽤用 平 台 开发 SVN Git Code Library Module 搭建 Platform Dashboard Document API Rule 机器器视觉 ⽣生 态 Data Image 共建 Plugin 机器器学习 约束强度
4. ⽬目标 ⽬目标 (机器器视觉+机器器学习)+ 设计稿/图⽚片 = 统⼀一协作界⾯面 D2C 特征 ⽀支持PS、Sketch设计稿/图⽚片或线框图⽣生成 UI代码,UI语义化理理解基础上⾃自动绑定数据 或部分交互逻辑,⽀支持简单动效代码⽣生成。 PRD PRD 交互稿 设计稿 UI开发 动效 开发 交互设计师 视觉设计师 程序员 程序员 机器器视觉+机器器学习 部分替代程序员开发⼯工作 逻辑 开发 联调 上线 程序员 程序员 测试⼯工程师
5. 解决⽅方案
6. ⽬目标 模块 + 布局 设计 研发 链路路 商品模块 版式 图⽚片 ⽂文本 D2C 导航模块 容器器 … 图标 设计 需求 样式 … + 神经⽹网络 = 控件 模块 布局 ⽤用户 ⾏行行为 数据
7. 架构 sketch源⽂文件 psd源⽂文件 JPG⽂文件 遵守私有协议 遵守私有协议 ⽆无任何协议 sketch插件转化 psd插件转化 图层分层 图层解析 图层解析 私有协议解析 私有协议解析 图⽚片上传 图⽚片上传 json 转化 json 转化 分层-⽬目标检测 ⽂文字识别-OCR 细节识别-opencv 图⽚片上传 json 转化 可维护性代码转化 布局转化 语义(⽂文本、图⽚片)转化 ⾃自适应转化 逻辑加⼯工 字段绑定 数据处理理 事件 代码⽣生成 Rax DSL React DSL Vue DSL dinamicX DSL 循环组识别
8. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
9. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
10. 问题分析 https://www.unicode.org/reports/tr45/tr45-19.html
11. 认识⽂文字 中⽂文结构 ⿰⿱⿲⿳⿴⿵⿶⿷⿸⿹ 中⽂文笔划 ㇀㇁㇂㇃㇄㇅㇆㇇㇈㇉㇊㇋㇌㇍㇎㇏ 偏旁部⾸首 基本: ⼀一⼁丨⼂丶⼃丿⼄乙⼅亅⼆二⼇⼈人⼉儿⼊入⼋八⼌冂⼍⼎⼏几⼐凵⼑刀⼒力力⼓勹⼔匕 ⼕匚⼖匸⼗十⼘卜⼙卩⼚厂⼛⼜又⼝口⼞囗⼟土⼠士⼡夂⼢夊⼣⼤大⼥女女⼦子⼧⼨寸⼩小 ⺐⼪尢⼫尸⼬屮屮⼭山⼮巛⼯工⼰己⼱巾⼲干⺓⼳幺⼴广⼵廴⼶廾⼷弋⼸弓⼹⼺彡⼻彳⼼心⼽戈⼾戶 ⼿手⽀支⽁攴⽂文⽃斗⽄斤⽅方⽆无⽇日⽈曰⽉月⽊木⽋欠⽌止⽍歹⽎殳⽏⽐比⽑毛⽒氏⽓气 ⽔水⽕火⽖爪⽗父⽘爻⽙爿⽚片⽛牙⽜牛⽝犬⽞玄⽟玉⽠瓜⽡⽢甘⽣生⽤用⽥田⽦疋⽧疒⽨癶 ⽩白⽪皮⽫皿⽬目⽭矛⽮矢⽯石⽰⽱⽲禾⽳穴⽴立⽵竹⽶米⽷糸⽸⽹网⽺羊⽻羽⽼老老⽽而 ⽾⽿耳⾀聿⾁肉⾂臣⾃自⾄至⾅臼⾆舌⾇舛⾈舟⾉艮⾊色⾋艸⾌虍⾍虫⾎血⾏行行⾐衣 扩展: ⺀⺁⺂⺃乚⺄⺅⺆⺇𠘨⺈⺉⺊⺋⺌⺍⺎兀兀⺏尣⺐⼪尢⺑⺒巳⺓⼳幺⺔彑 ⺕彐⺖⺗⺘⺙攵⺛旡⺜⺝⺞歺⺟母⺠民⺡⺢氺⺣⺤爫爫⺥⺦丬⺧⺨犭⺩⺪ ⺫⺲罒⺬⺭⺮⺯糹⺰⺱罓⺫⺲罒⺳⺴⺵⺶⺷⺸⺹耂⺺肀⺻⺼⺽⺾艹⺿艹 ⻀⻁虎⻂⻃覀⻄西⻅见⻆角⻇⻈⻉贝⻊⻋车⻌辶辶⻍⻎⻏⻐⻑⾧長⻒镸⻓长⻔门 ⻕⻖阝⻗⻘青⻙韦⻚页⻛风⻜飞⻝⾷食⻞⻟飠⻠⻡⻢马⻣骨⻤鬼⻥鱼⻦鸟⻧卤⻨麦⻩黄 ⻪黾⻫斉⻬齐⻭歯⻮齿⻯⻰龙⻱龜⻲亀⻳龟
12. 问题分析 最常⽤用的⼀一千个汉字使⽤用频率排名: 汉语常⽤用字只有三千多个,国家标准GB2312-80《信息交换⽤用汉字编码字符集*基本集》就是根据使 ⽤用频率制订的。 ⼀一级字库为常⽤用字,3755个,⼆二级字库为不不常⽤用字,3008个,⼀一、⼆二级字库共有汉字6763个。 ⼀一级字库的字,使⽤用频率合计达99.7%。即在现代汉语材料料中的每⼀一万个汉字中,这些字就会出现 9970次以上,其余的所有汉字也不不⾜足30次。⽽而最常⽤用的1000个汉字,使⽤用频率在90%以上. 使⽤用频率排名前5个汉字(使⽤用频率之和为10%): 的 ⼀一 是 了了 我 使⽤用频率排名第(6~17)个汉字(使⽤用频率之和为10%): 不不 ⼈人 在 他 有 这 个 上 们 来 到 时 使⽤用频率排名第(18~42)个汉字(使⽤用频率之和为10%): ⼤大 地 为 ⼦子 中 你 说 ⽣生 国 年年 着 就 那 和 要 她 出 也 得 ⾥里里 后 ⾃自 以 会 使⽤用频率排名第(43~79)个汉字(使⽤用频率之和为10%): 家 可 下 ⽽而 过 天 去 能 对 ⼩小 多 然 于 ⼼心 学 么 之 都 好 看 起 发 当 没 成 只 如 事 把 还 ⽤用 第 样 道 想 作 种 开 (这36个汉字的使⽤用频率之和为10%) 使⽤用频率排名第(80~140)个汉字(使⽤用频率之和为10%): 美 总 从 ⽆无 情 ⼰己 ⾯面 最 ⼥女女 但 现 前 些 所 同 ⽇日 ⼿手 ⼜又 ⾏行行 意 动 ⽅方 期 它 头 经 ⻓长 ⼉儿 回 位 分 爱 ⽼老老 因 很 给 名 法 间 斯 知 世 什什 两 次 使 身 者 被 ⾼高 已 亲 其 进 此 话 常 与 活 正 感
13. infomax变分⾃自编码器器 理理解(最⼩小化先验分布 + 最⼤大化互信息),然后就可以⾃自然⽽而⾔言地导出Deep INFOMAX的loss。
14. Keypoint
15. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
16. 思考 市⾯面上还没有做iconfont识别的模型 ⼈人⼯工标注虽然效果很好但是效率低下,需要 考虑利利⽤用机器器学习的⽅方法来提⾼高标注的效果 和效率 过拟合并⾮非坏事——可表达
17. 思考 获取iconfont.cn 上368万 icon 数据 使⽤用vgg模型,准确率0.8 使⽤用预训练的resnet并增加微调层,准确率0.95 使⽤用resnet,但不不使⽤用预训练数据,并增加 batchnormalization,准确率0.98,但泛化弱 使⽤用faiss向量量检索库索引iconfont得到的embedding向量量,基 于kNN输出icon的命名规则提供服务
18. 实践
19. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
20. 语义分割和超像素
21. 特征
22. 特征
23. 特征
24. 特征
25. 特征
26. 特征 stack { row { label, slider, label } row { switch } row { label, slider, label } row { label, slider, label } row { check } row { check } row { switch } row { label, slider, label } } footer { btn-search, btn-search, btn-notifications, btn-search }
27. ⽬目标 模块 + 布局 商品模块 版式 图⽚片 ⽂文本 D2C 导航模块 容器器 + 神经⽹网络 … 图标 样式 …
28. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
29. 结果 https://imgcook.taobao.org 利利⽤用在前端智能化和Imgcook项⽬目 中积累的经验和代码沉淀⼀一套让前 端同学可以快速上⼿手ML的混合技术 框架,涵盖从数据获取、数据处 理理、模型训练、模型服务化、数据 反馈到⼯工程化的⽅方⽅方⾯面⾯面,已经初 步完成了了在Icon、Font识别过程中 积累的部分⼯工程链路路、数据结构化 标准、部分标注数据,后续会以: ⽂文档+框架源码+⼯工具服务+数据开 源的⽅方式对外提供。
30. 架构
31. 应⽤用 Aliyun VGPU + Docker镜像开箱即⽤用 集成开源数据集、⼯工业化模型快速学习实验 ⾃自动接⼊入PaaS、FaaS等云服务
32. 演示
33. 关键路路径和抓⼿手 One more thing Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
34. 背景 确定性 VS 不不确定 前端的 机器器学习时代 HC VS AI辅助 动态话 VS 精细化 背景 问题 ⽅方案
35. 畅想
38. “Thanks” & QA shadow@vip.qq.com