Beginner: Integration of Text Translation feature in Education apps (Huawei ML Kit-React Native)

Search This thread

shikkerimath

Senior Member
Nov 30, 2020
65
21
1614668195557.png


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.

1614668406814.png


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.

1614668429012.png


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:

1614668792380.png


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
 

AndroidDeveloperLB

Senior Member
Mar 30, 2014
1,894
447
Not exactly on topic, but who made the first image of the post (the one with "hello") ?
It shows a wrong word in Hebrew . A mirrored version of the correct word.
Meaning:
םולש
instead of:
שלום
(means "Hello" or "Peace").

If you don't understand what I mean, it's as if instead of "Hello" you would see "olleH".
 
  • Like
  • Wow
Reactions: Eroticus and ank96

ddwfzp

New member
Apr 10, 2021
1
0
All things considered, it would be decent if such stages as, for instance, had such an element. In the event that my English isn't great yet I need to pass a course at an American college. It is very muddled to do that without the important abilities. I buckle down with my private English guide who assists me with accomplishing my objective. more
 

Top Liked Posts

  • There are no posts matching your filters.
  • 10
    1614668195557.png


    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.

    1614668406814.png


    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.

    1614668429012.png


    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:

    1614668792380.png


    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
    1
    Not exactly on topic, but who made the first image of the post (the one with "hello") ?
    It shows a wrong word in Hebrew . A mirrored version of the correct word.
    Meaning:
    םולש
    instead of:
    שלום
    (means "Hello" or "Peace").

    If you don't understand what I mean, it's as if instead of "Hello" you would see "olleH".
Our Apps
Get our official app!
The best way to access XDA on your phone
Nav Gestures
Add swipe gestures to any Android
One Handed Mode
Eases uses one hand with your phone