Visual Genome

Use the Visual Genome task to connect structured image concepts to language.

Labeling Configuration

<View>
  <View style="display: flex; flex-wrap: wrap;">
    <View className="label-column">
      <Header value="Regions"/>
      <RectangleLabels name="regions" toName="image" value="$regions"/>
  </View>
    <View className="label-column">
      <Header value="Attributes"/>
    <RectangleLabels name="attributes" toName="image" value="$attributes"/>
    </View>
    <View className="label-column">
      <Header value="Relationships"/>
    <RectangleLabels name="relationships" toName="image" value="$relationships"/>
    </View>
  
  </View>
  <Image name="image" value="$image"/>
  <Style>
  .label-column .lsf-labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  </Style>
</View>

Example data

{ "data": {
  "image": "https://htx-pub.s3.amazonaws.com/templates/visual-genome/panda.jpeg",
  "regions": [
    { "value": "panda bear holding something in it's paw" },
    { "value": "trees behind the panda out of focus" },
    { "value": "piece of bamboo in panda's paw" },
    { "value": "bamboo next to panda" },
    { "value": "the panda is cute" }
  ],
  "attributes": [
    { "value": "markings is black" },
    { "value": "nose is black" },
    { "value": "face is round" },
    { "value": "wood is round" }
  ],
  "relationships": [
    { "value": "hole ON log" },
    { "value": "tree BEHIND bear" },
    { "value": "mouth OF panda" }
  ]
}}