New Component: Streamlit-tags a new way to do add tags and enter keywords

Hello,
I have created a custom component for Streamlit which is a custom tag function and keywords functions in Streamlit it returns a list and the list can be used as usual.

pip install streamlit-tags

import streamlit as st
from streamlit_tags import st_tags

keywords = st_tags(‘Enter Keyword:’, ‘Press enter to add more’, [‘One’, ‘Two’, ‘Three’])

st.write(keywords)

More details can be found here: GitHub - gagan3012/streamlit-tags: streamlit-tags
Please star the repo if you liked it and let’s also connect on Linkedin: https://www.linkedin.com/in/gbhatia30/

Example Usage: https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py
Here I generate sentences using Keywords using streamlit tags.

Cool idea!

Love it! :clap:

As a side note, the app https://share.streamlit.io/gagan3012/keytotext/app.py
is crashing. Not sure if this is expected.

Thanks,
Charly

Hello,
Thank you so much! There were some issues in that demo. I have updated it
Please try this out:
https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py

Hello @gagan3012, sounds awesome!

Could you add it to the Components Community Tracker so we don’t lose track of it?

Have a nice day,
Fanilo

Hello, @andfanilo
I have added it to the components tracker can you please approve if it is okay?
Also Now I have added support for the sidebar too:

Perfect :slight_smile: I have nothing to approve since it’s a public free-to-edit Wiki, makes it easier to all collaborate on!

Great app!

Btw, I’ve this message when trying to install it.

Is it expected?

Thanks,
Charly

Hello @Charly_Wargnier ,
Thank you so much
Please upgrade to streamlit_tags==1.0.6 using

pip install --upgrade streamlit_tags

Currently, it does not support custom theming but I am working on adding support for it.

No worries!

Just curious, can you resize the size of the tags with your component?

See my ticket here regarding the native solution

Thanks,
Charly

Hello @Charly_Wargnier
Yes, streamlit-tags does support resizing according to text size. If we use the streamlit with wide mode we can enlarge the text box too.

Try it out here: https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py

Brilliant! I’ll try this then! :slight_smile:

Thanks

New Update to Streamlit-tags now it supports text suggestions. We also have conda support now too. Check out: https://github.com/gagan3012/streamlit-tags… for more details.

Original post: https://twitter.com/gbhatia30/status/1382855599529062403?s=20

image

@gagan3012 Nice one! A couple of things that would make this useful for me would be allowing a callback to modify the value before it’s inserted into the list (e.g. validation such as spelling/type, or formatting such as lowercasing, capitalisation, etc.), and allowing suggestions to be hooked into a provider function.

The callbacks will be implemented soon. @asehmi Can you please explain more about the provider function?
Example usage of suggestion parameter can be found here: https://share.streamlit.io/gagan3012/streamlit-tags/examples/app.py

@gagan3012 I was just hoping the suggestions list could be dynamically constructed. I can see that it won’t be straightforward to make it more generic, either via a callback or by specifying an object implementing a defined interface to return the list, since the component is written in TS/JS, and is “external” to the Streamlit host application.

Is that works in the white (default) theme? I have tried, and it was displayed in the following way:
image

great app! it’s very useful for me! Thank you so much!

Hello @gagan3012
Streamlit tags working fine for me.

Also, is there any way to disable the add functionality & remove tags functionality through configuration. I want to use the same component for display only the tags as well.

Very nice piece of UI/UX :art:

Any tips on how to add a st_tags in a already existing sidebar ?
Something like st.sidebar.st_tags(...)

(Also opened an issue about attaching the widget from outside a container, as it seems to be the same kind of feature :slight_smile: )