Using Azure Cognitive Service Computer Vision AI to read text from an image
Table of contents
The Microsoft Azure has a lot to offer when it comes to Cognitive Services, trying out them is really fun. Here in this article, we are going to see how we can detect and read texts from an image and show it in the display using the Cognitive Service Computer Vision AI. The service Computer Vision has it’s own machine language running which helps us to do our task in an easy and effective manner. It uses the technology Optical Character Recognition and extracts the words or text to a readable format. All we have to do is, using the service and write some custom codes as per our requirement. Sounds good? If yes, let’s just skip the introduction and jump on to the real fun.
I love quotes, and I strongly believe that a single quote can do an impact in your life sometimes. One of my hobbies is collecting the images which contain quotes in it. Now, with the help of Azure Computer Vision cognitive service, I thought of creating an application which can get the quotes from the image and save it. You can easily think of many other usages of this service, below are some of them.
- Using the translator, which scan the image, read the text and translate
- Document creation from the images, which will be useful to save hours
- A Google Glass, which capture what you see and translate the content to your native language
- A digital medical prescription from the actual one
Imagine that you need to create a solution which can save all of your medical prescription contents in a table in a database, so that you can easily sort/filter and show them in a UI. You can even create a mobile application to do that. The possibilities are countless. Now let’s build one of them.
Before we start, we should have the following things in our hand.
- A valid Azure Subscription
- A good Code editor, I prefer VSCode or Visual Studio
The source code be downloaded from here.
Let Us Start
As I mentioned earlier, we will be using an Azure service to build our application. Azure is a cloud computing service created by Microsoft, for the last few years there are significant growth in Azure. The services provided in Azure can be found here.
Create the Computer Vision Resource in Azure
To create the Azure resource, login to the Azure portal and click on the +Create a resource menu. Once the window loads, you can search for the resource Computer Vision as shown in the preceding image.
Now, click on the create button and fill the form.
It may take a few minutes to finish the development of the resource. Once it is finished, we can go to the resource and get our keys from the Keys section under Resource Management. Save those keys somewhere as we need them while we create our applications.
Develop the Angular Client Application
Here, we will be creating an Angular application with the help of Angular CLI and to create the application we are going to use the command ng new Azure-AI-Image-Text-Reader where the last parameter is our application name. You should also be given a chance to select your CSS and routing option. Please be noted that you can add them later as well.
Once the application is ready, we can create our own Angular service.
To create the service, let’s use the preceding command.
Here the name ‘detection’ is our service name. Now we can edit the service code as preceding.
As you can see that we are creating an HttpClient call to our baseUrl which is been configured in our config.ts file. To call the Computer Vision AI service, it is mandatory to pass the subscription key, the one we have created in the Azure portal, to the request by using the header Ocp-Apim-Subscription-Key.
Please remember to change the baseUrl and apiKey before you run the application.
As our service is ready, let’s create our component now using the command below.
Once the component is created, let’s go to the file home.component.ts and edit our code.
Once the component is loaded in the screen, the user will be able to type or paste the URL of an image and submit the same. Before submitting the request, we are validating the input using the FormControl, we are using the required validator and pattern validator which uses to find whether the given url is valid or not. Once the request is been made we are calling our detection service with a post request and once we get the result from the Azure service, we are looping through the result and formatting the data accordingly.
As we have our component logic ready in hand, now it is time to edit our component template. Let’s edit our home.component.html file as follows.
We use Angular Material design to develop our Angular application, the material component mat-card is a card component which can act as a container, apart from the mat-card we are using the components mat-form-field, matInput, mat-error, mat-card-image in our home component. You can use the command npm install –save @angular/material @angular/cdk @angular/animations to install the material in your application.
Once the component loads, we are giving an option to submit a valid image URL, if the URL provided is not valid, we are disabling the submit button. Once the user submit the request, then we are calling our detection service. Sounds good?
Below are the screen print of our application.
Now we can test this application by giving the URL of the below image.
Once you submit the URL, you should be able to see an output as below.
The application demo can be viewed here.
Wow!. Now we have learned, what is Azure Computer Vision AI and how to create Azure Computer Vision Cognitive Service. We also learned to create an Angular application which reads the text from images. I hope you found this article useful. I can’t wait to see what you are going to build with Azure Computer Vision AI. You can also check out the other options we have in Microsoft Azure Computer Vision AI here, I am sure you will love playing with it.
Your turn. What do you think?
Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post as useful? Kindly do not forget to share me your feedback.