微信号:JavaScriptcn

介绍:面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享.

微软开源 Sketch2Code,草图 UI 转 HTML 代码

2018-09-08 08:35 JavaScript

Sketch2Code是一种使用 AI 将手写用户界面设计从图片转换为有效 HTML 标记代码的解决方案,演示效果如下:

Sketch2Code 的流程

  1. 用户将图片上传到网站上

  2. 自定义视觉模型预测在图像中出现的 HTML 元素,并将它们的位置标出来

  3. 手写文本识别服务读取预测元素中的文本

  4. 布局算法根据预测元素的边框空间信息生成网格结构

  5. HTML 生成引擎使用上述信息来生成 HTML 代码


Sketch2Code 的解决方案

  • Microsoft自定义视觉模型:此模型已经过训练,其中包含不同手写设计的图像,用于标记最常见的HTML元素(如按钮,文本框和图像)的相关信息

  • Microsoft计算机视觉服务:为了识别写入设计元素的文本

  • Azure Blob存储:存储HTML生成过程中涉及的所有步骤信息,包括原始图像,预测结果和布局和分组信息。

  • Azure功能:用作后端入口点,通过与其他服务进行交互来协调生成过程。

  • Azure WebSite:User font-end,用于上传新的设计图并生成可以查看的 HTML


这些元素构成如下架构:


仓库地址:

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

网站地址:

https://sketch2code.azurewebsites.net


 
JavaScript 更多文章 掌握react,这一篇就够了 Chrome 十周年改版:全新 Material Design 月薪30K的前端,你是魔鬼吗? 工作中常用到的ES6语法 H5页面在微信端的分享
猜您喜欢 2015 GOOGLE I/O大会看点总结:新产品新工具新计划 全球首个“可穿戴”无人机,这玩意儿我可以玩一辈子! 深度学习及其在淘宝图像应用探讨 拿代码量算KPI……跟程序员们来这套?(下) 写代码之外,如何再赚一份工资?