Machine Learning -Object Detection using Huawei ML KIT-React Native API’s
Object Detection is a technological advancement for Human Intuition and gut.
Human can see an object and identify it!!
It is also possible with Computers!!
Oops!!Does computer have eyes and brain like humans?
Of course not….
Basically, there are many different algorithms and services available which provides eyes and brain to your computer, ever wondered, how?
These algorithms process objects in an image with respect to the background by simply providing the boundary to objects and process them accordingly.
Huawei ML Kit provides one such service which helps in Object Detection
Huawei Object Detection is very useful in order to detect multiple objects in an image which can be located and classified in real time.
Huawei ML Kit enables detection for eight different type of object category as Household products, fashion goods, food, places, plants, faces, and others.
A typical process chat for the Object Detection can be represented as below.
Development Overview
We will be focusing on simple Object Detection service for an object using Huawei Object Detection API’s.
Prerequisite
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 4.0.0.300 or later
3. React Native environment with Android Studio, Node Js and Visual Studio code.
Major Dependencies
1. React Native CLI : 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 4.0.1
4. React Native ML Kit SDK : 5.0.0
5. react-native-hms-ml kit gradle dependency
6. AGCP gradle dependency
Software Requirements
1. Java SDK 1.8 or later
2. Android 5.0 or later
Preparation
1. Create a react native project using React Native CLI and open android directory.
2. Download the React Native ML Kit SDK and paste it under Node modules directory of React Native project.
3. Create an app and project in the Huawei AppGallery Connect.
4. Provide the SHA Key and App Package name of the project.
5. Enable the ML API and download the agconnect-services.json file and paste to the app folder of your android folder.
Integration
· Add below to build.gradle (project) file, under buildscript/repositories and allprojects/repositories.
Maven {url ‘http://developer.huawei.com/repo/'}
· Add below to build.gradle (app) file, under dependencies to use the ML kit SDK in your React Native application.
dependencies{
// Import the SDK.
implementation project(“:react-native-hms-ml “)
…
…
implementation ‘com.huawei.agconnect:agconnect-core:1.2.1.301’
}
· Add below under Settings.Gradle file.
include ‘:react-native-hms-ml
project(‘:react-native-hms-ml).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-hms-ml /android’)
· Add below under MainApplication,java file.
· Add below under AndroidManifest.xml file.
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<meta-dataandroid:name="com.huawei.hms.ml.DEPENDENCY"android:value="ocr"/>
Use case
Huawei ML kit’s Object Detection API supports wide range of different use cases starting from vehicle detection on the highways to avoid potential accidents to develop fascinating application for fashion and apparel and classify the food for cloud kitchens.
“There is no boundary for one’s imagination to paint on the canvas”
As of now ML Kit’s React Native API’s support object detection using a gallery image and this article demonstrate and feature the same capability.
ObjectDetect.js
ObjectDetect.js file is a JavaScript file responsible for creating and processing the analyzer for object detection.
1. Creating Analyzer
Analyzer can be created with some optional settings parameters as below
allowClassification (Boolean): Sets whether to support detection result classification. Default is false.
allowMultiResults (Boolean): Sets whether to support multi-object detection. Default is false.
analyzerType (Number): Sets the object detection mode. Default is HmsObjectRecognition.TYPE_PICTURE.
2. Set the frame instance using HmsFrame module. Uri parameter is required.
uri (String): Image uri.
3. Analyze operation is available to create and start the analyzer.
4. Stop Analyzer
After analyze operation complete stop call is available to stop analyzer.
5. Image Picker
Function to choose image for object detection.
Results
Tips and Tricks
1. The Object Detection API is able to detect both static images and dynamic camera streams with a host of APIs, which you can call synchronously or asynchronously.
2. The Object Detection API uses on device algorithm to detect the objects.
3. The Object Detection API supports 8 different type of categories.
Conclusion
Article explains the integration of hms-ml -react-native API’s to analyse and detects the object which can be categorise in different categories in to simplify the day to day errands.
References
