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

Posted 2021-04-26 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