Beginners: Let's build COVID Safe solutions with AI & Power Platform
Tags: beginners, powerfuldevs
Published: 2020-11-22 13:00:07

2020 has been unique, unusual and a different type of year. It became a reason for many changes and one of those changes are going virtual from in-person meetups. Virtual meetups have become an essential tool for the community. It's become quite easier to invite anyone to your meetups and learn from them.

<!--more-->

Last week, some friends have approached me for a talk on <a href="https://docs.microsoft.com/en-us/ai-builder/overview?WT.mc_id=DX-MVP-5003464">AI Builder</a> &amp; <a href="https://docs.microsoft.com/en-us/power-virtual-agents/fundamentals-what-is-power-virtual-agents?WT.mc_id=DX-MVP-5003464">Power Virtual Agents</a> for their next meetup. I inquired about the level of their audience and got to know that I would have to keep with the basics. So this became the first time when I am going to deliver something from the scratch on this topic.

I always get fascinated by the idea of <a href="https://www.arafattehsin.com/tag/ai-for-every-developer/">democratizing AI and make it accessible for everyone</a> but this does not come without limitations or known challenges. <em>Keeping this discussion for some other day / post. </em>

Instead of going directly to my favorite topic i.e. the Bots (aka Power Virtual Agents), I wanted to give audience a walk through of AI Builder and how can they infuse artificial intelligence into their applications <strong><em>without writing a single line of code</em></strong>. Therefore, out of 10-12 capabilities which include Custom and Pre-trained models of AI Builder, I thought to go with 3 of my favorite ones. Out of those 3, I will be covering the one with Object Detection as I think this would give you some idea of creating your next best app.
<h3>Object Detection</h3>
In the machine learning world, object detection is a common <strong>Computer Vision</strong> problem. It’s different than a simple image classification because it goes a little deeper, tries to locate and categorizes objects within the images.
<blockquote>Behind the scenes, the AI Builder Object Detection is using <a href="https://docs.microsoft.com/en-us/azure/cognitive-services/custom-vision-service/home?WT.mc_id=AI-MVP-5003464">Azure Custom Vision</a> technology.</blockquote>
As a normal practice of my exploration or learning, I try to see what (and how) others have learnt from it by either blogging, podcasting or creating a video on YouTube / Twitch. This gives me more than one perspective of a technology that is always better than having a restricted thought about it.

As soon as I started looking for Object Detection, I found out that a lot of folks have created some awesome content (intermediate to advanced) along with a few very basic ones (beginner). I did not search a lot but what I saw from Microsoft MVP <a href="https://www.youtube.com/watch?v=cdoQ5xlLwmE">Yash Agarwal</a> was just perfect. I had an idea of what I wanted to build as an example so I started looking for the similar implementation to get some inspiration. Interestingly, I stumbled upon my own colleagues blog on the <a href="https://akhan.me/2020/03/04/building-crowd-counting-model-using-ai-builder/">similar topic</a>. <em>Do check out his <a href="https://akhan.me/">site</a> if you're interested in learning about Microsoft Dynamics 365 Field Service.</em>

After looking at that (and some other short video / posts), I thought to finally build up something and make it available for broader audience here.
<h2>Ensure Safe Distancing in Retail Stores</h2>
The example is super simple (perfectly targeted for Beginners). We will create an app (A Power App) that will <strong>periodically count the number of people in any retail store such as cafe, restaurant or your favorite parlor. If the number of people exceeds the limit, an SMS will be sent as a notification to the responsible person for that business.</strong>
<blockquote>Did you like the idea? 💡 Please let me know your thoughts in the comments section!</blockquote>
<em>P.S. My demo may not seem to be a good fit for the use-case I have defined in the header but I wanted to be mindful of privacy and did not have time to record it in a cafe with proper permissions.</em>

[Check out this video for Demo](https://www.arafattehsin.com/wp-content/uploads/2020/11/Ensure-Safe-Distancing.mp4)

<h4>Pre-Requisites</h4>
The motive of this post is educational which definitely <strong>can</strong> lead to a production level solution but this example is just a hint towards that. <em>Don't worry! We will build all the functionality what I have written in bold letters.</em> However, you need below stuff to get started;
<ol>
 	<li>If you do not have the trial environment right now then just secure it from <a href="https://web.powerapps.com/signup?redirect=marketing&amp;email=">here</a>.</li>
 	<li>Very little experience of Power Apps. If you do not know how to create apps using Microsoft Power Apps then please go through this <a href="https://docs.microsoft.com/en-us/learn/modules/get-started-with-powerapps/?WT.mc_id=DX-MVP-5003464">FREE training material.</a></li>
</ol>
<h3>The AI Builder</h3>
This <a href="https://www.youtube.com/watch?v=86IXxN6d_kA">short video</a> is the best explanation of AI Builder so I will gracefully skip the intro and directly come to the <strong>real</strong> part. <em><strong>The Object Detection model.</strong></em>

First of all, just go to <a href="https://make.powerapps.com/">https://make.powerapps.com/,</a> expand AI Builder from your left pane, click on <strong>Build. </strong>This will open up the list of models you can create, select <strong>Object Detection</strong> and then choose a name of your model. I gave my model name as <strong>People Counter</strong>.
<blockquote>In case you want to read more about AI Builder Object Detection, <a href="https://docs.microsoft.com/en-us/ai-builder/get-started-with-object-detection?WT.mc_id=DX-MVP-5003464">Microsoft Docs</a> is your best friend!</blockquote>

Then, choose the Common Objects followed by the name of your object. We're just using a single object called <strong>Person</strong> so it's OK not to Select from database, otherwise you have an option on top!

<img class="aligncenter wp-image-31059 size-full" src="https://www.arafattehsin.com/wp-content/uploads/2020/11/AIBuilder-ObjectDetection.gif" alt="" width="1916" height="968" />

Now, let's talk about about adding the Images. You can choose different sources; I've used my local machine in below example. Generally, you need minimum 15 pictures per object but as we only have one object, you can use at least 15 images. <em>The more the merrier though.. </em>

Once the images are uploaded, you can easily tag them by either drawing a bounding box around it or just hover it on the object and it magically shows you a hint of box which you can then click and tag. Truly magical!
<blockquote>Always consider <a href="https://www.microsoft.com/en-us/ai/responsible-ai?activetab=pivot1%3aprimaryr6">responsible AI metrics</a> whenever you're creating such solutions.</blockquote>

<img src="https://media.giphy.com/media/GqkiouJnseidO90dzc/giphy.gif" alt="Tagging images from AI Builder Object Detection" />

Now after tagging all the images, you should train your model that'd learn to detect the Persons from your image. Once it's trained, you can evaluate your model by uploading a new image which was not a part of your training set. If you're satisfied with the result, you can go and publish it.

You can see my model's accuracy was just 75% - it's because of the amount &amp; quality of the data. For better results, always learn about the <a href="https://docs.microsoft.com/en-us/ai-builder/collect-images?WT.mc_id=DX-MVP-5003464">quality image collection</a>.

<img src="https://media.giphy.com/media/x0sF4sOS4L5xp8z2GD/giphy.gif" alt="Publish Object Detection Model by AI Builder" />

That's it. Your model is now ready to be consumed either in Power Apps or Power Automate.

This means we're 50% done with our stuff. Now let's move on to the Power Apps.
<h3>The Canvas App</h3>
So now, you can create a Canvas App where we will be using this model. But before we go with the integration of our model, let's see what we have to develop. You will be using a camera feed to get the get the images (frames), send it a Flow (Power Automate) where you'll use the <em>Detect and Count Object in Images</em> action, apply the business logic (i.e. to send SMS via Twilio) and then get the total count in the response to the app.
<h4>Camera's OnStream &amp; StreamRate</h4>
As per the <a href="https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-camera#description?WT.mc_id=DX-MVP-5003464">official docs</a>, you can use the <strong>Stream</strong>, <strong>StreamRate</strong>, and <strong>OnStream</strong> properties to automatically capture images on a timer, for example snapping a picture every minute to create a time-lapse sequence.

When I read this initially, I was super delighted but unfortunately, I could not find any example on the docs so I had to look for other resources such as <a href="https://powerusers.microsoft.com/t5/Building-Power-Apps/Automatic-capture-of-photos-using-Camera-Stream/m-p/729910#M233666">Community Forums</a> etc. However, I was able to get an idea to work with this.

So first, let's understand the two most important properties of Camera control.

<strong>StreamRate</strong>
<pre> - This defines as the frequency of updating an image on the Stream property of the Camera; often calculated in milliseconds. Such as 100 (1/10th of a second) to 3,600,000 (1 hour)

</pre>
<strong>OnStream</strong>
<pre> - This defines the functionality as how the app should perform when the specific Stream is updated. 

</pre>
<em>For example, if you have set your StreamRate property to 5000 (this mean, it will update the Stream property of the Camera on 10th second) and then it will fire the event <strong>OnStream</strong> so you can define your logic there. </em>

Since we get the concept, now let's drag the Camera control, Timer control and an Image control to see how our app is going to behave.
<ol>
 	<li>Set the Image's property to <strong>Camera.Stream </strong></li>
 	<li>On your Camera's <strong>OnStream</strong> property, Set a variable <strong>captureTrigger </strong>with the value 0. Set this variable as a <strong>StreamRate </strong>as well.</li>
 	<li>Now, <strong>OnTimerEnd</strong> trigger of your Timer, just set the <strong>captureTrigger's</strong> value to 100</li>
</ol>
So what will happen is, as soon as the Timer's <strong>OnTimeEnd</strong> is triggered, it will snap a picture of the frame within 1/10th of the second from the Camera's stream and show that on the Image control. You can always tweak your timer depending upon the use-case and occupancy rate of the business. ⬇

[Check out this video for Camera Timelapse Demo](https://www.arafattehsin.com/wp-content/uploads/2020/11/PowerApps-Camera-Control-Timelapse.mp4)

Now, our photo capturing mechanism is in-place. Let's go to <strong>Power Automate</strong> and do some magic there.
<h3>The Flow(s)</h3>
You can now create a flow which will use an AI Builder action called <strong><em>Detect and Count Object in Images.</em> </strong>As soon as you select this action, you should be able to see your AI Model in a drop down list, select People Counter and then in Image field, choose the content from Power Apps (<em>below image is for your reference). </em>

<img class="aligncenter wp-image-31065 size-full" src="https://www.arafattehsin.com/wp-content/uploads/2020/11/AIBuilder-Flow.jpg" alt="Power Apps to AI Builder Flow" width="1707" height="915" />

Then you can write a simple logic to count the objects, and if the count is greater than the threshold (in my case it's 10) then you can just send a SMS using Twilio's connector.
<blockquote>For the sake of this demo, I've used Twilio which has an <a href="https://www.twilio.com/try-twilio">easy trial process.</a> However, you can always use a different mechanism such as Email, writing it to the Excel file, notifying an IoT device and so much more.</blockquote>

Regardless of the notification, you can return the Count to the Power Apps by using the Respond to a Power App or Flow action. This way you can retain the values in your Power Apps as well.

As you'd notice in my demo, I am using this code in OnEndTimer trigger; it's because I am setting up the Gallery with the snapshots captured. You may not necessarily need this but it's just to show the last few images sent and processed through PowerApps ↔ Power Automate (Flow).

So that's how you can build a simple yet very useful solutions using AI Builder capabilities in Power Platform. The demo which I built/showcased here is up on my <a href="https://github.com/arafattehsin/CognitiveRocket/tree/master/AI-For-Every-Developer/Demos/ObjectDetectionAIBuilder">GitHub repo</a> with the AI Model.
<blockquote>I really wanted to extend the functionality to draw the bounding boxes around the detected persons but I'd leave this to you.</blockquote>
Please feel free to fork / download and play with that. Furthermore, if you've got any questions around this post or anything in general about AI Builder then please feel free to comment or connect with me on <a href="https://twitter.com/arafattehsin">Twitter</a>.

Until next time.