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

Introduction

Today, Artificial Intelligence is a very common aspect of our daily life. You can notice that most of the companies are using it to create very powerful and smart apps. On Facebook, while you're uploading a photo, it can automatically recognize your face. Also, the bots are available through Facebook Messenger, Cortana, Telegram, and many more. Using Artificial Intelligence makes your app more secure and robust and provides an interesting User Experience.

For example, if you want to create a home renting website, using Artificial Intelligence will make your project more powerful because you can add an Image Content recognizer to it. So, the home ads publishers won’t be able to upload any type of images except Home's; and your website will be more trusted. Also, using bots to make your users able to chat to your app will be amazing and the users will like your project more.

In this article, I’m going to talk about what Microsoft Cognitive Services is and how to use these APIs within your C# apps.

Microsoft Cognitive Services

Microsoft Cognitive Services is a set of APIs and SDKs that Microsoft created for the developers to make it easy for them to add intelligence to their apps, such as emotion and video detection; facial, speech, and vision recognition; and speech and language understanding – into their apps.

In this article, I will create a simple Windows Forms application and use the Vision API to recognize the content of an image and get the result in a JSON format so that you can manipulate it in a way you prefer.

Note - In this tutorial, I used the Vision API but you can use any of the available APIs with the same steps. Also, you can use any type of applications not only Windows Forms.

Let’s start step by step

Sign up for Microsoft Cognitive Services for free from this link, https://azure.microsoft.com/en-us/try/cognitive-services/. Follow the steps and set your region.

Cognitive Services

After you log in, choose "Add Vision API" and you will get your endpoint URL and the API key that you will use in your app.

Cognitive Services

This is all you need to start creating your intelligent app.

Open Visual Studio and create a new Windows Forms Project.

Cognitive Services

Add two buttons, a picturebox and a textbox as following.

Cognitive Services

In the code behind file, add the following namespaces:

  1. using System.Net.Http;  
  2. using System.IO;   

Double click on the Browse button to create a click event handler for this button and write the following code to select an image from your local drive.

  1. string imageFilePath = "";   
  2.   
  3.        private void btnBrowse_Click(object sender, EventArgs e)  
  4.        {  
  5.            // Create an OpenFileDialogObject  
  6.            OpenFileDialog ofd = new OpenFileDialog();  
  7.            // Set the filters of the OpenFileDialog to the images formats JPEG and PNG  
  8.            ofd.Filter = "JPEG *.jpg|*.jpg|PNG *.png|*.png";  
  9.   
  10.            if(ofd.ShowDialog() == DialogResult.OK)  
  11.            {  
  12.               // Store the selected file in a general variable   
  13.                imageFilePath = ofd.FileName;  
  14.               // Preview the selected picture in a pictureBox control  
  15.                pictureBox1.Image = Image.FromFile(imageFilePath);  
  16.            }  
  17.        }  
Now, declare two string variables to store your endpoint URL and your API key respectively, that you've get from the step 2 and write the two following methods (The code is self-explanatory).
  1. const string subscriptionKey = "Paste your API key here";  
  2. const string uriBase = "Paste your Endpoint URL here";  
  3.   
  4. // Method to make the restful request   
  5.         async Task<string> MakeAnalaysisRequest(string imageFilePath)  
  6.         {  
  7.             // Create an HttpClient object to make a post request to the Azure Services   
  8.             HttpClient client = new HttpClient();  
  9.   
  10.             // set the following paramters to your request header   
  11.             client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);  
  12.   
  13.             // specify the requested resutls   
  14.             string requestParamters = "visualFeatures=Categories,Description,Color&language=en";  
  15.   
  16.             // create the uri from your endpoint url and the requestedParamters   
  17.             string uri = uriBase + "?" + requestParamters;  
  18.   
  19.             // create a respone message object to get the response of the sent request   
  20.             HttpResponseMessage responseMessage;  
  21.   
  22.             // get the bytes of the selected image   
  23.             byte[] dataByte = GetImageAsBytesArray(imageFilePath);  
  24.   
  25.             // create a content for the post request _ the content will be the bytes of the picture to send it to the Azure servers   
  26.             using (ByteArrayContent content = new ByteArrayContent(dataByte))  
  27.             {  
  28.                 // Define the content type of the request   
  29.                 content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");  
  30.   
  31.                 // send the post request   
  32.                 responseMessage = await client.PostAsync(uri, content);  
  33.   
  34.                 // read the string response from the sent request   
  35.                 string contentString = await responseMessage.Content.ReadAsStringAsync();  
  36.   
  37.                 // return the string result  
  38.                 return contentString;   
  39.             }  
  40.   
  41.         }  
  42.   
  43.         // Method to get the bytes of a specific image file   
  44.         private  byte[] GetImageAsBytesArray(string imageFilePath)  
  45.         {  
  46.             // Create a file stream to access to the bytes of the selected file   
  47.             FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);  
  48.             // Create a BinaryReader object to read the bytes from a specific stream   
  49.             BinaryReader reader = new BinaryReader(fileStream);  
  50.             // Return the read bytes of a specific file   
  51.             return reader.ReadBytes((int)fileStream.Length);  
  52.         }  
