Sketch2Code: AI that codes the HTML for you!

AI (Artificial Intelligence) is improving day-by-day and is getting into many fields. But what if this AI eliminates the need for writing code? 

sketch2code

To be more precise, Microsoft runs an AI lab that has generated solutions to daily-life problems with the help of Machine learning and Computer vision technology. Among many apps, developed with AI, Sketch2Code is one of them. 
So let's learn what Sketch2Code exactly is, and how it eliminates the need for writing HTML. 

What is HTML? 

 

Before learning what Sketch2Code is, I will give a short overview of HTML.

HTML is a language used to design the structure of a webpage. HTML uses tags to define the layout of the webpage. With HTML, you can code which elements the page should show up such as textbox, paragraphs, image, table, and so on.
The output of the HTML code will be a structured webpage, populated with some elements.

What is Sketch2Code? 

 

Sketch2Code is an AI-developed app which generates the HTML code of a layout, drawn on a paper. Just take a page, draw the webpage layout you want, and submit its photo to the Sketch2Code app. This app will scan that image, analyze it, and generates the HTML code for that layout. 

Interesting, isn't it?
Now let's see how all this works.



How Sketch2Code works?

 

Sketch2Code uses Computer Vision technology (a discipline inside AI) to see and understand things. For better detection, this app's model is trained multiple times to give accurate output. 
Sketch2Code uses text recognition functionality to extract the hand-written text present in the layout you drew. 

Now, this app will try to match the extracted design with the HTML design elements. After this model determines the accurate HTML element that matches with the design, you will get the HTML code for that particular design. 

Here's a short overview of the process that the app performs:
  1. Take the hand-drawn design as input and scan it
  2. Recognize the elements present in the design
  3. Determine the perfect HTML elements for the hand-drawn layout by using the text-recognition technique
  4. Generate the HTML code for the design

What will be the benefit of the Sketch2Code app?

 

  • Sketch2Code will result in fast-coding by giving ample time to developers to focus on other aspects of a project. 
  • Rather than spending hours and hours on designing the layout of a webpage, developers can submit their innovative designs to this app for HTML code generation.
Such a technique will dive the project in a proper direction. 

Should HTML coders be worried about the Sketch2Code app?

 

HTML coders do not need to worry about this app. In fact, they can utilize their time to advance their other programming skills and learn a new language. 

Can you rely on the Sketch2Code app for HTML coding?

 

For now, I cannot say that you can depend on this app for HTML coding. This app is suitable for a simple layout but won't be efficient for complicated webpage design. 
With continuous training, the developers will surely make this app ready for complex projects. 

Personal review

 

I have tried out this app, and it is quite good. In my case, this app recognized the basic HTML elements (text, input box, table) and gave me its HTML code. AI is all about training the models to generate the correct output. So this app might take some time to generate the accurate code for any design of a webpage.  
But I want you to give it a try by visiting the AI lab of the Sketch2Code app

If you want to learn about machine learning and get an idea about AI, you can refer to the Machine Learning course provided by Google.

Here, I can conclude that AI is becoming more powerful that it can code another programming language in the future. Don't miss out on the opportunity to experience the capabilities of AI with the Sketch2Code app.

If you have any queries regarding this post, do let me know by posting it in the "Comment" section below. 
Do share this post to let others know about this amazing app provided by Microsoft. 

Keep visiting!

Post a Comment

0 Comments