Regroup and change positions of labels in image_manual tasks?

, , ,
2

By labels, you mean the label list where you select the label to annotate? You can select the title bar containing the labels in CSS using the classes .prodigy-title-wrapper and .prodigy-title (if you look at the elements in your browser's developer console, you'll see the elements it targets). So you could definitely re-style them and move them around and provide the overrides via the global_css: Custom Interfaces · Prodigy · An annotation tool for AI, Machine Learning & NLP

I just did a quick test and there's definitely some CSS magic you can do to re-order the labels (especially if you know their order and know which one should go on which side). For example, like this:

Screenshot 2021-02-07 at 12.58.26
Screenshot 2021-02-07 at 12.58.262272×722 131 KB

The idea here is to make the labels a wider grid container with 3 columns (left column to the left of the annotation card, right column to the right). You can then target each label by its order and either place it in the left column, or in the right. Here's how it works:

.prodigy-title {
    /* Make container wider and move it to the side */
    position: absolute;
    left: -200px;
    width: calc(100% + 400px);
    background: transparent;
    /* Set up the left and right columns */
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    /* Make sure you can click through it */
    pointer-events: none;
}

.prodigy-title > div, .prodigy-title > div > div {
    /* "Ignore" the wrapper containers so the labels themselves are grid children */
    display: contents;
}

.prodigy-title label {
    /* Some styling so the labels are not white and clickable */
    color: #000;
    pointer-events: initial;
}

/* Put first and third label in column 1 and second and fourth label in column 3 */
.prodigy-title span:nth-child(1),
.prodigy-title span:nth-child(3) {
    grid-column: 1;
}

.prodigy-title span:nth-child(2),
.prodigy-title span:nth-child(4) {
    grid-column: 3;
}

That wouldn't really work, because a modern browser typically won't give you access to the content of an iframe, unless it's hosted on the same domain (which makes a lot of sense for security reasons). And even if you did host it on the same domain, it's probably more convenient to just use Prodigy's built-in settings for providing custom CSS and JS.

1 Like