Translate Application with HUAWEI ML Kit
Introduction
Hello everyone,
Last time, I have written a simple note application, but we turned a simple application into an advanced application that works with artificial intelligence. You can check the link and read more.
Today, we will make a Translate application that use Huawei ML Kit features.
After the registration process is completed on HUAWEI Developers, we can create a new Ionic project, configure and integrate it with the Huawei ML kit.
Translation with ML Kit
The text translation service can be widely used in scenarios where translation between different languages is required. For example, travel apps can integrate this service to translate road signs or menus in other languages to tourists’ native languages, providing them considerate services; educational apps can integrate this service to eliminate language barriers, make content more accessible, and improve learning efficiency. In addition, the service supports offline translation, allowing users to easily use the translation service even if the network is not available.
The real-time translation service can translate text through the server on the cloud. Currently, real-time translation supports 31 languages.
We will make an application where we can easily translate words or sentences. To make the app a little more fun we will save our words with Storage and list them.
Let’s start! 😎
First of all, we need to set the Api Key first. Copy the Api Key from agconnect-services.json call the HMSMLKit.serviceInitializer service.
Called the permission function to get the necessary permissions from the user.
I designed an application similar to translate applications that used in daily life.
So, I added two dropdown lists on the ionic card and added a few languages that ML kit supports. You can check languages that support by ML Kit.
User should select the languages and type the word they want translated, then press the translate button.
After these steps, we can call the MLKit translate service. MLKit translate service has two translation modules, local and romote. If you want to use the local service, you have to wait for the relevant services to be downloaded to the phone memory, I used the remote service in order to be a little faster in my application.
I passed the values from the dropdown list to the remoteTranslator function and assigned the results to the translated value.
I added a fab button to make the application a little bit spicy. The purpose of adding this button was to create a dictionary for the user.
Here, one of the advantages that ML Kit translate module provides us is that we do not need to specify the source language. With automatic language detection, ML Kit can find the source language itself.
In order to benefit from the storage feature, you must download this with npm.
npm install @ionic/storage-angularWhen the user presses the fab button that appears on the screen, I saved the word and its translation with the storage feature with a very simple function.
I listed all the added words in the dictionary page that I added with ion-tab.
Conclusion
With this article, we made a simple translator application. You can write a very useful application by adding TTS and similar features of ML Kit to this application.
For more details, you can visit our developer page.
