Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add text annotation component to API #227

Closed
lo5 opened this issue Oct 21, 2020 · 16 comments · Fixed by #737
Closed

Add text annotation component to API #227

lo5 opened this issue Oct 21, 2020 · 16 comments · Fixed by #737
Assignees
Labels
feature Feature request ui Related to UI
Milestone

Comments

@lo5
Copy link
Member

lo5 commented Oct 21, 2020

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 lo5 added ui Related to UI feature Feature request labels Oct 21, 2020
@shivam5992
Copy link

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

@tkmaker
Copy link

tkmaker commented Apr 7, 2021

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

@lo5
Copy link
Member Author

lo5 commented Apr 7, 2021

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

@mturoci
Copy link
Collaborator

mturoci commented Apr 8, 2021

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
Copy link
Member Author

lo5 commented Apr 8, 2021

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 lo5 added this to the 0.15 milestone Apr 8, 2021
@lo5
Copy link
Member Author

lo5 commented Apr 8, 2021

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

@tkmaker
Copy link

tkmaker commented Apr 8, 2021

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
Copy link
Member Author

lo5 commented Apr 8, 2021

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

@tkmaker
Copy link

tkmaker commented Apr 8, 2021

@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
Copy link
Member Author

lo5 commented Apr 8, 2021

OK. @shivam5992 @mtanco?

@shivam5992
Copy link

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

lo5 added a commit that referenced this issue Apr 14, 2021
mturoci added a commit that referenced this issue Apr 15, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
mturoci added a commit that referenced this issue Apr 30, 2021
@lo5 lo5 modified the milestones: 0.15, 2021 Apr 30, 2021
@tkmaker
Copy link

tkmaker commented Oct 21, 2021

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

@mturoci
Copy link
Collaborator

mturoci commented Oct 22, 2021

@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
Copy link

tkmaker commented Oct 22, 2021

@mturoci example is good. Works on nightly

@vopani
Copy link
Contributor

vopani commented Oct 23, 2021

This is cool. Thanks a lot @mturoci

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Feature request ui Related to UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants