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.
English version
Video Summary and Transcription
This Talk discusses machine learning on the edge and its benefits for mobile applications. ML on the edge utilizes the computing power of mobile devices for secure, real-time processing and offline capabilities. ML Kit, Google's SDK, provides easy integration of ML solutions in mobile apps without extensive ML expertise. The Talk covers the setup of Firebase and ML Kit integration in React Native projects, showcasing the possibilities of applying filters and generating avatars with ML on the edge.
Available in Español
1. Introduction to ML on the Edge
Short description:
I am delighted to talk about machine learning on the edge and how it can improve mobile applications. ML on the edge leverages the computing capacity of mobile devices, making processing more secure, real-time, and providing a better offline experience. ML Kit, Google's SDK, offers base and custom APIs for vision and language tasks, making it easy for mobile developers to integrate ML solutions without extensive ML expertise. Integrating ML Kit in a React Native project involves setting up the project as a Firebase one and updating the build or gradle file.
So, let's get started. 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 ION, 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 spins. 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, y'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 their 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. So 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 or gradle file to declare Google services as one of our dependencies and execute the plugin.
2. Firebase Setup and ML Kit Integration
Short description:
This section covers the setup of Firebase and React Native Firebase, installation of ML Vision model, and using ML Kit APIs for text recognition and face detection. The possibilities of ML on the edge are endless, including applying filters and generating avatars. Overall, we learned about the benefits of machine learning on the edge and integrating ML Kit into React Native projects.
This enables us to use Firebase products in our project. With Firebase setup, 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 module using either npm or Yarn. Followed by this, based on our use case, we install the required model. In this case, I am 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 the image. Each of this text block 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 an action. We see that walk on the grass has been accurately determined and 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've given the image and it has been able to accurately determine the face contours and give us 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 does 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.
