Changing text color/style in ner.manual

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.

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

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

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

So easy! Thank you.

1 Like

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!

1 Like