Issue with choice ui and image spans

, , ,
1

I'm having an issue when trying to add an image span in a view_id = "choice". The Ui returns an error

Whereas if I turn the view_id = "image" the bounding box will display correctly

I can get around this by drawing the Rectangle directly on the image, but it's not ideal

 yield { 'image': image_encoded,
            'width': image.width,
            'height': image.height,

            'spans': [
                 {
                     'type': "rect",
                     'label': label_name,
                     'x': x,
                     'y': y,
                     'width': w,
                     'height': h,
                 }
             ],

            "options": [
                {"id": "BANANA", "text": "🍌 banana"},
                {"id": "BROCCOLI", "text": "🥦 broccoli"},
                {"id": "TOMATO", "text": "🍅 tomato"}
            ]
    }
2

Hi! What's the error you're seeing in the UI?

In general, I'd recommend using the blocks UI if you need to put together more complex interfaces with multiple elements: https://prodi.gy/docs/custom-interfaces So in your case, you could have two blocks: image and choice. In the choice block, you can set "image": None to prevent the image from being rendered twice (once in the image block and once in the choice block).

3

Thank you for the suggestion !

the error I get :

TypeError: Cannot read property '0' of undefined
    at t.r.findLabelPosition (bundle.js:1)
    at t.value (bundle.js:1)
    at _i (bundle.js:1)
    at wi (bundle.js:1)
    at bundle.js:1
    at Ra (bundle.js:1)
    at Na (bundle.js:1)
    at ys (bundle.js:1)
    at gs (bundle.js:1)
    at ws (bundle.js:1)
4

Thanks! It looks like it incorrectly interprets the spans as referring to text, not the image – I'll fix this for the next release. In the meantime, you should be able to work around this using the blocks interface, which also gives you more flexibility :slightly_smiling_face:

1 Like
5

I've tried this blocks config by forcing { 'image': None, 'spans': None }, and not changing the stream output from the above, and I still get the same error

    blocks = [
        {'view_id': 'image'},
        {'view_id': 'choice', 'image': None, 'spans': None },
    ]

    config = {
        'choice_auto_accept': True,
        'blocks': blocks,
    }

    return {
        'config': config,
        'dataset': output_dataset,      # Name of dataset to save annotations
        'stream': stream,               # Incoming stream of examples
        'view_id': 'blocks',
    }
6

I just had a closer look at the error and it looks like the problem is that you seem to be using the legacy image manual interface that only supports "points" and not width/height/x/y? This should have failed more gracefully, sorry! So you can either convert your bounding boxes to a list of [x, y] coordinates or use the new image_manual interface (available in Prodigy v1.10+).

7

I see .. what's weird is that the x,y,w,h format works fine with a standalone image view_id but not when I mix it with others.

I can definitely convert it to using points and see what happens !

8

Okay, that's definitely weird then! I'll look into this in detail. It's somehow related to the bounding box detection, though, and for some reason, the app seems to assume it's a points-based box :thinking: So this should hopefully help as a temporary workaround!

Edit: Just released v1.10.5, which fixes the underlying problem!