---
title: Image Captioning
type: templates
category: Computer Vision
cat: computer-vision
order: 130
meta_title: Image Captioning Data Labeling Template

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.
<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>
All labeling configurations must be wrapped in View tags.
Use the Image object tag to specify the image to caption:xml <Image name="image" value="$captioning"/>
You can add a header to provide instructions to the annotator:xml <Header value="Describe the image:"/>
Use the TextArea control tag to provide a 5 row text box that annotators can type a caption into:xml <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.
You can enhance this template in many ways.
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:xml <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.