Beginner: Integration of Text Translation feature in Education apps (Huawei ML Kit-React Native) - Huawei P30 Pro Guides, News, & Discussion

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.
Code:
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.
Code:
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:
Code:
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:
Code:
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
Code:
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:
Code:
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
Code:
apply plugin: 'com.huawei.agconnect'
Add to dependencies in android/app/build.gradle:
Code:
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
Code:
maven {url 'http://developer.huawei.com/repo/'}
Add to buildscript/dependencies
Code:
classpath 'com.huawei.agconnect:agcp:1.3.1.300')
Navigate to android/settings.gradle and add the following:
Code:
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.
Code:
HMSApplication.setApiKey("api_key").then((res) => {console.log(res);})
catch((err) => {console.log(err);})
Add below permission under AndroidManifest.xml file.
XML:
<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.
JavaScript:
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.
JavaScript:
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.
JavaScript:
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.
Code:
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

---

XDARoni said:
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.
Code:
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.
Code:
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:
Code:
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:
Code:
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
Code:
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:
Code:
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
Code:
apply plugin: 'com.huawei.agconnect'
Add to dependencies in android/app/build.gradle:
Code:
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
Code:
maven {url 'http://developer.huawei.com/repo/'}
Add to buildscript/dependencies
Code:
classpath 'com.huawei.agconnect:agcp:1.3.1.300')
Navigate to android/settings.gradle and add the following:
Code:
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.
Code:
HMSApplication.setApiKey("api_key").then((res) => {console.log(res);})
catch((err) => {console.log(err);})
Add below permission under AndroidManifest.xml file.
XML:
<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.
JavaScript:
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.
JavaScript:
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.
JavaScript:
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.
Code:
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
Click to expand...
Click to collapse

---

Currently, real-time translation how many language support

---

huawei is not accepting new account. any other possible solution? thanks in advance