Content-based Image Retrieval
If you want to train a machine learning model on content-based image retrieval computer vision tasks, use this template. This labeling configuration displays an image and prompts annotators to select a choice corresponding to one or more similar images.
Interactive Template Preview
Labeling Configuration
<View>
<Image name="query" value="$query_image" />
<Header value="Choose similar images:" />
<View style="display: grid; column-gap: 8px; grid-template: auto/1fr 1fr 1fr">
<Image name="image1" value="$image1" />
<Image name="image2" value="$image2" />
<Image name="image3" value="$image3" />
</View>
<Choices name="similar" toName="query" required="true" choice="multiple">
<Choice value="One" />
<Choice value="Two" />
<Choice value="Three" />
</Choices>
<Style>
[dataneedsupdate]~div form {display: flex}
[dataneedsupdate]~div form>* {flex-grow:1;margin-left:8px}
</Style>
</View>
About the labeling configuration
All labeling configurations must be wrapped in View tags.
Use an Image object tag to specify the location of the image to use for the query:
<Image name="query" value="$query_image" />
You can add a header to provide instructions to the annotator:
<Header value="Choose similar images:" />
Use styling in the View tag to wrap multiple Image object tags to display multiple images in a grid:
<View style="display: grid; column-gap: 8px; grid-template: auto/1fr 1fr 1fr">
<Image name="image1" value="$image1" />
<Image name="image2" value="$image2" />
<Image name="image3" value="$image3" />
</View>
Use the Choices control tag to display choices that apply to the original image, require a response, and allow annotators to select multiple choices:
<Choices name="similar" toName="query" required="true" choice="multiple">
<Choice value="One" />
<Choice value="Two" />
<Choice value="Three" />
</Choices>
Use the Style tag to apply additional CSS styles to the div form classes used on the labeling interface to further enhance the grid:
<Style>
[dataneedsupdate]~div form {display: flex}
[dataneedsupdate]~div form>* {flex-grow:1;margin-left:8px}
</Style>
The [dataneedsupdate] option associates the styling with the object tags used in the labeling configuration.