## 微软开源 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