Label Studio Frontend integration using Static HTML Component

Hi,

I’ve done a clean-room re-implementation of streamlit-labelstudio component to work with the latest version of Label Studio v1.4.0. The component uses static HTML only and is doesn’t appear to have the errors reported in that discussion thread. It also doesn’t require any special installation or web framework such as React. I have not packaged and published this to PyPi so you can get the code and modify it to your heart’s content. :heart:

@fungidick please feel free to lift the code I have written to upgrade your own component so it works with the latest API of Label Studio Frontend.

Overview

Label Studio is an open source data labeling tool providing flexible data annotation. Label Studio comprises Label Studio Backend (LSB) server and ML service and Label Studio Frontend (LSF) which is based on React and mobx-state-tree and distributed as an NPM package. LSF can be integrated in third-party applications without using LSB to provide data annotation support to users. LSF can be customized and extended to build custom UIs or used with pre-built labeling templates.

This Streamlit application leverages Streamlit Components extensibility with the simple architecture of Component Zero discussed in my article, Introduction to Streamlit and Streamlit Components. Using Component Zero as a template it was straight-forward to take the code snippet in Label Studio’s Frontend integration guide and build the Streamlit component.

Demo

Repo

GitHub

Cloud

Streamlit App

Enjoy!
Arvindra

Cc. @andfanilo @Charly_Wargnier

3 Likes

Hi - I have added several more capabilities.

The Streamlit user interface can now be used to load any supported annotation task configurations which Label Studio Frontend then uses to display annotation tools appropriate for the annotation task at hand. Once annotations are done, the annotations data is passed by the custom LSF Streamlit component to Streamlit, where it is displayed. The app is also easily customised through externalized configuration.

Repo link above.

New demo: https://i.ibb.co/jL600Mt/streamlit-label-studio-frontend.gif

Arvindra

Play with the app on Streamlit Cloud: https://share.streamlit.io/asehmi/streamlit-label-studio-frontend/app.py

Hi - I’ve upgraded the app to use the Label Studio v1.4.0. It now supports Image, Text, Audio and Video annotations.

Streamlit App

Let me know how you get on if you use it?

Cheers,
Arvindra