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.
Now in this post, the process of how to connect the Microsoft Flow and Power Apps will be shown.
By this step, we have a Microsoft Flow that able to get a picture from Power Apps and applied the Cognitive Service (face recognition) on it. In the next step, we have a power app that able to get a picture.
Now we need to back to the Power Apps and connect the Flow to apps.
we need to do
1-Create a button that able to pass the picture and receive the final results
2-Create a gallery and add a rectangle to it to be able to detect faces
3-Show information in the application
Create a Button to fetch the data
We need to add a button to do the face recognition. the first step is to add it to the page by clicking on the Insert ->Button, then click on the text (number 4) and change the text of the button to the “Recognition”.
In the next step, we need to connect the created flow in the last posts to this one. To do that, click on the Action-> Flows you will see the new page showing the available Flow from Microsoft Flow. Fins the one you created and it will be associated with the button.
later on, you will see in the Onselect (above picture number 2), there is a formula that shows if someone clicks on that the FaceRecognitionText flow will run. However, we need to complete the formula to pass the image and also receive the result of the facerecognition as a collection to be stored in a variable. The formula is this : ClearCollect(facerecognitionText,FaceRecognitionTest.Run(First(collectphoto).Url))
but let me explain each part: the
first part (below picture number 1) FacerecognitionTest.Run() which is calling the Microsoft flow we created.
the second part (below picture number 2) is the parameters that we are going to sent to the flow, First(collectphoto).Url The variable that we want to send it the CollectPhoto that has been filled out by Image1 components
The Third part of the code is to store it in a collection to be accessible by other components so the function ClearCollect(facerecognitionText )
has been used.
Create a Gallary
we want to draw a rectangle around the face in each picture. As a result, we need to follow some process.
First, we need to add a blank Gallery and put it on the image. Click on the image first then Insert->Gallery->Blank vertical
it adds a big on to the screen, resize it to be fit for the image cover. There are two things we need to do: first, add the data source to it. we want the gallery able to detect the faces, so we need to add the result of face recognition to the gallery.
click on the Connect to Data option then on new Data page under data source expand the CustomGallerySample and select the facerecognitionText.
Now we need to add a rectangle to be drawn around each face of the people in the picture. to so that first, we need to click on the option Add an item from the Insert Tab.
Now, need to change the properties of it and to make it as an unfilled rectangle. click on the rectangle then change the more bored size to be bigger. you also able to change the color and so forth, However, the rectangle still is not dynamic, it always located in the top of the window, and if you run the code by clicking on the top of the page still you not able to see the rectangle.
In the next post, I will show how to see the result in the power Apps plus how to draw rectangle exactly around each face and show the numbers and details like age, hair color and so forth. there. Moreover how it looks like in Mobile phone will be shown.
Reference from: https://www.youtube.com/watch?v=KUtdnnYRpo4
