Get Image Attributes using Cognitive Services face API in WPF

To know about Cognitive Services Face API, you must read this article first.

Cognitive Services face API in WPF

Getting Started

Start Visual Studio 2015
From the file menu, select New, then Project
Select Windows template
Select .NET Framework 4.6.1
Select WPF Application
Enter Name
Browse save location
Click OK

As I discussed in my previous article, how to add Newston.json and ProjectOxford.Face and you need a subscription of Cognitive Service Face preview and copy the subscription key. Once you are done with all this then let’s move to the .xaml page.

<Window x:Class="CognitiveServicesFaceAPI_WPFSample.MainWindow1"
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"
xmlns:local="clr-namespace:CognitiveServicesFaceAPI_WPFSample"
mc:Ignorable="d"
Title="MainWindow1" Height="550" Width="725">
<Grid x:Name="BackPanel" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Image x:Name="imgPhoto" Grid.Row="1" Grid.Column="0" Stretch="Uniform" Margin="0,0,0,30"/>
<Button x:Name="btnBrowse" Height="20" VerticalAlignment="Bottom" Content="Get Details..." Grid.Row="1" Grid.Column="0"
Click="btnBrowse_Click"/>
<Grid Grid.Row="1" Grid.Column="1" ShowGridLines="true" Margin="5">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="txtId" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="1" x:Name="txtAttributes" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="2" x:Name="txtAge" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="3" x:Name="txtGender" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="4" x:Name="txtSmile" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="5" x:Name="txtFacialHair" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="6" x:Name="txtHeadPose" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<TextBlock Grid.Row="7" x:Name="txtGlasses" FontWeight="Bold" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
</Grid>
</Grid>
</Window>

In my xaml code I have image control and a button, once I click on the button we will get all image attributes in textblocks.

Let’s work on code part now.

using Microsoft.ProjectOxford.Face;
using System;
using System.Windows;
using System.Windows.Media.Imaging;
namespace CognitiveServicesFaceAPI_WPFSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow1 : Window
{
private readonly IFaceServiceClient objFaceServiceClient = new FaceServiceClient("Subscription Key");
string imageUrl = "http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/AuthorImage/raj197920160520091111.jpg";
public MainWindow1()
{
InitializeComponent();
Uri fileUri = new Uri(imageUrl);
BitmapImage bitmapSource = new BitmapImage();
bitmapSource.BeginInit();
bitmapSource.CacheOption = BitmapCacheOption.None;
bitmapSource.UriSource = fileUri;
bitmapSource.EndInit();
imgPhoto.Source = bitmapSource;
}
private async void btnBrowse_Click(object sender, RoutedEventArgs e)
{
var requiredFaceAttributes = new FaceAttributeType[] {
FaceAttributeType.Age,
FaceAttributeType.Gender,
FaceAttributeType.Smile,
FaceAttributeType.FacialHair,
FaceAttributeType.HeadPose,
FaceAttributeType.Glasses
};
var faces = await objFaceServiceClient.DetectAsync(imageUrl,returnFaceLandmarks: true,returnFaceAttributes: requiredFaceAttributes);
foreach (var face in faces)
{
var rect = face.FaceRectangle;
var landmarks = face.FaceLandmarks;
//get photo attributes
var id = face.FaceId;
var attributes = face.FaceAttributes;
var age = attributes.Age;
var gender = attributes.Gender;
var smile = attributes.Smile;
var facialHair = attributes.FacialHair;
var headPose = attributes.HeadPose;
var glasses = attributes.Glasses;
//bind textblocks
txtId.Text = "Id:- " + id.ToString();
txtAttributes.Text = "Attributes:- " + attributes.ToString();
txtAge.Text = "Age:- " + age.ToString() + " Years";
txtGender.Text = "Gender:- " + gender.ToUpper();
txtSmile.Text = "Smile:- " + smile.ToString();
txtFacialHair.Text = "Facial Hair:- " + facialHair.ToString();
txtHeadPose.Text = "Head Pose:- " + headPose.ToString();
txtGlasses.Text = "Glasses:- " + glasses.ToString();
}
}
}
}

Run the project.

Click on Get details button to get the all attribute details.

As you can see in given screenshot we have Id, Attributes, Age, Gender, Smile, Facial hair, Head Pose, Glasses. I am showing only few things here not showing attributes, facial hair and head pose.

I wonder I know my real age now :)

Conclusion - In this article, we have seen how to use Microsoft Cognitive Service face API in WPF to get image attributes. If you have any question or comments, drop me a comment or message in C# corner comments section.