[Huawei Developers] muraliameakula:
Introduction

In this article, we will be learning how to integrate Huawei ML kit in Flutter application. Flutter ML plugin allows your apps to easily leverage Huawei’s long-term proven expertise in machine learning to support diverse artificial intelligence (AI) applications. ML plugin provides diversified leading machine learning capabilities that are easy to use, helping you develop various AI apps.

List of API’s ML plugin provides

Text-related services

Language-related services

Image-related services

Face/body-related services

Natural language processing

Custom model

In this article, we will be integrating some of the specific API’s related to Text-related services and Language-related service in flutter application.

Development Overview

You need to install Flutter and Dart plugin in IDE and I assume that you have prior knowledge about the Flutter and Dart.

Hardware Requirements

A computer (desktop or laptop) running Windows 10.

A Huawei phone (with the USB cable), which is used for debugging.

Software Requirements

Java JDK 1.7 or later.

Android studio software or Visual Studio or Code installed.

HMS Core (APK) 4.X or later.

Integration process

Step 1. Create flutter project.

Step 2. Add the App level gradle dependencies, choose inside project Android > app > build.gradle.

apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'
implementation 'com.huawei.agconnect:agconnect-core:1.3.1.300'

Add root level gradle dependencies.

maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.4.1.300'

Step 3: Add the below permissions in Android Manifest file.

<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.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Step 4: Add plugin path in pubspec.yaml file under dependencies.

Step 5: Create a project in AppGallery Connect, find here.

pubspec.yaml

name: flutterdrivedemo123
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
sdk: ">=2.12.0 <3.0.0"

dependencies:
flutter:
sdk: flutter
huawei_account:
path: ../huawei_account
huawei_drive:
path: ../huawei_drive
huawei_ml:
path: ../huawei_ml

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
image_picker: ^0.8.0

dev_dependencies:
flutter_test:
sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

Initialize MLApplication

MLApplication app = new MLApplication();
app.setApiKey(apiKey:"API_KEY");<strong> </strong>

Check required permissions

Future<void> checkPerms() async {
final bool isCameraPermissionGranted =
await MLPermissionClient().hasCameraPermission();
if (!isCameraPermissionGranted) {
final bool res = await MLPermissionClient()
.requestPermission([MLPermission.camera, MLPermission.storage]);
}
}

Select image and capture text from image

Future getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
//final pickedFile = await picker.getImage(source: ImageSource.camera);
setState(() {
if (pickedFile != null) {
File _image = File(pickedFile.path);
print('Path :' + pickedFile.path);
capturetext(pickedFile.path);
} else {
print('No image selected.');
}
});
}
Future<void> capturetext(String path) async {
// Create an MLTextAnalyzer object.
MLTextAnalyzer analyzer = new MLTextAnalyzer();
// Create an MLTextAnalyzerSetting object to configure the recognition.
MLTextAnalyzerSetting setting = new MLTextAnalyzerSetting();
// Set the image to be recognized and other desired options.
setting.path = path;
setting.isRemote = true;
setting.language = "en";
// Call asyncAnalyzeFrame to recognize text asynchronously.
MLText text = await analyzer.asyncAnalyzeFrame(setting);
print(text.stringValue);
setState(() {
msg = text.stringValue;
});
}

How to detect Language using ML kit?

Future<void> onClickDetect() async {
// Create an MLLangDetector object.
MLLangDetector detector = new MLLangDetector();
// Create MLLangDetectorSetting to configure detection.
MLLangDetectorSetting setting = new MLLangDetectorSetting();
// Set source text and detection mode.
setting.sourceText = text;
setting.isRemote = true;
// Get detection result with the highest confidence.
String result = await detector.firstBestDetect(setting: setting);
setState(() {
text = setting.sourceText + ": " + result;
});
}

How to translate Language using ML kit?

Future<void> onClickTranslate() async {
// Create an MLLocalTranslator object.
MLLocalTranslator translator = new MLLocalTranslator();
// Create an MLTranslateSetting object to configure translation.
MLTranslateSetting setting = new MLTranslateSetting();
// Set the languages for model download.
setting.sourceLangCode = "en";
setting.targetLangCode = "hi";
// Prepare the model and implement the translation.
final isPrepared = await translator.prepareModel(setting: setting);
if (isPrepared) {
// Asynchronous translation.
String result = await translator.asyncTranslate(sourceText: text);
setState(() {
text = result.toString();
});
}
// Stop translator after the translation ends.
bool result = await translator.stopTranslate();
}

Result

Tricks and Tips

Make sure that you have downloaded latest plugin.

Make sure that updated plugin path in yaml.

Make sure that plugin unzipped in parent directory of project.

Makes sure that agconnect-services.json file added.

Make sure dependencies are added in build file.

Run flutter pug get after adding dependencies.

Generating SHA-256 certificate fingerprint in android studio and configure in Ag-connect.

Conclusion

In this article, we have learnt how to integrate capabilities of Huawei ML kit in flutter application. Similar way you can use Huawei ML kit as per user requirement in your application.

Thank you so much for reading, I hope this article helps you to understand the Huawei ML kit capabilities in flutter.

Reference

MLkit

Plutter plugin

Original Source