Text spans and Image spans simultaneously

I'm trying to build a tool that will allow me to draw boxes in an image (using "image_manual") and highlight corresponding portions of a text input (would be similar to NER). However, when I try to use these two views together, I run into an issue because the "spans" field is used by both views. Any suggested workarounds or fixes?

Hi! This is definitely unideal and I regret not naming the key "image_spans" :weary: I'm not sure there's an easy workaround at the moment but I'll keep thinking... For the next version, I'll see if we can implement a setting that lets you customise the name of the key to save the image spans to. Then you could set it to "image_spans" (or whatever) in your config to prevent the clash.

Thanks for your response! It seems like as a general rule, it would be best for each view to have a unique name for its output field? Also, roughly when do you think the next version will be released?

Yeah, it definitely makes sense if you're mixing interfaces – but that feature is pretty new, and when the data formats were initially designed, we made them as similar as possible for consistency. And formats are always difficult to change without breaking backwards compatibility. So I think the setting is a good solution here.

I don't want to promise an ETA for the next release that includes the pending enhancements we want to implement. I'd love to have another release later this month, but it depends on how things go :slightly_smiling_face:

1 Like

Since this is not possible at present, is there a way to have a 2-step workflow where the annotator (1) draws N bounding boxes (where N is not pre-determined) for an image, (2) clicks a "submit" or "next" button, and (3) N text fields appear, one for each box, and the annotator enters text in each? It would be nice if all the text boxes could appear on the same page with the image and overlayed boxes.

You could implement that with some custom JavaScript in a HTML block: when the user clicks the button, you can access window.prodigy.content.spans to get the annotated bounding boxes and append a textarea or input for each box to the .prodigy-content element. And then you could have another button that the user clicks when they're done, and that reads the content of each textarea or input, and calls window.prodigy.update to add the text content to the current JSON task under a new key. See here for details and examples: https://prodi.gy/docs/custom-interfaces#js-css

1 Like

Update: Just released Prodigy v1.10.4, which introduces a new "image_manual_spans_key" setting (defaults to "spans") so you can change the key used by the interface to store the annotated spans.