Display text in columns for spans.manual

I'm trying to do span categorization for a dataset of articles and their summaries. Is it possible to view the text in columns while I annotate? For example, show the article in one column, and the summary in a second column, and be able to select spans in the summary and label them.

Hi! If the article is "static" and you just want to present it for context, you could solve this by adding two blocks to the UI: a html block that reads from the "html" key in the data and contains the formatted article, and a spans_manual block that reads the summary from the "text" and that you can annotate with. See here for more details: https://prodi.gy/docs/custom-interfaces#blocks

You could then add two lines of CSS to display the blocks in two columns instead of in a row:

Awesome, I will try this out. With the blocks interface, is it possible to have two separate text blocks that require spans_manual annotation? My dataset actually has multiple summaries for each article (provided by different sources), and it would be much faster to annotate if I could do all the summaries of an article at the same time. But the annotations need to stay separate, because I want separate statistics at the end.

Actually I have a question about custom interfaces. The link you posted talks about the features and capabilities of custom interfaces, but it doesn't actually explain how to create one. It says "You can also put together fully custom solutions by combining interfaces and adding custom HTML, CSS and JavaScript." but there are no examples of how to create and run a custom interface. Can you link an example of how to make a custom interface that combines existing interfaces?

At the moment, you can only have one block of spans_manual UI per task because the interface always reads from the "text" and "spans", and saves to the "spans". So with two blocks, you would end up with conflicts because the annotations can't be saved to the same standard key.

However, without two columns, you could just combine the summary and article into one text and store the character offsets of where the article starts. Then you can later reconstruct the two pieces separately.

Ah, sorry if this was confusing! You can use the html UI to render any HTML provided via the "html" key of the data, as shown here: https://prodi.gy/docs/custom-interfaces#html

In the "config" returned by the recipe, you can then set the "global_css" to provide CSS for styling your HTML if needed, and "javascript" to provide JavaScript that can interact with your HTML elements.

Instead of a "html" key, you can also use an "html_template" that can access properties in the input JSON as variables. For example, {{text}} to show the value of "text". Here's a short example using a HTML template in a recipe for question answering: prodigy-recipes/question_answering.py at master · explosion/prodigy-recipes · GitHub

The example here shows a HTML template and the corresponding JavaScript to interact with it: https://prodi.gy/docs/custom-interfaces#javascript

I'm still not clear on how to actually implement this. Do I need to create a custom recipe to implement the custom interface features? Are there any examples of fully working custom recipes I could use as a template to get started?