Xamarin.Android - Face Detection Using Computer Vision Face API

Introduction

In the last couple of Cognitive Services posts, we focused on Microsoft Computer Vision API and its applications. In this article, we will focus on the Face API. We will see what we can do with the Face API with working examples of it.

 

 

Prerequisites

• Computer Vision Face API Key
• Microsoft.Net.Http
• Newtonsoft.Json

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 FaceDetection.

(ProjectName: FaceDetection)

Step 2 - Add References of NuGet Packages

First of all, in References, add the references to Microsoft.Net.Http and Newtonsoft.Json using NuGet Package Manager, as shown below.

 

 

Step 3 - User Interface

 

Open Solution Explorer-> Project Name-> Resources-> Layout-> activity_main.axml and add the following code.

(FileName: activity_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.         <Button  
24.             android:id="@+id/btnAnalyze"  
25.             android:text="Analyze"  
26.             android:layout_width="match_parent"  
27.             android:layout_height="wrap_content" />  
28.         <TextView  
29.             android:id="@+id/txtGender"  
30.             android:text="Gender:"  
31.             android:layout_width="match_parent"  
32.             android:layout_height="match_parent"/>  
33.     <TextView  
34.             android:id="@+id/txtAge"  
35.             android:text="Age:"  
36.             android:layout_width="match_parent"  
37.             android:layout_height="match_parent"/>  
38.     <TextView  
39.             android:id="@+id/txtFaces"  
40.             android:text="Glasses:"  
41.             android:layout_width="match_parent"  
42.             android:layout_height="match_parent"/>  
43.     </LinearLayout>  
44. </LinearLayout>  

Step 4 - 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.

 

(FileName: AnalysisModel.cs)

1. using System.Collections.Generic;  
2.   
3. namespace FaceDetection  
4. {  
5.     public class AnalysisModel  
6.     {  
7.         public string faceId { get; set; }  
8.         public FaceRectangle faceRectangle { get; set; }  
9.         public FaceAttributes faceAttributes { get; set; }  
10.     }  
11.     public class FaceRectangle  
12.     {  
13.         public int top { get; set; }  
14.         public int left { get; set; }  
15.         public int width { get; set; }  
16.         public int height { get; set; }  
17.     }  
18.     public class Emotion  
19.     {  
20.         public double anger { get; set; }  
21.         public double contempt { get; set; }  
22.         public double disgust { get; set; }  
23.         public double fear { get; set; }  
24.         public double happiness { get; set; }  
25.         public double neutral { get; set; }  
26.         public double sadness { get; set; }  
27.         public double surprise { get; set; }  
28.     }  
29.     public class FaceAttributes  
30.     {  
31.         public double smile { get; set; }  
32.         public string gender { get; set; }  
33.         public double age { get; set; }  
34.         public string glasses { get; set; }  
35.         public Emotion emotion { get; set; }  
36.     }  
37. }  

Step 5 - Backend Code

 

Let's 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.Collections.Generic;  
10. using System.IO;  
11. using System.Net.Http;  
12. using System.Net.Http.Headers;  
13. using System.Threading.Tasks;  
14.   
15. namespace FaceDetection
16. {  
17.     [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]  
18.     public class MainActivity : AppCompatActivity  
19.     {  
20.         const string subscriptionKey = "202631d0172a48d08f21b52bc22ee860";  
21.         const string uriBase = "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";  
22.         Bitmap mBitmap;  
23.         private ImageView imageView;  
24.         private ProgressBar progressBar;  
25.         ByteArrayContent content;  
26.         private TextView txtAge , txtGender,txtFaces;  
27.         Button btnAnalyze;  
28.         protected override void OnCreate(Bundle savedInstanceState)  
29.         {  
30.             base.OnCreate(savedInstanceState);  
31.             // Set our view from the "main" layout resource  
32.             SetContentView(Resource.Layout.activity_main);  
33.             mBitmap = BitmapFactory.DecodeResource(Resources, Resource.Drawable.newAhsan);  
34.             imageView = FindViewById<ImageView>(Resource.Id.imgView);  
35.             imageView.SetImageBitmap(mBitmap);  
36.             txtGender = FindViewById<TextView>(Resource.Id.txtGender);  
37.             txtAge = FindViewById<TextView>(Resource.Id.txtAge);  
38.             txtFaces = FindViewById<TextView>(Resource.Id.txtFaces);  
39.             progressBar = FindViewById<ProgressBar>(Resource.Id.progressBar);  
40.             btnAnalyze = FindViewById<Button>(Resource.Id.btnAnalyze);  
41.             byte[] bitmapData;  
42.             using (var stream = new MemoryStream())  
43.             {  
44.                 mBitmap.Compress(Bitmap.CompressFormat.Jpeg, 100, stream);  
45.                 bitmapData = stream.ToArray();  
46.             }  
47.             content = new ByteArrayContent(bitmapData);  
48.   
49.             btnAnalyze.Click += async delegate  
50.             {  
51.                 busy();  
52.                await MakeAnalysisRequest(content);  
53.             };             
54.     }  
55.         public async Task MakeAnalysisRequest(ByteArrayContent content)  
56.         {  
57.             try  
58.             {  
59.                 HttpClient client = new HttpClient();  
60.                 // Request headers.  
61.                 client.DefaultRequestHeaders.Add(  
62.                 "Ocp-Apim-Subscription-Key", subscriptionKey);  
63.   
64.                 string requestParameters = "returnFaceId=true&returnfaceRectangle=true" +  
65.                                           "&returnFaceAttributes=age,gender,smile,glasses";  
66.                 // Assemble the URI for the REST API method.  
67.                 string uri = uriBase + "?" + requestParameters;  
68.   
69.                 content.Headers.ContentType =  
70.                     new MediaTypeHeaderValue("application/octet-stream");  
71.                 // Asynchronously call the REST API method.  
72.                 var response = await client.PostAsync(uri, content);  
73.                 // Asynchronously get the JSON response.  
74.                 string contentString = await response.Content.ReadAsStringAsync();  
75.   
76.                 var faces = JsonConvert.DeserializeObject<List<AnalysisModel>>(contentString);  
77.                 Toast.MakeText(this, faces.Count.ToString()+ " Face Detected" , ToastLength.Short).Show();  
78.                 NotBusy();  
79.                 var newbitmap = DrawRectanglesOnBitmap(mBitmap, faces);  
80.                 imageView.SetImageBitmap(newbitmap);  
81.                 txtGender.Text = "Gender:  " + faces[0].faceAttributes.gender.ToString();  
82.                 txtAge.Text ="Age:  " + faces[0].faceAttributes.age.ToString();  
83.                 txtFaces.Text = "Glasses:  " + faces[0].faceAttributes.glasses.ToString();  
84.             }  
85.             catch (Exception e)  
86.             {  
87.                 Toast.MakeText(this, "" + e.ToString(), ToastLength.Short).Show();  
88.             }  
89.         }  
90.         //DrawRectangle
91.         private Bitmap DrawRectanglesOnBitmap(Bitmap mybitmap, List<AnalysisModel> faces)  
92.         {  
93.             Bitmap bitmap = mybitmap.Copy(Bitmap.Config.Argb8888, true);  
94.             Canvas canvas = new Canvas(bitmap);  
95.             Paint paint = new Paint();  
96.             paint.AntiAlias = true;  
97.             paint.SetStyle(Paint.Style.Stroke);  
98.             paint.Color = Color.DodgerBlue;  
99.             paint.StrokeWidth = 12;  
100.             foreach(var face in faces)  
101.             {  
102.                 var faceRectangle = face.faceRectangle;  
103.                 canvas.DrawRect(faceRectangle.left,  
104.                     faceRectangle.top,  
105.                     faceRectangle.left + faceRectangle.width,  
106.                     faceRectangle.top + faceRectangle.height, paint);  
107.             }  
108.             return bitmap;  
109.         }  
110.         void busy()  
111.         {  
112.             progressBar.Visibility = ViewStates.Visible;  
113.             btnAnalyze.Enabled = false;  
114.         }  
115.         void NotBusy()  
116.         {  
117.             progressBar.Visibility = ViewStates.Invisible;  
118.             btnAnalyze.Enabled = true;  
119.         }  
120.     }  
121. }  

Group Image Face's Detection

 

 

Single Face Detection

 

 

 

Summary

In this post, we explored the Face API that belongs to the Microsoft Cognitive Services stable of products.

Catch up on my all Cognitive Services articles here.

• Xamarin.Android - Using Computer Vision API To Analyze Images Taken By Camera
• Xamarin.Android - Analyze Image Using Computer Vision
• Xamarin.Android - Recognize Celebrities By Camera Using Computer Vision
• Xamarin.Android - Recognize Celebrities Using Cognitive Services