一个前端的智能化实践 甄子(甄焱鲲)

前端狗

2019/01/19 发布于 技术 分类

文字内容
1. ⼀一个前端的智能化实践 甄焱鲲
2. 示例例 输⼊入 输出 Object Detection Button、CheckBox、ComboBox、Image、 Label、 Link、Paragraph、RadioButton、TextBox
3. 竞调 识别粒度 控件数 sketch2code 草图到控件 pix2code bootstrap 基础控件 11 screenshot2cod e 设计稿到控件 html基础标签 9 跨端 特征 Web Html ⼿手绘草图降低 使⽤用⻔门槛 Web bootstrap、 准确率接近80% ⽀支持控件少 ios/android Web Html 准确率较低
4. 背景 兼容强度 应 ⽤用 平 台 开发 SVN Git Code Library Module 搭建 Platform Dashboard Document API Rule 机器器视觉 ⽣生 态 Data Image 共建 Plugin 机器器学习 约束强度
5. ⽬目标 ⽬目标 (机器器视觉+机器器学习)+ 设计稿/图⽚片 = 统⼀一协作界⾯面 D2C 特征 ⽀支持PS、Sketch设计稿/图⽚片或线框图⽣生成 UI代码,UI语义化理理解基础上⾃自动绑定数据 或部分交互逻辑,⽀支持简单动效代码⽣生成。 PRD PRD 交互稿 交互设计师 设计稿 UI开发 动效 开发 视觉设计师 程序员 程序员 机器器视觉+机器器学习 部分替代程序员开发⼯工作 逻辑 开发 联调 上线 程序员 程序员 测试⼯工程师
6. 解决⽅方案 模块 + 布局 设计 研发 链路路 商品模块 版式 图⽚片 ⽂文本 D2C 导航模块 容器器 … 图标 设计 需求 样式 … + 神经⽹网络 控件 模块 = 布局 ⽤用户 ⾏行行为 数据
7. D2C平台技术架构 psd源⽂文件 JPG⽂文件 遵守私有协议 遵守私有协议 ⽆无任何协议 sketch插件转化 psd插件转化 图层分层 图层解析 图层解析 sketch源⽂文件 分层-⽬目标检测 私有协议解析 私有协议解析 图⽚片上传 图⽚片上传 json 转化 json 转化 ⽂文字识别-OCR 细节识别-opencv 图⽚片上传 json 转化 可维护性代码转化 布局转化 语义(⽂文本、图⽚片)转化 ⾃自适应转化 逻辑加⼯工 字段绑定 数据处理理 事件 代码⽣生成 Rax DSL React DSL Vue DSL dinamicX DSL 循环组识别
8. 前端智能解决⽅方案架构图 微海海报 达芬奇 第三⽅方平台 DSL 数 据 链 路路 反 馈 体 系 ESCHER框架 机器器学习 检 测 YOLO 分 类 Fast-RCNN 模 型 ⽣生 成 SOFTMAX FC Mask-RCNN Inception Region Proposd Image Segmetion GNN VAE CNN 特征⼯工程 数 据 收 集 开发 体系 puppteer Chrome extention Scripts tools 数 据 处 理理 Python Jupyter COCO HDF5 Tensorflow CUDA 标准化 归⼀一化 数据增强 实验 体系 特 征 选 择 Filter Wrapper Embedded Python Jupyter Max Cumpute PAI Blink AES 特 征 提 取 HOG SIFT CNN 服务 体系 Node RXJS FP FaaS Flask K8S
9. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
10. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
12. 灵感来源 http://linguistics.berkeley.edu/~rscook/html/ writing.html#EHC
13. 认识⽂文字 中⽂文结构 ⿰⿱⿲⿳⿴⿵⿶⿷⿸⿹ 中⽂文笔划 ㇀㇁㇂㇃㇄㇅㇆㇇㇈㇉㇊㇋㇌㇍㇎㇏ 偏旁部⾸首 ⼀一⼁丨⼂丶⼃丿⼄乙⼅亅⼆二⼇⼈人⼉儿⼊入⼋八⼌冂⼍⼎⼏几⼐凵⼑刀⼒力力⼓勹⼔匕⼕匚⼖匸⼗十⼘卜⼙卩⼚厂⼛⼜又 ⼝口⼞囗⼟土⼠士⼡夂⼢夊⼣⼤大⼥女女⼦子⼧⼨寸⼩小⺐⼪尢⼫尸⼬屮屮⼭山⼮巛⼯工⼰己⼱巾⼲干⺓⼳幺⼴广⼵廴⼶廾⼷弋⼸弓⼹ ⼺彡⼻彳⼼心⼽戈⼾戶⼿手⽀支⽁攴⽂文⽃斗⽄斤⽅方⽆无⽇日⽈曰⽉月⽊木⽋欠⽌止⽍歹⽎殳⽏⽐比⽑毛⽒氏⽓气⽔水⽕火⽖爪 ⽗父⽘爻⽙爿⽚片⽛牙⽜牛⽝犬⽞玄⽟玉⽠瓜⽡⽢甘⽣生⽤用⽥田⽦疋⽧疒⽨癶⽩白⽪皮⽫皿⽬目⽭矛⽮矢⽯石⽰⽱⽲禾⽳穴 ⽴立⽵竹⽶米⽷糸⽸⽹网⽺羊⽻羽⽼老老⽽而⽾⽿耳⾀聿⾁肉⾂臣⾃自⾄至⾅臼⾆舌⾇舛⾈舟⾉艮⾊色⾋艸⾌虍⾍虫⾎血⾏行行⾐衣 扩展: ⺀⺁⺂⺃乚⺄⺅⺆⺇𠘨⺈⺉⺊⺋⺌⺍⺎兀兀⺏尣⺐⼪尢⺑⺒巳⺓⼳幺⺔彑⺕彐⺖⺗⺘⺙攵⺛旡⺜⺝ ⺞歺⺟母⺠民⺡⺢氺⺣⺤爫爫⺥⺦丬⺧⺨犭⺩⺪⺫⺲罒⺬⺭⺮⺯糹⺰⺱罓⺫⺲罒⺳⺴⺵⺶⺷⺸⺹耂⺺肀 ⺻⺼⺽⺾艹⺿艹⻀⻁虎⻂⻃覀⻄西⻅见⻆角⻇⻈⻉贝⻊⻋车⻌辶辶⻍⻎⻏⻐⻑⾧長⻒镸⻓长⻔门⻕⻖阝⻗ ⻘青⻙韦⻚页⻛风⻜飞⻝⾷食⻞⻟飠⻠⻡⻢马⻣骨⻤鬼⻥鱼⻦鸟⻧卤⻨麦⻩黄⻪黾⻫斉⻬齐⻭歯⻮齿⻯⻰龙⻱龜⻲亀⻳龟
14. 频率解析 最常⽤用的⼀一千个汉字使⽤用频率排名 汉语常⽤用字只有三千多个,国家标准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%): 美 总 从 ⽆无 情 ⼰己 ⾯面 最 ⼥女女 但 现 前 些 所 同 ⽇日 ⼿手 ⼜又 ⾏行行 意 动 ⽅方 期 它 头 经 ⻓长 ⼉儿 回 位 分 爱 ⽼老老 因 很 给 名 法 间 斯 知 世 什什 两 次 使 身 者 被 ⾼高 已 亲 其 进 此 话 常与活正感
15. Label
16. 解析构造
17. Infomax变分⾃自编码器器 理理解(最⼩小化先验分布 + 最⼤大化互信息),然后就可以⾃自然⽽而⾔言地导出Deep INFOMAX的loss。
18. KeyPoint
19. SIFT特征
20. Model (旧)
21. Model
22. CNN
23. 规划 除了了开源数据集, 把⼯工程流程也提供出去 2019/04 业界 在识别字体数增加到100种基础上,增加斜体, 粗体,下划线等功能 2019/02 ⾃自动化⼯工程流程沉淀到Eshcer框架 2019/01 问题 解决图⽚片识别过程中某图⽂文叠加,字体识别的问题 达 芬 奇
24. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
25. 思考 市⾯面上还没有做iconfont识别的模型 ⼈人⼯工标注虽然效果很好但是效率低下,需要考虑利利 ⽤用机器器学习的⽅方法来提⾼高标注的效果和效率 过拟合并⾮非坏事——可表达
26. Match Template
27. Mask RCNN
28. 进展 服务 模型 算法训练 ⼯工程 特征 设计向量量相似查询服务 EAS部署 全量量数据训练完成,准确率 0.94 测试集&BadcaseLoss0.38 iconfont.cn 320W+ 数据获取 完成⼆二值化,hog特征处理理
29. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
30. Layout布局识别架构 模块 + 布局 设计 研发 链路路 商品模块 版式 图⽚片 ⽂文本 D2C 导航模块 容器器 … 图标 设计 需求 样式 … + 神经⽹网络 控件 模块 = 布局 ⽤用户 ⾏行行为 数据
31. 样本语意分割和超级像素
32. 静态资源语意分割
33. 布局HOG特征识别
34. 控件特征识别
35. 多模型训练尝试
36. 关键路路径和抓⼿手 Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
37. Escher前端智能框架 利利⽤用在前端智能化和达芬奇项⽬目中积累的经验和代码沉淀 ⼀一套让前端同学可以快速上⼿手ML的混合技术框架,涵盖从 数据获取、数据处理理、模型训练、模型服务化、数据反馈 到⼯工程化的⽅方⽅方⾯面⾯面,已经初步完成了了在Icon、Font识别过 程中积累的部分⼯工程链路路、数据结构化标准、部分标注数 据,后续会以:⽂文档+框架源码+⼯工具服务+数据开源的⽅方 式对外提供。
38. Escher 数据获取 Puppeteer Node JS 爬⾍虫 浏览器器插件标注模块⽣生成数据 NodeJS ——> CVS ——>Python 的数据处理理链路路连接Node JS爬⾍虫 NodeJS ——> CVS ——> HDF5 的数据处理理链路路连接Node JS爬⾍虫
39. Escher 数据洞洞察
40. Escher 数据洞洞察
41. Escher 数据处理理 数据标准化 数据归⼀一化 基于COCO标准的开源数据集
42. Escher 模型训练 ⾃自动化⼦子⽹网络训练和⾃自动超参调整 ⾃自动化训练平台 ⼀一站式:数据——>COCO数据集——>模型训练
43. Escher 模型服务化 ⾃自动Node JS服务模版⽣生成 ⾃自动收集线上样本数据改进模型 ⾃自动接⼊入PaaS、FaaS等云服务
44. One more thing Font 字体识别 Iconfont 图标识别 Layout 布局识别 Escher 前端智能框架
45. 畅想未来 确定性 VS 不不确定 前端的 机器器学习时代 HC VS AI辅助 动态话 VS 精细化 背景 问题 ⽅方案
46. “Thanks” & QA https://imgcook.taobao.org/ 已经开放了了 展台特殊福利利: ⼩小礼品 + 体验静态图⽚片还原链路路 + 体验ps插件链路路 shadow@vip.qq.com