It looks like the choice UI used as a component of your blocks is missing the list of options to choose from.
Each task sent to choice should contain the options field with the following format:
(btw. whenever you are doubt you can find the documentation of the JSONL format requirements for all UIs in our Annotation Interfaces doc section)
The most convenient way to add options programmatically to your stream of tasks would be by applying a wrapper function to the stream. This way you can preserve the benefits of stream being a generator-like data structure (StreamType). However, to be able to use apply, we need to load the stream via Prodigy get_stream function (JSONL loader is completely valid, but a newer and recommended way is to load the data source is via get_stream :
Thanks for your help @magdaaniol – I managed to solve the problem!
I switched to get_stream and the classification interface, as it seems to be better suited for binary classification.
Also, I noticed a few errors in my HTML template, which were missing the <img> elements. I've added them below with a fixed with of 300 pixels for each image:
A follow-up question: is there a way to automatically resize the div element so that it would take up e.g. 80% of the screen width available in the "main window" where data is displayed?
Of course classification UI is a better option for binary annotation - sorry I totally missed that Hopefully the info on options will be useful for the future
As for the width, I'm not entirely sure which part would you like to make it 80% of its parent:
Taking the above image as a reference, I understand that you want your custom div to occupy 80% of the Prodigy card so that it smaller than it currently is?
Or is it that you'd like the Prodigy card to take up 80% of the Prodigy content container?
To set the Prodigy card width, you can use cardMaxWidth property of the custom_theme setting in your prodigy json file:
{"custom_theme": {
"cardMaxWidth": "80%"
}
}
This should make sure that the card will take up to 80% of the parent container whenever possible.
Other custom_theme options are documented here in case you're interested what other css "shortcuts" are available.
As for the image container, the styling of the parent container looks appropriate to me. I changed the fixed width of the immediate image container to max-width: 100%; height: auto to make sure it resizes automatically.
I also implemented the vertical divider as a separate div to make sure it always appears in the middle of the gap.
This result should be something like this (it should look the same on mobile devices as well):
And here's the template I used: