A new posts series has been started on how to create a simple application for the aim of face recognition with Microsoft Flow, Power Apps, and Cognitive Service.
In the first post, the process of setting up power apps has been explained, in the next one how to set up the Microsoft flow for the aim of using face recognition API explained. In the Third One, the process of how to connect the Flow to the Power Apps have been explained, now in this part, the process of how to put the rectangle around the people face in the picture and show the results in the Power Apps will be explained.
As explained in the last three posts,
1- we create simple Apps to take a photo,
2- we create a Flow to get the picture from the Power Apps then call the Cognitive service Face recognition
3- we Connect the flow to Power Apps,
In part three we connect the Power Apps to Flow, but we need to show the result in the App.
1- We are going to connect the position of the rectangle to the face in the picture
2- show the result as a table in the Power Apps
before going ahead I want you to see the result coming from Flow, to see the result, need to run the code first,
then click on the View->Colections
In the next step, you will see two collections: One for input that the original picture has been taken by Camera, the second one is the Output of the facereognition it has three different main part
ID, Face attribute and faceRectangle
in the next step, we are going to set the Rectangle based on the Facerectangle attribute to be a dynamic one.
You need to set a parameter in Image 1. This can help to access the original size of the image.
Rectangle for Face Recognition
To set a rectangle around the face of the people in the image, the rectangle is going to attach to the facerectangle attribute a sub-attribute of FacerecognitionText.
To do that first we need to set a gallery and add a rectangle to it in the last post, in this post we need to make it align with the picture.
click on the Gallery in the screen tab
we need to set some of the parameters for the rectangle
first the OnSelect: as you can see in the picture for Onselect attribute the formula is Select(Parent)
the next parameter need to set is about the location of the rectangle
click on the Height Parameter then write the below codes
ThisItem.faceRectangle.height*(Image1.Height/Image1.OriginalHeight)
do the same for width
ThisItem.faceRectangle.width*(Image1.Width/Image1.OriginalWidth)
or you can put for X
ThisItem.faceRectangle.left*(Image1.Width/Image1.OriginalWidth)
and for the Y value
ThisItem.faceRectangle.top*(Image1.Height/Image1.OriginalHeight)
At this stage run the code.
The rectangle will draw around the face.
Now we are going to put some label into the page to show the age, gender, expression and so forth.
to show this information insert a new lable to the page.
“Age:”& Gallery2.Selected.faceAttributes.age
now, you should see the age of the person in the picture.
then now add other attributes like gender, Happiness, Neutral and so forth.
like happiness
“Happiness:”& Gallery2.Selected.faceAttributes.emotion.happiness
“Gender:”& Gallery2.Selected.faceAttributes.gender
As you can see in the above picture, there is a different attribute of emotions.
another way of showing the data like Hair color is using a data table.
click on Insert-> Data Table
in the item attribute of Data Table, write the below code
Gallery2.Selected.faceAttributes.hair.hairColor
as you can see in the below picture, there is a two attributes like Color and Attributes.
Reference from: https://www.youtube.com/watch?v=KUtdnnYRpo4
