Custom Dynamic HTML

, ,
1

I keep running into the same error as other users with custom html questions; such that, " Oops, something went wrong :(You might have come across a bug in Prodigy's web app – sorry about that. We'd love to fix this, so feel free to open an issue on the Prodigy Support Forum and include the steps that led to this message." In the most simple case I am trying to use the Mustache template within the config aspect of the return as the following:

return {
        'dataset': dataset,                  # save annotations to this set
        'stream': stream,                           # load the stream of examples
        'view_id': 'html',                          # use the HTML interface
        'config': {
            "html_template": "<strong>{{text}}</strong>"
        }

I simply have the news_headlines.jsonl streaming in and want to see each row of text bolded. In the most complex case, I am using your tool for a tabular comparison task and would like a user to input the fields they want to see in the annotation task. I need the html table to be dynamic in the rows it shows based on user input. I have tried to achieve this several ways all ending in the same error. I am able to get the html view to be correct if setting it in the prodigy.json file, but that does not allow for it to be dynamic.

2

Hi! I use the inline html_template with variables a lot and I've never come across this issue. So that's definitely interesting. Are you using any custom JavaScript or other settings in your prodigy.json?

That error message is essentially the web app's way of failing gracefully when a problem occurs in the annotation card – so you could also check out the developer tools console and the error message shown there. It's probably cryptic because it's minified, but it can help with debugging.

I'm not sure what you've already tried, but I would probably solve this by having an input element (select, radio buttons, etc.), adding custom JavaScript, listening for the change and then toggling visibility of the rows that are all rendered by default, depending on the input (e.g. if the user selects A, all rows without the class or data attribute A are hidden).

One thing to keep in mind is that when you let the annotator manipulate what they see and work on, you are kinda breaking the "annotation task is always what the annotator saw" philosophy. So if it's important to you to always reconstruct what the annotator saw on the screen, you might want to also log what they selected. For instance, by calling window.prodigy.update and writing to a task property, so you end up with something like "user_actions": ["A", "B", "A"].