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 🙂

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay