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

1 Like

Hi @asehmi , thanks for your wonderful work…

How can I integrate this in my workflow, right now, I need some functionality where the user can correct the segmentation labels…?

Thanks

Hi @Muhammad_Ali,

I’m not a Label Studio Frontend expert and this integration for me was more about validating the design of the static html component framework I developed (i.e. how easy it was to integrate even a relatively complex external JavaScript library with Streamlit… easy, but took some care, of course). As far as I recall LSF takes a config file to drive the label names. So you can change the label names there. If you want to swap the label names in an already labeled job, then you’d have to write some code to do that directly in the JSON object that the component returned from the job. If you change (not swap) the label names in the JSON, you’d need to do the same in the config too.

P.S. I am looking out for LSF v1.6, but Heartex don’t seem to be paying any attention to my requests on their Slack channel. If you’re working for a commercial organisation, then buying a properly supported tool, like V7 Labs, may be advisable.

HTH,
Arvindra

Hi @asehmi
Thanks for helping me out. And sorry for late reply, but I don’t know, why I don’tget notifications :frowning:

Actually, we have set up our own CVAT server for labelling, here we want to provide the functionality to users, so that if they deem that predictions are not right, they can make improvements…

I have working Streamlit app right now, but I have no idea at all, how can I integrate the segmentation labelling in it…

Thanks

The app has been upgraded to Streamlit>=1.18, and a note added about annotating local images.

Code repo

GitHub

Cloud demo

Streamlit App

Hi @asehmi, can you please help me. There are three files app13.py, nlp2.py and main.py. From app13.py, I have a use case where I’m extracting text from the dataframe after selecting the row and then it is transferred to the next page via a button. On the next page that means nlp2.py, I’m not able to see anything except the Extracted text from the previous df. I want to annotate the text via label studio. Please find below the nlp2.py and main.py code, and kindly guide me to the right path.

nlp2.py -

import streamlit as st
from streamlit_labelstudio import st_labelstudio

def app():
    st.title("NLP2: Annotate Extracted Text")
    extracted_texts = st.session_state.extracted_texts

    if extracted_texts is not None and extracted_texts:
        st.markdown("## Extracted Texts for Annotation")

        for extracted_text in extracted_texts:
            st.write(extracted_text)

            # Use Label Studio Frontend for annotation
            responses = st_labelstudio(
                config={
                    "label_config": """
                        <View>
                            <Text name="text" value="$text"/>
                            <Labels name="label" toName="text">
                                <Label value="Label1" background="red"/>
                                <Label value="Label2" background="green"/>
                                <Label value="Label3" background="blue"/>
                            </Labels>
                        </View>
                    """
                },
                interfaces=["panel", "update", "controls", "side-column"],
                task={
                    "data": {
                        "text": extracted_text  # Annotate each extracted text
                    }
                },
                user={"pk": 1, "firstName": "Annotator"}  # Add user information here
            )

           
            if responses is not None:
                st.write(responses)

    else:
        st.warning("No extracted texts available for annotation.")

main.py -

import streamlit as st
import app13, nlp2
import pandas as pd
from streamlit_labelstudio import st_labelstudio

PAGES = {
    "app13": app13,
    "nlp2": nlp2
}

def main():
    if 'current_page' not in st.session_state:
        st.session_state.current_page = "app13"

    if 'data' not in st.session_state:
        st.session_state.data = pd.DataFrame()

    if 'config' not in st.session_state:
        st.session_state.config = {"your_config_key": "your_config_value"}

    PAGES[st.session_state.current_page].app()

if __name__ == "__main__":
    main()

Thanks.

Try giving the component a new random key forcing it to reload with the new text.