Two images at the same time

Hi Prodigy

I need you great expertise once more! :slight_smile:

I am struggling to build a customized recipe where I can upload two pictures together at the same time. I need something to look similar to this picture, but just showing two pictures at the same time.

Background: We have marked some pictures (of documents) as duplicates in our database, and would like to dispatch sets of two images at a time, so we can reject or accept our algorithms prediction.

Do you have any ideas to how I could do this? :slight_smile:

This is the code from the picture (got it from your custom recipe manual):

import prodigy
    from prodigy.components.loaders import Images

@prodigy.recipe('Blanke')
def my_recipe(dataset="X", label=None):

    stream = Images('/path')

    return {
        'dataset': dataset,
        'stream': stream,
        'view_id': 'classification' if label else 'image'
    }

Best regards, Rosa

Hi! This should hopefully not be difficult to solve :slightly_smiling_face: How are you planning on loading in the image pairs? Do you have them saved as files somewhere, or do you have them in a Prodigy dataset? So depending on how your data is stored, you probably want to write a small function that loads the image pairs and creates one example dict with two images.

Next, you could use a custom HTML template to display them side by side. I’ve posted a similar example in this thread:

It’s for an input / output comparison, but the idea is pretty much the same. In your case, both columns would then include something like <img src="{{image1}}" />, which would refer to the "image1" property in your task.

Thanks a lot :slight_smile:

I have the pictures saved as files. Do you have any suggestion on how to write the function that loads the image pairs? (and what would I then need to remove from my code above). I’m sorry, but I a bit of a newbie at this :blush:

Also the code you wrote for the html_template. Does "“image1” in the code <img src="{{image1}}" /> refer to the filename of the picture? Or a label of some sort?

What’s your strategy for loading the image pairs? Do you have that reflected in the filenames, or do you want to pair up all possible combinations of images?

Ultimately, you probably want a data structure that looks like this:

{"image1": "folder/some_image1.jpg", "image2": "folder/some_image2.jpg"}

Of course, the fields don’t have to be image1 and image2 – you can choose whatever you like to use. Ultimately, you just need a function that yields out dictionaries of image paris. You could then use a little trick to fetch the image data and inline it in the annotation task (so that the image is stored with the annotations):

# at the top of your file
from prodigy.components.preprocess import fetch_images

# in your recipe – assuming the stream yields the image pairs
stream = fetch_images(stream, image_key="image1")
stream = fetch_images(stream, image_key="image2")

The image_key defines the name of the key of the image – so in the first run, we’re inlining the images with the key "image1" and in the second the images with the key "image2".

The image1 here refers to the key in the dictionary. So using the JSON example above, the {{image1}} would be replaced with folder/some_image1.jpg.