Automatically Generate Image Caption Text Using Google Cloud Vision API with JavaScript and Node.js

Automating the function of image captions is very important for many applications, from improving accessibility and SEO to simplifying content management. Modern AI technology has made it easier and more accurate to automatically generate photo captions. This article walks you through how to use the Google Cloud Vision API to automatically generate image captions, with code examples in JavaScript and Node.js. We also show you how to create Alt text using the Ayrshare API.

What is required

• Basic understanding of JavaScript and Node.js
• Familiarity with RESTful APIs
• Google Cloud Platform (GCP) account.

Technology used

1. JavaScript (Node.js)
2. Axios for HTTP requests
3. JSON

Steps to Automatically Generate Text for Image Captions

Step 1: Set up the Google Cloud Vision API

1. Sign in to your Google Cloud Console.
2. Create a new project or select an existing one.
3. Navigate to “API & Services” -> “Library”, then search for “Cloud Vision API” and enable it.
4. Create credentials (API key or service account key JSON file) for your project.

Step 2: Install Required Packages

To make HTTP requests, we will use the Axios library. Install it using npm if you haven’t already:

npm install axios

Step 3: Write the Code

Here’s how to write a Node.js script to use the Google Cloud Vision API to generate captions:

const axios = require('axios');
const fs = require('fs');

// Initialize API endpoint and API key
const API_ENDPOINT = "
const API_KEY = "";

// Define headers for the API request
const headers = {
  'Content-Type': 'application/json'
};

// Base64 encode your image
const image = fs.readFileSync('path/to/your/image.jpg', { encoding: 'base64' });

// Prepare the payload
const payload = JSON.stringify({
  requests: [
    {
      image: {
        content: image
      },
      features: [
        {
          type: "LABEL_DETECTION",
          maxResults: 1
        }
      ]
    }
  ]
});

// Make the API request
axios.post(`${API_ENDPOINT}?key=${API_KEY}`, payload, { headers })
  .then(response => {
    const result = response.data;

    // Extract the caption (label)
    if (result.responses && result.responses[0].labelAnnotations) {
      const caption = result.responses[0].labelAnnotations[0].description;
      console.log(`Generated caption: ${caption}`);
    } else {
      console.log("Caption not generated.");
    }
  })
  .catch(error => {
    console.error("An error occurred:", error);
  });

Replace it with the API key you received from the Google Cloud Console. Change the path to the image file accordingly.

Step 4: Run the Code

Save your script and run it. If everything is set correctly, you should see a generated thumbnail of your image.

Understanding Google Cloud Vision API Costs

Before using any cloud-based service for your application, it is important to understand its cost implications. The Google Cloud Vision API is no exception. While the API offers a free tier, costs can increase with usage, and it’s important to consider this when planning the architecture of your application.

Free category

The Google Cloud Vision API offers a free tier that includes:

• 1,000 units per feature per month for the first 12 months
• 1,000 units per month of the Cloud Vision API Web Discovery feature

Check the Google Cloud Pricing Page for the most up-to-date information on the limitations of the free tier.

Paid section

Once you exceed the usage limits of the free tier, you will move to the paid tier, and different types of image recognition features come with different costs. Pricing generally falls into two categories:

1. Prices are based on the feature: The cost depends on the specific feature you use, such as label detection, face detection, etc.
2. Prices are based on volume: The more you use, the cheaper it is. Google offers lower rates for higher volumes of API requests.

Cost Considerations

Here are some factors to keep in mind:

• Number of Features: If you use multiple features such as label detection and face detection in the same image, the cost multiplies based on the number of features used.
• Measure Limits: Make sure you don’t reach the rating limits, as this may affect the performance of your app.
• Collection requests: Google Cloud Vision API allows you to make batch requests, which can be very cost effective and efficient.
• Data Transfer Charges: Although generally small, there may be additional data transfer charges, especially if you transfer large amounts of data in and out of Google Cloud.

To avoid unexpected expenses, set up budget alerts in your Google Cloud Console, to be notified when your spending reaches a certain limit.

Steps to Using the Ayrshare API

Another easy way is to use the Ayrshare API. With Max Pack, you get many useful features including Alt Text Generator.

Step 1: Set up an Ayrshare Account

1. Sign up for Ayrshare and add a Max Pack to your account.
2. Find your API key on the Ayrshare dashboard.

Step 2: Write the Code

Here is the sample code for calling the API in node.js.

const API_KEY = "API_KEY";
fetch(" {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        url: " // required
      }),
    })
      .then((res) => res.json())
      .then((json) => console.log(json))
      .catch(console.error);

Make sure to replace {API_KEY} with your API key from the dashboard and url with your image url.

Step 3: Run the Code

Save it and run it. You will now see a response with a generated alt text similar to the sample below.

{
    "status": "success",
    "altText": "A ghostbusters vehicle driving through a field.",
    "url": "
}

Don’t Skip Another Text

Automatically generating image captions has many applications, including improving website accessibility, SEO, and content discovery. With modern AI tools, it’s easy to automate this process to the benefit of your users and your business.