Deploying The Face API Using Visual Studio 2017

Introduction

This article demonstrates how to use Face API with C# in Visual Studio 2017 and develop a simple Windows application that invokes the Face API to detect faces in an image, by framing the faces.

Prerequisites

• Visual Studio 2015 or 2017
• Azure Subscription.

What is Face API?

It detects human faces and compares the similar ones. Also, it organizes images into groups based on the similarity by identifying the previously tagged people in images. The Face API is also a service that provides how to detect the human face with single or group of members and also shows the difference in the face expressions.The cloud-based Face API provides developers with access to advanced face algorithms. MIcrosoft Face Algorithms enable face attribute detection and face recognition.

Follow these steps to create the Face API

Open the new WPF app in the Classic Windows Desktop templates.

 

Navigate to "File-->New--> Project-->Windows Classic Desktop-->WPF App(.NET framework) and give the name for your solution, followed by a click on "OK".



Our project is opened. In the Solution Explorer, we need to add two nuGet packages. Right click on your project (DemoApp) and click Manage NuGet Packages.





Then, we are going to get the Face API keys that are used in our app. To create the Face API keys, Click Here.

Press "Create" for the Face API to create the Face API.



Accept the terms and conditions also, give the desired country name, and press " Next " to proceed to the next step.

Choose the preferred account to login with.

And also, login by givig the email and password to log into the ACOM Azure website.

Then, it gives two keys - primary and secondary - to be used in our WPF application. Copy these keys from that website.



In Visual Studio, paste the following code in the MainWindow.xaml and replace the old code.

<Window x:Class="DemoApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Title="Face_API" Height="350" Width="525">
    <Grid x:Name="BackPanel">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="194*" />
            <ColumnDefinition Width="323*" /> </Grid.ColumnDefinitions>
        <Image x:Name="FacePhoto" Stretch="Uniform" Margin="0,0,0,30" Grid.ColumnSpan="2" />
        <Button x:Name="BrowseButton" Margin="20,0,20,5" Height="20" VerticalAlignment="Bottom" Content="Browse..." Click="BrowseButton_Click" Grid.ColumnSpan="2" /> </Grid>
</Window>

Then, paste the following code in the MainWindow.xaml.cs window. In the 18th line, change the "keys" word by the key that we copied from the subcription.

using System;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.IO;
using Microsoft.ProjectOxford.Face;
using Microsoft.ProjectOxford.Face.Contract;
namespace DemoApp {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow: Window {
        IFaceServiceClient faceServiceClient = new FaceServiceClient("Keys");
        private async void BrowseButton_Click(object sender, RoutedEventArgs e) {
            var openDlg = new Microsoft.Win32.OpenFileDialog();
            openDlg.Filter = "JPEG Image(*.jpg)|*.jpg";
            bool ? result = openDlg.ShowDialog(this);
            if (!(bool) result) {
                return;
            }
            string filePath = openDlg.FileName;
            Uri fileUri = new Uri(filePath);
            BitmapImage bitmapSource = new BitmapImage();
            bitmapSource.BeginInit();
            bitmapSource.CacheOption = BitmapCacheOption.None;
            bitmapSource.UriSource = fileUri;
            bitmapSource.EndInit();
            FacePhoto.Source = bitmapSource;
            Title = "Detecting...";
            FaceRectangle[] faceRects = await UploadAndDetectFaces(filePath);
            Title = String.Format("Detection Finished. {0} face(s) detected", faceRects.Length);
            if (faceRects.Length > 0) {
                DrawingVisual visual = new DrawingVisual();
                DrawingContext drawingContext = visual.RenderOpen();
                drawingContext.DrawImage(bitmapSource, new Rect(0, 0, bitmapSource.Width, bitmapSource.Height));
                double dpi = bitmapSource.DpiX;
                double resizeFactor = 96 / dpi;
                foreach(var faceRect in faceRects) {
                    drawingContext.DrawRectangle(Brushes.Transparent, new Pen(Brushes.Red, 2), new Rect(faceRect.Left * resizeFactor, faceRect.Top * resizeFactor, faceRect.Width * resizeFactor, faceRect.Height * resizeFactor));
                }
                drawingContext.Close();
                RenderTargetBitmap faceWithRectBitmap = new RenderTargetBitmap(
                    (int)(bitmapSource.PixelWidth * resizeFactor), (int)(bitmapSource.PixelHeight * resizeFactor), 96, 96, PixelFormats.Pbgra32);
                faceWithRectBitmap.Render(visual);
                FacePhoto.Source = faceWithRectBitmap;
            }
        }
        private async Task < FaceRectangle[] > UploadAndDetectFaces(string imageFilePath) {
            try {
                using(Stream imageFileStream = File.OpenRead(imageFilePath)) {
                    var faces = await faceServiceClient.DetectAsync(imageFileStream);
                    var faceRects = faces.Select(face => face.FaceRectangle);
                    return faceRects.ToArray();
                }
            } catch (Exception) {
                return new FaceRectangle[0];
            }
        }
        public MainWindow() {
            InitializeComponent();
        }
    }
}

Select Start to deploy our WPF application. Press "Browse" button to browse the image in the local computer.



Then, our app detects the image.



You can see that it has detected the faces in the image that we browsed from the local computer.



Summary

I hope you understood how to create the Face API application using C# in the Micosoft Visual Studio2017.