Experience Huawei ML Kit - Text Recognition feat. React Native (Cross platform) - Huawei Developers

Introduction
{
"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"
}
Quality improvement has become crucial in this era of digitalization where all our documents are kept in the folders, shared over the network and read on the digital device.
Imaging the grapple of an elderly person who has no way to read and understand an old prescribed medical document which has gone blurred and deteriorated.
Can we evade such issues??
NO!!
Let’s unbind what Huawei ML Kit offers to overcome such challenges of our day to day life.
Huawei ML Kit provides Text Recognition API to improvise the quality and visibility of old and blurred text on an image.
Text Recognition API is very important and useful the industries where the data is huge and required to be extracted from the images.
Text Recognition API provides two ways to read and process the data on an image:
Local
Huawei ML kit’s Text Recognition API can detect and read the text on an image using the algorithms configured on the device itself and does not require any interaction with cloud and internet.
Remote
Huawei ML kit’s Text Recognition API can analyse and read the text on an image using cloud algorithm API and require interaction with cloud and internet.
Development Overview
We will be focusing on simple text recognition from an image using on device detection API’s
Prerequisite
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 4.0.0.300 or later
3. React Native environment with Android Studio, Node Js and Visual Studio code.
Major Dependencies
1. React Native CLI : 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 4.0.1
4. React Native ML Kit SDK : 5.0.0
5. react-native-hms-ml kit gradle dependency
6. AGCP gradle dependency
Software Requirements
1. Java SDK 1.8 or later
2. Android 5.0 or later
Preparation
1. Create a react native project using React Native CLI and open android directory.
2. Download the React Native ML Kit SDK and paste it under Node modules directory of React Native project.
3. Create an app and project in the Huawei AppGallery Connect.
4. Provide the SHA Key and App Package name of the project.
5. Enable the ML API and download the agconnect-services.json file and paste to the app folder of your android folder.
Integration
Add below to build.gradle (project) file, under buildscript/repositories and allprojects/repositories.
Code:
Maven {url 'http://developer.huawei.com/repo/'}
Add below to build.gradle (app) file, under dependencies to use the ML kit SDK in your React Native application.
Code:
dependencies{
// Import the SDK.
implementation project(":react-native-hms-ml ")
…
…
implementation 'com.huawei.agconnect:agconnect-core:1.2.1.301'
}
Add below under Settings.Gradle file
Code:
include ':react-native-hms-ml
project(':react-native-hms-ml).projectDir = new File(rootProject.projectDir, '../node_modules/react-native-hms-ml /android')
Add below under MainApplication,java file.
Code:
import com.huawei.hms.rn.ml.HmsMlPackage;
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Add following line. Don't forget to add import statement also.
packages.add(new HmsMlPackage());
return packages;
}
...
};
Use case
Huawei ML kit’s Text Recognition API provides many different use cases, however our focus would be reading a hand written note and display the text on the application using on device capabilities of the API.
App.js
App.js file acts as entry point and creates navigation to navigate on required service page.
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0204424693794850035

---

Interesting.

---

Rebis said:
Interesting.
Click to expand...
Click to collapse
THANKS

---

If the text is not visible properly using this service can we extract the data.