DALLE w/ Next.JS

Disclaimer

This is from my experience in many personal projects and use in production software.

Although this API can be used in many different languages most notably Python, we will be covering its implementation with node.js and tRPC. The tRPC implementation will be using the T3 stack(https://create.t3.gg/en/introduction) which eliminates much of the boilerplate and configuration you would have to do otherwise.

For more details see the official docs:

tRPC | tRPC

OpenAI Platform

What is the OpenAI API?

The OpenAI API is an interface that allows developers to leverage the power of artificial intelligence models developed by OpenAI, such as GPT-4, Dalle, Whisper, and Moderation.

Developers primarily use the OpenAI API for natural language understanding and generation tasks. This can include generating creative content, drafting emails or other types of documents, creating conversational agents, translating languages, simulating characters for video games, tutoring in a variety of subjects, and even creating images which we will be exploring today.

To use the API, developers send a series of prompts to the API, and it returns a generated text or image response. Developers can customize the response through various parameters like the model’s temperature (which influences randomness), max tokens (which limits response length), and top_p (which can influence diversity of response).

How to use Dall-e?

Dalle is the model that can generate and alter images using a natural language prompt. This can be leveraged to create a User Interface that is very easy to use and can be very precise if precise language is used. In this implementation we will be using Node.JS due to its popularity and simplicity for explanation, after showing the Node.JS code, I will show more advanced use in tRPC.

This is a great video to reference for the node.js implementation

Configuration

To get started we will create a new node.js app to build off of:

npm init -y

Open this in your IDE of choice and create your main JavaScript file, create.js

npm install openai

• This package allows us to easily integrate the OpenAI API

Generate API key

1. Go to https://openai.com/
2. create an OpenAI account
3. Go to the Account
4. View API keys
5. Generate Secret key

• This will be given with the prompt to get access to the API
• I was not able to get access to the api due to me not having any credits in my account, this may be different if you are given any free credits.

Development

We can first grab the sample from here

OpenAI Platform

const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
  apiKey: 'YOUR_API_KEY',
});
const openai = new OpenAIApi(configuration);
const response = await openai.createImage({
  prompt: "A cute baby sea otter",
  n: 2,
  size: "1024x1024",
});
console.log(response)

This is the basic code that OpenAI provides on their website and is their recommended way to interact with their API

It is configuring you API key and adding all options/parameters in a request to the API. All of these options can be gathered dynamically with a user interface for production applications.

This code will give you an error if you just place it in create.js and run it with

node create.js

To actually run this code we must the executable code inside of a non-blocking async function. We should also build in some error handling with a try-catch block.

const { Configuration, OpenAIApi } = require('openai');

async function main() {
  const configuration = new Configuration({
    apiKey: 'YOUR_API_KEY',
  });

  const openai = new OpenAIApi(configuration);

  try {
    const response = await openai.createImage({
      prompt: "A cute baby sea otter",
      n: 2,
      size: "1024x1024",
    });

    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

main();

This code works but it is not yet production ready, the API key must be hidden within a .env file. This is to protect it from being compromised when a request is made.

.env

1. create a file called .env in the root directory
2. npm install dotenv
3. require dotenv at the top to import your api key

require('dotenv').config();
const { Configuration, OpenAIApi } = require('openai');

async function main() {
  const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
  });

  const openai = new OpenAIApi(configuration);

  try {
    const response = await openai.createImage({
      prompt: "A cute baby sea otter",
      n: 2,
      size: "1024x1024",
    });

    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

main();

This is now a server that can receive requests from the Dall-E API and can be deployed safely. To further protect yourself from exploitation it is best to add a rate limit either on the API or it can be manually set in your OpenAI account.

This is a simplistic implementation of the Dall-E API that can be used as a reference for use in different tools such as tRPC. I will be following this post up with a more advanced implementation of this API in one of my production applications.

Connect with me at:

LinkedIn:

https://www.linkedin.com/in/austin-hood7/

GitHub:

https://github.com/AustinHood7