Changing text color/style in ner.manual

, , ,
1

I'm wondering whether there's an easy way to change the styling or color of some tokens in the ner.manual interface. I'm having annotators highlight certain entities within news articles, and I want to cue their attention to specific words in the text that match a dictionary of terms to make their work faster.

One approach could be to to add the styling directly to the tokens being passed in, similar to #254.

If the original example looks like this,

{"tokens": [{"text": "In", "start": 0, "end": 2, "id": 0}, 
            {"text": "Mumbai", "start": 3, "end": 9, "id": 1}, 
            {"text": ",", "start": 9, "end": 10, "id": 2}, 
            {"text": "police", "start": 11, "end": 17, "id": 3}, 
            {"text": "arrested", "start": 18, "end": 26, "id": 4},
            ...],
"text": "In Mumbai, police arrested protestors and fired teargas at activists."}

I'd like to be able to add something like a style or color key to the token dictionary:

 {"text": "arrested", "start": 18, "end": 26, "id": 4, "style": "color:blue"},

and have the token's HTML within the interface change to

<span class="c01166" style="color:blue" id="4">arrested</span>

This would be pretty simple to do using the HTML interface, but that's not compatible with ner.manual. Do you have suggestions for how I could do this? This might be too niche for a big change to Prodigy to be worth it, but it could be useful for other people who want something in between ner.teach and ner.manual.

2

Hi! This is a nice idea and allowing a "style" key on the tokens would be a good solution and also the most flexible. I'll add this to my list of enhancements :slightly_smiling_face:

In the meantime, one thing you could do is use the "global_css" config setting and overwrite that for each task via "config": {"global_css": "..."}. You can access the tokens via their id for example:

.prodigy-content span[id="5"] { color: blue }
1 Like
3

Thanks! That works to highlight the token. Do you have a suggestion for how to change the config for each task?

4

In Prodigy v1.10+, you can just add a key "config" to each task that should override any global config settings :slightly_smiling_face:

1 Like
5

So easy! Thank you.

1 Like
6

Just added support for a style key on the tokens to the latest Prodigy nightly (it made more sense to do it there, since it already refactors a bunch of stuff around the internal token representation in the app).

So you can now do something like this and provide CSS overrides in camel-case:

{
    "text": "In Mumbai, police arrested protestors and fired teargas at activists.",
    "tokens": [
        {"text": "In", "start": 0, "end": 2, "id": 0, "style": {"color": "blue", "borderBottom": "5px solid red"}}, 
        ...
    ]
}

Edit: Now shipped in Prodigy v1.11!

2 Likes