The use case of labeling a group of images (mostly in medical)

[alon]

I’m looking to use LabelStudio for a quick labeling of groups of images.
It is common in the medical domain that you have multiple images from one patient (let’s say breast cancer mammogram images would have at least two views of each side so 4 images in total).

Essentially we would expect the sidebar to list “patients” or “image collections” and when it is chosen, it will show a grid of images.

My best workaround is to collect all images as a “video” and let the annotator go through them frame by frame.
But perhaps there’s a better way?

[Alessio]

Hi @alon, very interesting use case,

What about displaying them in a grid from the get-go with a labeling config like this one?

<View>
  <!-- Display a header for context -->
  <Header value="Image Grid Classification" />
  
  <!-- A container for the grid of images using a custom <Div> tag and inline CSS for layout -->
  <View style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">
    <Image name="img1" value="$img1" width="150" height="150" />
    <Image name="img2" value="$img2" width="150" height="150" />
  </View>
  <!-- A container for the grid of images using a custom <Div> tag and inline CSS for layout -->
  <View style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">
    <Image name="img3" value="$img3" width="150" height="150" />
    <Image name="img4" value="$img4" width="150" height="150" />
  </View>

  <!-- Classification tool: a single-choice task with two options that applies to the whole grid -->
  <Choices name="diagnosis" toName="img1,img2,img3,img4" choice="single">
    <Choice value="Benign" />
    <Choice value="Malignant" />
  </Choices>
</View>

It will result in something like this:

Let me know if that helps or if I am missing something important!