New Component: streamlit-labelstudio, allows you to embed the Label Studio annotation frontend into your application!

Hi all! I created a first implementation of a Label Studio bidirectional component - let me know what you think! It’s still a bit rough around the edges, but this allows you to easily embed the Label Studio annotation frontend into Streamlit applications!


Hey @fungidick,

This looks cool! I haven’t worked with Label Studio but I’m going to give your component a go!

Happy Streamlit-ing!

1 Like

Great, let me know how it went!

Maybe I didn’t make this clear enough, but based on a very simple config, Label Studio allows you to annotate images, time series, text etc to create datasets for ML/DL. It’s a very versatile tool, so kudos to the Label Studio team!

Git with an example app: GitHub - deneland/streamlit-labelstudio: A Streamlit component that provides an annotation interface using the LabelStudio Frontend.

I’m new to JavaScript and packaging my projects, so any input is very welcome!

This looks awesome @fungidick ! I’ll have to try this too so I can recommend users drawing ROI boxes with my Drawable Canvas to use yours instead :tada:

Feel free to add it to the Components Tracker!

1 Like

Thanks @andfanilo ! I have experimented with your Drawable Canvas tool as well, and while it’s perfect for some applications, for detailed annotations on images it’s not ideal. That triggered me to try to create this component though, so in a sense, your component inspired me to try and implement this :slight_smile:

As a nice bonus, Label Studio not only handles images, but also text, timeseries, audio, pairwise annotations etc.

I added this to the Component Tracker, thanks for the tip!


Yep I really want to try it on some audio, maybe I can finally annotate some key/tempo changes in music with this :stuck_out_tongue: !

Do you plan to release a demo app on Streamlit Share btw?

I haven’t tried Streamlit Share yet, but I was indeed thinking about a simple demo app. Still figuring out what exactly that would be though.

I’ll probably come up with something in the coming days/weeks - when I find the time :slight_smile:

1 Like

Oooooh very interesting. :+1: I’m currently trying to build some annotation tool manually with the bokeh events component.
Are there any screenshots around? Wonder what this looks like integrated into streamlit …

1 Like

Currently no screenshots - I’ll make sure to provide some in the near future.

For now, feel free to have a look here to get a feel for the different types of interfaces - you can open up a preview/playground from there. The annotation interfaces in Streamlit should look identical (in theory at least :wink: ). Haven’t tried them al yet though.

1 Like

I wanted to congratulate you on this outstanding component. This is perfect. Thank you so much! :partying_face: This repo will be going places. Too bad, I am not a frontend developer. If there is anything I can do otherwise, hit me up! Good work!


Is it possible to do multi person body key-point labeling via this ?

Looks very interesting, thanks for making this!

Out-of-curiosity, does this component allow frame by frame labeling from a video?

Hi there, is there anyone who has been able to improve the stability of this component? I’ve had some challenges and there are outstanding issues on the git repo - it’d be great to get this moving again. It’s so close to being great and perfect for data labeling.


can I use it for a video to annotate keypoints frame by frame?

thanks in advance

Have you seen Label Studio Frontend integration using Static HTML Component? (cc @mtweardy)

yes, I saw it but I can’t use it for a video to annotate it frame by frame, pretty new how to use label studio.
can you tell me how to change config file or how to use it for uploaded video on Streamlit?


For that you’ll have to read the Label Studio docs. Label Studio — Video Timeline Segmentation Data Labeling Template

I saw that, but as I understand it can’t annotate keypoints for each frame. its just a label for a video or video part

Suggest you treat a video as individual images (you’d have to convert a video to images), and then use the multiple images configuration.

I’m certain converting an mp4 video to png images is doable.


Hi @fungidick, thanks for such a wonderful contribution.
I am using Streamlit for a complex workflow, where user can add car images, along with the Car model, and pipeline returns the Parts Damages segmentation and the predicted prices for the replacement. Now, I have worked out the way, where the user have the functionality to give feedback for changing the Parts Action, say if system predicted FenderFrontLeft should be Replaced, and he thinks it is is Repair case, I am handling it. Can I have this functionlaity, where user can manually do Segmentation Annotation, for damages instance segmentation… If so, I would be very grateful, if you can share me any resources, that can be helpful……

1 Like