Wednesday 20 November 2019

Face Detection using .net Core


WHAT IS FACE DETECTION?

The definition of face detection refers to a subset of computer technology that can identify people’s faces within digital images. Face detection applications employ algorithms focused on detecting human faces within larger images that might contain landscapes, objects and other parts of humans.

HOW FACE DETECTION WORKS

Face detection technology might begin by searching for human eyes. It might do this by testing valley regions in the gray-level image. It might then use a genetic algorithm to detect facial regions including eyebrows, the mouth, nose, nostrils and the iris. The algorithm would first identify possible facial regions and then apply additional testing to validate.

APPLICATIONS OF FACE DETECTION

Photography
Marketing
Social Medias
Find Missing person       
Helping blind people
Advertising
Smart phones
Prevent retail crimes
VIP detection
Track attendance
And so many ….


Here we can see how we can use/integrate Microsoft Face Api for detecting face.

Prerequisites

·        An Azure subscription. If you do not have one, you can sign up for a free account.
·        Visual studio 2017 15.9.4


Step 1: Create a .net core project
Step 2:  Go to extension and support from Tools


Step 3 : Then search for Cognitive Services

Then install the Cognitive services

Note: In my system the service is already installed, if in your system it is not installed then it will show the button to install.
Installing an extension requires a restart of the integrated development environment (IDE).

Step 4: Restart Visual Studio. The extension installs when you close Visual Studio, and is available next time you launch the IDE.

Step 5: Open the visual studio again and open then project which we created earlier. Then right click Connected services from solution explorer then select Add Connected Service


Step 6: Then select  “Get Face attributes with Face API” from the list


Step 7: If you don’t have an Azure subscription on the signed account then it will show a page like this. From here you can go to the page and there you can create an Azure subscription


Step 8: I have used my personal email for the subscription, you can use yours (either personal or official)

Step 9: Once you have completed the subscription you will get a page like below

Step 10: You can click on the edit button to edit the Name , Location etc..



Step 11: Once you have completed then Click on the add button.

Step 12: Check your appsettings.json


There you can find Service key, Service end point etc.

Step 13: Now we are ready to use the face api.

Create a view for uploading the file you can use the below example.


<div class="row">
    <div class="col-md-3">
        <h2>Application uses</h2>
        <ul>
            <li>Face detection</li>
        </ul>
    </div>
    </div>
<div class="row">
    <form asp-action="FaceDetection" enctype="multipart/form-data">
        <div class="form-group">
            <div class="col-md-10">
                <p>Upload one file using this form:</p>
                <input type="file" name="formFile" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-10">
                <input type="submit" value="Upload" />
            </div>
        </div>
    </form>
</div>
<div>

Step 14: Create a controller method which accepts this file, calls face api and get the results.
You can use the below controller method sample

/// <summary>
        /// Detect face from image
        /// </summary>
        /// <param name="formFile"></param>
        /// <returns></returns>
        public  IActionResult FaceDetection(IFormFile formFile)
        {
            if (formFile.Length > 0)
            {
                byte[] fileBytes;
                using (var ms = new MemoryStream())
                {
                    formFile.CopyTo(ms);
                    fileBytes =  ms.ToArray();
                }
                ViewBag.ImageArray = fileBytes;
                ///Best practice tip ->Read these items from config rather than using them directly
                string faceApiKey = "b6251d51608640fc9b98871301c415e6";
                string faceApiEndPoint = "https://southeastasia.api.cognitive.microsoft.com/face/v1.0";

                HttpClient client = new HttpClient();

                // Request headers.
                client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", faceApiKey);

                // Request parameters. A third optional parameter is "details".
                string requestParameters = "returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise";

                // Assemble the URI for the REST API Call.
                string uri = faceApiEndPoint + "/detect?" + requestParameters;

                string contentStringFace = string.Empty;

                using (ByteArrayContent content = new ByteArrayContent(fileBytes))
                {
                    // This example uses content type "application/octet-stream".
                    // The other content types you can use are "application/json" and "multipart/form-data".
                    content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");

                    // Execute the REST API call for getting the face detection data.
                    var response = client.PostAsync(uri, content).Result;

                    // Get the face detection json response
                    contentStringFace = response.Content.ReadAsStringAsync().Result;
                    ViewBag.FaceDetectionResults = contentStringFace;
                }

            }
           
            return View(nameof(Index));
        }
     

Step 15: Make sure that you have included your faceApiKey, in example I have used mine.

Step 16: Now our method is ready to call faceapi. If we want to see then results in the ui then use the below code in the cshtml

<div>
    @if (ViewBag.ImageArray != null)
    {
        var base64 = Convert.ToBase64String(ViewBag.ImageArray);
        var imgSrc = String.Format("data:image/gif;base64,{0}", base64);

        <div class="row">
            <div class="col-md-12">
                <img src="@imgSrc" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                @ViewBag.FaceDetectionResults
            </div>
        </div>
    }
</div>

This will show the selected image as well the data from the Face api.

Step 17: Run the application and choose a file which contains a face.



Step 18: Click on the Upload button to see the results


There you can find the faceRectangle key that will contain the face detection details. We can use this information for detecting the face from image.

Face api provides many other details like age, noice, glasses, emotion and many more details in the response.

You can provide it in the request parameters

string requestParameters = "returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise";

Step 18: Try an image which contains more than one faces in it, this will detect and give all the faces details.



No comments:

Post a Comment