In Focus

Xamarin.Android - Recognize Celebrities Using Cognitive Services

In this article, you will learn how to consume Cognitive Services for recognizing a celebrity's face, using Xamarin.Android. I hope you will learn some amazing things in Xamarin using Cognitive Services.

Introduction
 
In this article, you will learn how to consume Cognitive Services for recognizing a celebrity, using Xamarin.Android. I hope you will learn some amazing things in Xamarin using cognitive services.
 
Prerequisites
  • You must have a subscription key for Computer Vision
  • Microsoft.Net.Http
  • Newtonsoft.Json
Computer Vision API keys
 
Computer Vision Services require special subscription keys. Every call to the Computer Vision API requires a subscription key that is needed to be either passed through a query string parameter or specified in the request header.
 
To sign up for subscription keys, see Subscriptions. It's free to sign up. Pricing for these services is subject to change.
 
If you sign up using the Computer Vision free trial, your subscription keys are valid for the West-Central region
(https://westcentralus.api.cognitive.microsoft.com).
Xamarin.Android - Recognize Celebrities Using Cognitive Services
The steps given below are required to be followed in order to create a Celebrity Recognition app in Xamarin.Android, using Visual Studio.
 
Step 1 - Create an Android Project
 
Create your Android solution in Visual Studio or Xamarin Studio. Select Android and from the list, choose Android blank app. Give it a name, like RecognizeCelebrities.
 
(ProjectName: RecognizeCelebrities)
 
Step 2 - Add references of NuGet Packages
 
First of all, in References, add the reference to Microsoft.Net.Http and Newtonsoft.Json using NuGet Package Manager, as shown below.
 
Xamarin.Android - Recognize Celebrities Using Cognitive Services 
 
Step 3 - Create User Interface
 
Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml and add the following code. The layout will have an ImageView in order to display the preview of a celebrity's image. I also added a TextView to display the name of the celebrity.
 
(FileName: Main.axml)
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:padding="10dp"  
  8.     android:orientation="vertical">  
  9.     <LinearLayout  
  10.         android:orientation="vertical"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:padding="8dp">  
  14.         <ImageView  
  15.             android:id="@+id/imgView"  
  16.             android:layout_width="350dp"  
  17.             android:layout_height="350dp" />  
  18.         <ProgressBar  
  19.             android:layout_width="match_parent"  
  20.             android:layout_height="wrap_content"  
  21.             android:id="@+id/progressBar"  
  22.             android:visibility="invisible" />  
  23.         <TextView  
  24.             android:id="@+id/txtDescription"  
  25.             android:text="Description:"  
  26.             android:layout_width="match_parent"  
  27.             android:layout_height="match_parent"  
  28.             android:textSize="25sp"  
  29.             android:textColor="#000000" />  
  30.         <Button  
  31.             android:id="@+id/btnAnalyze"  
  32.             android:text="Analyze"  
  33.             android:layout_width="match_parent"  
  34.             android:layout_height="wrap_content" />  
  35.     </LinearLayout>  
  36. </LinearLayout>  
Step 4 - Create Analysis Model Class
 
Add a new class to your project with the name AnalysisModel.cs. Add the following properties to get the result set from JSON response with an appropriate namespace.
  1. using System.Collections.Generic;  
  2.   
  3. namespace RecognizeCelebrities  
  4. {  
  5.     public class AnalysisModel  
  6.     {  
  7.         public IList<Category> categories { getset; }  
  8.         public object adult { getset; }  
  9.         public IList<Tag> tags { getset; }  
  10.         public Description description { getset; }  
  11.         public string requestId { getset; }  
  12.         public Metadata metadata { getset; }  
  13.         public IList<Face> faces { getset; }  
  14.         public Color color { getset; }  
  15.         public ImageType imageType { getset; }  
  16.     }  
  17.     public class FaceRectangle  
  18.     {  
  19.         public int left { getset; }  
  20.         public int top { getset; }  
  21.         public int width { getset; }  
  22.         public int height { getset; }  
  23.     }  
  24.   
  25.     public class Celebrity  
  26.     {  
  27.         public string name { getset; }  
  28.         public FaceRectangle faceRectangle { getset; }  
  29.         public double confidence { getset; }  
  30.     }  
  31.   
  32.     public class Detail  
  33.     {  
  34.         public IList<Celebrity> celebrities { getset; }  
  35.         public object landmarks { getset; }  
  36.     }  
  37.   
  38.     public class Category  
  39.     {  
  40.         public string name { getset; }  
  41.         public double score { getset; }  
  42.         public Detail detail { getset; }  
  43.     }  
  44.   
  45.     public class Tag  
  46.     {  
  47.         public string name { getset; }  
  48.         public double confidence { getset; }  
  49.     }  
  50.   
  51.     public class Caption  
  52.     {  
  53.         public string text { getset; }  
  54.         public double confidence { getset; }  
  55.     }  
  56.   
  57.     public class Description  
  58.     {  
  59.         public IList<string> tags { getset; }  
  60.         public IList<Caption> captions { getset; }  
  61.     }  
  62.   
  63.     public class Metadata  
  64.     {  
  65.         public int width { getset; }  
  66.         public int height { getset; }  
  67.         public string format { getset; }  
  68.     }  
  69.   
  70.     public class Face  
  71.     {  
  72.         public int age { getset; }  
  73.         public string gender { getset; }  
  74.         public FaceRectangle faceRectangle { getset; }  
  75.     }  
  76.   
  77.     public class Color  
  78.     {  
  79.         public string dominantColorForeground { getset; }  
  80.         public string dominantColorBackground { getset; }  
  81.         public IList<string> dominantColors { getset; }  
  82.         public string accentColor { getset; }  
  83.         public bool isBWImg { getset; }  
  84.     }  
  85.   
  86.     public class ImageType  
  87.     {  
  88.         public int clipArtType { getset; }  
  89.         public int lineDrawingType { getset; }  
  90.     }  
  91. }  
Step 5 - Backend Logic 
 
Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code with appropriate namespaces.
 
Note: Please replace your subscription key and your selected region address in the MainActivity class.
 
(FileName: MainActivity)
  1. using Android.App;  
  2. using Android.Graphics;  
  3. using Android.OS;  
  4. using Android.Support.V7.App;  
  5. using Android.Views;  
  6. using Android.Widget;  
  7. using Newtonsoft.Json;  
  8. using System;  
  9. using System.IO;  
  10. using System.Net.Http;  
  11. using System.Net.Http.Headers;  
  12. using System.Threading.Tasks;  
  13.   
  14. namespace RecognizeCelebrities  
  15. {  
  16.     [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]  
  17.     public class MainActivity : AppCompatActivity  
  18.     {  
  19.         const string subscriptionKey = "3407ad614**********4ebf0dc26d";  
  20.         const string uriBase = "https://westcentralus.api.cognitive.microsoft.com/vision/v2.0/analyze";  
  21.         Bitmap mBitmap;  
  22.         private ImageView imageView;  
  23.         private ProgressBar progressBar;  
  24.         ByteArrayContent content;  
  25.         private TextView textView;  
  26.         Button btnAnalyze;  
  27.         protected override void OnCreate(Bundle savedInstanceState)  
  28.         {  
  29.             base.OnCreate(savedInstanceState);  
  30.               
  31.             // Set our view from the "main" layout resource  
  32.             SetContentView(Resource.Layout.activity_main);  
  33.               
  34.             mBitmap = BitmapFactory.DecodeResource(Resources, Resource.Drawable.dblbig);  
  35.             imageView = FindViewById<ImageView>(Resource.Id.imgView);  
  36.             imageView.SetImageBitmap(mBitmap);  
  37.             textView = FindViewById<TextView>(Resource.Id.txtDescription);  
  38.             progressBar = FindViewById<ProgressBar>(Resource.Id.progressBar);  
  39.             btnAnalyze = FindViewById<Button>(Resource.Id.btnAnalyze);  
  40.             byte[] bitmapData;  
  41.             using (var stream = new MemoryStream())  
  42.             {  
  43.                 mBitmap.Compress(Bitmap.CompressFormat.Jpeg, 100, stream);  
  44.                 bitmapData = stream.ToArray();  
  45.             }  
  46.             content = new ByteArrayContent(bitmapData);  
  47.   
  48.             btnAnalyze.Click += async delegate  
  49.             {  
  50.                 busy();  
  51.                await MakeAnalysisRequest(content);  
  52.             };             
  53.     }  
  54.         public async Task MakeAnalysisRequest(ByteArrayContent content)  
  55.         {  
  56.             try  
  57.             {  
  58.                 HttpClient client = new HttpClient();
  59.                 // Request headers.  
  60.                 client.DefaultRequestHeaders.Add(  
  61.                     "Ocp-Apim-Subscription-Key", subscriptionKey);
  62.                 string requestParameters =  
  63.                     "visualFeatures=Categories&details=Celebrities";
  64.                 // Assemble the URI for the REST API method.  
  65.                 string uri = uriBase + "?" + requestParameters;
  66.                 content.Headers.ContentType =  
  67.                     new MediaTypeHeaderValue("application/octet-stream");
  68.                 // Asynchronously call the REST API method.  
  69.                 var response = await client.PostAsync(uri, content);
  70.                 // Asynchronously get the JSON response.  
  71.                 string contentString = await response.Content.ReadAsStringAsync();  
  72.                 var analysesResult = JsonConvert.DeserializeObject<AnalysisModel>(contentString);  
  73.                 NotBusy();  
  74.                 textView.Text = "Name: " + analysesResult.categories[0].detail.celebrities[0].name.ToString();  
  75.             }  
  76.             catch (Exception e)  
  77.             {  
  78.                 Toast.MakeText(this"" + e.ToString(), ToastLength.Short).Show();  
  79.             }  
  80.         }  
  81.   
  82.         void busy()  
  83.         {  
  84.             progressBar.Visibility = ViewStates.Visible;  
  85.             btnAnalyze.Enabled = false;  
  86.         }  
  87.   
  88.         void NotBusy()  
  89.         {  
  90.             progressBar.Visibility = ViewStates.Invisible;  
  91.             btnAnalyze.Enabled = true;  
  92.         }  
  93.     }  
  94. }  
Results of recognizing the celebrities
 
Xamarin.Android - Recognize Celebrities Using Cognitive Services 
 
Xamarin.Android - Recognize Celebrities Using Cognitive Services 
 
Xamarin.Android - Recognize Celebrities Using Cognitive Services 
 
Xamarin.Android - Recognize Celebrities Using Cognitive Services