> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Use AI to generate image captions (video tutorial)

## Overview

This tutorial explains how to use Cloudinary’s AI-powered image captioning to automatically generate alt text for uploaded images in a [Next.js application](nextjs_integration), including setting up signed uploads.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction to alt text
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | Descriptive alt text ensures accessibility for users with visual impairments. Adding it manually can be time-consuming, especially with large image collections. |

### AI-powered captioning
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=20 :player=cld} | Cloudinary’s AI-based image captioning automatically generates captions by analyzing image content on upload. This feature requires the [AI Content Analysis add-on](cloudinary_ai_content_analysis_addon#ai_based_image_captioning).|

### Request captioning using the Upload widget in Next.js
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=59 :player=cld} | In a Next.js project you can use the [CldUploadWidget component](nextjs_image_and_video_upload#using_clduploadwidget) to request captioning on upload by setting `detection` to `captioning` in the `options` prop. |

```react
<CldUploadWidget
   ...
  options={{
    detection: 'captioning'
  }}
  ...
>
```

### Set the alt text to the auto-generated caption
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=39 :player=cld} | Set the alt text of the displayed image using the result returned from the upload. |

```react
<CldImage src = {result.public_id} width={result.width} height={result.height} alt={result.info?.detection?.captioning?.data?.caption as string} />
```

### Implementing signed uploads
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=46 :player=cld} | To use the captioning option, you need to use an upload preset, or a signed upload. Note that in the new upload preset settings interface, you can select the **Addons** tab and **Add AI captioning to your image** in the **Cloudinary AI Content Analysis** section.To implement a signed upload, use the `signatureEndpoint` prop. Create a POST endpoint using a Next.js Route Handler to sign the upload using the [Node.js SDK](node_integration). Use the `cloudinary.utils.api_sign_request` method to generate the signature.|

### Set the `alt` contextual metadata automatically
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=35 :player=cld} | You can automatically set the `alt` contextual metadata for the image using the `on_success` parameter and use this value in the `CldImage` instead. |

```react

  options={{
    detection: 'captioning',
    on_success: 'current_asset.update({context: {alt: e.upload_info?.info?.detection?.captioning?.data?.caption}})'
  }}

  ...

  <CldImage 
    src = {result.public_id} 
    width={result.width} 
    height={result.height} 
    alt={result.context.custom.alt} />

```

## Keep learning

> **READING**:
>
> * See more of [Cloudinary's AI capabilities](ai_in_action) in action.

> * Discover more about [customizing uploads](upload_parameters) to your product environment.

> * Learn more about [image](image_transformations) and [video](video_manipulation_and_delivery) transformations.

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

#### If you like this, you might also like...

  
  
  
    Configure the Next.js SDK
    Install and configure the Cloudinary Next.js SDK 
  

  
  
  
    List Images in Next.js
    List images using the Next.js app router and Node.js SDK 
  

  
  
  
    AI Generative Fill using Next.js
    Extend images using generative AI in a Next.js app 
  

&nbsp;

&nbsp;Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
&nbsp;