Integrating LabelStudio in React Machine Learning Applications

An example LabelStudio interface

If you have been wondering how to label new data points within your react applications, be it Text, Images, or Audio LabelStudio has got you covered. LabelStudio is an open-source labeling tool and can be a very rewarding one in your toolkit of building high-quality ML applications using React.

In this tutorial, I’ll show you just how easy you can integrate LabelStudio into your React application, although I am gonna assume you are at least familiar with the world of React and writing JSX code.

To put things into perspective, the app I was building was an OCR solution where you could extract text values from forms of any template. Imagine in the image below you had to extract the Name and Business Name. The very first step of any such task is to figure out the bounding boxes of these fields within a template. Here’s where LabelStudio comes in where I can add new templates to my application on the go.

Extracting Name and Business Name from a W9 Form

So first things first, let’s install LabelStudio Frontend (Since we are only concerned about the React Integration). The label Studio documentation is handy but I found the documentation to the front end library could still use a boost.

npm install @heartexlabs/label-studio

Let's write the component keeping Name and Business Name as the label names.

Now to break this component down there are largely 3 steps:

1. Importing and creating a new LabelStudio instance.
2. Setting up the UI using a configuration. This is where we would specify the label names, the panels to display, and the Image to be labeled within the task. You can configure label studio to annotate multiple images one after another. Here for simplicity, I am setting up label studio to annotate a single image only
3. Defining 3 Major callbacks:
   a. onLabelStudioLoad: What happens when LabelStudio starts up?
   b. onSubmitAnnotation: What happens when you click “Submit” after labeling?
   c. onUpdateAnnotation: What happens when you click “Update” if you changed the labels after submission?

“LS” in each of these callbacks refers to the LabelStudio instance itself. So don't panic like I did when you didn't see where it was defined :p

The best part about the configuration is the fact that it is a string. You can play around with the application and generate literally any sort of configuration based on user input. For Example, define a custom component for the user to input different Labels prior to the labeling task. See below for an example:

There are plenty of things to be tried out in LabelStudio and I hope this gives your ML applications that extra edge. Hope you found this useful, and if you did, feel free to connect with me on LinkedIn. I am currently looking to collaborate on ML projects. I believe lending a hand is the best way to learn