Integration of ML Kit into Ionic Application (Language-Related Service) - Part 2 - Huawei Developers

In my previous article, we learn how to integrate Huawei ML Kit Text-related service. Today we are going to explore language or voice-related service of machine learning kit.
Introduction
Huawei ML kit language-related service is used for detecting a text, convert a text to other language, reading a text etc. The scenario we can use this service is by creating an audio book like application which you can find in Huawei App Gallery.
Language/Voice-related Services
There are five type of services which comes under language-related service:
1) Text Translation
2) Language Detection
3) Text to Speech
4) Automatic Speech Recognition
5) Audio File Transcription
Here we will use three services that is Text Translation, Language Detection and Text to Speech to showcase the power HMS ML Kit in Ionic application.
Demo
{
"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"
}
Prerequisite
1) Must have a Huawei Developer Account.
2) Must have a Huawei phone with HMS 4.0.0.300 or later.
3) Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4) Must install node in the system
5) Must install Ionic in the system using below command:
Code:
npm install -g [user=1329689]@iONiC[/user]/cli
Things need to be done
1) Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
2) Create an app in the Huawei AppGallery connect and enable ML Kit in Manage Api section.
3) Provide the SHA Key in App Information Section.
4) Provide storage location.
5) Download the agconnect-services.json and store it somewhere on our computer.
6) Create a blank Ionic Project using below command:
Code:
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.
Code:
npm install <CORDOVA_MLKIT_PLUGIN_PATH>
8) If you want full Ionic support with code completion etc., install @iONiC-native/core in your project.
Code:
npm install [user=1329689]@iONiC[/user]-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.
Code:
cp node_modules/@hmscore/cordova-plugin-hms-ml/ionic/dist/hms-ml node_modules [user=1329689]@iONiC[/user]-native/ -r
10) Run the following command to compile the project:
Code:
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 (ex: com.example.app).
11) Run the following command to add android platform to your project:
Code:
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:
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:
Code:
npm install cordova-plugin-filechooser
npm install [user=1329689]@iONiC[/user]-native/file-chooser
ionic cap sync
Android Permission
We need android permission in order to allow our user to give their permission to the application like camera permission, storage permission etc. Run the following command on visual studio terminal:
Code:
npm install cordova-plugin-android-permissions
npm install [user=1329689]@iONiC[/user]-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:
Code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from [user=1329689]@iONiC[/user]/angular';
import { SplashScreen } from [user=1329689]@iONiC[/user]-native/splash-screen/ngx';
import { StatusBar } from [user=1329689]@iONiC[/user]-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AndroidPermissions } from [user=1329689]@iONiC[/user]-native/android-permissions/ngx';
import { FileChooser } from [user=1329689]@iONiC[/user]-native/file-chooser/ngx';
import { HMSMLKit } from [user=1329689]@iONiC[/user]-native/hms-ml/ngx'
import { FilePath } from [user=1329689]@iONiC[/user]-native/file-path/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
AndroidPermissions,
FileChooser,
HMSMLKit,
FilePath,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Create page in Ionic
Run the following command to create page in Ionic project:
Code:
Ionic generate page page-name
Text Translation
Basically it helps us to translate text or multiple text into different language. Currently, the following languages are supported:
1) Simplified Chinese
2) English
3) French
4) Arabic
5) Thai
6) Spanish
7) Turkish
8) Portuguese
9) Japanese
10) German
11) Italian
12) Russian
This service will be very useful to tourists who wants to communicate with people who can’t speak their language. This service can run on both cloud and device.
Text translation service run on device:
Code:
async localTranslator() {
var localtranslateInput = {
targetLangCode: this.language,
sourceLangCode: "en",
sourceText: this.translateText,
apiKey:"YOUR_API_KEY"
};
try {
const result = await this.HmsMLKit.localTranslator(localtranslateInput);
this.translateResult = result;
} catch (ex) {
alert(ex)
}
}
Text translation service run on cloud:
Code:
async remoteTranslator() {
var remoteTranslateInput = {
targetLangCode: this.language,
sourceLangCode: "en",
sourceText: this.translateText,
apiKey:"YOUR_API_KEY"
};
try {
const result = await this.HmsMLKit.remoteTranslator(remoteTranslateInput);
this.translateResult = result;
} catch (ex) {
console.log(ex);
}
}
In both the cases do not forget to import HMSMLKit.