[Huawei Developers] shikkerimath:
View attachment 5237385

Overview

Translation service can translate text from the source language into the target language. It supports online and offline translation.

In this article, I will show how user can understand the text using ML Kit Plugin.

The text translation service can be widely used in scenarios where translation between different languages is required.

For example, travel apps can integrate this service to translate road signs or menus in other languages to tourists' native languages, providing those considerate services; educational apps can integrate this service to eliminate language barriers, make content more accessible, and improve learning efficiency. In addition, the service supports offline translation, allowing users to easily use the translation service even if the network is not available.

Create Project in Huawei Developer Console

Before you start developing an app, configure app information in App Gallery Connect.

Register as a Developer

Before you get started, you must register as a Huawei developer and complete identity verification on HUAWEI Developers. For details, refer to Registration and Verification.

Create an App

Follow the instructions to create an app Creating an App Gallery Connect Project and Adding an App to the Project. Set the data storage location to Germany.

React Native setup

Requirements

Huawei phone with HMS 4.0.0.300 or later.

React Native environment with Android Studio, NodeJs and Visual Studio code.

Dependencies

Gradle Version: 6.3

Gradle Plugin Version: 3.5.2

React-native-hms-ml gradle dependency

React Native CLI: 2.0.1

1. Environment set up, refer below link.

2. Create project using below command.

react-native init project name

3. You can install react native command line interface on npm, using the install -g react-native-cli command as shown below.

npm install –g react-native-cli

Generating a Signing Certificate Fingerprint

Signing certificate fingerprint is required to authenticate your app to Huawei Mobile Services. Make sure JDK is installed. To create one, navigate to JDK directory’s bin folder and open a terminal in this directory. Execute the following command:

keytool -genkey -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks -storepass <store_password> -alias <alias> -keypass <key_password> -keysize 2048 -keyalg RSA -validity 36500

This command creates the keystore file in application_project_dir/android/app

The next step is obtain the SHA256 key which is needed for authenticating your app to Huawei services, for the key store file. To obtain it, enter following command in terminal:

keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks

After an authentication, the SHA256 key will be revealed as shown below.

View attachment 5237389

Adding SHA256 Key to the Huawei project in App Gallery

Copy the SHA256 key and visit AppGalleryConnect/ <your_ML_project>/General Information. Paste it to the field SHA-256 certificate fingerprint.

View attachment 5237391

Enable the ML kit from ManageAPIs.

Download the agconnect-services.json from App Gallery and place the file in android/app directory from your React Native Project.

Follow the steps to integrate the ML plugin to your React Native Application.

Integrate the Hms-ML plugin

npm i @hmscore/react-native-hms-ml

Download the Plugin from the Download Link

Download ReactNative ML Plugin under node_modules/@hmscore of your React Native project, as shown in the directory tree below:

project-dir
|_ node_modules
|_ ...
|_ @hmscore
|_ ...
|_ react-native-hms-ml
|_ ...
|_ ...

Navigate to android/app/build.gradle directory in your React Native project. Follow the steps:

Add the AGC Plugin dependency

apply plugin: 'com.huawei.agconnect'

Add to dependencies in android/app/build.gradle:

implementation project(':react-native-hms-ml')

Navigate to App level android/build.gradle directory in your React Native project. Follow the steps:

Add to buildscript/repositories

maven {url 'http://developer.huawei.com/repo/'}

Add to buildscript/dependencies

classpath 'com.huawei.agconnect:agcp:1.3.1.300')

Navigate to android/settings.gradle and add the following:

include ':react-native-hms-ml'
project(':react-native-hms-ml').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-ml/android')

Use case:

Huawei ML kit’s HMSTranslate API can be integrate for different applications and to translation between different languages.

Set API Key:

Before using HUAWEI ML in your app, set Api key first.

Copy the api_key value in your agconnect-services.json file.

Call setApiKey with the copied value.

HMSApplication.setApiKey("api_key").then((res) => {console.log(res);})
catch((err) => {console.log(err);})

Add below permission under AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Translation

Text translation is implemented in either asynchronous or synchronous mode. For details, please refer to HMSTranslate.

async asyncTranslate(sentence) {
try {
if (sentence !== "") {
var result = await HMSTranslate.asyncTranslate(this.state.isEnabled, true, sentence, this.getTranslateSetting());
console.log(result);
if (result.status == HMSApplication.SUCCESS) {
this.setState({ result: result.result });
}
else {
this.setState({ result: result.message });
if (result.status == HMSApplication.NO_FOUND) {
this.setState({ showPreparedModel: true });
ToastAndroid.showWithGravity("Download Using Prepared Button Below", ToastAndroid.SHORT, ToastAndroid.CENTER);
}
}
}
} catch (e) {
console.log(e);
this.setState({ result: "This is an " + e });
}
}

Obtaining Languages

Obtains language codes in on-cloud and on-device translation services. For details, please refer to HMSTranslate.

async getAllLanguages() {
try {
var result = await HMSTranslate.getAllLanguages(this.state.isEnabled);
console.log(result);
if (result.status == HMSApplication.SUCCESS) {
this.setState({ result: result.result.toString() });
}
else {
this.setState({ result: result.message });
}
} catch (e) {
console.log(e);
}
}

Downloading Prepared Model

A prepared model is provided for on-device analyzer to translate text. You can download the on-device analyzer model. You can translate the text in offline using the download Model. For details, please refer to HMSTranslate.

async preparedModel() {
try {
var result = await HMSTranslate.preparedModel(this.getStrategyConfiguration(), this.getTranslateSetting());
console.log(result);
if (result.status == HMSApplication.SUCCESS) {
this.setState({ result: "Model download Success. Now you can use local analyze" });
}
else {
this.setState({ result: result.message });
}
} catch (e) {
console.log(e);
this.setState({ result: "This is an " + e });
}
}

Read full article continue reading

Output:

View attachment 5237403

Tips and Tricks

Download latest HMS ReactNativeML plugin.

Copy the api_key value in your agconnect-services.json file and set API key.

Add the languages to translate in Translator Setting.

For project cleaning, navigate to android directory and run the below command.

gradlew clean

Conclusion:

In this article, we have learnt to integrate ML kit in React native project.

Educational apps can integrate this service to eliminate language barriers, make content more accessible, and improve learning efficiency. In addition, the service supports offline translation, allowing users to easily use the translation service even if the network is not available.

Reference

https://developer.huawei.com/consum...uides-V1/text-translation-0000001051086162-V1

Read full article link