---
title: Content-based Image Retrieval
type: templates
category: Ranking and Scoring
cat: ranking-and-scoring
order: 425
meta_title: Content-based Image Retrieval Data Labeling Template

meta_description: Template for labeling data for content-based image retrieval tasks with Label Studio for your machine learning and data science projects.

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:
xml <Image name="query" value="$query_image" />

You can add a header to provide instructions to the annotator:
xml <Header value="Choose similar images:" />

Use styling in the View tag to wrap multiple Image object tags to display multiple images in a grid:
xml <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:
xml <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:
xml <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.

Related tags

• Image
• Header
• View
• Choices
• Style