图片生成html代码开源项目下载

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


Description

Sketch2Code is a solution that uses AI to transform a handwritten user interface design from a picture to valid HTML markup code.

Process flow

The process of transformation of a handwritten image to HTML this solution implements is detailed as follows:

  1. The user uploads an image through the website.
  2. A custom vision model predicts what HTML elements are present in the image and their location.
  3. A handwritten text recognition service reads the text inside the predicted elements.
  4. A layout algorithm uses the spatial information from all the bounding boxes of the predicted elements to generate a grid structure that accommodates all.
  5. An HTML generation engine uses all these pieces of information to generate an HTML markup code reflecting the result.

Architecture

The Sketch2Code solution uses the following elements:

How to configure the solution

Microsoft Custom Vision Model

The training set used to create the sample model used in the project is located in the Model folder. Each training image has a unique identifier that matches information contained in the dataset.json file. This file contains all the tag information used to train the sample model. To create your own model you can use this dataset to start and using the Custom Vision API upload this dataset to your own project. You can create your Custom Vision Project at https://customvision.ai Once you have created your Custom Vision Project you need to annotate the Key and the Project Name to configure the Azure Function to call use the service.

Computer Vision Service

A Microsoft Computer Vision Service is needed to perform handwritten character recognition. To create this service go to your Azure Subscription and create your own service. Annotate the Endpoint and the Key to complete the configuration of the solution.

Azure Blob Storage

An Azure Blob Storage is used to store all the intermediary steps of the process. A new folder is created for each generation process with the following contents:

Azure function

The code for the provided Azure Function is located in the Sketch2Code.Api folder. You can use this code to create your own function and must define the following configuration parameters:

Azure Website

The Sketch2Code.Web contains the code used to implement the front-end website. Two parameters must be configured:

发布时间2018/9/7 17:35:25

访问量680 次

网友评论

发表评论

欢迎评论哦!