Face Recognition with Azure, ASP.NET & Docker — Part II

5 min readFeb 5, 2019

For the second part of this series we will be covering some basic web development with ASP.NET MVC, C#, HTML, CSS and JavaScript.

But first, what is ASP.NET Core?

This is what Wikipedia says:

ASP.NET Core is a free and open-source web framework developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.
The framework is a complete rewrite that unites the previously separate ASP.NET MVC and ASP.NET Web API into a single programming model.

Click here if you wanna learn more about all the benefits and services provided.

Prerequisites:

.NET Core 2.2 SDK
Visual Studio Code (With the C# extension)

Now that we have the tools and some basic understanding of the framework, lets start creating a basic MVC (Model-View-Controler) page.

Create a folder with the name “FaceRecognition”, and another one inside called “FaceRecognition.Web”, on that folder open a console and type:

dotnet new MVC

See the basic structure created automatically

Open up VS Code on that folder and click yes on this popup:

Is time to add some NuGet packages that will make our life easier, open a console on our .Web folder and run these commands (for the rest of this guide I’ll be using the VS Code integrated terminal)

dotnet add package Newtonsoft.Json --version 12.0.1
dotnet add package NLog --version 4.5.11
dotnet add package NLog.Web.AspNetCore --version 4.8.0
dotnet add package Microsoft.ProjectOxford.Face.DotNetCore --version 1.1.0
dotnet restore

Your “FaceRecognition.Web.csproj” should look like this

Go ahead and paste this line just before the “ItemGroup” closing tag

<Content Update="nlog.config" CopyToOutputDirectory="PreserveNewest" />

Save the changes and got to the Debug tab and click the green icon to start running our app

Now you should be able to see our web page on “localhost:5001”

Let’s make some more changes

Replace your “appsettings.json” with this file, don’t forget to add your keys from the Face API when noted.

{
  "Logging": {
    "LogLevel": {
      "Default": "Trace",
      "Microsoft": "Information"
    }
  },
  "AllowedHosts": "*",
  "FaceKey": "One of your keys",
  "FaceRoot": "Your Face API endpoint"    
}

Add a “nlog.config” file with this content:

Note that this will create a folder named “temp” on your “c” directory to store all the logs, change the route in the file if you’re not on Windows or if you wanna store it somewhere else.

Go to “Views/Shared/_Layout.cshtml” and replace all occurences of “FaceRecognition.Web” to “Face Recognition”.
Over the same file replace the footer with this:

<footer class="border-top footer text-muted text-center">
        <div class="container">
            &copy; @DateTime.UtcNow.Year - Powered by Microsoft
            Azure Cognitive Services
        </div>
</footer>

Note how I used the “DateTime” object from the view, that’s because we’re on a Razor page, learn more about it here

On line 30 replace the “ul” tag with this:

Go to “Views/Home/Index.cshtml” and replace it with this:

Now run your site again and see the changes

Go to the controller folder and add a “BaseController.cs” and “PeopleController.cs”

Base Controller:

Here we instantiate a Logger object ready to use

People Controller:

This controller have three views (Create, List and Recognize), the ones we saw on the home page, and two REST endpoints (Create and Detect) that we will use later with help of a Face client.

Time to create our Face client

For this service we will be using the Face package we just installed, is basically an easy way to call the Face API endpoints without our code getting too dirty.

Create a new folder called “Interfaces” and inside a new file “IFaceAPIClient.cs”.
Now a “Services” folder with the implementation of that interface.

Things should be looking like this, don’t mind the errors for now

The interface:

The implementation:

Now is a good time to take a look at the process of creating and recognizing a person, nothing more than a few lines of code!

Adding some models

Let’s start by creating our Person model that should hold the Name, Description, Id and a possible Confidence percentage value in case it gets recognized.

Under the “Models” folder create two new classes: “PersonViewModel” and “PersonListViewModel”.
PersonViewModel:

PersonListViewModel:

Time for some views

Let’s add the visual part of our web site using Razor, we are going to create the three views referenced on our People controller, for that create a new folder under “Views” called “People” and add three .cshtml files: Create, List and Recognize.

Create:

This view holds a form that when completed sends the the data in a post request to our controller

Recognize:

This one receives an URL and displays the image and the result on a html table

List:

Before loading the view, the controller sends a list with the people

Final Touches

Alright we have all our views ready to go, but we just need some extra adjustment on some files.

On the Startup file add this line at the top

using FaceRecognition.Web;

And this one inside the “ConfigureServices” method

services.AddSingleton<Interfaces.IFaceAPIClient, Services.FaceAPIClient>();

Here we are adding the FaceAPI client to our app services

Replace the content of this file “wwwroot/js/site.js” with:

Send the URL via ajax and load the image and response dynamically

Experiment!

Run the web site and start creating some users, and see how precise the API is recognizing.
Try making the buttons on the List view actionable by creating new services using the face client, a person can hold up to 64 images!
Adding more images to a person will increase the probability ratio, that’s the key of face detection.

This repo holds the site we just created, in case something is not working for you https://github.com/bortizvelez/FaceRecognition

Next Step

On the last part of this series we will deploy our website on a docker container so it can run on any operative system, link is below, good job!