Hi,

I am currently using streamlit themes and trying to display annoated text and it always shows the text in black. Please see the sample below for your reference. Kindly guide me in resolving this issue.

like this title

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.

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

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.

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

The goal of this task is to have support for RTL languages using a flag raised in the main method. Below is an example for that:

With RTL support

Without RTL support

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?

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.

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 )

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.

I have installed streamlit but failed to install st-annotated-text

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

Hey Thiago! 👋

from st_annotated_text import annotated_text

Should be replaced by:

from annotated_text import annotated_text

Thanks
Charly

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!

I would love it if overlapping annotations could be handled though this would require substantial changes to annotation

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,

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.

@tvst

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?

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!

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 !
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 !

Really nice, could this be use with Dash? Thanks for the work.

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 

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.

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.

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

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

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?

Streamlit applications using this component are not properly visible when preferring Dark Mode or have it set as system default.

Light Mode

Dark Mode

The non-highlighted text colors should inherit from the current Theme (Light/Dark/Custom).