Huawei ML Kit - Image Classification feat. React Native(Cross Platform) - Huawei Developers

Introduction
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Image Classification is the process where a computer device can analyse and define the image category or class in simple language.
Image Classification can be used in many intelligent services, photo gallery application and to design highly efficient security products and services.
Huawei ML Kit enable developers to use its highly efficient API’s to implement the image classification for their mobile applications.
Huawei ML Kit classifies the elements presents in an image into defined categories such as objects, environment, artwork, animal, etc.
Huawei ML Kit’s Image Classification API’s are available for two different classification modes
On Device
Device based classification API’s analyse and detects the image category by running the on device algorithm and supports over 400 different image categories.
On Cloud
Cloud based classification API’s analyse and detects the image category by running the on cloud algorithm and supports over 12000 different image categories.
Development Overview
We will be focusing on simple Image Classification service from an image using on device 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.
Code:
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
Code:
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.
Code:
import com.huawei.hms.rn.ml.HmsMlPackage;
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Add following line. Don't forget to add import statement also.
packages.add(new HmsMlPackage());
return packages;
}
...
};
Add below under AndroidManifest.xml file
Code:
<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" />
<application
<meta-data
android:name="com.huawei.hms.ml.DEPENDENCY"
android:value="ocr"/>
</application>
Use case
Huawei ML kit’s Image Classification API provides many different use cases, however we will take very simple gallery image classification as example.
Imageclassification.js
Imageclassification.js is a java script file which we will keep under “src” folder of the project to have the navigation stack from the launch page.
We will re-direct to “Classify” tab from here to showcase the image classification capabilities.
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0203430657683920058