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 use an On Manual Run From Media Library block to generate alt text for images that are already in your Media Library.

Learn more about accessible media.

Prerequisites

Before building this flow, ensure you have:

• A Google Cloud project with the Translation API enabled
• A valid Google Cloud API key with access to the Translation API
• The Cloudinary AI Content Analysis add-on enabled

Set up your Google Translate connection

Before using the Translate Text Using Google block in your flows, you need to connect your Google Cloud account in the Apps & Connections page:

1. In MediaFlows, navigate to Apps & Connections from the sidebar.
2. Find Google Translate in the list and click Connect Your Account.
3. In the connection dialog, enter:
   • Connection name: A descriptive name for this connection (for example, "Google Translate API")
   • API Key: Your Google Cloud API key with the Cloud Translation API enabled
4. Click Connect to save the connection.

Once connected, you can select this account when configuring Translate Text Using Google blocks in your flows.

Overview

The PowerFlow uses the following blocks:

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

On Asset Upload

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

Steps:

1. Add the On Asset Upload block to your canvas.
2. Open the block configuration and clear Trigger for any asset.
3. Under Trigger only when the asset's, select Asset type and Image.

Generate Image Caption

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

Steps:

1. Add the Generate Image Caption block to your canvas and ensure it's connected to the On Asset Upload block.
2. Open the block configuration and ensure that the Use the asset from field is set to On Asset Upload.
3. Check the Add-on card to make sure you've got quota for the Cloudinary AI Content Analysis add-on.

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 and ensure it's connected to the Generate Image Caption block.
2. Open the block configuration and set the Metadata key to alt.
3. Set the Metadata value to the Caption from the Generate Image Caption block by clicking the Insert Value icon to insert the variable.
4. Ensure the Action is set to Add or update.

Translate Text Using Google

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

Steps (for each language):

1. Add a Translate Text Using Google block to your canvas and ensure it's connected to the previous Update Contextual Metadata block.
2. Open the block configuration and rename it to match the language that it's translating, for example, Translate To French.
3. For Google Translate connection: Click Connect and select the Google Translate account you configured in Apps & Connections.
4. Set the String to translate to the Caption from the Generate Image Caption block by clicking the Insert Value icon to insert the variable.
5. Leave Translate from set to Auto Detect so the block detects the language to translate from.
6. In Translate to, select the language to translate the caption to.

Update Contextual Metadata (translations)

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

Steps (for each language):

1. Add an Update Contextual Metadata block to your canvas and ensure it's connected to the relevant Translate Text Using Google block.
2. Open the block configuration and rename it to match the language that it's storing, for example, Update French Contextual Metadata.
3. Set the Metadata key to something appropriate for the language, for example, alt-french.
4. Set the Metadata value to the Translated text from the relevant Translate Text Using Google block by clicking the Insert Value icon to insert the variable.
5. 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: