What are Cognitive Services?
Cognitive Services help us to develop some intelligent applications that work across all the platforms such as iOS, Android and Microsoft. All APIs are available under Cognitive Services, which will help us to develop and work with the interactive environment. At Build 2016, Microsoft released another update for Cognitive Service with Bot Framework.
By using Cognitive Services, the developers are able to develop apps, using available APIs such as,
- Vision API
- Speech API
- Language API
- Knowledge API
- Search API
Some of the requirements are given below to complete this article.
- Visual Studio 2015 (Community, Professional or Enterprise Edition).
If you don’t have Visual Studio 2015, download the Community Edition, as it is absolutely free. To download Visual Studio 2015,
click here.
- Cognitive Services face API Key
Here, I am assuming that you have the requirement. Thus, let’s get started
The steps are given below to create a Face API in C#, using Cognitive Services.
Getting key from Cognitive Services
Each user is able to get 2 keys for each product such as Face API, Emotion API, Text Analysis and so on. To activate Cognitive Face API, visit Cognitive service official site.
Once key is generated, click copy option to copy the key and make a note of it, as it is used in the future.
Creating a Project
Open up Visual Studio 2015 to start developing a Face API Application, using WPF Application.
Click File -> New -> Project/solution or simply click New Project link, which is available in the starting page of Visual Studio.
Now, new project dialog appears. Click Visual C# ->Windows ->classic Desktop ->WPF Application and then name the Application, as per your wish and subsequently click OK.
Now, Visual Studio starts creating an application and it takes about a minute to create an Application successfully. Now, you will be navigated to MainWindow.xaml.
Locate Solution Explorer to install Newtonsoft.Json NuGet package. Now, right click on the solution's name and click Manage NuGet Package Manager. Search for “Newtonsoft.Json” and install.
Again open Manage NuGet gallery, search for Microsoft.ProjectOxford.Face and install it.
After installation, you will be able to find installed reference under the reference tree.
Now, it is a coding part, so open up MainWindow.xaml and add the code given under Grid opening tag.
- <Image x:Name="FacePhoto" Stretch="Uniform" Margin="0,0,0,30"/>
- <Button x:Name="BrowseButton" Margin="20,5" Height="20"
- VerticalAlignment="Bottom" Content="Browse..."
- Click="BrowseButton_Click"/>
Open toolbar, add Image tool and the button too and change the properties such as name, value, content, height and width.
Open MainWindow.Xaml.cs and add the code under button to perform Face detection operation, as shown below.
- 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;
Open MainWindow.xaml.cs and add the ProjectOxford.face reference, using the code given below.
- using Microsoft.ProjectOxford.Face;
- using Microsoft.ProjectOxford.Face.Contract;
Insert the code given below in MainWindow class
- private readonly IFaceServiceClient faceServiceClient = new FaceServiceClient("Your subscription key");
To start detecting faces, we need to add the synchronous function into the MainWindow class to start detecting.
- 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];
- }
- }
Again, add the code given below at the end of button_click handler to start marking the faces.
- 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;
- }
Now, our front-end and back-end coding is completed, so deploy an application by clicking F5. Finally, our output is displayed, as shown below.
Summary
In this article, we have discussed Cognitive Services and building a Face API, using C#.
I hope, you enjoyed reading this article. Thanks for reading.
yogendra kumarPosted Jul 17, 2018, 6:59 AM
Can i using it in web application?
Ravi KandelPosted Mar 8, 2017, 8:54 AM
Awesome Thanks for sharing
ba chaPosted Dec 27, 2016, 2:00 AM
And also Browse button doesn't do aything
ba chaPosted Dec 27, 2016, 1:50 AM
Great post! but unfortunately i get a CS1061 error saying that 'MainWindow' does not contain a definition for 'BrowserButton_click,do you know solution for this.'