NODEJS SERIES

Image Generation using OpenAI API with NodeJs

Published in

Globant

5 min readApr 10, 2023

As part of this article, we will use the OpenAI API to generate an image or piece of art from a natural language description. In response to a text prompt, we create new images using DALL-E models. You may also test this using the OpenAI Labs Interface.

OpenAI

OpenAI is an AI (Artificial Intelligence) research business created in 2015 by Sam Altman and Elon Musk. OpenAI’s mission is to ensure that artificial intelligence benefits all of humanity. Almost any operation that requires reading or producing natural language, code, or graphics can do with the OpenAI API. Competent modern language models that can comprehend and create text are available from OpenAI. Developers use these models in linguistic activities. Content creation to semantic search and classification might use these models. OpenAI makes use of the Moderation API. It helps to display illegal or unsafe information while violating the content policy.

OpenAI Models

The OpenAI API provides a wide range of models with various features and price ranges. The original base models can also be fine-tuned for your particular use case. Below are some OpenAI models:

GPT-3 & GPT-4: comprehend and produce code or plain language.
DALL-E: generate and alter images in response to a natural language query.
Whisper: convert audio into text.
Moderation: detect sensitive or unsafe texts.

More details are available in the official OpenAI Models documentation.

Set up an OpenAI Account

Create an account on OpenAI before delving deeper into the code. You could discover a View API keys option under your profile after logging in.

To use the OpenAI APIs, generate a new secret key.

Copy the newly generated secret key.

NodeJs Server Configuration

Now let’s start the NodeJs server with the image generation API. The steps are listed below.

Create a package.json file by running the command npm init -y .
Install the dependencies required to set up the server such as express, body-parser, dotenv, and cors.

npm i --save express body-parser dotenv cors

3. Install openai dependency to use OpenAI APIs.

npm i --save openai

4. Create a .env file that contains the environment variable OPENAI_API_KEY.

OPENAI_API_KEY = "openai API key"

5. Start the server with OpenAI configuration.

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const { Configuration, OpenAIApi } = require("openai");

const app = express();
const { OPENAI_API_KEY } = process.env;

const configuration = new Configuration({
  apiKey: OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

app.use(bodyParser.json());
app.use(cors());

app.listen(8080, () => {
  console.log("server started");
});

6. Add a POST endpoint /create to generate the image.

app.post("/create", async (req, res) => {
  const { prompt } = req.body;
  try {
    const response = await openai.createImage({
      prompt,
      n: 1,
      size: "512x512",
    });
    res.send(response.data.data[0].url);
  } catch (err) {
    res.send(err.message);
  }
});

The above POST method takes a prompt in its req.body. Here, a prompt is simply a description of the image to create. We can generate several images between 1 and 10, specified by the parameter n. Image size we can set to either 256x256 or 512x512, or 1024x1024 pixels. Smaller sizes can be generated more quickly. The more specific the description, the more likely you are to receive the desired outcome.

User Interface in ReactJs

Now, we can set up our User Interface using ReactJs. The steps are listed below.

Create a React Application using the below command:

npx create-react-app app_name

2. In the App.js file, render an input text box to enter the user prompts and a button to invoke the API with the given prompt.

import { useState } from "react";

import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");

  const handleChange = (e) => {
    setPrompt(e.target.value);
  };

  return (
    <div className="container-fluid">
      <div className="form">
        <h1>Create Your Art!</h1>
        <input
          type="text"
          onChange={handleChange}
          placeholder="Enter your image description"
        />
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </div>
    </div>
  );
}

export default App;

The user interface appears as follows:

3. On button submission, use axios to invoke the image-generating API.

import { useState } from "react";
import axios from "axios";

import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");
  const [imageURL, setImage] = useState("");

  const createImg = async () => {
    const response = await axios.post("http://localhost:8080/create", {
      prompt,
    });
    setImage(response.data);
  };

  const handleChange = (e) => {
    setPrompt(e.target.value);
  };

  return (
    <div className="container-fluid">
      <div className="form">
        <h1>Create Your Art!</h1>
        <input
          type="text"
          onChange={handleChange}
          placeholder="Enter your image description"
        />
        <button type="submit" className="btn btn-primary" onClick={createImg}>
          Submit
        </button>
        {imageURL && <img src={imageURL} alt="prompt" />}
      </div>
    </div>
  );
}

export default App;

Test Snapshots

Let’s test our application with some examples to see the magic of AI. Here are some intriguing test snapshots.

Summary

Thus far, we’ve shown how NodeJs and React use the OpenAI API to generate images. The image API also provides the ability to change an existing image in response to new text input and to make changes to an existing image. In this article, we only covered one application of the OpenAI API: image generation. Other options OpenAI offers are text completion, chat completion, speech-to-text conversion, and others. Visit the OpenAI page to learn more and to immerse yourself in the magic of AI.