ML Composer: A Machine Learning ft Jetpack Compose Dev Story — Episode 1

Text Recognition

Hi Folks!

Prologue

Today I decided to seriously start learning and improve my skill with Jetpack Compose and so I was thinking about an idea for a simple project that covers some interesting topics and all the main points about the UI.
So finally I thought about the machine learning capabilities, they are a lot, using camera, text to show and to edit, menu, buttons and so on.

That’s how ML Composer was born!

Text Recognition

The text recognition service can extract text from images of receipts, business cards, and documents. This service is useful for industries such as printing, education, and logistics. You can use it to create apps that handle data entry and check tasks.

More info here https://developer.huawei.com/consumer/en/doc/development/hiai-Guides/text-recognition-0000001050040053

Project

GitHub - FStranieri/ML-Composer: Simple app with the powers provided by Machine Learning and the…

How to run it on your Android device?

Just follow the preparation guide: https://developer.huawei.com/consumer/en/doc/development/hiai-Guides/config-agc-0000001050990353

UI

Yeah, the compose part!
We have 2 composables in there:

• Managing the camera permissions with a proper layout and state with Compose

• Screen with the camera preview(CameraX from Jetpack libraries), having a button on the bottom side and a circular progress at the center of the screen.
  The circular progress is managed with the MutableState from Compose itself, located in the viewmodel, TextRecognitionViewModel.

• Screen with the output of the Text Recognition scan

• NavHostController in order to navigate between the screens

setContent {            
val navController = rememberNavController()                         NavHost(navController, startDestination = NAV_MAIN) {                         composable(NAV_MAIN) { BuildCameraUI() }                composable(NAV_TEXTRECOG) { BindTextRecognitionOutput() }          
}        
}

ViewModel

I decided to use a ViewModel in order to keep all the Text Recognition part with its abilities and states.
Using the LiveData for output (success and failure) I trigger the events from the Activity that’s observing it.

ML-Composer/TextRecognitionViewModel.kt at master · FStranieri/ML-Composer

Finally, a Menu

Yeah, a simple menu for a developer with poor design capabilities.
This menu is allowing the user to choose which kind of Text Recognition to use: local or from cloud.

ML-Composer/main_act_menu.xml at master · FStranieri/ML-Composer

Result

Stay tuned for the next episode with another awesome Machine Learning superpower!!!
Bye Folks :}