Texte alternatif des images

Il est recommandé de fournir un attribut alt pour les images. Cet attribut sert à décrire l’image aux utilisateurs qui ne peuvent pas la voir. Il est également utilisé par les moteurs de recherche pour comprendre le contenu de l’image.

<img src="..." alt="describe the image here" />

Cependant, cette tâche peut être fastidieuse et les développeurs sont souvent tentés de l’omettre ou de fournir un texte alt générique comme “image”.

<img src="..." alt="image" />

Le script

Pour résoudre ce problème, nous avons créé un script qui utilise le modèle OpenAI Vision pour analyser les images de la documentation et générer un texte alternatif descriptif.

Pour commencer, nous supposons que le script s’exécute sur un seul fichier image et nous utilisons defImage pour l’ajouter au contexte de la requête.

image-alt-text.genai.mjs

const file = env.files[0];
defImages(file);

Ensuite, nous donnons une tâche au modèle de langage pour générer un bon texte alternatif.

image-alt-text.genai.mjs

...
$`You are an expert in assistive technology. You will analyze each image
and generate a description alt text for the image.`

Enfin, nous utilisons defFileOutput pour définir une destination de sortie de fichier.

image-alt-text.genai.mjs

...
defFileOutput(file.filename + ".txt", `Alt text for image ${file.filename}`)

Utilisation dans Astro

La documentation GenAIScript utilise Astro, qui permet de créer des pages en MDX. Le code ci-dessous montre comment le texte alternatif généré, stocké dans un fichier texte séparé, est injecté dans le HTML final.

import { Image } from "astro:assets";
import src from "../../../assets/debugger.png";
import alt from "../../../assets/debugger.png.txt?raw";

<Image src={src} alt={alt} />

L’image debugger.png montre une capture d’écran d’une session de débogage ainsi que le contenu du fichier texte généré pour le texte alternatif.

debugger.png.txt

A screenshot of a debugging session in a code editor with a breakpoint set on a line of code. The editor is displaying several panels including the watch variables, call stack, and a terminal output. The code is partially visible with a function definition and JSON configuration data.

Automatisation

Avec la commande run, nous pouvons appliquer le script à chaque image dans la documentation.

for file in assets/**.png; do
  npx --yes genaiscript run image-alt-text "$file"

Pour éviter de régénérer le texte alternatif, nous détectons également si un fichier existe dans le script et annulons l’opération en conséquence.

image-alt-text.genai.mjs

for file in assets/**.png; do
  if [ ! -f "$file" ]; then
    npx --yes genaiscript run image-alt-text "$file"
  fi
done

Code source complet

Le code source complet est le suivant :

image-alt-text.genai.mjs

script({
    title: "Image Alt Text generator",
    description: "Generate alt text for images",
    model: "vision",
    group: "docs",
    maxTokens: 4000,
    temperature: 0,
})

// input
const file = env.files[0]
// context
defImages(file)
// task
$`You are an expert in assistive technology. You will analyze each image
and generate a description alt text for the image and save it to a file.
- Do not include Alt text in the description.`
// output
defFileOutput(file.filename + ".txt", `Alt text for image ${file.filename}`)