《2019年设计生成代码的前端智能研发实践.pdf》由会员分享,可在线阅读,更多相关《2019年设计生成代码的前端智能研发实践.pdf(35页珍藏版)》请在三个皮匠报告上搜索。
1、一个前端的智能化实践背景应用平台生态开发搭建共建兼容强度约束强度CodeLibraryModuleAPIRulePluginDataImage机器视觉机器学习SVNGitPlatformDashboardDocument目标动效开发UI开发设计稿逻辑开发交互稿PRD(机器视觉+机器学习)+设计稿/图片=统一协作界面 D2C支持PS、Sketch设计稿/图片或线框图生成UI代码,UI语义化理解基础上自动绑定数据或部分交互逻辑,支持简单动效代码生成。目标特征联调上线交互设计师程序员PRD视觉设计师程序员程序员程序员 测试工程师机器视觉+机器学习 部分替代程序员开发工作解决方案目标样式布局 版式商品
2、模块导航模块图片文本容器图标神经网络布局模块+=+设计需求设计研发链路D2C 模块控件用户行为数据架构代码生成可维护性代码转化sketch插件转化sketch源文件遵守私有协议图层解析图片上传json 转化私有协议解析Rax DSLReact DSL语义(文本、图片)转化布局转化Vue DSLdinamicX DSL遵守私有协议图层解析图片上传json 转化私有协议解析psd插件转化psd源文件无任何协议JPG文件图层分层分层-目标检测细节识别-opencv图片上传json 转化文字识别-OCR自适应转化循环组识别逻辑加工数据处理字段绑定事件Font 字体识别Iconfont 图标识别Layo
3、ut 布局识别Escher 前端智能框架关键路径和抓手Font 字体识别Iconfont 图标识别Layout 布局识别Escher 前端智能框架关键路径和抓手问题分析https:/www.unicode.org/reports/tr45/tr45-19.html认识文字中文结构中文笔划偏旁部首基本:一丨丶丿乙亅二人儿入八冂几凵刀力勹匕匚匸十卜卩厂又口囗土士夂夊大女子寸小尢尸屮山巛工己巾干幺广廴廾弋弓彡彳心戈戶手支攴文斗斤方无日曰月木欠止歹殳比毛氏气水火爪父爻爿片牙牛犬玄玉瓜甘生用田疋疒癶白皮皿目矛矢石禾穴立竹米糸网羊羽老而耳聿肉臣自至臼舌舛舟艮色艸虍虫血行衣扩展:乚兀尣尢巳幺彑彐攵旡歺母民氺
4、爫丬犭罒糹罓罒耂肀艹虎覀西见角贝车辶長镸长门阝青韦页风飞食飠马骨鬼鱼鸟卤麦黄黾斉齐歯齿龙龜亀龟问题分析最常用的一千个汉字使用频率排名:汉语常用字只有三千多个,国家标准GB2312-80信息交换用汉字编码字符集*基本集就是根据使用频率制订的。一级字库为常用字,3755个,二级字库为不常用字,3008个,一、二级字库共有汉字6763个。一级字库的字,使用频率合计达99.7%。即在现代汉语材料中的每一万个汉字中,这些字就会出现9970次以上,其余的所有汉字也不足30次。而最常用的1000个汉字,使用频率在90%以上.使用频率排名前5个汉字(使用频率之和为10%):的 一 是 了 我使用频率排名第(6
5、17)个汉字(使用频率之和为10%):不 人 在 他 有 这 个 上 们 来 到 时使用频率排名第(1842)个汉字(使用频率之和为10%):大 地 为 子 中 你 说 生 国 年 着 就 那 和 要 她 出 也 得 里 后 自 以 会使用频率排名第(4379)个汉字(使用频率之和为10%):家 可 下 而 过 天 去 能 对 小 多 然 于 心 学 么 之 都 好 看 起 发 当 没 成 只 如 事 把 还 用 第 样 道 想 作 种 开(这36个汉字的使用频率之和为10%)使用频率排名第(80140)个汉字(使用频率之和为10%):美 总 从 无 情 己 面 最 女 但 现 前 些 所 同
6、 日 手 又 行 意 动 方 期 它 头 经 长 儿 回 位 分 爱 老 因 很 给 名 法 间 斯 知 世 什 两 次 使 身 者 被 高 已 亲 其 进 此 话 常 与 活 正 感infomax变分自编码器理解(最小化先验分布+最大化互信息),然后就可以自然而言地导出Deep INFOMAX的loss。KeypointFont 字体识别Iconfont 图标识别Layout 布局识别Escher 前端智能框架关键路径和抓手思考市面上还没有做iconfont识别的模型人工标注虽然效果很好但是效率低下,需要考虑利用机器学习的方法来提高标注的效果和效率过拟合并非坏事可表达思考获取 上368万 i
7、con 数据使用vgg模型,准确率0.8使用预训练的resnet并增加微调层,准确率0.95使用resnet,但不使用预训练数据,并增加batchnormalization,准确率0.98,但泛化弱使用faiss向量检索库索引iconfont得到的embedding向量,基于kNN输出icon的命名规则提供服务实践Font 字体识别Iconfont 图标识别Layout 布局识别Escher 前端智能框架关键路径和抓手语义分割和超像素特征特征特征特征特征特征stack row label,slider,label row switch row label,slider,label row la
8、bel,slider,label row check row check row switch row label,slider,label footer btn-search,btn-search,btn-notifications,btn-search目标样式布局 版式商品模块导航模块图片文本容器图标神经网络模块+D2C Font 字体识别Iconfont 图标识别Layout 布局识别Escher 前端智能框架关键路径和抓手结果利用在前端智能化和Imgcook项目中积累的经验和代码沉淀一套让前端同学可以快速上手ML的混合技术框架,涵盖从数据获取、数据处理、模型训练、模型服务化、数据反馈到工程化的方方面面,已经初步完成了在Icon、Font识别过程中积累的部分工程链路、数据结构化标准、部分标注数据,后续会以:文档+框架源码+工具服务+数据开源的方式对外提供。架构应用Aliyun VGPU+Docker镜像开箱即用集成开源数据集、工业化模型快速学习实验自动接入PaaS、FaaS等云服务演示Font 字体识别Iconfont 图标识别Layout 布局识别Escher 前端智能框架关键路径和抓手One more thing背景背景问题方案前端的机器学习时代确定性 VS 不确定HC VS AI辅助动态话 VS 精细化畅想“Thanks”&QA