I want to add some extra features to already existing front-end .
So , l loaded my HTML page :
with open(’/path/to/html’) as txt:
template_text = txt.read()
And then , in the return part I added :
return{
‘view_id’:‘choice’,
‘config’: {‘html_template’: template_text}
}
But ,this did not help.
So, I changed the the view_id to “html”, but then Prodigy threw an error:
something wrong in the web app.
Can you please help me out ,how can I use custom HTML for annotations.
I tried this method. It is not showing any changes in the orignal HTML page .
Is it that I need to make changes in the orignal HTML page being used for prodigy ?
I mean , is my new page going to overwrite the existing page , or it is going to blend into that ?How exactly is this thing working ?
@ines
How can we add a custom html page for annotation in the tool.
Is there something we need to edit in prodigy.json ?
And what about the linking with the backend ,will it be automatically done?
Hi, I moved all your other posts on various threads here to keep the discussion in one place – since the’re all related to a similar usage questions, it’s easier to answer that way.
This is definitely correct. To use a template, the view_id needs to be set to 'html'. How does your template_text look? And what data are you streaming in?
You can find some examples of HTML templates and what’s possible using Mustache variables in the docs. Definitely check that the keys present in your incoming stream match the variables you’re using in your template. (It’s difficult for me to give you a definitive answer without seeing the template and data.)
Maybe the terminology is a bit confusing here – a custom HTML template will render your own HTML markup in place of the “annotation card” in the center, i.e. where the current question is presented. It won’t overwrite the entire page (because that would be very difficult). You can always create custom themes, tweak the front-end via user scripts or custom JS (currently experimental) or replace the front-end entirely and only communicate with Prodigy via the REST API (details see below).
If you’re looking to add extra pages, like, a subpage or a completely different screen, no, that’s not possible. Prodigy is a simple, one-page app and focuses on the essentials needed for the annotation task. However, you can replace the front-end entirely if you want to. The documentation includes detailed specs of the REST API that’s started with the Prodigy server. So your custom app can interact with the Prodigy back-end, e.g. by making requests to /project, /get_questions and /give_answers. )However, this does mean that you have to develop your own web app more or less from scratch.)
No, I don’t want to add an extra page ,just modify the exisiting .
Actually , I just need to display some more text on the annotation screen. That has nothing to do with the ongoing tasks . User will just look at that for reference.
So , I was thinking that , is something like this possible that I add some text in the empty part of the screen (without disturbing the ongoing task)?
Or maybe , just inserting some buttons will suffice .
For the time being , I also tried using the toUpperCase script that has been mentioned in the support.
Then also , it threw the same error .
How does your recipe script look? It’s likely that there’s a different problem here – e.g. with the data streaming through, or the template interpolation.
For what you’re trying to do, I’m not sure that custom templates and/or scripts are the best solution. If you want to display instructions for the annotators, maybe you want to use an instructions modal? It requires one more click, but it also lets you display more information, and use a flexible layout.
Alternatively, you can edit the static/index.html and add an absolute-positioned container on top (as long as you leave the root element intact, which is used to render the web app). This is not very elegant, but it should work. If you mostly need the functionality locally, you could also write a Greasmonkey/Tampermonkey script that waits until the app has loaded and then adds an element to the page.
