Build Intelligent C# Apps With Azure Cognitive Services

Well, here we will discuss an excellent topic on How to Build Intelligent C# Apps With Azure Cognitive Services. Before starting the actual topic, we should know a little bit about Azure Cognitive Services.

Nowadays, Artificial Intelligence (AI) feature plays a vital role in our life. Everywhere Artificial Intelligence (AI) feature is getting implemented. Most of the companies are trying to build many powerful and smart apps with Artificial Intelligence (AI) feature. Artificial Intelligence (AI) feature makes your apps more secure, robust, and cool User Experience. Azure Cognitive Services help us to implement the Artificial Intelligence (AI) feature in our applications easily with a few API calls.

Azure Cognitive Services

Azure Cognitive Services is an excellent offering from Microsoft that actually helps the developers to build lots of Artificial Intelligence (AI) and Machine Learning (ML) based applications without having any expertise in these areas. It is like you can implement the AI and ML feature that is the boom in the market now in your application without having any expertise in these areas and just calling a few APIs to your application.

Microsoft Azure Cognitive services provide different Azure APIs that help you with the ability to make it easy to enhance your applications in different areas like knowledge, search and language, vision, speech, etc. That provides you the ability to implement the AI features in these areas. Makes the work of the developer easy. It saves a lot of effort for the developer.

You can check out some more information on the Azure Cognitive Services now.

Azure Cognitive Services Example

As part of this article, What we will do here exactly is, we will create a Computer vision API in Azure Portal and we will also create a Windows application using Visual Studio 2019. We will use the Vision API to recognize the image content meaning each object of the image and will get the result in a JSON format. Let’s discuss an excellent Azure Cognitive Services Example.

Before starting the actual development, we should know the prerequisites needed here.

Prerequisites

Below are the prerequisites needed here to start with the development activities

You must have a valid Azure subscription or a valid Azure Account. If you don’t have an Azure Account till now, Create a Free Azure Account now.
You need to install Visual Studio 2019 in your machine. If you haven’t installed Visual Studio 2019 yet. Download and Install the Visual Studio 2019 in your dev machine now.

Assuming, you are ready with the above Prerequisites, Let’s start the development activity for the actual functionality here. The first step we will do here is, we will create an Azure Computer vision API in the Azure Portal.

Create Azure Computer Vision API

Here, we will create an Azure Computer Vision API in the Azure Portal. But before that what if we will discuss a little bit on the What is Azure Computer Vision API?

What is Azure Computer Vision API?

Azure Computer Vision API is the part of Azure Cognitive Services, an Artificial Intelligence (AI) service API from Microsoft that helps the developers with an advanced algorithm for processing the Images and can analyze the content of an image or a video in a very effective way and then it provides all the detailed information about that images.

It helps the developer to implement this AI feature easily with less coding effort from a developer perspective. It is all about calling the API and the interesting part here is no need for any expertise on the Artificial Intelligence (AI) area. Makes the developer’s life easy.

Follow the below steps to Create Azure Azure Cognitive Services Computer Vision API.

Once you logged in to the Azure Portal, Search for the Computer Vision and click on the search result Computer Vision to Create Azure Computer Vision under the Marketplace.

Or, For the same option, On the Home page, from the Left navigation, click on the + Create a Resource as highlighted below

Now on the New window, search for the Computer Vision and then click on the search result Computer Vision as shown below.

On the Computer Vision window, click o the Create button to create the Computer vision API.

How to Develop Azure Computer Vision API

On the Create Computer Vision page, Provide the below details

Subscription: Choose a valid subscription that you want to use to create the Microsoft Computer Vision API.
Resource Group: You can choose your existing Resource Group here. If you don’t have an existing Resource Group, then click on the Create new link to create a new Resource Group.
Region: Select the Region for your Azure Resource.
Name: You will have to provide a unique name for your Azure Cognitive Services Computer vision API.
Pricing tier: You can select the Pricing tier based on your business need. If you want to check the pricing details, then You can click on the View full pricing details link to verify the pricing details for your reference. For the demo purpose, you can select the Free F0 tier for the Demo purposes where you can utilize 20 calls per minute and 5K calls per month.

Finally click on the Review + Create button as highlighted below.

