Emotion Detection In Xamarin Forms By Using Azure Cognitive Services

Cognitive Services

Cognitive Services make our applications more intelligent, attractive, and discoverable. We can create lots of apps for our clients in just a few hours by using these services. The goal of Cognitive Services is to democratize AI by packaging it into discrete components that are easy for developers to use in their own apps.

Microsoft and Cognitive Services

In the field of Artificial Intelligence (AI) Microsoft has developed cognitive services to solve the problems related to AI.

Emotion API

Our main concern is with vision in which we analyze images and videos for content and other useful information.

We are going to cover the emotion detection which is one of the five group of tasks.

Emotion analyzes faces to detect a range of moods. Emotion returns emotions like fear, happiness, and sadness by taking input in the form of an image stream.

Emotion Detection Steps

First of all, we need the Subscriber Key which is free for the testing phase. You can get your Emotion API key from the given link.

In short, we have to consume the rest API in Xamarin Forms by using the Emotion NuGet Package. For this purpose, we will use Visual Studio 2017.

First of all, we will install the following NuGet Packages.

  • Plugin.Media (For Camera)
  • ProjectOxford.Emotion (Emotion Detection)
  • Plugin.Media

After installing all the packages, it’s time to write a few lines of code.

Create new project

Add a few XAML lines to your XAML files.

  1. <StackLayout Padding="50">  
  2.     <Button x:Name="BtnImage" Text="Pick Image" Clicked="BtnImage_OnClicked" />  
  3.     <Image x:Name="Img" WidthRequest="200" HeightRequest="200" />  
  4.     <Label x:Name="LblResult" FontSize="32" />   
  5. </StackLayout>  

Now, initialize the camera for accessing the camera of the devices. We will call an emotion client just like HttpClient and add a few lines of codes which are given below for accessing the Cognitive Services calling and get the response into the label.

  1. private async void BtnImage_OnClicked(object sender, EventArgs e) {  
  2.     LblResult.Text = "";  
  3.     var emotionKey = "KEY FROM AZURE";  
  4.     var media = Plugin.Media.CrossMedia.Current;  
  5.     await media.Initialize();  
  6.     var file = await media.TakePhotoAsync(new StoreCameraMediaOptions {  
  7.         SaveToAlbum = false  
  8.     });  
  9.     if (file != null) {  
  10.         Source = ImageSource.FromStream(() => file.GetStream());  
  11.         var emotionclient = new EmotionServiceClient(emotionKey);  
  12.         var result = await emotionclient.RecognizeAsync(file.GetStream());  
  13.         var score = result.FirstOrDefault().Scores.ToRankedList().First().Key;  
  14.         Text = $ "Emotion is {score}";  
  15.         Dispose(); //avoid memory leakage  
  16.     }  
  17. }  
Now, just press the button and click a picture whose size will be max 4mb and get the response via JSON.