Annotating a text input?

[s-wel]

Hello, in natural language processing projects it is often necessary to annotate text, e.g., mark entities in a text and then label them. Which of Taipy's features could I use to realize such an annotation case?

[FlorianJacta]

There is no built-in solution to annotate specific words in a text with Taipy. Do you have a specific example of what you would like so we could create an issue to improve Taipy?

However, it is possible to create annotations and style words like this.

main.py:

from taipy.gui import Gui

sentence = "The quick brown fox jumps in the garden"

md = """
<|{sentence}|>
<|Annotate this|button|on_action=annotate|>

<|part|partial={text_annotation}|>
"""

def annotate(state):
    new_sentence = ''
    for word in sentence.split():
        if word == 'fox':
            new_sentence += f'<|{word}|text|class_name=animal|hover_text=animal|> '
        elif word == 'garden':
            new_sentence += f'<|{word}|text|class_name=place|hover_text=place|>'
        else:
            new_sentence += word + ' '

    state.text_annotation.update_content(state, new_sentence)


if __name__ == '__main__':
    gui = Gui(md)
    text_annotation = gui.add_partial('')
    gui.run()

main.css:

.place{
    color: rgb(255, 146, 63);
    font-weight: bold;
}

.animal{
    color: rgb(80, 182, 255);
    font-weight: bold;
}

[s-wel]

Thanks for the quick response. My specific problem is to annotate training data for a Rasa chatbot. The syntax follows this pattern:
[<entity-text>]{"entity": "<entity name>", "role": "<role name>", "group": "<group name>", "value": "<entity synonym>"}

Example:
What's the balance on my [credit card account]{"entity":"account","value":"credit"}

The idea might be to add something like a selector that allows the user to mark characters and invoke a function on them (like opening up a form that contains information about the marked characters). In the example above, it could work like this:

1. The GUI visualizes a data frame containing sentences
2. The user selects "credit card account" in an example sentence
3. The GUI opens a small window with a form to add the values for "entity", "role", "group", and "value"
4. The user fills in the values and clicks a "Save" button inside that small window.
5. The GUI calls a function that handles this dataset (e.g., replaces the sentence in a modified data frame with the annotated sentence)

I think the actual new element would be the selector that allows users to select characters and invoke a function on the selection, especially something like opening a view with further editing of the selected part.

[FlorianJacta]

As you said, what is missing is the character selection. You could create an input to replace it or a multiple selector that has the words in the sentence as a list of values. Do you have a reference of a Python or JS library that has this feature?

I tried to create a code to describe how you could do that in Taipy:

In Taipy 3.0:

from taipy.gui import Gui 
import pandas as pd

sentences = pd.DataFrame({"sentences": ["The quick brown fox jumped over the lazy dog.",
                                        "A cat in a hat.",
                                        "The garden is full of flowers."]})

open_form = False
words = ''
sentence = ''
entity = ''
role = ''
group = ''
value = ''

info_line = {}

form_dialog="""
<|{open_form}|dialog|labels=Cancel; Save|title=Annotation|on_action=validate_help|
<|{sentence}|>

**Sentence**\n
<|{words}|input|>

**Entity**\n
<|{entity}|input|>

**Role**\n
<|{role}|input|>

**Group**\n
<|{group}|input|>

**Value**\n
<|{value}|input|>
|>
"""


md = form_dialog + "<|{sentences}|table|on_action=on_action_sentence|>"

def validate_help(state, action, payload):
    # Click on Save
    if payload['args'][0]==1:
        temp = state.sentences
        sentence = temp.loc[state.info_line['index'], state.info_line['col']]
        new_words = f'[{state.words}]'+'{'+f'"entity": "{state.entity}", "role": "{state.role}", "group": "{state.group}", "value": "{state.value}"'+' }'
        sentence = sentence.replace(state.words, new_words)
        temp.loc[state.info_line['index'], state.info_line['col']] = sentence
        state.sentences = temp
    
    state.open_form = False

def on_action_sentence(state, name, payload):
    state.info_line = payload
    state.sentence = state.sentences.loc[state.info_line['index'], state.info_line['col']]
    state.open_form = True

Gui(md).run()

In Taipy 2.4 version:

from taipy.gui import Gui 
import pandas as pd

sentences = pd.DataFrame({"sentences": ["The quick brown fox jumped over the lazy dog.",
                                        "A cat in a hat.",
                                        "The garden is full of flowers."]})

open_form = False
words = ''
sentence = ''
entity = ''
role = ''
group = ''
value = ''

info_line = {}

form_dialog="""
<|{open_form}|dialog|labels=Cancel; Save|title=Annotation|on_action=validate_help|
<|{sentence}|>

**Sentence**\n
<|{words}|input|>

**Entity**\n
<|{entity}|input|>

**Role**\n
<|{role}|input|>

**Group**\n
<|{group}|input|>

**Value**\n
<|{value}|input|>
|>
"""


md = form_dialog + "<|{sentences}|table|on_action=on_action_sentence|>"

def validate_help(state, name, _, payload):
    # Click on Save
    if payload['args'][0]==1:
        temp = state.sentences
        sentence = temp.loc[state.info_line['index'], state.info_line['col']]
        new_words = f'[{state.words}]'+'{'+f'"entity": "{state.entity}", "role": "{state.role}", "group": "{state.group}", "value": "{state.value}"'+' }'
        sentence = sentence.replace(state.words, new_words)
        temp.loc[state.info_line['index'], state.info_line['col']] = sentence
        state.sentences = temp
    
    state.open_form = False

def on_action_sentence(state, name, _, payload):
    state.info_line = payload
    state.info_line['col'] = 'sentences'
    state.sentence = state.sentences.loc[state.info_line['index'], state.info_line['col']]
    state.open_form = True

Gui(md).run()

[s-wel]

Thanks again, for the selector, I think this library could work:
https://github.com/recogito/recogito-js
It can be tested here:
https://recogito.github.io/recogito-js/

[FlorianJacta]

Here is the related issue created for Taipy: https://github.com/Avaiga/taipy-gui/issues/979

The R&D will consider integrating this kind of features in Taipy.