Integration of ML Kit into Ionic Application (Face-Related Service) — Part 4

Published in

Huawei Developers

5 min readOct 22, 2020

In my previous articles, we learn how to integrate Huawei ML Kit Text-related, Language-related and Image-related services. Today we are going to explore Face/Body-related service of Huawei machine learning kit.

Introduction

Huawei ML kit Face/Body-related service is used for detecting the shapes and features of our face, hand and body which includes facial expression, age, gender, hand points and many more. Use this service by creating an application which beautify user face when they are in video call or astrology & horoscope application by predicting future using hand key point detection service.

Face/Body-related services

As of now there is only one Cordova plugin developed for Face/Body- related services and that is Face Detection. Here we will use this service to showcase the power HMS ML Kit in Ionic application.

Demo

Prerequisite

Must have a Huawei Developer Account.
Must have a Huawei phone with HMS 4.0.0.300 or later.
Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
Must install node in the system
Must install Ionic in the system using below command:

npm install -g @ionic/cli

Things need to be done

Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
Create an app in the Huawei AppGallery connect and enable ML Kit in Manage API section.
Provide the SHA Key in App Information Section.
Provide storage location.
Download the agconnect-services.json and store it somewhere on our computer.
Create a blank Ionic Project using below command:

ionic start Your_Application_Name blank --type=angular

7. Download the Cordova Ml Kit Plugin. Run the following command in the root directory of your Ionic project to install it through npm.

npm install <CORDOVA_MLKIT_PLUGIN_PATH>

8. If you want full Ionic support with code completion etc., install @ionic-native/core in your project.

npm install @ionic-native/core --save-dev

9. Run the following command to copy the “ionic/dist/hms-ml” folder from library to “node_modules/@ionic-native” folder under your Ionic project.

cp node_modules/@hmscore/cordova-plugin-hms-ml/ionic/dist/hms-ml node_modules/@ionic-native/ -r

10. Run the following command to compile the project:

ionic build

npx cap init [appName] [appId]

Where appName is the name of your app, and appId is package_name in your agconnect-services.json file (example: com.example.app).

11. Run the following command to add android platform to your project:

ionic capacitor add android

12. Make sure your project has a build.gradle file with a maven repository address and agconnect service dependencies as shown below:

13. Add the Signing certificate configuration to the build.gradle file in the app directory as show below:

14. Add plugin to the build.gradle file in the app directory as show below:

15. Add ads service implementation into to dependencies section of build.gradle file in the app directory as show below:

16. Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below:

17. To update dependencies, and copy any web assets to your project, run the following code:

npx capacitor sync

Let’s Code

Install FileChooser

We need to install FileChooser to select a file or in this case an image, returns a file URI. Run the following command on visual studio terminal:

npm install cordova-plugin-filechooser
npm install @ionic-native/file-chooser
ionic cap sync

Android Permission

We need android permission in order to allow our users to give their permission to the application like camera permission, storage permission etc. Run the following command on visual studio terminal:

npm install cordova-plugin-android-permissions
npm install @ionic-native/android-permissions
ionic cap sync

Avoid No Provider Error

To avoid No Provider Error, we need to add FileChooser, Android Permission and HMS ML kit in app.module.ts providers section and also make sure to import the same as shown below:

Create page in Ionic

Run the following command to create page in Ionic project:

Ionic generate page page-name

Face Detection

Basically it helps us to detect the facial contour, features, and expressions of a person. It can help to detect up to 855 face contour, 7 facial features and 7 facial expression.

This service is very useful for creating beauty related application or a photo editor application.

Run application

Now we can run the application using the following command on visual studio terminal:

ionic capacitor run android

Conclusion

We learn how to integrate HMS ML Kit in Ionic Project along with that how to integrate and use one of the service provided by ML Kit and that is image related service. We got to know that image classification can be used with object detection in order to create an interesting application.

Feel free to comment, share and like the article. Also you can follow me to get awesome article like this every week. Stay tune for next part of HMS ML Kit.