Double click on the “Tell me what you see” button to create a click event handler and write the following code.
  1. // Tell me what you see button click event handler   
  2.        private async void btnRecoginze_Click(object sender, EventArgs e)  
  3.        {  
  4.            // get the result   
  5.            string result = await MakeAnalaysisRequest(imageFilePath);  
  6.   
  7.            // show the result in the textbox   
  8.            txtResult.Text = result;   
  9.              
  10.        }  
The full code should be like this.
  1. using System;  
  2. using System.Drawing;  
  3. using System.Threading.Tasks;  
  4. using System.Windows.Forms;  
  5. using System.Net.Http;  
  6. using System.IO;   
  7.   
  8. namespace VisionApi  
  9. {  
  10.     public partial class Form1 : Form  
  11.     {  
  12.         public Form1()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.         const string subscriptionKey = "Paste your API key here";  
  17.         const string uriBase = "Paste your Endpoint URL here";  
  18.         string imageFilePath = "";   
  19.   
  20.         private void btnBrowse_Click(object sender, EventArgs e)  
  21.         {  
  22.             OpenFileDialog ofd = new OpenFileDialog();  
  23.             ofd.Filter = "JPEG *.jpg|*.jpg|PNG *.png|*.png";  
  24.   
  25.             if(ofd.ShowDialog() == DialogResult.OK)  
  26.             {  
  27.                 imageFilePath = ofd.FileName;  
  28.                 pictureBox1.Image = Image.FromFile(imageFilePath);  
  29.                 btnRecoginze.Enabled = true;   
  30.             }  
  31.         }  
  32.   
  33.         // Method to make the restful request   
  34.         async Task<string> MakeAnalaysisRequest(string imageFilePath)  
  35.         {  
  36.             // Create an HttpClient object to make a post request to the Azure Services   
  37.             HttpClient client = new HttpClient();  
  38.   
  39.             // set the following paramters to your request header   
  40.             client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);  
  41.   
  42.             // specify the requested resutls   
  43.             string requestParamters = "visualFeatures=Categories,Description,Color&language=en";  
  44.   
  45.             // create the uri from your endpoint url and the requestedParamters   
  46.             string uri = uriBase + "?" + requestParamters;  
  47.   
  48.             // create a respone message object to get the response of the sent request   
  49.             HttpResponseMessage responseMessage;  
  50.   
  51.             // get the bytes of the selected image   
  52.             byte[] dataByte = GetImageAsBytesArray(imageFilePath);  
  53.   
  54.             // create a content for the post request _ the content will be the bytes of the picture to send it to the Azure servers   
  55.             using (ByteArrayContent content = new ByteArrayContent(dataByte))  
  56.             {  
  57.                 // Define the content type of the request   
  58.                 content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");  
  59.   
  60.                 // send the post request   
  61.                 responseMessage = await client.PostAsync(uri, content);  
  62.   
  63.                 // read the string response from the sent request   
  64.                 string contentString = await responseMessage.Content.ReadAsStringAsync();  
  65.   
  66.                 // return the string result  
  67.                 return contentString;   
  68.             }  
  69.   
  70.         }  
  71.   
  72.         // Method to get the bytes of a specific image file   
  73.         private  byte[] GetImageAsBytesArray(string imageFilePath)  
  74.         {  
  75.             // Create a file stream to access to the bytes of the selected file   
  76.             FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);  
  77.             // Create a BinaryReader object to read the bytes from a specific stream   
  78.             BinaryReader reader = new BinaryReader(fileStream);  
  79.             // Return the read bytes of a specific file   
  80.             return reader.ReadBytes((int)fileStream.Length);  
  81.         }  
  82.   
  83.         // Tell me what you see button click event handler   
  84.         private async void btnRecoginze_Click(object sender, EventArgs e)  
  85.         {  
  86.             // get the result   
  87.             string result = await MakeAnalaysisRequest(imageFilePath);  
  88.   
  89.             // show the result in the textbox   
  90.             txtResult.Text = result;   
  91.               
  92.         }  
  93.     }  
  94. }  
Now, just run the application and choose a photo from your device. Then, click “Tell me what you see”, and it will give you results in a JSON format.

Cognitive Services
 
For more information about how to use Microsoft Cognitive Services, go to the following URL -

https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts/csharp

Next Recommended Readings