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