Retrieving Face Attributes Using Cognitive Service Face API In UWP With Azure, XAML And C#

Before reading this article, please go through the following articles.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
2. Getting Started With Microsoft Azure Cognitive Services Face APIs
3. Cognitive Service Face API, Using UWP With Azure, XAML, And C#

Microsoft Cognitive Services lets you build apps with powerful algorithms, using just a few lines of code. They work across devices and platforms, such as iOS, Android, and Windows, keep improving, and are easy to set up.

In this article, we will see how to detect faces in an image and get back face rectangles for where the faces are, along with face attributes which contain machine learning-based predictions of facial features. After detecting faces, you can take the face rectangle and pass it to the Emotion API to speed up the processing. The face attribute features available are: Age, Gender, Pose, Wearing Glasses, Smile, and Facial Hair, along with 27 landmarks for each face in the image.

Reading this article, you can learn how to retrieve Face Attributes (like Face ID, Gender, Age, Wearing Glasses) using Cognitive Service Face API in Universal Windows Apps development with Azure, XAML and Visual C#. 

The following important tools are required for developing UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Face API Key (using Azure, Getting Started With Microsoft Azure Cognitive Services Face APIs)

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 and go to Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give it a suitable name (UWPCogFaceData) -> OK.



After choosing the Target and Minimum platform versions that your app will support, the Project creates App.xaml and MainPage.xaml.



Add TextBlock control and change the name and text property for title.



Step 2

Open (double click) the MainPage.xaml file in Solution Explorer and add the following references in the project.

1. Microsoft.ProjectOxford.Face
2. Newtonsoft.Json

For adding Microsoft.ProjectOxford.Face Reference, right click on your project name (UWPCogFace) and select "Manage NuGet Packages".



Choose Browse and search Microsoft.ProjectOxford.Face. Select the package and install it. The Reference is now added to your project.



For adding Newtonsoft.Json Reference, choose Browse and search Newtonsoft.Json. Select the package and install it.



Reference is now added to your project.



Step 3

Add Gender icon images in Assets folder.



Add Image control and set the name for face image.



Add a Text Block and set the name and text property for file attribute title.



Add Image control and set the name for Gender display.



Add 3 Text Blocks and set the name and text property for age, glasses, and Face ID.





Note Automatically, the following code will be generated in XAML code view, while we are done in the design view.

<Page x:Class="UWPCogFaceData.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCogFaceData" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="87,61,0,0" TextWrapping="Wrap" Text="Retriving Face Attributes using Cogintive Service Face API in UWP" VerticalAlignment="Top" Width="522" FontWeight="Bold" />
        <Image x:Name="imgFace" HorizontalAlignment="Left" Height="184" Margin="87,116,0,0" VerticalAlignment="Top" Width="174" />
        <TextBlock x:Name="tblFAttrib" HorizontalAlignment="Left" Margin="331,113,0,0" TextWrapping="Wrap" Text="Face Attributes" VerticalAlignment="Top" FontWeight="Bold" />
        <Image x:Name="imgGender" HorizontalAlignment="Left" Height="40" Margin="331,138,0,0" VerticalAlignment="Top" Width="28" />
        <TextBlock x:Name="tblAge" HorizontalAlignment="Left" Height="40" Margin="364,138,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="73" FontSize="12" />
        <TextBlock x:Name="tblWearGlass" HorizontalAlignment="Left" Margin="359,183,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="78" Height="27" />
        <TextBlock x:Name="tblFaceID" HorizontalAlignment="Left" Height="34" Margin="266,210,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="222" FontSize="10" />
    </Grid>
</Page>

Step 4

Add the following namespaces in Mainpage.xaml.cs for face upload, detect, and draw rectangle.

using Microsoft.ProjectOxford.Face;
using Windows.UI.Xaml.Media.Imaging;

Step 5

Add the FaceServiceClient key use Azure service and generate it (For More Information, please refer to this article Getting Started With Microsoft Azure Cognitive Services Face APIs).

Add the following code with Azure generated key for FaceServiceClient.

 private readonly IFaceServiceClient fsClient = new FaceServiceClient("<Your Key>");

Step 6

Add the code for retrieving the face attributes.

public MainPage() {
    this.InitializeComponent();
    string FaceimgUrl = "http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/AuthorImage/ea4f1720160902050509.jpg";
    imgFace.Source = new BitmapImage(new Uri("http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/AuthorImage/ea4f1720160902050509.jpg", UriKind.Absolute));
    retriveFaceAttributes(FaceimgUrl);
}
async void retriveFaceAttributes(string imageUrl) {
    try {
        var requiredFaceAttributes = new FaceAttributeType[] {
            FaceAttributeType.Age, FaceAttributeType.Gender, FaceAttributeType.Glasses
        };
        var faces = await faceServiceClient.DetectAsync(imageUrl, returnFaceLandmarks: true, returnFaceAttributes: requiredFaceAttributes);
        foreach(var face in faces) {
            var id = face.FaceId;
            var attributes = face.FaceAttributes;
            var age = attributes.Age;
            var gender = attributes.Gender;
            var glasses = attributes.Glasses;
            int roundedAge = (int) Math.Round(age);
            if (!string.IsNullOrEmpty(imageUrl)) {
                tblAge.Text = roundedAge.ToString();
                tblFaceID.Text = "Face ID: " + id.ToString();
                tblWearGlass.Text = glasses.ToString();
                if (string.Compare(gender, "male", true) == 0) {
                    imgGender.Source = new BitmapImage(new Uri("ms-appx:///Assets/male.png"));
                } else if (string.Compare(gender, "female", true) == 0) {
                    imgGender.Source = new BitmapImage(new Uri("ms-appx:///Assets/female.png"));
                }
            }
        }
    } catch (Exception ex) {
        System.Diagnostics.Debug.WriteLine(ex.Message);
    }
}

Step 7

Deploy your app in a Local Machine. The output of the UWPCogFaceData app is shown below.



Summary

Now, you have successfully retrieved the face attributes using Cognitive Service Face API, with Azure, XAML, and C# in UWP environment.