Can't set label colors in config file

I’m using prodigy mark to label three types of entities in text. I can get the labels to appear in the interface by adding them to my prodigy.json (111), but I can’t get custom colors to show up. Am I setting them incorrectly?

...
    "labels" : ["VERB", "ACTOR", "TARGET"],
    "customTheme" : {"labels": {
        "VERB" : "#ffa9b8",
        "ACTOR" : "#d1caff",
        "TARGET": "#b4e8fc"} }
}

Thanks for the report! Just realised there might be a mistake in some places in the docs – does custom_theme instead of customTheme work?

That works! Thank you.

1 Like

Label config still does not work for image manual annotation (v1.8.3)

{
  "labels": ["A", "B"],
  "custom_theme": {
    "labels": {
      "A": "#66f542",
      "B": "#ff4824"
    },
  },
  "global_css": "
.prodigy-content svg g path { stroke-width: 2px !important }
.prodigy-content svg text { font-size: 6pt !important }
"
}

Ah, sorry if this was confusing – the "labels" colors in the custom theme only apply to the text-based highlighted spans, not the colors of the bounding boxes. There's currently no easy way like this to customise those – but if we add them, they'd probably be a separate setting (to prevent overlaps with NER labels etc., because the colors here would usually be quite different).

(If you're setting pre-defined image "spans", you can currently add a "color" to them. But the colors for new labels in the manual annotation mode are currently picked automatically.)

Ah got it.

Hello, Ines! You mentioned that there is no easy way to change the width of bounding box or the size of labels above bounding boxes. May you please tell me the hard way to customize these features?

It's actually not even that hard, just less intuitive, since there's no direct setting for it. You can add something like the following as the "global_css" of your prodigy.json or recipe config:

.prodigy-content svg path {
    stroke-width: 1px;
}

.prodigy-content svg text {
    font-size: 20px !important;
}

This overrides the stroke width of the paths (the boxes) and the font size of the text (the labels).

The only thing to keep in mind is that the sizes are relative to the original image and that the image may be resized in your browser if it's very large (to make sure it fits on the screen). So if your image is resized visually, the text and bounding box border will also be resized with it. This also means that if your images have very different sizes, it may be tricky to find a suitable override that works for all of them.

1 Like

Ahhh! Thank you so much!

1 Like

Hi, Ines! With updated prodigy this line doesn't work anymore and stroke width of the boxes doesn't change anymore. How can I change them again to be more thin?

Yes, Prodigy v1.10 now has built-in settings for all of these things :slightly_smiling_face: See here: https://prodi.gy/docs/api-interfaces#image_manual-settings

(Alternatively, if you want to use the old version of the image UI without the new features, you can set "image_manual_legacy": true and use your old hack.)

1 Like

OK, thank you so much! It is a really great new feature!

1 Like

Hi @ines thanks for link and explanations, but there's still one thing that I'm missing. Is it still not possible to assign colour per label for manual image annotation (bounding boxes). I would like that each annotation that has a "label1" has a "colour1" and an annotation that has a "label2" has a "colour2". Thanks for helping :raised_hands:

This should be possible in Prodigy v1.10+, yes :slightly_smiling_face: If it's not working for you, what are your labels and how does your config look?

Thanks @ines ! And I found a solution for my particular case, if somebody will have similar needs, you will need to edit config file prodigy.json which you can find in prodigy folder under you home directory ${HOME}/.prodigy/prodigy.json. And here's how it looks in my case:

{
 "custom_theme": {
    "labels": {
      "label1": "yellow",
      "label2": "blue"
    }
  },
  "image_manual_stroke_width": 2,
  "image_manual_font_size": 14
}

And if you provide for prodigy images with some annotation already on it, make sure you match labels, ex:

{"image": "https://url.com/to/some/image1.jpg", "spans": [{"label":"label1", "type": "rect", "x":449, "y":300, "width":105, "height":115}]}
{"image": "https://url.com/to/some/image2.jpg"}
{"image": "https://url.com/to/some/image3.jpg", "spans": [{"label":"label2", "type": "rect", "x":850, "y":369, "width":200, "height":234}]}

Hope it will be helpful for somebody :crossed_fingers:

1 Like