AI at the Zoo: Designing the Power App

Let’s keep going in the AI at the Zoo series. We are up to Designing the Power App! In previous posts we have created the model in Lobe and exported it into our Power Platform environment. Today we will create the Dataverse Table and connect everything together with a Canvas Power App.

Dataverse

In Dataverse, create a new Table. I called mine Zoo Submissions. On this Table I added a text field for Identified Label, a Yes/No field called Correct? and then an Image Field. I set this Image Field as the Primary Image for the Table. This means that it will show up in the list when viewed on Mobile.

Then I added these fields to the form and added the Table to the Sales Trial Model-Driven App.

Canvas Power App

Now, create a new Power App. We want this Power App to be for Phones so we can use it on the go. (For more information, check out the docs on using an Image Classification model in Power Apps.)

Our Power App will end up having 2 pages:

1. Photo Upload Screen. This will include a way to upload or take a picture and then submit it to the AI Model.
2. Submit Screen. This will save the identified label and the photo to Dataverse.

Photo Upload Screen

On the first screen you should add a Media Upload. This will allow you to take or upload a picture and it will display the picture that has been added.

Before we can use the AI Model we need to add it in as a data source. Navigate to the data area and add a data source. Then you can expand the AI Model area and select the model we just imported.

Next, we will add a button. This button will run the AI Model and save the label to a new variable (here called Label). For a future enhancement, we could hide this button or disable this button when no image is present.

Here is the button On Select formula:

Set(Label,'Zoo Identification Model'.Predict(UploadedImage1.Image).TopClass.Name); Navigate(Screen2)

Submit Screen

Create a new screen and select the form type. This will make the next few steps a bit easier.

Choose the Zoo Submissions table created on Dataverse as the source data for the form. You should also edit the fields displayed to be Name, Identified Label, Correct?, and Image. Next, set the default form mode to New (defaults to Edit).

We will also need to update the default values for the fields on the form. For each field, select it, then click Advanced. Click the unlock button at the top of the Advanced tab. Then you can set the default value.

Field	Default
Name	Today()
Identified Label	Label (this is the variable we created earlier to save the TopClass identified by our AI Model)
Correct?	Do not set a default
Image	UploadedImage1.Image

Now, we will set the code for the buttons on the header. For the X button, set it to Back(). This will navigate to the last page. Here is the code for the check mark (submit button). We need this button to submit to Dataverse and then get ready for the next submission.

SubmitForm(EditForm1); ResetForm(EditForm1); Navigate(Screen1); Reset(AddMediaButton1)

Almost There

Now we are ready to test this Power App! Tomorrow, I will show you some of the results and close out this series!

Watch for more posts in the AI at the Zoo series or check out Events where you can find me presenting on AI or other Power Platform topics!