DEV Community

Cover image for How generate images with Azure DALL·E 2 in JavaScript
Stefan Stöhr
Stefan Stöhr

Posted on

How generate images with Azure DALL·E 2 in JavaScript

If you're a JavaScript developer, eager to access a DALL·E 2 instance on Microsoft Azure, here's a brief workaround until the official OpenAI Node Library supports this.

I figured out the urls by reverse engineering the DALL·E playground (Preview) in the Azure AI Studio.

This is definitely not a proper solution 😅, but it should give you an idea how to do it.

import { setTimeout as sleep } from "node:timers/promises";

const baseUrl = "https://{YOUR-AZURE-INSTANCE-NAME}.openai.azure.com/openai";

const headers = {
  "API-Key": "AZURE_OPENAI_API_KEY",
  "Content-Type": "application/json",
};

const requestBody = {
  prompt: "your dall-e 2 prompt",
  size: "512x512",
  n: 1,
};

const response = await fetch(
  `${baseUrl}/images/generations:submit?api-version=2023-06-01-preview`,
  {
    method: "POST",
    headers,
    body: JSON.stringify(requestBody),
  }
);

// returns { "id": "xxx", "status": "notRunning" }
const initJob = await response.json();

const jobId = initJob?.id;

/**
 * the image generation may take a while, 
 * so you need to ask the api for a status in intervals.
 * In this case I try it 5 times before giving up
 */
for (let i = 0; i < 5; i++) {
  // Wait 1.5 seconds after a request
  await sleep(1500);

  const response = await fetch(
    `${baseUrl}/operations/images/${jobId}?api-version=2023-06-01-preview`,
    {
      method: "GET",
      headers,
    }
  );

  /**
   * either returns
   * { "created": 1234567, "id": "x-x-x-x-x", "status": "running" }
   * 
   * or
   * 
   * { "created": 1234567, "expires": 7654321, "id": "x-x-x-x-x", "status": "succeeded"
        "result": { "created": 1234567,
            "data": [
                {
                    "url": "https://pathtotheimage"
                }
            ]
      }}
   */
  const job = await response.json();

  if (job.status === "succeeded") {
    console.info("DALL-E 2 image", job?.result?.data[0]);

    // exit the for-loop early since we have what we wanted
    break;
  }
}
Enter fullscreen mode Exit fullscreen mode

And that's it - hope this helps 🙂

Top comments (0)