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, including setting up signed uploads.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction to alt text

0:00	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

0:20	Cloudinary’s AI-based image captioning automatically generates captions by analyzing image content on upload. This feature requires the AI Content Analysis add-on.

Request captioning using the Upload widget in Next.js

0:59	In a Next.js project you can use the CldUploadWidget component to request captioning on upload by setting detection to captioning in the options prop.

Set the alt text to the auto-generated caption

1:39	Set the alt text of the displayed image using the result returned from the upload.

Implementing signed uploads

1:46

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. Use the cloudinary.utils.api_sign_request method to generate the signature.

Set the alt contextual metadata automatically

2:35	You can automatically set the alt contextual metadata for the image using the on_success parameter and use this value in the CldImage instead.

---

Keep learning

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

 

 

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.