I'm trying to figure out what possibilities there are for re-arranging and changing the labels in image annotation tasks. Ideally I would like the labels to appear as a vertical list next to the image to be annotated. Furthermore, I'd ideally like to distinguish between two types of labels and place one type of labels to the left of the image and the other type to the right.
I'm thinking this will boil down to a wrapper page that requests and embeds the Prodigy app as an iframe, then modifies it after it has loaded. Greasemonkey/Tampermonkey isn't an option, so the wrapper would probably need to do the re-arranging. However, I'm fuzzy on whether I can simply wildly re-arrange and re-style the elements in the DOM. What sort of changes would break things? Is there an overview on what I can and can't (or shouldn't) do?
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:
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.
Thanks so much! That is exactly what I'm looking for. I'm fuzzy on what can be done in the browser and what the best practices are, so your input is extremely valuable.
