How to Add Accurate Text to AI Images Using Bannerbear

Have you tried using AI to generate images with text on them and the results are not what you expected? In this article, we’ll learn how to use Bannerbear to add text to AI images automatically to overcome this limitation.
by Josephine Loo ·

Contents

    Artificial Intelligence (AI) has opened up exciting possibilities for content creators. Tools like DALL·E and Bing Image Creator use AI to generate stunning visuals based on simple text inputs, enabling users to create visually appealing images without needing graphic design skills. However, there’s a challenge: while AI can create impressive images, creating images with text on them remains tricky.

    Here’s an example of the result generated:

    an example of AI generated image with wrongly spelled text.jpeg

    There are often spelling mistakes in AI-generated images, like the word “lattte” in the image above. If you’re creating images for blogs, social media, or e-commerce platforms where text needs to be added, you might need to add them manually using image editing tools like Canva or Pixlr.

    Alternatively, there’s a more automated method that involves coding and APIs (OpenAI + Bannerbear). This approach works well especially when you can pull text from a source or database (e.g. title and author name from a blog post), resulting in images like the one below:

    2671f3bc3308f355a3f2fe6d05807a0600f774a0 (1).png

    What is Bannerbear

    Bannerbear is a tool that allows you to generate custom images, videos, and other media using its API. It provides libraries in various popular programming languages like Ruby, PHP, and Node.js, making integrating image generation and other media manipulation functionalities into your application/project effortless.

    Bannerbear operates based on templates, which serve as blueprints for creating images and other media files. The templates can include both static (unchanging) and dynamic objects. For example:

    • Static objects : These remain the same in every generated image (e.g. a company logo).
    • Dynamic objects : These change based on data you provide (e.g. text, images, or shapes).

    By passing different data to the API, you can alter the values of the dynamic objects and create unique content based on a single template. Now that you have a basic understanding of Bannerbear, let’s get started!

    Creating an OpenAI API Key

    OpenAI offers Images API for generating or manipulating images with the DALL·E model. To use the API, you’ll need an OpenAI account with credits. After logging in, create a new secret key from the “API keys” tab:

    Give the new secret key a name and follow the instructions on the screen to continue:

    OpenAI API - create new secret key.png

    After the new secret key has been created, save it somewhere safe. We will need it in our code later to call the API to generate images using DALL·E.

    OpenAI API - create secret key.png

    Creating a Bannerbear Project

    First, sign up for an account and create a new project in your account. Then, duplicate the template below to your project:

    Bannerbear Image with Title and Author Name Template template

    The template contains dynamic objects like title, author_name, and image_container. The values of these objects can be changed when making an API call to Bannerbear to add text to the AI-generate image.

    a screenshot of Bannerbear design template.png

    Next, get the project API key and template ID. We will need them in our code to access the project and template.

    Bannerbear sample design template - API Key.png Bannerbear sample design template - template ID.png

    Generating AI Images and Adding Text to Them

    To automate the process, we will create a Node.js project for calling the APIs. Create a new Node.js project by running npm init in your project directory. Then, create a file named index.js for writing the code.

    Step 1. Install and Import the OpenAI and Bannerbear Libraries

    In the terminal/command prompt, run the command below in your project directory to install the OpenAI and Bannerbear libraries:

    npm install openai bannerbear
    

    In index.js, import the libraries and declare the API keys and template ID as constants:

    const { Bannerbear } = require('bannerbear');
    const OpenAI = require('openai');
    
    const OPENAI_API_KEY = 'your_openai_api_key';
    const BB_API_KEY = 'your_bannerbear_api_key';
    const BB_TEMPLATE_ID = 'your_template_id';
    

    Then, create a self-invoking function for containing the code in the following steps:

    (async () => {
      // Generate AI images
    
      // Add text to the images
    })()
    

    Step 2. Generate Images with OpenAI API

    Create a new instance of OpenAI with your API key. Then, call the images.generate() method with options such as prompt, size, and n to generate images using the DALL·E model:

    // Generate AI images
    const openai = new OpenAI({ apiKey: OPENAI_API_KEY });
    const image = await openai.images.generate({
      model: "dall-e-3",
      prompt: 'A cup of latte with a Rosetta',
      size: '1792x1024',
      n: 1,
    });
    

    If you’re using  DALL·E 2, you can generate images in the size of 256x256, 512x512, or 1024x1024 pixels and request up to 10 images in a single call (as specified in the n parameter).

    If you’re using DALL·E 3, you can generate images in the size of 1024x1024, 1024x1792, or 1792x1024 pixels, but only request 1 image at a time.

    The code above should return an object containing a revised prompt and the URL of the AI-generated image:

    Dall-E 3 response.png

    Step 3. Add Text with Bannerbear

    Create a new instance of Bannerbear using your API key. Then, call the create_image() method with the modifications array containing the image URL and the text to be added to the image (e.g. title, author name):

    // Add text to the images
      const bb = new Bannerbear(BB_API_KEY);
      const aiImageUrl = image.data[0].url;
      const finalImage = await bb.create_image(
        BB_TEMPLATE_ID,
        {
          modifications: [
            {
              name: 'title',
              text: 'How to Pull a Latte Art',
            },
            {
              name: 'author_name',
              text: 'James H.',
            },
            {
              name: 'image_container',
              image_url: aiImageUrl,
            },
          ],
        },
        true
      );
    
      console.log(finalImage);
    

    You can modify the code to automatically retrieve text from a source. However, for this tutorial, we’ll stick with some hard-coded values to keep things simple. 😃

    When you run node index.js in the terminal/command line to execute the file, it will generate AI images based on the prompt and add text to them automatically. Here’s the result from the code above:

    2671f3bc3308f355a3f2fe6d05807a0600f774a0 (1).png

    Besides calling the API in your code, you can also do it using a Simple or Signed URL. For more information, refer to this guide:
    A Basic Guide to Simple and Signed URLs for Image Generation.

    Conclusion

    While creating images with text on them using AI remains a challenge, you can utilize tools like Bannerbear to overcome the limitation. If you haven’t already, sign up for a Bannerbear account, it’s free to start!

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    How to Automatically Transcribe Audio Like a Pro using AI Tools and APIs

    In this article, we will guide you on how to transcribe audio, and list several tools for doing it automatically, such as Amazon Transcribe, Google Cloud Speech-to-Text, Whisper by OpenAI, Azure AI Speech, and AssemblyAI.

    What To Know About Zapier’s New Chatbots Feature

    Chatbots play a significant role in modern business communication. Thanks to AI and other technological developments, they are easier and cheaper than ever to add into your workflow—even if you can't code. Here's what to know about Zapier's new AI-powered Chatbots product.

    How to Auto-Generate Subtitles/Closed Captions for Tiktok & Instagram

    In this article, we will walk you through the steps of using Bannerbear’s API to automatically generate and add closed captions to videos. This helps you to add an auto-captioning feature for videos to your video editing application easily.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Add Accurate Text to AI Images Using Bannerbear
    How to Add Accurate Text to AI Images Using Bannerbear