tvst / st-annotated-text Goto Github PK
View Code? Open in Web Editor NEWA simple component to display annotated text in Streamlit apps.
License: Apache License 2.0
A simple component to display annotated text in Streamlit apps.
License: Apache License 2.0
Hi,
Do we have any limitations in the height of text to displayed in streamlit via this function? The text I am using is a 8 times duplication of the same set of arguments given in the document example. This is showing the visualization only very few text annotations and hides remaining.
For Example:
Here is the annotations I pass to the function:
annotated_text(
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
"This ",
("is", "verb", "#8ef"),
" some ",
("annotated", "adj", "#faa"),
("text", "noun", "#afa"),
" for those of ",
("you", "pronoun", "#fea"),
" who ",
("like", "verb", "#8ef"),
" this sort of ",
("thing", "noun", "#afa"),
)
Output:
This is
VERB
some annotated
ADJ
text
NOUN
for those of you
PRONOUN
who like
VERB
this sort of thing
NOUN
This is
VERB
some annotated
ADJ
text
NOUN
for those of you
PRONOUN
who like
VERB
this sort of thing
NOUN
This is
VERB
some annotated
ADJ
text
NOUN
for those of you
PRONOUN
who like
VERB
this sort of thing
NOUN
This is
VERB
some annotated
ADJ
text
NOUN
for those of you
PRONOUN
Remaining text doesnt appear in the output (UI). I had also changed the texts but its limiting to few arguments only. When I inspect, I see all the data available in the inspection but not getting displayed in frontend.
What could be the issue? Am I missing something or this is a limitation?
Thanks.
Hi,
I have st-annotated-text installed using pip, but I cannot import the module as described in your readme-file.
This is what I get when I enter pip show st-annotated-text:
Name: st-annotated-text
Version: 1.0.1
Summary: A simple component to display annotated text in Streamlit apps.
Home-page: https://github.com/tvst/st-annotated-text
Author: Thiago Teixeira
Author-email: [email protected]
License: Apache 2
Location: /home/monique/anaconda3/envs/ta/lib/python3.6/site-packages
Requires: htbuilder
Required-by:
So, everything looks good.
However, when I then say:
from st_annotated_text import annotated_text
It gives me the module not found-error.
I was trying to figure out what the package name should be, but no luck, since I am not that hardcore python-developer.
Perhaps there is an easy solution.
like this title
tuples1 = [
(
"This is a \n test.",
"Result",
"#FFFF00",
),
" Sentence 2.",
]
tuples2 = [
(
"This is a \n \n test.",
"Result",
"#FFFF00",
),
" Sentence 2.",
]
annotated_text(*tuples1)
annotated_text(*tuples2)
Excecuting this code throws the following error:
I suppose this happens because of the double newline characters.
Using spacy to get part of speech tagging, and essentially emulating displacy I built myself a quick annotation getting function:
`def get_annotations(text):
result = []
d = {
'ADJ':'#7FFFD4',
'PROPN':'#7FFF00',
'AUX':'#9932CC',
'VERB':'#556B2F',
'NOUN':'#BDB76B'
}
k = set(list(d.keys()))
doc = nlp(text)
for x in doc:
token = ""
if x.pos_ in k:
token = (x.text, x.pos_, d.get(x.pos_))
else:
token = x.text
result.append(token)
return tuple(result)
`
My issue comes up when submitting the result to annotated_text(). In fact, if I save the example's sample text to a variable I get an oh noes error. Is there any way of passing a tuple of tuples or a list of tuples?
I would love it if overlapping annotations could be handled though this would require substantial changes to annotation
Writing tests for a Streamlit app/component could be challenging. Here is a framework, presented by Randy Zwitch (@randyzwitch), on the Streamlit blog:
Streamlit test framework with SeleniumBase
& OpenCV
I hope this will start the discussion on writing test cases for this Streamlit component and encourage people to come forward and write tests.
Example repo: https://github.com/randyzwitch/streamlit-folium
Please provide an option to set the height of the output iframe. https://docs.streamlit.io/en/stable/develop_streamlit_components.html#streamlit.components.v1.html
Hey Thiago! ๐
from st_annotated_text import annotated_text
Should be replaced by:
from annotated_text import annotated_text
Thanks
Charly
Is it possible to extend this component so that if I mark I word with my courser,
it gets automatically annotated by the class I chose in advance?
Just an ide I wanted to share. I'd really much like it.
I wasn't able to figure out if it's possible to set a class name for the annotation. Is there an example of doing this somewhere? Thank you!
Hi there, many thanks for this very nice component!
I was wondering if it's possible to include a "fullscreen" botton like in many other streamlite native visualizations. If so, how?
Modifying the height is okayish but not optimal if the text is very long.
Many thanks to anyone who can help!
Cheers
hi @tvst , I have recently started working this awesome library I loved the concept of the library, I wanted to know can we change the background color of the printed output using annotation_text(*list1)
I tried nesting it with st.success and st.markdown but it does not work the way like i indended (anything similar to st.success green background will work )
Hi !
I was wondering whether there was a way to recursively look for the spans to be highlighted in the text without specifying the text before or after.
Thanks !
Can we use this to create a way to input text as well? For instance to be able to make an NER annotation module?
The component should be both an input as well as an output?
Hi,
I am trying to highlight a long sentence (sentence greater than width parameter), except specific substring in the beginning of the text like below.
Code used:
answer = "As you can see, streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science."
context = "Streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science."
height = int(len(context)) * 0.3 + 30
annotated_text(answer.replace(context[0].lower() + context[1:], ""), (context[0].lower() + context[1:], "Longer", "#8cff66"))
As you see in the above image, the substring "As you can see" which I don't want to highlight is getting printed in a different line. This is happening because the sentence length is higher than the default line width of page.
But, the output I am expecting is something like this:
Conclusion:
I want to highlight a text longer than line width of page except the specific substring at the begin of the text. But I do not want that non-highlighted substring to be printed as a different line.
Is it possible to achieve this using st-annotated-text? Any help is appreciated.
feature request drag and drop annotated text to different parts of the page and sentence and paragraph and then have a click where we can capture the user is done if possible.
Thanks
Sai
Hello i would like to install st-annotated-text, but when tried with pip installation, it shows error and states that visual c++ is required. I don't have visual studio c++ installed in my system. Hence if possible kindly provide '.whl' file of st-annotated-text, so that I can insta it with out Visual studio.
Hi @tvst,
Thanks a lot for this awesome work!
I need your help: can you please tell me how to control whether the text is capitalised or not.
Thanks!
Really nice, could this be use with Dash? Thanks for the work.
some thing like the following?
some nlp tasks do not have labels but only want to detect the keyword and their importance.
if I passed label='' there is still a span, and have some extra spaces.
`
color_style = {}
if color:
color_style['color'] = color
if not background:
label_sum = sum(ord(c) for c in label)
background_color = PALETTE[label_sum % len(PALETTE)]
background_opacity = OPACITIES[label_sum % len(OPACITIES)]
background = background_color + background_opacity
if label:
return (
span(
style=styles(
background=background,
border_radius=rem(0.33),
padding=(rem(0.125), rem(0.5)),
overflow="hidden",
**color_style,
**style,
))(
html.escape(body),
span(
style=styles(
padding_left=rem(0.5),
text_transform="uppercase",
))(
span(
style=styles(
font_size=em(0.67),
opacity=0.5,
))(
html.escape(label),
),
),
)
)
else:
return (
span(
style=styles(
background=background,
border_radius=rem(0.33),
padding=(rem(0.125), rem(0.5)),
overflow="hidden",
**color_style,
**style,
))(
html.escape(body),
)
)`
currently I need modify the original code to achieve this function.
so I hope you guys could add this features to support non label keyword notations. and if there could be a color gradient by just passing point end color and gradient coefficient will be more nice.
another issue.
I don't think the *args support too many items. so I would recommend to passes a list instread of *args.
*args usually used when the args are different but have a limited size. in this case it is not, if we wan't passed a large context it will fail.
when the text is so much the speed will be really slow.
hope you guys could take a look at those issues.
Sincerely.
Hello, sometimes I want to highlight (colour) some text but not provide an annotation like NOUN or VERB. However, if I provide "" I still get the padding which looks a bit odd.
I'll be taking a look at the code my end, and if I manage to change the behaviour I'll submit a PR if that's OK?
i cannot use the component , and get this error, i am working on python 3.6.9 and ubuntu 18.04 with virtualenv
during pip install i saw this
"Failed building wheel for htbuilder"
"Failed to build st-annotated-text-htbuilder"
Installing collected packages: iteration -builder..................................
When running the app, it shows
error:
line 4, in
from annotated_text import annotated_text
error:
in
from htbuilder import HtmlElement, div, span, styles
thanks if can resolve
Consider we have this text
In July, a company tied to Evan Spiegel, the co-founder and CEO of Snap, closed on the $119.868 million purchase of a Holmby Hills estate in Los Angeles, according to property records and people familiar with the situation. \n\n\n'
We run this through an NER model and get back the indexes of the string where we can highlight specific portions of the string with ids. So we know, for example that from index 141:152 is "Los Angeles" which is a Location. So instead of having to string concatenate the final output, create an output where you can take in string index as well as ids and annotate them as such.
You can recreate this result using Clarifai's NER model listed here.
Hi, just trying out the library, seems to work great!
But for me, when installing via pypi, the library was installed as annotated_text
not as st_annotated_text
, so instead of the instructions in the README, I had to:
from annotated_text import annotated_text
When trying to use annotated_text
with a text that has a line break it raises the following Error:
Error parsing Markdown or HTML in this string
This only happens on a huggingface Space, locally works as expected.
You can find the Space and the code here.
In case you want to reproduce the error, you can use the following text on the huggingface Space:
Headline:
Ukraine tensions: Russia invasion could begin any day, US warns
Content:
Russia has the troops in place to invade Ukraine "at any time" and American citizens should leave within the next 48 hours, the US has warned.
An invasion could start with aerial bombing that would make departures difficult and endanger civilians, the White House said on Friday.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.