The graphical interface of learningml-editor

The development of any type of computer application is much easier if a suitable framework is used. Although it is true that the learning curve of these frameworks is usually quite steep, their advantages make them worth studying. In the first place they fix the basic architecture of the application, with which we get rid of a problem (and what a problem!). On the other hand, they incorporate solutions for a large part of the daily problems that arise when developing the type of application for which the framework has been designed.

Therefore, as I was clear that learningml-editor had to be a web application, I decided to use a framework for the development of this type of application. And of all of them, the one that convinced me the most, mainly because I already knew him, was Angular. I don’t mean to say it’s the best, but it certainly ranks among the best.

I am not going to go into explaining the architectural details of Angular or how it works, I will only say that it is a modular framework based on components, which greatly facilitates the organization and reuse of the code. The graphical interface of learningml-editor is a component of Angular that is made up of more components. In the following images I show all the components of the input screen and those of the Machine Learning model editor:

Components of home screen
Components of edit screen

And then their correspondence in the source code. Note that only the directories in the src folder are shown, which is where all the custom code resides. The other directories are typical of Angular and are practically untouched.

src
├── app
│   ├── components
│   │   ├── ml-filemenu
│   │   ├── ml-footer
│   │   ├── ml-home
│   │   ├── ml-label-container
│   │   ├── ml-login
│   │   ├── ml-model
│   │   ├── ml-model-state
│   │   ├── ml-model-toolbar
│   │   ├── ml-projects
│   │   ├── ml-report-bugs
│   │   ├── ml-shared-projects
│   │   ├── ml-signup
│   │   ├── ml-test-image-model
│   │   ├── ml-test-numerical-model
│   │   ├── ml-test-sound-model
│   │   ├── ml-test-text-model
│   │   ├── ml-web-cam
│   │   ├── page-not-found
│   │   └── progress-spinner-dialog
│   ├── interfaces
│   ├── models
│   └── services
│       ├── featureExtractors
│       └── mlAlgorithms
├── assets
│   ├── config
│   ├── i18n
│   ├── images
│   │   └── favicon_io
│   └── models
└── environments

On the other hand, each component has at least 4 files (let’s say ml-home):

  • one for the typescript code, where the component’s operation logic is set (ml-home.component.ts),
  • one with the html code, which is where you set how the component will be displayed (ml-home.component.html),
  • one with the CSS’s that define the styles with which the component will be displayed (ml-home.component.css),
  • and finally, one to perform unit tests (ml-home.component).

Let’s see an example that shows how to change the icon of the button for text recognition for a different one:

The icon chosen to be changed

As it is a presentation element, we look in the .html file of its respective component, in this case ml-home. That is, the file is src / app / ml-home / ml-home.component.html. We look for the line where the icon is set:

<mat-card-actions style="text-align: center;">
        <button (click)="openText()" matTooltip="Reconocer textos" mat-raised-button>
          <mat-icon>textsms</mat-icon> {{'home.text.button' | translate}}
        </button>
 </mat-card-actions>

We save the changes and the Angular development server reloads the page and shows these changes:

The changed icon

And voila !, So the best way to understand the learningml-editor code is by setting up a development environment and going through the files of the different components. You can try to remove parts, to see their effect, change them, add new ones, …, in short, what has been tinkering to understand what each thing does and how its behavior can be changed. Remember that you have the code available to study and modify it at https://gitlab.com/learningml/learningml-editor. And if you do something cool and want me to add it to the official version, don’t hesitate to make a pull request!

Leave a Reply