Creating a Microsoft Azure Cognitive Service Face API Application in Half an Hour
Microsoft Azure Cognitive Services is a set of APIs and services used to make apps interactive and intelligent. And you can use it to make a Face API app in 30 minutes.
Join the DZone community and get the full member experience.
Join For FreeIn this article, I am going to teach you how to create a Microsoft Azure Cognitive Service Face API in half an hour. Microsoft Azure Cognitive Services is a set of APIs and services available for developers to make their applications more interactive and intelligent. This was formerly known as Project Oxford. Here Microsoft uses Machine Learning in the background to create these APIs. So far we have the preceding list of APIs.
Prerequisites
If you don’t have any Azure subscription, please sign up for a subscription here.
Download the Source Code
You can always download the source code from here:
Create the Face API in Azure Portal
To know how to create a Face Recognition API in Azure Portal, please see this video:
Before we start coding, please make sure that you add the reference of Microsoft.ProjectOxford.Face
from NuGet package manager.
Microsoft.ProjectOxford.Face
Using the Code
To get started, open your Visual Studio and create a new WPF application.
Add image and button control to MainWindow.xaml
:
<Grid>
<Image Stretch="UniformToFill" x:Name="FaceImage" HorizontalAlignment="Left" Margin="0,0,0,30"/>
<Button x:Name="BtnUpload" VerticalAlignment="Bottom" Content="Upload the image" Margin="20,5" Height="20" Click="BtnUpload_Click"/>
</Grid>
Create an instance of IFaceServiceClient
:
private readonly IFaceServiceClient _faceServiceClient = new FaceServiceClient("key", "end point");
If you are selecting the location as Southeast Asia while creating the Face API in the portal, it is mandatory to use the second parameter — that is, your end point.
Load the image to image control:
private async void BtnUpload_Click(object sender, RoutedEventArgs e)
{
//Uploading the image
var openFrame = new Microsoft.Win32.OpenFileDialog { Filter = "JPEG Image(*.jpg)|*.jpg" };
var result = openFrame.ShowDialog(this);
if (!(bool)result)
return;
var filePath = openFrame.FileName;
var fileUri = new Uri(filePath);
var bitMapSource = new BitmapImage();
bitMapSource.BeginInit();
bitMapSource.CacheOption = BitmapCacheOption.None;
bitMapSource.UriSource = fileUri;
bitMapSource.EndInit();
FaceImage.Source = bitMapSource;
}
Detect the faces count:
/// <summary>
/// Return the face rectangle counts
/// </summary>
/// <param name="filePath"></param>
/// <returns></returns>
private async Task<FaceRectangle[]> DetectTheFaces(string filePath)
{
try
{
using (var imgStream = File.OpenRead(filePath))
{
var faces = await _faceServiceClient.DetectAsync(imgStream);
var faceRectangles = faces.Select(face => face.FaceRectangle);
return faceRectangles.ToArray();
}
}
catch (Exception e)
{
Console.WriteLine(e);
throw;
}
}
Draw the rectangles in faces found:
// Detecting the faces count
Title = "Detecting....";
FaceRectangle[] facesFound = await DetectTheFaces(filePath);
Title = $"Found {facesFound.Length} faces";
// Draw rectangles
if (facesFound.Length <= 0) return;
var drwVisual = new DrawingVisual();
var drwContext = drwVisual.RenderOpen();
drwContext.DrawImage(bitMapSource, new Rect(0, 0, bitMapSource.Width, bitMapSource.Height));
var dpi = bitMapSource.DpiX;
var resizeFactor = 96 / dpi;
foreach (var faceRect in facesFound)
{
drwContext.DrawRectangle(Brushes.Transparent, new Pen(Brushes.Blue, 6),
new Rect(faceRect.Left * resizeFactor, faceRect.Top * resizeFactor, faceRect.Width * resizeFactor,
faceRect.Height * resizeFactor));
}
drwContext.Close();
var renderToImageCtrl = new RenderTargetBitmap((int)(bitMapSource.PixelWidth * resizeFactor), (int)(bitMapSource.PixelHeight * resizeFactor), 96, 96, PixelFormats.Pbgra32);
renderToImageCtrl.Render(drwVisual);
FaceImage.Source = renderToImageCtrl;
Output
Now run your application and upload an image. It can be a single picture or a group picture.
Azure Face Recognition API Output
Check the Statistics in Azure Portal
If everything goes fine, you will be able to see the statistics in your Azure portal as preceding.
Face API Metric in Azure Portal
If you would like to compare the images or identify the person in an image, please read the documentation here.
Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments