• Introducing XDA Computing: Discussion zones for Hardware, Software, and more!    Check it out!
  • Fill out your device list and let everyone know which phones you have!    Edit Your Device Inventory

Intermediate: Text Recognition, Language detection and Language translation using Huawei ML Kit in Flutter (Cross platform)

Search This thread

muraliameakula

Senior Member
Dec 29, 2020
99
3
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.
2640091000001753279.20210604090646.96917653040956732596660962272497:50520614053739:2800:A4A1DD6E43472AD79E8EE9048399DBA38769AE2364744ECEC679E862CEC6C6C5.png


2640091000001753279.20210604090728.31518391163210815678004141422847:50520614053739:2800:61CBA5FF0CDB6EA43969E9891C93ED9C3D2F8D0D12D57D95228330B60D451434.png


Step 2. Add the App level gradle dependencies, choose inside project Android > app > build.gradle.
Code:
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.
Code:
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.
Code:
<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
Code:
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
Code:
MLApplication app = new MLApplication();
app.setApiKey(apiKey:"API_KEY");<strong> </strong>

Check required permissions
Code:
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
Code:
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?
Code:
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?
Code:
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
2640091000001753279.20210604092143.17843453060658220360545690206810:50520614053739:2800:56F81CDCB4BB84929F1026A536648E0D782BB51C2063BAB9EAD221DBE58ECD23.gif
2640091000001753279.20210604092019.60473605965986524887453539779824:50520614053739:2800:ACC7471B63FA89DE13A31C4034AE643246D0181527E8F6FA4E86C5FD56044F1A.gif


2640091000001753279.20210604092342.43399234690501130823702719542741:50520614053739:2800:76435E9B041F4815560FE8D0F3269AD62B42CAF8D05FA37A6591F4E27DB31EB0.gif


2640091000001753279.20210604092436.36165618732877474617358304629528:50520614053739:2800:8E6F4895DE905A3AEBD30796EB8827A1CBCA645EADD172DBCF3B5EF43BCB4333.gif


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