Object box creation is quite tedious when ground truth bounding boxes are close to image boundaries

When drawing the bounding box for a given object using prodigy image.manual, if the object rectangle is really close to margin, the cursor may fall outside the area of the image. As soon as the cursor falls outside the image, the bouding box doesn't change anymore with cursor movements (unless the cursor is brought back "inside" the image)

Expected/desirable behavior IMHO: cursor movements should still be influencing the rectangle being drawn, even when the cursor is dragged outside the image. In that case the bounding box should extend so to reach the boundary of the image.

The problem is a bit hard to describe in words, but to reproduce, just try to draw a bounding box with boundaries close to the edge of the image to be annotated, and the hiccup above should bother you, especially if you try to draw it with fast cursor movements, and accidentally bring the cursor outside the image :slight_smile:

As a minor UI improvement, drawing a countour around the image could help with annotations, so to better detect the image boundaries (working with white backgrounds is a pain otherwise).

I using prodigy 1.8.3 on Windows and Firefox, glad to provide more info.

Thanks for the detailed description! I think I understand what you mean – the decisive factor seems to be whether the cursor is within the "annotation card" or not.


This is what you mean, right? Pretty sure this should be easy to fix – I'll look into it :slightly_smiling_face:

Good point! In the meantime, you should be able to add something like this to your "global_css":

[data-prodigy-view-id="image_manual"] .prodigy-content svg {
    outline: 1px solid black; /* or some other color */

This should apply an outline around the images in the annotation card, only in the image_manual interface. I guess you could also experiment with setting a margin here to add more "buffer" around the images and give you more space for the cursor on the side.

1 Like

Hahah @ines danke! The behavior you show in the animation is precisely what I meant as desirable :slight_smile: (EDIT: but it doesn't work if the cursor is above or below the image, see message below).

Thanks on the tip on the countour bit too. Maybe the option darken_image should also do in my case (?), I'll check it out (I'm fairly new to Prodigy also).

@ines I have a better description of the problem. The bounding box doesn't follow the cursor is (seemingly) in the annotation card, but above of below the image. See animation below.

Thanks for the additional gif! This does make sense, actually, because that spacing above and below the image is actually the inner padding of the annotation card. The container inside it is what tracks and responds to the cursor movement.

Btw, if you add the following to your global_css, it should outline the relevant area:

[data-prodigy-view-id="image_manual"] .prodigy-content > div {
    outline: 1px dotted gray;

Yes, that should work, too! That option is especially helpful if your images are pretty light in general – it basically adds a dark background and makes the image slightly see-through.

Super cool!

For a usability perspective, it would be cool if the area outside to image would be viable to release click and thus confirm the shape of the bounding box. As an aside to the problem above, one needs to re-enter the image area with the cursor also to "confirm" the shape with a click (releasing-click outside the image has no effect when "finishing" a rectangle, as far as I experience now).