Generate multilingual alt text

When you serve images to audiences across different regions and languages, providing alt text in the viewer's language is essential for accessibility and helps screen readers convey meaning accurately. Managing translations manually doesn't scale as your library and markets grow.

This sample PowerFlow automatically translates an asset's primary alt description into multiple languages and saves the results as contextual metadata. You can tailor the target languages to match your localization strategy.

The descriptions are generated when a new image is uploaded to Cloudinary, but you could change this to a DAM app to generate alt text for images that are already in your Media Library.

Learn more about accessible media.

Overview

The PowerFlow uses the following blocks:

• Cloudinary Upload: Triggers the flow when an image is uploaded to the product environment.
• Cloudinary Image Captioning: Automatically generates a description of the image.
• Update Contextual Metadata: Saves the original description and translations to the appropriate contextual metadata fields.
• Google Translate: Translates the description into another language.

Cloudinary Upload

When someone uploads an image, Cloudinary sends a webhook notification to the Cloudinary Upload block, which activates the flow.

Steps:

1. Add the Cloudinary Upload block to your canvas.
2. Open the block configuration and set it to trigger only when the Asset type is Image.

Cloudinary Image Captioning

The Cloudinary Image Captioning block generates a descriptive caption for the uploaded image using the Cloudinary AI Content Analysis add-on.

Steps:

1. Add the Cloudinary Image Captioning block to your canvas.
2. Connect the output of the Cloudinary Upload block to its input.
3. Open the block configuration and ensure that the Use the asset from field is set to Cloudinary Upload.

Update Contextual Metadata (original language)

Use the Update Contextual Metadata block to store the generated description in the alt contextual metadata field associated with the uploaded asset.

Steps:

1. Add the Update Contextual Metadata block to your canvas.
2. Connect the output of the Cloudinary Image Captioning block to its input.
3. Open the block configuration and set the metadata key to alt.
4. Set the Metadata value to the Caption from the Cloudinary Image Captioning block by clicking the + icon to insert the variable.
5. Ensure the Action is set to Add or update.

Google Translate

The Google Translate block translates the image description into whichever language you select. It uses the Google Translate API.

Steps (for each language):

1. Add a Google Translate block to your canvas.
2. Connect the output of the previous Update Contextual Metadata block to its input.
3. Open the block configuration and rename it to match the language that it's translating.
4. Enter your Google API key.
5. Set the String to translate to the Caption from the Cloudinary Image Captioning block by clicking the + icon to insert the variable.
6. Let the block automatically detect the language to translate from.
7. Select the language to translate the caption to.

Update Contextual Metadata (translations)

To store the translations, use additional Update Contextual Metadata blocks, each connected after one of the Google Translate blocks.

Steps (for each language):

1. Add an Update Contextual Metadata block to your canvas.
2. Connect the output of the relevant Google Translate block to its input.
3. Open the block configuration and rename it to match the language that it's storing.
4. Set the metadata key to something appropriate for the language, e.g., alt-french.
5. Set the Metadata value to the Translated text from the relevant Google Translate block by clicking the + icon to insert the variable.
6. Ensure the Action is set to Add or update.

Execute the flow

Save the flow and test it to check it works before enabling it. Once enabled, you can try it out by uploading an image to your product environment.

After executing the flow, you can check that the contextual metadata for the image contains the description and translations: