React Summit Remote Edition

React Summit Remote Edition 2020

The world is filled with billions of small, connected, intelligent and compute-efficient smart-phones. What if we can tap into this power and do more on the edge? It turns out, ML fits perfectly here. Let us explore the MLKit library to bake in intelligence into react-native applications.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ML on the Edge

Hello everyone. I am delighted to talk to you all about the topic, Machine Learning on the Edge. I am Sangeeta and I work as a developer at Amazon. For the past four years or so, I've been building mobile applications professionally and as side projects. Naturally, I'm always on the lookout for ways to make apps faster, smarter, more secure, and be able to deliver better customer experiences. As such, when Google rolled out ML Kit as part of their I.O. which promised of machine learning on the edge, I had to check it out. Now what is ML on the edge and why should one care about it? Traditionally, building ML solutions required developers to gather data, build models, train them, tune them, deploy them to some remote server on the cloud, and have it served to mobile devices on so-called the edges of the internet. Now as we all know, with the passage of time, mobile devices have only grown much more efficient in their computing abilities. Why don't we leverage the computing capacity of the devices locally instead of doing the processing somewhere remote on the cloud? That is ML on the edge. Now what are the benefits of doing so? Not having to transfer data back and forth across the globe means easy latency and bandwidth fits, localizing all of the processing happening on the device means the data is more secure, the results are more real-time, and you are able to provide better offline-first experience to your customers. And finally, this greatly reduces the barrier for any mobile developer with little to no ML expertise to integrate ML solutions in their applications. Hopefully, you all are sold now on the idea that ML on the edge is interesting and are curious to know more about it. Now let's try to understand how do we go about achieving this. ML Kit is Google's SDK, which encompasses all of their machine learning expertise in a simple yet powerful SDK. This is built on top of TensorFlow Lite, which is a mobile-optimized version of TensorFlow and can be used for both Android and iOS development. Now the APIs that ML Kit offers can be broadly classified into two types, base and custom. The idea is that if one of your needs is not satisfied by the available base APIs, then you're free to build your own TensorFlow Lite models custom and have it rendered on mobile devices. The available base APIs can be further classified based on the usage into vision and language. For example, smart replies, barcode scanning, face detection, image detection and labeling, and so on. Again, mobile developers need not necessarily understand the machine learning magic that happens under the hood. All of that is cleanly abstracted away from you and is available as out-of-the-box APIs, which can be leveraged with just a few lines of code. Talking about code, next let's understand what it takes to integrate ML Kit in a React Native project. We need to know that ML Kit can be used for both native and React Native development. But for the purpose of this talk, I'll be focusing on React Native workflow for Android, but the process should be pretty similar for iOS as well.
The first step for integrating ML Kit is setting up your project as a Firebase one. Now, Firebase provides a set of tools that makes application development very easy. Tools such as logging, authentication, all of these heavy lifting process is available as part of Firebase. The developers at Google thought, why should machine learning be any different? And that's why ML Kit is available as part of Firebase as well. In order to get started with Firebase, you go to the Firebase console and give in your package name. This generates a Firebase configuration file, which is placed in the root of your project folder. Next, we update the build.gradle file to declare Google services as one of our dependencies and execute the plugin. This enables us to use Firebase products in our project. With Firebase set up, let's move to the React Native section of the code base. React Native Firebase is the officially recommended library for Firebase for React Native development. To use this, we first install the React Native Firebase app model using either npm or Yarn. Followed by this, based on our use case, we install the required model. In this case, I'm installing the ML Vision model and updating my Firebase.json file to enable true. Now for the fun part, with Firebase hooked up and the required ML models installed, we use the APIs to process on our input. In this case, I'm awaiting the download of the Vision model, followed by which I provide the path to my local image to the text recognizer process image API. What this does is process the image and return an array of text blocks for each text on that image. Each of these text blocks contains information such as what is the actual text within it, what are the bounds of it, what are the coordinates, and what is the language of the text. This is in action. We see that walk on the grass has been accurately determined and the different text blocks in the output have been used to overlay on top of the image. This is another example of ML Kit's face detection API. Here I have given the image and it has been able to accurately determine the face contours and give its coordinates. Consider this as a stepping point for applying filters on this or generating avatars for this image and so on. The possibilities are simply endless. Now that is pretty much what I wanted to cover as part of this talk. Today we learned what is machine learning on the edge, what are its benefits, what is ML Kit, and what does it take to integrate ML Kit as part of your React Native project.
I hope to have inspired you with the thought of using ML on the edge on your next mobile application.
If you have any questions, feel free to drop me a DM on my Twitter or drop me a mail.
Thank you so much for watching. Bye-bye.