How to Auto-Generate Unique Gift Cards with Open AI and Bannerbear (Node.js)

By utilizing different APIs, you can automate the design and creation of gift cards effortlessly. Let's learn how to automatically generate batches of unique cards using OpenAI API and Bannerbear.
by Josephine Loo ·

Contents

    Choosing the right gifts has been a hard decision for many people—especially when you’re unsure about the recipient’s preference. This is a big part of why people send gift cards instead of purchasing specific items. Gift cards allow the recipient to choose exactly what they want, ensuring they get something they will truly enjoy.

    The e-gift card market is projected to be worth $724.3 billion by 2028, at a market growth of 14.2% compound annual growth rate. Not only they are more environmentally friendly than physical gift cards, but they are also more convenient as they can be instantly sent via email. Besides that, the sender can also easily personalize it with a heartfelt message, adding a personal touch to the gift!

    However, most gift cards in the market lack uniqueness, and creating unique designs can be time-consuming and expensive. Fortunately, with the help of OpenAI and Bannerbear, designing and creating unique gift cards is now easier than ever. Without using any graphic design skills, batches of unique gift cards can be created in one go, like some examples below:

    Gift card generated using OpenAI and Bannerbear - 1.png Gift card generated using OpenAI and Bannerbear - 2.png Gift card generated using OpenAI and Bannerbear - 3.png

    … and best of all, the process is automated.

    What is Bannerbear

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

    The images and other media files are created based on a template where you can add static and dynamic objects such as images, text, and shapes. By passing different data to the API, the values of these dynamic objects can be altered to generate unique content.

    All API requests on Bannerbear are scoped to a project and you can create multiple design templates in the same one. After creating the design templates, you can access them using the project API key and template IDs.

    Now that you have a little bit of an idea of what Bannerbear does, 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 need to have an OpenAI account with credits. After logging in, create a new secret key from the “API keys” tab:

    generating a new OpenAI API key.png

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

    giving a name for the new OpenAI API key.png

    After the new secret key has been created, save it somewhere safe. We will need it in the code later.

    OpenAI API secret key.png

    Creating a Bannerbear Project

    We need a Bannerbear account to make a template for automatically producing gift cards using images generated by OpenAI. A QR code that points to a unique redemption link will also be generated and added to each gift card.

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

    Bannerbear Gift Card Square template

    The template contains dynamic image objects like text_amount, qr_code, image_container, etc. You can change their values by specifying them in the request body when making an API call to Bannerbear to trigger the gift card generation process.

    Bannerbear gift card 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 gift card template - API key.png Bannerbear gift card template - template ID.png

    Generating Gift Cards with OpenAI DALL·E and Bannerbear

    After getting OpenAI and Bannerbear's API keys and template ID, we can use the APIs in our code to generate AI images and pass them to the Bannerbear template to produce unique gift cards automatically.

    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
    
      // Generate gift cards
    })()
    

    Step 2. Generate Images with OpenAI API

    Create a new instance of OpenAI with its 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({
        prompt: 'A cat wearing sunglasses, in the style of vintage art deco poster',
        size: '512x512',
        n: 10
    });
    

    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). When n is omitted, only one image will be generated.

    The method should return an array containing the image URLs:

    [
      {
        url: url_one,
      },
      { 
        url: url_two 
      },
      { 
        url: url_three 
      },
      ...
    ]
    

    🐻 Bear Tips: Not sure how to create prompts that generate desired results? You can refer to this DALL·E Prompt Book.

    Step 3. Generate Gift Cards with Bannerbear

    We can now pass the images to the Bannerbear template to produce gift cards with QR codes on them automatically. Create a new instance of Bannerbear using the API key. For each of the images, the create_image() method will be called with the modifications array which contains the image URL and QR code's target URL:

    // Generate gift cards
    const bb = new Bannerbear(BB_API_KEY);
    
    image.data.forEach(async (data) => {
      const aiImageUrl = data.url;
      const images = await bb.create_image(
        BB_TEMPLATE_ID,
        {
          modifications: [
            {
              name: 'qr_code',
              target: 'https://www.bannerbear.com', // replace with a unique link for each gift card
            },
            {
              name: 'image_container',
              image_url: aiImageUrl,
            },
          ],
        },
        true
      );
    
      console.log(images);
    });
    

    You should replace the QR code target URL with a unique redemption link for every gift card. Bannerbear will automatically generate a QR code that points to the URL.

    You can also replace the QR code with a bar code:

    Bannerbear gift card template - barcode.png

    When you're using a bar code, specify a unique code ( 123456789 ) instead of a target URL:

    modifications: [
        {
            name: 'bar_code',
            bar_code_data: 123456789 // replace with a unique code for each gift card
        },
        {
            name: 'image_container',
            image_url: aiImageUrl,
        }
    ]
    

    When you execute the index.js file, it will automatically create gift cards with images generated by OpenAI. Here are more results from the prompt "A cat wearing sunglasses, in the style of vintage art deco poster":

    Gift card generated using OpenAI and Bannerbear - 4.png Gift card generated using OpenAI and Bannerbear - 5.png Gift card generated using OpenAI and Bannerbear - 6.png

    🐻 View the full code on GitHub.

    What’s Next

    You can modify the project to allow users to add personalized messages to the gift cards, or even let them enter their prompts for customizing the gift card designs! This can create a more personalized experience.  

    Using OpenAI and Bannerbear APIs, you can easily generate gift cards with different designs automatically. If you would like to create other images such as mockups, banners, and OG images automatically, check out the tutorials below:

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

    Integrating Bannerbear Into Your Web Applications

    Bannerbear is an API that helps you automatically generate custom images, videos, and more from templates. In this article, we’ll explore how you can integrate Bannerbear into your web applications.

    5-Minute Crash Course to Facebook Single Image Ads (A 2024 Guide)

    Facebook single image ads can help both B2B and B2C brands reach and engage a diverse audience. Read our guide to learn what you need to know about this ad type.

    FFmpeg Video Editing Essentials: Trimming, Merging, Subtitling, and More!

    As an open-source tool, FFmpeg provides a wide array of functions for handling media files. Let's learn how to use FFmpeg to edit videos programmatically, including trimming, merging, adding subtitles, etc.

    Automate & Scale
    Your Marketing

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

    How to Auto-Generate Unique Gift Cards with Open AI and Bannerbear (Node.js)
    How to Auto-Generate Unique Gift Cards with Open AI and Bannerbear (Node.js)