Post
Ask Question

Create A Microsoft Azure Cognitive Service Face API Application In 30 Minutes

Introduction

In this article, we are going to create Microsoft Azure Cognitive Service Face API in half an hour. Microsoft Azure Cognitive Services are sets of APIs and Services available for the 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. You can always see this article on my blog here.

  • Emotion and video detection
  • Facial Recognition
  • Speech Recognition
  • Vision Recognition
  • Speech and language understanding

Prerequisites

  • Azure Subscription
  • Visual Studio

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 used for this video from here

Create the Face API in Azure portal

To know how to create a Face Recognition API in Azure portal, please see the video here.

Add the reference to Microsoft.ProjectOxford.Face to your project

Before we start coding, please make sure that you add the reference to Microsoft.ProjectOxford.Face from NuGet package manager.

Azure
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

  1. <Grid>  
  2.     <Image Stretch="UniformToFill" x:Name="FaceImage" HorizontalAlignment="Left" Margin="0,0,0,30" />  
  3.     <Button x:Name="BtnUpload" VerticalAlignment="Bottom" Content="Upload the image" Margin="20,5" Height="20" Click="BtnUpload_Click" />   
  4. </Grid>  

Create an instance of IFaceServiceClient

  1. private readonly IFaceServiceClient _faceServiceClient = new FaceServiceClient("key", "end point");

If you are selecting the location as Southeast Asia while creating the Face API in portal, it is mandatory to use the second parameter, that is, your end point.

Load the image to image control

  1. private async void BtnUpload_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     //Uploading the image  
  4.     var openFrame = new Microsoft.Win32.OpenFileDialog  
  5.     {  
  6.         Filter = "JPEG Image(*.jpg)|*.jpg"  
  7.     };  
  8.     var result = openFrame.ShowDialog(this);  
  9.     if (!(bool) result) return;  
  10.     var filePath = openFrame.FileName;  
  11.     var fileUri = new Uri(filePath);  
  12.     var bitMapSource = new BitmapImage();  
  13.     bitMapSource.BeginInit();  
  14.     bitMapSource.CacheOption = BitmapCacheOption.None;  
  15.     bitMapSource.UriSource = fileUri;  
  16.     bitMapSource.EndInit();  
  17.     FaceImage.Source = bitMapSource;  
  18. } 
Detect the faces count
  1. /// <summary>  
  2. /// Return the face rectangle counts  
  3. /// </summary>  
  4. /// <param name="filePath"></param>  
  5. /// <returns></returns>  
  6. private async Task < FaceRectangle[] > DetectTheFaces(string filePath) {  
  7.     try {  
  8.         using(var imgStream = File.OpenRead(filePath)) {  
  9.             var faces = await _faceServiceClient.DetectAsync(imgStream);  
  10.             var faceRectangles = faces.Select(face => face.FaceRectangle);  
  11.             return faceRectangles.ToArray();  
  12.         }  
  13.     } catch (Exception e) {  
  14.         Console.WriteLine(e);  
  15.         throw;  
  16.     }  
  17. }  
Draw the rectangles in faces found
  1. // Detecting the faces count  
  2. Title = "Detecting....";  
  3. FaceRectangle[] facesFound = await DetectTheFaces(filePath);  
  4. Title = $ "Found {facesFound.Length} faces";  
  5. // Draw rectangles  
  6. if (facesFound.Length <= 0) return;  
  7. var drwVisual = new DrawingVisual();  
  8. var drwContext = drwVisual.RenderOpen();  
  9. drwContext.DrawImage(bitMapSource, new Rect(0, 0, bitMapSource.Width, bitMapSource.Height));  
  10. var dpi = bitMapSource.DpiX;  
  11. var resizeFactor = 96 / dpi;  
  12. foreach(var faceRect in facesFound)  
  13. {  
  14.     drwContext.DrawRectangle(Brushes.Transparent, new Pen(Brushes.Blue, 6), new Rect(faceRect.Left * resizeFactor, faceRect.Top * resizeFactor, faceRect.Width * resizeFactor, faceRect.Height * resizeFactor));  
  15. }  
  16. drwContext.Close();  
  17. var renderToImageCtrl = new RenderTargetBitmap((int)(bitMapSource.PixelWidth * resizeFactor), (int)(bitMapSource.PixelHeight * resizeFactor), 96, 96, PixelFormats.Pbgra32);  
  18. renderToImageCtrl.Render(drwVisual);  
  19. FaceImage.Source = renderToImageCtrl;  
Output

Now, run your application and upload an image; it can be a single picture or a group picture.

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

Azure
Face API Metric In Azure Portal

To Do

If you would like to compare the images or identify the person in an image, please read the documentation here Face identifying and comparing with Azure Face API

Conclusion

Did I miss anything that you may think is needed? Did you find this post useful? I hope you liked this article. Please share your valuable suggestions and feedback with me.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.


Similar Articles