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

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

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

Microsoft Cognitive Services (formerly Project Oxford) are a set of APIs, SDKs, and services, available for developers to make their applications more intelligent, engaging, and discoverable. Microsoft Cognitive Services expand on Microsoft’s evolving portfolio of "Machine Learning APIs' and enable the developers to easily add intelligent features – such as, emotion and video detection; facial, speech, and vision recognition; and speech and language understanding – into their applications. Our vision is for more personal computing experiences and enhanced productivity aided by systems that increasingly can see, hear, speak, understand and even begin to reason.

Microsoft Cognitive Services let 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.

Reading this article, you can learn how to use 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 the step by step process of app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> Select Universal (under Visual C# -> Windows ) -> Blank App -> Give a name for your app (UWPCogFace) -> click OK.



After choosing the target and minimum platform version that your UWP application 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 file MainPage.xaml in the Solution Explorer and add the following references to the project.

1. Microsoft.ProjectOxford.Face
2. Newtonsoft.Json
3. Win2D.uwp

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



Choose "Browse" and search "Microsoft.ProjectOxford.Face". Select the package and install it.



Accept the Licence.



Reference added to your project.



For adding Newtonsoft.Json Reference,



Choose "Browse" and search "Newtonsoft.Json". Select the package and install it.

Reference added to your project.



For adding Win2D.uwp Reference, used for drawing Rectangle in face, choose "Browse" and search "Win2D.uwp". Select the package and install it.



Reference added to your project.



Step 3

Adding images to the "Assets" folder for face.



Step 4

Add Image control and set the name and source properties.



Step 5

Add the namespace and canvas control, using Draw event method,for drawing the rectangle in face.

xmlns:ccn="using:Microsoft.Graphics.Canvas.UI.Xaml"



Note

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

<Page x:Class="UWPCogFace.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCogFace" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ccn="using:Microsoft.Graphics.Canvas.UI.Xaml" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="192,52,0,0" TextWrapping="Wrap" Text="UWP Coginitive service Face API demo" VerticalAlignment="Top" FontWeight="Bold" />
        <Image x:Name="imgFace" Source="Assets/01.jpg" Margin="129,107,135,41" />
        <ccn:CanvasControl x:Name="CanFaceRect" Draw="CanFaceRect_Draw" />
    </Grid>
</Page>

Step 6

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

using Microsoft.Graphics.Canvas.UI.Xaml;
using Microsoft.ProjectOxford.Face;
using Microsoft.ProjectOxford.Face.Contract;
using Windows.Storage;
using Windows.UI;

Step 7

Add the FaceServiceClient key, use Azure service and Generate it (For more information, please refer the 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>");
Add the code
for faceupload, detect and draw rectangle
private readonly IFaceServiceClient fsClient = new FaceServiceClient("(" < Your Key > "");
FaceRectangle[] fRectangles;
public MainPage() {
    this.InitializeComponent();
    UploadAndDetectFaces("ms-appx:///Assets/02.png");
}
async void UploadAndDetectFaces(string imageFilePath) {
    try {
        StorageFolder appInstalledFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
        StorageFolder assets = await appInstalledFolder.GetFolderAsync("Assets");
        var storageFile = await assets.GetFileAsync("01.JPG");
        var randomAccessStream = await storageFile.OpenReadAsync();
        using(Stream stream = randomAccessStream.AsStreamForRead()) {
            //this is the fragment where face is recognized:
            var faces = await fsClient.DetectAsync(stream);
            var faceRects = faces.Select(face => face.FaceRectangle);
            fRectangles = faceRects.ToArray();
            CanFaceRect.Invalidate();
        }
    } catch (Exception ex) {
        System.Diagnostics.Debug.WriteLine(ex.Message);
    }
}
private void CanFaceRect_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args) {
    if (fRectangles.Length > 0) {
        foreach(var faceRect in fRectangles) {
            args.DrawingSession.DrawRectangle(faceRect.Left, faceRect.Top, faceRect.Width, faceRect.Height, Colors.Red);
        }
    }
}

Step 8

Deploy your app in Local Machine. The output of the UWPCogFace App is shown below.



Summary

Now, you have successfully tested Cognitive Service Face API using Azure, XAML, and C# with UWP environment.