Huawei ML Kit (React Native)
Huawei ML Kit provides Text Recognition API to improvise the quality and visibility of old and blurred text on an image.
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.
Imagine 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.
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.
· Add below under Settings.Gradle file
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.
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.
Text Recognition
HmsTextRecognitionLocal provides the set of methods which analyse the text on images using on device capabilities.
Follow below to implement these capabilities.
Create TextRecognition.js file and save it to the src folder of the project root directory.
TextRecognition.js
1. Creation of analyser settings required to configure the language.
Below are the parameters for the settings,
language (String): Sets language for analyser. The default setting is “rm”(Roman languages).
OCRMode (Number): Sets the text detection mode. The analyser calls an appropriate API for text detection based on the detection mode. Default is OCR_DETECT_MODE.
2. HmsFrame is required to choose the image and takes parameter as
uri (String): Image uri.
3. Result analysis depends upon the Boolean value
4. Close analyzer
5. Image picker
Results
Tips and Tricks
· Huawei ML Kit: Text Recognition can support Simplified Chinese, English, Spanish, Portuguese, Italian, German, French, Russian, Japanese, Korean, Polish, Finnish, Norwegian, Swedish, Danish, Turkish, Thai, Arabic, Hindi and Indonesian using cloud API’s.
· Huawei ML Kit: Text Recognition can support Simplified Chinese, Japanese, Korean, and Latin-based languages (including English, Spanish, Portuguese, Italian, German, French, Russian, and special characters. For details about the supported special characters, please refer to Latin Script Supported by On-device Text Recognition) using on device API’s.
· The Text Recognition API is able to recognize text in both static images and dynamic camera streams with a host of APIs, which you can call synchronously or asynchronously to build your text recognition-enabled apps.
Conclusion
Article explains the integration of hms-ml -react-native API’s to analyse, extract and read the text from an image to simplify the juggle of text extraction from poor and old images.
