html inside html_template

, ,
1

Is it possible to create an HTML template like the one below that accepts an html variable where the html variable is a string formatted as an HTML table? I'm trying to figure out if this is a configuration problem on my end or if it is really not possible.

contents of html-template:
"<div>{{html}}</div>"

When I use this template to display HTML tables, then Prodigy outputs the following text in the annotation UI, instead of a formatted table. I know I could dynamically generate the full HTML in the html_template or in the text itself, but it would be nice if I could combine the template with the HTML from the text.

image
image695×316 18.1 KB

Here's the return statement of my custom recipe:

with open('./template.html', 'r') as f:
    html_template = f.read()

return {
    "dataset": dataset,
    "view_id": "classification",
    "config": {"html_template": html_template},
    "stream": stream,
    "update": update
}

If I comment out the line "# config": {"html_template": html_template}, then it correctly displays the table
image
But the problem is that other tables don't fit on the page, like the one below. For this reason, I would like to use the html-template to be able to better control how the table displays, so that it doesn't run off the table. It's likely that my html-template solution is sub-optimal. So, I'm also open to better ways to prevent the table going off the page:

image
image1177×446 27.5 KB

2

Hi! I think this might have something to do with how mustache (which Prodigy uses to substitute variables in the HTML template) treats HTML escaping in its variables. I just did a quick search and found this comment – so what happens if you use 3 curly braces, i.e. {{{html}}}?

1 Like
3

Thank you. The 3 curly braces fixed the problem.

Here's the final code I used for the html-template that fixed my overflow problem. It automatically adds a horizontal scrollbar, when needed, to ensure the text does not go off the screen.

<div style="overflow-x:auto;">
    {{{html}}}
</div>

Annotation UI:

image
image697×343 9.04 KB

1 Like