Labelling AI images in Magento and Adobe Commerce

Add the script tag

<script src="https://www.ai-label.app/widget.js" defer></script>

1. In the Admin: Content > Design > Configuration.
2. Click Edit in the row of the store view you want.
3. Under “Other Settings”, expand HTML Head.
4. Paste the script tag into “Scripts and Style Sheets”.
5. Click Save Configuration, then refresh the invalidated caches under System > Cache Management.

The setting applies to the scope you chose. With several store views, for example one per language, check each of them.

Content Security Policy

According to Adobe, JavaScript in this field must be allowed in the Content Security Policy, otherwise it will not run on checkout pages. From version 2.4.7, payment pages use restrict mode and all other pages report-only mode. The allowlist entry goes into a csp_whitelist.xml file in the etc folder of a custom module:

<policy id="script-src">
    <values>
        <value id="ai-label" type="host">https://www.ai-label.app</value>
    </values>
</policy>

For languages other than German and English, the widget fetches a small text file from the same address. In that case, allow it for connect-src as well.

Mark images

Which images need a label is your decision, for example with the labelling check. The widget only labels marked images, in three ways that can be combined:

• Attribute on the image: data-ai-label="generated" for images created entirely with AI, data-ai-label="modified" for photos edited with AI.
• File name with a marker before the extension: vase--ai.jpg or vase--ai-mod.jpg.
• Alt text ending in “(AI-generated)” or “(AI-modified)”.

In Magento, the alt text of the product image is the easiest way. Open the product under Catalog > Products, click the image in “Images And Videos” and extend the “Alt Text” field. Alternatively, rename the file with --ai before uploading and check in the page source that the marker reaches the image address. Use the data-ai-label attribute in your own theme templates.

Pitfalls

• Cache: without a refresh under Cache Management and in the full page cache, visitors keep seeing the page without the script.
• CSP in report-only mode: on normal pages the policy only reports a violation and does not block, so a missing allowlist entry often shows up only in checkout.
• Full-screen gallery: check that the label appears in the enlarged view.
• Several store views: alt text can differ per store view. Add the suffix in every language in which the image appears.

Limits of the widget

• The widget only reaches <img> elements on pages with the script. Background images from the stylesheet and images under 48 pixels (adjustable with data-min) stay unlabelled.
• It cannot reach emails such as order confirmations. For images outside your website, create a copy with the label burned in using Label an AI image.
• Privacy: when the script loads from ai-label.app, our host sees the IP address, as with any request. The script sets no cookies. Mention it in your privacy policy.

Native app

A dedicated Magento app is planned. There is no date yet.