Picture Machine Learning Tool, made with Flutter

We have created and published in Google Play a simple app made in Flutter that facilitates the development and training of machine learning algorithms that process images: classifiers, OCRs, etc.

The idea

We have been developing internally machine learning systems whose source of data are images.

Specifically, we are focused on recognizing certain types of texts in certain images (OCR).

We need an app tool that allows us to upload an annotated image to the system at any time for continuous training.

In addition, we have also started working with Flutter and we wanted to make a simple open source development with this technology for the development of native apps on Android and iOS.

Putting together both needs, we have decided to invest a few hours and create PIC ML Tool.

The develop

As in any development, the first thing was to design the interface.

The app only had one main screen (widget page) and another one to show help and description of the project.

The only case use of the app is: upload image with annotation (optional).

The steps are:

1. Indicate the endpoint where the image is uploaded via POST multi-part.
2. Optionally indicate an annotation text. Ideal for supervised learning.
3. Take the image.
4. Click on Upload and wait for the confirmation message.

Simple, isn't it?

To make things easier, the URL and annotation are saved in preferences in order to do not enter them again whenever the app is used.

If there is any doubt, just click on the icon of the help appbar and information about the app and how to use will be shown. There is also reference to the repository in GitHub where an example of a backend in NodeJS is included that saves the image.

In spite of the little time that Flutter is with us, there are already a multitude of packages and libraries available that make the code to be ridiculous implemented.

In this case we have used the following:

• Image Picker: to take image from camera or gallery.
• Http: to upload the image to the backend.
• Share Preferences: to save/load the URL and annotation.
• URL Launcher: to launch the GitHub repositority in external browser.

Tips & Caveats

The app is simple, Flutter is simple, therefore, the development has been like that.

The total development time (including preparation and upload to Google Play) has been 5 hours.

Dart and flutter include reactive mechanics. Each time "setState()" is called, the widget's constructor is invoked. It is at that moment when according to the state variables, the upload button must be enabled or not, the color of the TextField must be blue or red depending on the validity of the URL.

It is striking that there is no enable function or property for the buttons. If you want to disable a button, you will have to assign a "null" to the "onPress" property.

It takes a bit to get the hang of this UI development philosophy based on widgets trees.

Thankfully, the Flutter plugin for Android Studio helps with this.

It is important to highlight that the hot-reload function does not finish working very well.

In some style changes, such as font size, color, a full reboot of the execution was necessary.

Regarding the publication in Google Play, it is easily done following the steps of the documentation. Basically you have to add to the Gradle the signature information and optionally the configuration of ProGuard.

The result

The app is very fluid. Flutter internally uses a SurfaceDraw accelerated by GPU and the embedded runtime of Dart is responsible for the fast drawing of Widgets.

Here are the screenshots of the app.

In the repository there are the source code and an example backend.

If you prefer, you can download the app directly from Google Play.