Add text annotation component to API

[lo5]

Goal
Create a component that allows users to highlight phrases in text content and annotate them.

Intended use
NER tagging. See https://prodi.gy/docs/named-entity-recognition#manual-patterns

Specifics
The component can have two major properties: tags: List[str] and content: str. The content (markdown allowed, like in ui.text()) is rendered as a block of text. The tags are rendered as clickable elements that tag the highlighted text.

On submit, the component can send this array:

[
   { text: 'Europe', tag: 'continent' }, 
   { text: 'fish and chips', tag: 'food' }, 
]

TBD

• What should we call this? ui.annotator()?
• What should the UX be? Select tag first and then highlight text? Or vice-versa? Or something else?

[lo5]

Via @shivam5992:
https://github.com/h2oai/wave-libor/issues/1
http://doccano.herokuapp.com/demo/named-entity-recognition/

[shivam5992]

Good UX can be selecting highlight text first, then tag.

[tkmaker]

@lo5 this came up as a customer feature request again with Prodigy given as a comparison. How feasible is this?

[lo5]

@tkmaker - We can prioritize - just needs a good API design, should be straightforward to implement. @mturoci?

[mturoci]

I can start implementing this once the API is agreed.

http://doccano.herokuapp.com/demo/named-entity-recognition/# - seems very neat as of UX. We could maybe also include color and shortcut to the proposed tags attr.

[lo5]

How about this?

ui.annotator(
  name='foo',
  tags=[
    ui.annotator_tag(name='p', label='Person', color='$red'),
    ui.annotator_tag(name='o', label='Org', color='$green'),
  ],
  items=[
    ui.annotator_item(text='Killer Mike', tag='p'),
    ui.annotator_item(text=' is a member of the hip hop supergroup '), # no tag
    ui.annotator_item(text='Run the Jewels', tag='o'),
  ],
)`

This way, the component can be initialized with annotated text, and the return path can contain an identical data structure:

{
  { text: "Killer Mike", tag: "p" },
  { text: " is a member of the hip hop supergroup " },
  { text: "Run the Jewels", tag: "o" ),
}

Note: No shortcut for now - let's think about that in a future version.

[lo5]

@mturoci tagged 0.15 for now, but we can ship with 0.14 if ready.

[tkmaker]

The http://doccano.herokuapp.com/demo/named-entity-recognition/# example requires a user to first highlight text and click on the entity every time after the selection. It might better to first allow a user to click on an entity eg "ORG" and then select one or more orgs in the text. That way they dont have to keep specifying what the entity is.

[lo5]

@tkmaker If I understand correctly, you're suggesting that a tag works more like a highlighter?

[tkmaker]

@tkmaker If I understand correctly, you're suggesting that a tag works more like a highlighter?

Yes similar to what Prodigy does: https://prodi.gy/demo

[lo5]

OK. @shivam5992 @mtanco?

[shivam5992]

@lo5 the proposed solution looks good and will be helpful.

[tkmaker]

@mturoci Excellent! Is this available in nightly? Any doc on how to use it? doesnt have to be formal docs.

[mturoci]

@tkmaker yes, it is available in the latest nightly.

Any doc on how to use it?

Hm.. not really, the example should suffice. Let me know if you find it hard to use and have some improvement suggestions.

[tkmaker]

@mturoci example is good. Works on nightly

[vopani]

This is cool. Thanks a lot @mturoci