Now, it will validate all the information entered by you on the above window, and then it will show you the Validation Passed message then You can able to see the Create button is enabled On the next window as shown below. Now verify the details entered by you again and then click on the Create button to create the Microsoft Computer Vision API.

Now you can able to see that the Deployment is completed successfully and now click on the Go to resource button to navigate to the Microsoft computer vision API that you have created just now.

Now the next step is to copy the Key1 value of the Azure Computer Vision API, To copy the Key1 value, On the Cognitive Services Page, click on the Keys and Endpoint from the left navigation. Now you can able to see the Key1 and the Key2 value, As highlighted below, you can click on the Copy button for the Key1 value and keep it in a notepad that we will use in our code on the next steps.

You can also click on the Regenerate Key1 or Regenerate Key2 button to generate a new key for the Key1 or Key2 if you want.

Steps to Configure Microsoft Computer vision API

Now we are done with our first step i.e we have Created the Azure Cognitive Services Computer Vision API and also copied the value of the KEY1. Now we are going to create a windows application using Visual Studio 2019 where we will use the Key and endpoint URL of the Azure Computer Vision API.

Create a windows application using Visual Studio 2019

Follow the below steps to create a windows application using Visual Studio 2019 where we are going to use the key-value and Endpoint URL of the Microsoft Computer Vision API.

Open the Visual Studio 2019 and click on the Create a New Project button on the Getting Started window to create a new Windows form Project.

On the next window, select the Windows Forms App (.NET Framework) project template and then click on the Next button.

How to Build Intelligent C# Apps With Azure Cognitive Services

Now on the Configure your new project window, Enter the Project name, Choose a location to save your project, and then choose the .NET framework as the latest version and then click on the Create button to create the new windows application as highlighted below.

How to Add Some Intelligence To Your C# Apps With Microsoft Cognitive Services

Now the project will be created successfully like below

Image Analysis Using Computer Vision API

Now we will add the code as needed. The first thing is on the Form1.cs[Design] file add two Buttons named Upload and OutPut and a Picture Box next to the Upload button and one more Multiline Text box next to the OutPut button as shown below.

Image Analysis Using Azure Computer Vision API

Now the design part is done and the time to add the code for the functionality. Now open the Form1.cs file meaning the code-behind file.

The first change is, add the below two using statements.

using System.Net.Http;
using System.IO;

Add the below piece of code on the button click event of the Upload button. Click on the Upload button on the design view and that will generate the button click event of the Upload button.

string imgPath = "";

private void btnUpload_Click(object sender, EventArgs e)
        {
            
            OpenFileDialog dg = new OpenFileDialog();

            dg.Filter = "JPEG *.jpg|*.jpg|PNG *.png|*.png";

            if (dg.ShowDialog() == DialogResult.OK)
            {
                
                imgPath = dg.FileName;
                 
                pictureBox1.Image = Image.FromFile(imgPath);
            }
        }

Now, on the same file add a new method named as Analyze() and add the below piece of code for that method.

You need to add two string variables one is for the Azure Computer Vision API Key and the other string variable for the EndPoint URL of the Azure Computer Vision API that we have created above. The Key value we have already kept in the note pad after the creation of the Azure Cognitive Services Computer Vision API if you remember and then the End Point URL will be based on the Region you have selected for your Azure Computer Vision API. Make sure to change the value of the Key and Endpoint based on yours.

For me, the EndPoint URL for my Azure Computer Vision API ( appending the /analyze property), is as below https://eastus.api.cognitive.microsoft.com/vision/v3.0/analyze

const string key = "d38b4303c277####a9100ed43ff4b76f";
        const string endpoint = "https://eastus.api.cognitive.microsoft.com/vision/v3.0/analyze";
async Task<string> Analyze(string imageFilePath)
        {
             
            HttpClient cnt = new HttpClient();

            cnt.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", endpoint);

            string Paramters = "visualFeatures=Categories,Description,Color&language=en";

            string uri = key + "?" + Paramters;

            HttpResponseMessage response;

            byte[] imageByte = GetImageDetails(imageFilePath);
                   
            using (ByteArrayContent content = new ByteArrayContent(imageByte))
            {
                
                content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
                                  
                response = await cnt.PostAsync(uri, content);
                                 
                string contentString = await response.Content.ReadAsStringAsync();

                // return the output
                return contentString;
            }

        }

