Beginner: Integration of Huawei ML Text Embedded in React Native

Introduction

Huawei provides various services for developers to make ease of development and provides best user experience to end users. In this article, we will cover integration of Huawei ML Kit Text Embedding in React Native.

Huawei ML Kit provides Text Embedding feature which helps to get matching vector value of words or sentences and perform further research based on the query result. Text Embedding provides similar words of a particular searched word and similarity between two words or sentences. We can also improve searching and browsing efficiency using result related to search text in research paper and get more information about related word.

Development Overview

You need to install React Native and I assume that you have prior knowledge about the React Native.

Hardware Requirements

• A computer (desktop or laptop) running Windows 10.
• A Huawei phone (with the USB cable), which is used for debugging.

Software Requirements

• Visual Studio Code installed.
• HMS Core (APK) 4.X or later.

Follows the steps.

1. Register as Huawei developer and complete identity verification in Huawei developer’s website, refer to register a Huawei ID
2. Create an App in AppGallery Connect.
3. Generating a Signing Certificate Fingerprint

4. Generating SHA256 key

Use below command for generating SHA256

5. Download the agconnect-services.json file from AGC, copy and paste in android Project under app directory, as follows.

6. Enable the ML Kit in Manage APIs menu

React Native Project Preparation

1. Environment set up, refer below link.

https://reactnative.dev/docs/environment-setup

2. Create project using below command.

3. Download the Plugin using NPM.

Open project directory path in command prompt and run this command.

4. Configure android level build.gradle.

a. Navigate to buildscript and configure the Maven repository address and AppGallery Connect plugin for the ML SDK.

b. Insert the following lines inside the dependencies block.

Development

1. Analyze Similar Words

Below function will return specified number of similar words asynchronously.

2. Analyze Word Similarity

Below function provides similarity between two words asynchronously.

3. Analyze Word Vector

Below function provides the word vector asynchronously.

Final Code

Add the below code in App.js

Testing

1. Open project directory path in command prompt.

2. Run the android app using the below command.

Generating the Signed Apk

1. Open project directory path in command prompt.

2. Navigate to android directory and run the below command for signing the APK.

Result

1. Click on button as per above screen. It will navigate to respective screens and check result, as follows.

Tips and Tricks

• Always use the latest version of the library.
• Add agconnect-services.json file without fail.
• Add SHA-256 fingerprint without fail.
• Make sure dependencies added in build files.
• Make sure set minSdkVersion to 19 or higher.
• Don’t forgot to add Api key.

Conclusion

In this article, we have learnt integration of Huawei ML Text embedded feature into React Native app development. Text embedded provides multiple features like as getting the similarity between two words or sentences and also getting the similar words of a particular word search. This helps to improve user search experience.

Thanks for reading the article, please do like and comment your queries or suggestions.

References

ML Kit Text Embedded:

Document

Original Source

https://forums.developer.huawei.com/forumPortal/en/topic/0202623401677280089?ha_source=hms1