Customized Mark recipe with html UI

, ,
1

Hi,

I’m new to prodigy and I’m trying to write a customized mark recipe that will use html UI. I read post on the forum regarding html UI and PRODIGY_README.html but I think I’m still missing something, I guess something really trivial.

I have number of pairs of companies in csv file together with their descriptions and urls. I would like to be able to display both companies names, descriptions and urls side by side.

This is my code so far:

@prodigy.recipe('match_recipe',
                dataset=prodigy.recipe_args['dataset'])
def match_recipe(dataset):

    stream = ({'name':row[1]} for row in data)
    with open('test.html') as txt:
           html_template = txt.read()
    
    components = mark(dataset=dataset, source=stream)
    components['view_id'] = 'html'
    components['config']['html_template'] = html_template
    return components

where data is a list of company pairs

I know this html code will not do what I expected, but I was just trying to make it work with one company name with no success, it runs fine but the annotation page is blank so I am not sure why the stream is not linked with html template?

2

Hi! Your custom recipe looks good so far. Two questions to help me debug this: Are you using the latest version of Prodigy? And could you share the contents of your test.html template?

3

my test.html code is below:

<h2>{{name}}</h2>

it is really simple as I was just trying to understand the logic here.

I am using prodigy 1.4.2

4

Thanks! And yes, this should definitely work, assuming row[1] is a string of text. Did you see any errors in the terminal? One thing that might be a problem here is that the mark recipe expects the tasks in the stream to have hash IDs assigned (which it normally takes care of automatically) – but since you're overwriting the stream, the hashes are not found. Does the following make a difference?

from prodigy import set_hashes
stream = ({'name':row[1]} for row in data)
stream = (set_hashes(eg) for eg in stream)

You might want to try upgrading to the latest v1.5.1, which includes some potentially relevant fixes. For example, I'm pretty sure the hashing should now all be taken care of automatically, even in custom cases like this. Prodigy now also comes with stream validation, so if the format of your data is incorrect, you should see an error message that explains what the problem is (for example, if a property is missing or has the wrong type.)

5

Thank you!

I have another question, I managed to get my display working but the size of my table is bounded by the box in the middle of the screen. Is there a way to make the box bigger?

6

Thanks for the update, that’s nice to hear!

And yes, the maximum width of the box or “annotation card” is defined in the theme as the cardMaxWidth setting. It defaults to 675px. You can overwrite this via the custom_theme config. For example, like this in your recipe:

components['config']['custom_theme'] = {'cardMaxWidth': 675}

If you want to overwrite this globally for all recipes, you can also add a "custom_theme" object to your prodigy.json and add the values there.

You might have to experiment a little to find a size that works best for you content. On small screens (when the sidebar collapses and Prodigy switches to a small screen layout), the maximum width is always 100% to give the card as much space as possible.

7

Awesome, that is exactly what I was looking for, thank you!

1 Like