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.
@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.
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.
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.
Hi @asehmi
Thanks for helping me out. And sorry for late reply, but I don’t know, why I don’tget notifications
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…
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()
I have updated the app to the latest version of Streamlit and added image polygon and image segmentation examples.
Please see the readme as LSF standalone has been deprecated! The Streamlit integration still works, but I’m not sure how long it will remain that way since the LSF package repository hasn’t been updated.
Moving forward, you’d have to create a build of the editor (i.e. LSF) from the main LS repo, and point to these build JS and CSS files instead of taking them from the package repo.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
