2019年設計生成代碼的前端智能研發實踐.pdf

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