微软开源 Sketch2Code，草图 UI 转 HTML 代码
JavaScript JavaScript
Sketch2Code是一种使用 AI 将手写用户界面设计从图片转换为有效 HTML 标记代码的解决方案，演示效果如下：
Sketch2Code 的流程
- 用户将图片上传到网站上
- 自定义视觉模型预测在图像中出现的 HTML 元素，并将它们的位置标出来
- 手写文本识别服务读取预测元素中的文本
- 布局算法根据预测元素的边框空间信息生成网格结构
- 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
