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.



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.



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

Open Visual Studio and create a new Windows Forms Project.



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



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 = "";
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";
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";
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();
10. // set the following paramters to your request header
11. client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);
13. // specify the requested resutls
14. string requestParamters = "visualFeatures=Categories,Description,Color&language=en";
16. // create the uri from your endpoint url and the requestedParamters
17. string uri = uriBase + "?" + requestParamters;
19. // create a respone message object to get the response of the sent request
20. HttpResponseMessage responseMessage;
22. // get the bytes of the selected image
23. byte[] dataByte = GetImageAsBytesArray(imageFilePath);
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");
31. // send the post request
32. responseMessage = await client.PostAsync(uri, content);
34. // read the string response from the sent request
35. string contentString = await responseMessage.Content.ReadAsStringAsync();
37. // return the string result
38. return contentString;
39. }
41. }
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);
7. // show the result in the textbox
8. txtResult.Text = result;
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;
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 = "";
20. private void btnBrowse_Click(object sender, EventArgs e)
21. {
22. OpenFileDialog ofd = new OpenFileDialog();
23. ofd.Filter = "JPEG *.jpg|*.jpg|PNG *.png|*.png";
25. if(ofd.ShowDialog() == DialogResult.OK)
26. {
27. imageFilePath = ofd.FileName;
28. pictureBox1.Image = Image.FromFile(imageFilePath);
29. btnRecoginze.Enabled = true;
30. }
31. }
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();
39. // set the following paramters to your request header
40. client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);
42. // specify the requested resutls
43. string requestParamters = "visualFeatures=Categories,Description,Color&language=en";
45. // create the uri from your endpoint url and the requestedParamters
46. string uri = uriBase + "?" + requestParamters;
48. // create a respone message object to get the response of the sent request
49. HttpResponseMessage responseMessage;
51. // get the bytes of the selected image
52. byte[] dataByte = GetImageAsBytesArray(imageFilePath);
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");
60. // send the post request
61. responseMessage = await client.PostAsync(uri, content);
63. // read the string response from the sent request
64. string contentString = await responseMessage.Content.ReadAsStringAsync();
66. // return the string result
67. return contentString;
68. }
70. }
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. }
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);
89. // show the result in the textbox
90. txtResult.Text = result;
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.

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