Image Alt Text
It is a best practice to provide an alt
attribute for images.
This attribute is used to describe the image to users who are unable to see it.
It is also used by search engines to understand the content of the image.
However, this task can be tedious and developers are often tempted to skip it, or provide a generic alt
text like “image”.
The script
To solve this issue, we created a script that uses the OpenAI Vision model to analyze the documentation images and generate a description alt text.
To start, we assume that the script is run on a single image file and we use defImage to add it to the prompt context.
Then we give a task to the LLM to generate a good alt text.
finally, we use defFileOutput to define a file output route.
Usage in Astro
The GenAIScript documentation uses Astro, which allows to author pages in MDX. The code below shows how the generated alt text, stored in a separate text file, is injected in the final HTML.
The debugger.png
image shows the screenshot of a debugging session and the generated alt text file contents.
Automation
Using the run command, we can apply the script to each image in the docs.
To avoid regenerating the alt text, we also detect if a file exists in the script and cancel accordingly.
Full source
The full source looks like this: