Magazine

Artificial intelligence (AI) is defined as the set of theories and techniques implemented to create machines capable of simulating human intelligence.

And, before we even realize it, artificial intelligence is already part of our daily lives!

For example: when you use a navigation app that actually tracks traffic and suggests the fastest route, or when your phone tags those spam messages about a super training course funded by your CPF, AI is at the heart of the development of these applications.

The field of AI is no exception to the tech giant Microsoft, which offers many solutions in this field!

In this article, we are going to get to know Sketch2Code 👀

What is Sketch2Code?

When creating a user interface, the first step is often to sketch the elements freehand to show what you want. Sketch2Code makes it easy to translate this sketch directly into HTML code.

As a rule, this translation takes time, and that’s where Sketch2Code comes in, using artificial intelligence to translate a sketch into html code ultra-fast!

How does it work?

Here is the sketch on a piece of paper, which is then photographed with a phone and sent directly to Sketch2Code:

The model has been trained to recognize objects based on hand-drawn patterns in HTML.

And here is the analysis performed by Sketch2Code:

The AI successfully identified all the elements that will form the page. A custom vision model detects the significant design elements in an image. Each detected element goes through a text recognition service to extract handwritten content. Information about the detected objects and their position in the image is passed to an algorithm that generates the underlying structure.

3. After a brief pass through VScode for identification and removal of empty lines, Sketch2Code then generates the HTML code from the various elements:

To achieve this result, the many sketches submitted to Sketch2Code on their site can be used for the continuous improvement of the AI.

Feel free to test Sketch2Code yourself by submitting your sketches!

More information:

Sketch2Code | Microsoft Documentation

Sketch2Code – Transform your sketches into HTML with AI

Author: Céline Obringer – Microsoft 365 Consultant