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

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

JavaScript JavaScript

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


### Sketch2Code 的流程

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

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

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

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

1. 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