Introduction

Cognitive Services help us to develop an intelligent application, just by writing a few lines of code. These applications are deployed across major platforms, like Windows, iOS, and Android. This article focuses on developing an application using Emotion API.

Emotion API detects emotions such as - anger, contempt, disgust, fear, happiness, neutral, and sadness. The emotion is detected by using a sentiment score of the face.

Before reading this article, please go through the following article to gain some information on Cognitive Services and Universal Windows applications.

To complete this article, we need the following requirements

If you don’t have Visual Studio 2015, download the community edition, as it is absolutely free. You can download Visual Studio 2015 from here. To install Universal Windows Platform (Windows 10 SDK), we are in need of the internet with good bandwidth.

Let’s get started.

Getting Keys from Cognitive Services

Each user is able to get 2 keys for each product such as Face API, Emotion API, Text Analysis, and so on. To activate Cognitive Emotion API, visit Cognitive service official site.

sharp

Once the key is generated, click the copy option to copy the key and make a note of it, as it will be used in the future.

Creating App

Open Visual Studio 2015 to start developing Emotion app using Cognitive Services. Click on File -> New -> Project/solution or simply click "New Project" link which is available on the Start page.

sharp

Now, the "New Project" dialog appears. Click Visual C# ->Windows ->Universal ->Blank App (Universal Windows) and then, name the application as per your wish and click OK.

sharp

Select minimum version and targeted version for UWP application, then click OK.

sharp

Now, Visual Studio creates an application and it takes about a minute to complete the task successfully. Then, you will be navigated to MainPage.xaml where we are going to develop an application.

Locate "Solution Explorer" to install "Newtonsoft.Json" NuGet package. Now, right click on the solution's name and click "Manage NuGet Packages". Search for “Newtonsoft.Json” and install.

sharp

Again, open Manage NuGet gallery, search for "Microsoft.ProjectOxford.Emotion" and install it.

sharp

After installation, you will be able to find the installed reference under the reference tree. Now, it is a coding part - so open MainWindow.xaml and add the code given under Grid opening tag.

Add the code, given below, in MainPage.xaml. The below code generates Image View that's used for rendering an image when the button is clicked; and the event handler takes place. Again, add two buttons and set the button click property.

  1. <Image x:Name="imgEmotion" HorizontalAlignment="Left" Height="304" Margin="408,224,0,0" VerticalAlignment="Top" Width="310" />
  2. <Button x:Name="btnTakePhoto" Content="Take Photo" HorizontalAlignment="Left" Margin="172,548,0,0" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" Click="btnTakePhoto_Click" />
  3. <Button x:Name="btnEmotions" Content="Get Emotions" HorizontalAlignment="Left" Margin="810,548,0,0" VerticalAlignment="Top" Height="39" Width="227" FontSize="20" FontWeight="Bold" Click="btnEmotions_Click" />
Add the following "usings" in MainPage.xaml.cs.
  1. using Windows.Media.Capture;
  2. using Windows.Storage;
  3. using Windows.Graphics.Imaging;
  4. using Windows.UI.Xaml.Media.Imaging;
  5. using Windows.Storage.Streams;
  6. using Microsoft.ProjectOxford.Emotion;
  7. using Microsoft.ProjectOxford.Emotion.Contract;
Again, add the following code above the main class or below the partial class in button event to perform the upload and get emotion operations.
  1. const string APIKey = "<Your Key>";
  2. EmotionServiceClient emotionserviceclient = new EmotionServiceClient(APIKey);
  3. CameraCaptureUI captureUI = new CameraCaptureUI();
  4. StorageFile photo;
  5. IRandomAccessStream imageStream;
  6. Emotion[] emotionresult;
  7. Add the following code inside main
  8. function under initialize component.
  9. captureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
  10. captureUI.PhotoSettings.CroppedSizeInPixels = new Size(200, 200);
Add the following code in buttons to capture and get emotions.
  1. private async void btnTakePhoto_Click(object sender, RoutedEventArgs e) {
  2. try {
  3. photo = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
  4. if (photo == null) {
  5. return;
  6. } else {
  7. imageStream = await photo.OpenAsync(FileAccessMode.Read);
  8. BitmapDecoder decoder = await BitmapDecoder.CreateAsync(imageStream);
  9. SoftwareBitmap softwarebitmap = await decoder.GetSoftwareBitmapAsync();
  10. SoftwareBitmap softwarebitmapBGRB = SoftwareBitmap.Convert(softwarebitmap, BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
  11. SoftwareBitmapSource bitmapsource = new SoftwareBitmapSource();
  12. await bitmapsource.SetBitmapAsync(softwarebitmapBGRB);
  13. imgEmotion.Source = bitmapsource;
  14. }
  15. } catch {
  16. tblEmotion.Text = "error taking Photo";
  17. }
  18. }
  19. private async void btnEmotions_Click(object sender, RoutedEventArgs e) {
  20. try {
  21. emotionresult = await emotionserviceclient.RecognizeAsync(imageStream.AsStream());
  22. if (emotionresult != null) {
  23. Scores score = emotionresult[0].Scores;
  24. tblEmotion.Text = "Your Emotion are : \n" + "Happiness: " + score.Happiness + "\n" + "Sadness: " + score.Sadness + "\n" + "Surprise: " + score.Surprise + "\n" + "Neutral: " + score.Neutral + "\n" + "Anger: " + score.Anger + "\n" + "Contempt: " + score.Contempt + "\n" + "Disgust: " + score.Disgust + "\n" + "Fear: " + score.Fear + "\n";
  25. }
  26. } catch {
  27. tblEmotion.Text = "Error Returning the emotion";
  28. }
  29. }
Now, our front-end and back-end coding is completed. So, let's deploy this application by clicking F5. Finally, our output is displayed, as shown below.

private async void btnTakePhoto_Click(object sender, RoutedEventArgs e) { try { photo = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Photo); if (photo == null) { return; } else { imageStream = await photo.OpenAsync(FileAccessMode.Read); BitmapDecoder decoder = await BitmapDecoder.CreateAsync(imageStream); SoftwareBitmap softwarebitmap = await decoder.GetSoftwareBitmapAsync(); SoftwareBitmap softwarebitmapBGRB = SoftwareBitmap.Convert(softwarebitmap, BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied); SoftwareBitmapSource bitmapsource = new SoftwareBitmapSource(); await bitmapsource.SetBitmapAsync(softwarebitmapBGRB); imgEmotion.Source = bitmapsource; } } catch { tblEmotion.Text = "error taking Photo"; } } private async void btnEmotions_Click(object sender, RoutedEventArgs e) { try { emotionresult = await emotionserviceclient.RecognizeAsync(imageStream.AsStream()); if (emotionresult != null) { Scores score = emotionresult[0].Scores; tblEmotion.Text = "Your Emotion are : \n" + "Happiness: " + score.Happiness + "\n" + "Sadness: " + score.Sadness + "\n" + "Surprise: " + score.Surprise + "\n" + "Neutral: " + score.Neutral + "\n" + "Anger: " + score.Anger + "\n" + "Contempt: " + score.Contempt + "\n" + "Disgust: " + score.Disgust + "\n" + "Fear: " + score.Fear + "\n"; } } catch { tblEmotion.Text = "Error Returning the emotion"; } }

Summary

In this article, we have discussed Cognitive Services and built an Emotion API, using C#. I hope, you enjoyed reading this article.