Now you need to add the GetImageDetails() method code on the same file. So add the below method to the same file.

private byte[] GetImageDetails(string imageFilePath)
        {
           
            FileStream fstrm = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);
              
            BinaryReader rdr = new BinaryReader(fstrm);
            
            return rdr.ReadBytes((int)fstrm.Length);
        }

Now if you remember we have another button that is OutPut. same way like the upload button, click on the OutPut button and that will generate the OutPut button event handler and then add the below code for that.

private async void btnOutput_Click(object sender, EventArgs e)
        {
              
            string rslt = await Analyze(imgPath);

           
            textBox1.Text = rslt;
        }

Now the complete code for the class file i.e Form1.cs file will be like below

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Net.Http;
using System.IO;

namespace MyInteligentApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        string imgPath = "";
        const string key = "d38b4303c277####9100ed43ff4b76f";
        const string endpoint = "https://eastus.api.cognitive.microsoft.com/vision/v3.0/analyze";
        private void btnUpload_Click(object sender, EventArgs e)
        {
            
            OpenFileDialog dg = new OpenFileDialog();

            dg.Filter = "JPEG *.jpg|*.jpg|PNG *.png|*.png";

            if (dg.ShowDialog() == DialogResult.OK)
            {
                
                imgPath = dg.FileName;
                 
                pictureBox1.Image = Image.FromFile(imgPath);
            }
        }

        async Task<string> Analyze(string imageFilePath)
        {
             
            HttpClient cnt = new HttpClient();

            cnt.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", key);

            string Paramters = "visualFeatures=Categories,Description,Color&language=en";

            string uri = endpoint + "?" + Paramters;

            HttpResponseMessage response;

            byte[] imageByte = GetImageDetails(imageFilePath);
                   
            using (ByteArrayContent content = new ByteArrayContent(imageByte))
            {
                
                content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
                                  
                response = await cnt.PostAsync(uri, content);
                                 
                string contentString = await response.Content.ReadAsStringAsync();

                // return the output
                return contentString;
            }

        }
        private byte[] GetImageDetails(string imageFilePath)
        {
           
            FileStream fstrm = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);
              
            BinaryReader rdr = new BinaryReader(fstrm);
            
            return rdr.ReadBytes((int)fstrm.Length);
        }

        private async void btnOutput_Click(object sender, EventArgs e)
        {
              
            string rslt = await Analyze(imgPath);

           
            textBox1.Text = rslt;
        }
    }
}

You can see the class file changes like below

Image Analysis Using Computer Vision API - Cognitive Services

Now we are done with the code changes. Now the time to test our application if it is working fine or not. Press F5 to run the application. Now from the below window, click on the Upload button and browse the image from the local path from your PC and then click on the OutPut button, You can able to see, we got the expected OutPut.

How to develop Intelligent C# Apps With Azure Cognitive Services

We got the expected output in the JSON format as below.

{"categories":[{"name":"others_","score":0.125},{"name":"outdoor_","score":0.02734375,"detail":{"landmarks":[]}}],"color":{"dominantColorForeground":"Pink","dominantColorBackground":"Grey","dominantColors":["Grey"],"accentColor":"A68325","isBwImg":false,"isBWImg":false},"description":{"tags":["outdoor","car","parked","motorcycle","truck","dirt","man","sitting","side","orange","standing","street","old","riding","parking","young","field","people","group"],"captions":[{"text":"a car parked in a parking lot","confidence":0.8419375970943185}]},"requestId":"8916930e-1385-4aa5-9ecb-d302e2c58ed3","metadata":{"height":376,"width":535,"format":"Jpeg"}}

This is how you can Build Intelligent C# Apps With Azure Cognitive Services and also we have discussed an excellent Azure Cognitive Services Example.

You may also like following the below articles

Wrapping Up

Well, In this article, we have discussed Build Intelligent C# Apps With Azure Cognitive Services, Azure Cognitive Services and we also discussed Azure Cognitive Services Example, Create Azure Computer Vision API, What is Azure Computer Vision API?. Hope you have enjoyed this article !!!