logo
logoslack Join Community
logofirst
logofirst
Blog
Playground

GitHub
label studio logo

Image Captioning

If you want to train a machine learning model to caption or add alt text to images, use this template to collect captions about images.

Interactive Template Preview

Labeling Configuration

<View>
  <Image name="image" value="$captioning"/>
  <Header value="Describe the image:"/>
  <TextArea name="caption" toName="image" placeholder="Enter description here..." rows="5" maxSubmissions="1"/>
</View>

About the labeling configuration

All labeling configurations must be wrapped in View tags.

Use the Image object tag to specify the image to caption:

<Image name="image" value="$captioning"/>

You can add a header to provide instructions to the annotator:

<Header value="Describe the image:"/>

Use the TextArea control tag to provide a 5 row text box that annotators can type a caption into:

<TextArea name="caption" toName="image" placeholder="Enter description here..." rows="5" maxSubmissions="1"/>

Use the placeholder argument to provide placeholder text to the annotator, which can provide an example or further instructions.

Enhance this template

You can enhance this template in many ways.

Add a sticky header so that you can always view the caption

If you want to always view the annotation options on the labeling interface, even if you need to scroll around on the image or data being labeled, you can use styling with the View tag to specify the position.

In this case, wrap the caption element in styled View tags:

<View style="padding: 0 1em; margin: 1em 0; background: #f1f1f1; position: sticky; top: 0; border-radius: 3px">
 <TextArea name="caption" toName="image" placeholder="Enter description here..." rows="5" maxSubmissions="1"/>
</View>

The position: sticky; top: 0; CSS sets the TextArea to be fixed at the top of the screen after the annotator scrolls down when viewing the task. The other styling options visually differentiate the section of the interface containing the text box from the rest of the interface.

Couldn't find what you were looking for? Please let us know on Slack 
If you found an error, you can file an issue on GitHub!