How to auto-generate the image Alt-Text using AI and Transformers PHP

In this article, we’ll walk you through generating alternative text (alt text) from an image using the TransformersPHP library.

Alt text is crucial for accessibility and SEO, providing a textual description of images for screen readers and search engines.

What is Alt Text for Images?

Alt text (alternative text) briefly describes an image that appears in the HTML code. It's displayed in place of an image if it fails to load and is used by screen readers to describe the image to visually impaired users.

Why Are Alt Tags Important?

Alt tags are crucial for accessibility, allowing screen readers to describe images to users with visual impairments. They also enhance SEO by helping search engines understand the content of images, which can improve your website's ranking.

How do you add alt text to images in HTML?

To add alt text to an image in HTML, include the alt attribute within the <img> tag:

<img src="image.jpg" alt="A description of the image">

How to Generate Alternative Text from an Image Using TransformersPHP

Step 1: Set Up the Project

Before diving into the code, please install the TransformersPHP library.
You can install it via Composer by running:

composer require codewithkyrian/transformers

Once installed, you can start working with the library by creating a new empty file and requiring the autoload file:

<?php
require './vendor/autoload.php';

The require instruction is essential because it loads all the necessary classes and dependencies Composer provides.

Step 2: Import Necessary Classes

Next, you need to import the relevant classes and functions that will be used:

use Codewithkyrian\Transformers\Transformers;
use Codewithkyrian\Transformers\Utils\ImageDriver;
use function Codewithkyrian\Transformers\Pipelines\pipeline;

• Transformers: The main class handles the model setup and processing.
• ImageDriver: This utility class manages image processing. The IMAGICK driver is a popular choice for handling images in PHP.
• pipeline: This function is crucial as it initiates a specific processing pipeline, which, in this case, converts images to text.

Step 3: Initialize the Transformers Class

Before generating alt text, the Transformers class must be initialized and configured:

Transformers::setup()
    ->setImageDriver(ImageDriver::IMAGICK)
    ->setCacheDir('./models')
    ->apply();

• setImageDriver(): Specifies the image processing driver. Here, we use IMAGICK for its robustness.
• setCacheDir(): Defines the directory where models will be cached, improving performance by avoiding repeated downloads.
• apply(): Finalizes the setup and activates the configuration.

Step 4: Set Up the Pipeline

The pipeline is a series of processes that converts input (an image) into output (text). You need to define the pipeline as follows:

$pipeline = pipeline('image-to-text');

The image-to-text pipeline analyzes an image and generates a descriptive text. This step prepares the pipeline for processing.

Step 5: Generate Alternative Text

Finally, you can pass an image file to the pipeline to generate the alternative text:

$result = $pipeline('test-image.webp');

This command processes test-image.webp, returning a result that includes the generated text.
You can also use a remote image using a full URL.

To display the generated text, you can use:

echo $result[0]['generated_text'] . PHP_EOL;

The $result variable is an array with one element ([0]) and with an attribute named generated_text
This outputs the alt text to the console or web page.

Conclusion

Using TransformersPHP, generating alt text from images is straightforward. You can easily convert any image into descriptive text by setting up the environment, initializing the necessary classes, and defining a pipeline. Using the generated text as alt in the img HTML tag is particularly useful for improving the accessibility of web content and ensuring that all users, regardless of their abilities, can understand the content on your site.

References

• TransformersPHP website: https://codewithkyrian.github.io/transformers-php/
• TransformersPHP source code: https://github.com/CodeWithKyrian/transformers-php
• Intro article about TransformersPHP: https://dev.to/robertobutti/machine-learning-with-php-5gb
• TransformersPHP official documentation: https://codewithkyrian.github.io/transformers-php/introduction
• The author, the amazing Kyrian https://x.com/CodeWithKyrian, thank you for all your effort in building this open source PHP project ✨