Skip to content

Latest commit

 

History

History
119 lines (82 loc) · 5.21 KB

dall-e-javascript.md

File metadata and controls

119 lines (82 loc) · 5.21 KB
Raw
title titleSuffix description manager ms.service ms.topic author ms.author ms.date
Quickstart: Use Azure OpenAI Service with the JavaScript SDK to generate images
Azure OpenAI
Walkthrough on how to get started with Azure OpenAI and make your first image generation call with the JavaScript SDK.
nitinme
azure-ai-openai
include
PatrickFarley
pafarley
08/24/2023

Use this guide to get started generating images with the Azure OpenAI SDK for JavaScript.

Library source code | Package (npm) | Samples

Prerequisites

Note

Currently, you must submit an application to access Azure OpenAI Service. To apply for access, complete this form. If you need assistance, open an issue on this repo to contact Microsoft.

Setup

[!INCLUDE get-key-endpoint]

[!INCLUDE environment-variables]

Create a Node application

In a console window (such as cmd, PowerShell, or Bash), create a new directory for your app, and navigate to it. Then run the npm init command to create a node application with a package.json file.

npm init

Install the client library

Install the Azure OpenAI client library for JavaScript with npm:

npm install @azure/openai

Your app's package.json file will be updated with the dependencies.

Generate images with DALL-E

Create a new file named ImageGeneration.js and open it in your preferred code editor. Copy the following code into the ImageGeneration.js file:

const { OpenAIClient, AzureKeyCredential } = require("@azure/openai");

// You will need to set these environment variables or edit the following values
const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] ;
const azureApiKey = process.env["AZURE_OPENAI_API_KEY"] ;

// The prompt to generate images from
const prompt = "a monkey eating a banana";
const size = "256x256";

// The number of images to generate
const n = 2;

async function main() {
    console.log("== Batch Image Generation ==");
  
    const client = new OpenAIClient(endpoint, new AzureKeyCredential(azureApiKey));
    const deploymentName = "dall-e";
    const results = await client.getImages(deploymentName, prompt, { n, size });
  
    for (const image of results.data) {
      console.log(`Image generation result URL: ${image.url}`);
    }
    //console.log(`Image generation result URL: ${results.result.status}`);
}

main().catch((err) => {
console.error("The sample encountered an error:", err);
});

Run the script with the following command:

node _ImageGeneration.js

Output

The URL of the generated image is printed to the console.

== Batch Image Generation ==
Image generation result URL: https://dalleproduse.blob.core.windows.net/private/images/5e7536a9-a0b5-4260-8769-2d54106f2913/generated_00.png?se=2023-08-29T19%3A12%3A57Z&sig=655GkWajOZ9ALjFykZF%2FBMZRPQALRhf4UPDImWCQoGI%3D&ske=2023-09-02T18%3A53%3A23Z&skoid=09ba021e-c417-441c-b203-c81e5dcd7b7f&sks=b&skt=2023-08-26T18%3A53%3A23Z&sktid=33e01921-4d64-4f8c-a055-5bdaffd5e33d&skv=2020-10-02&sp=r&spr=https&sr=b&sv=2020-10-02
Image generation result URL: https://dalleproduse.blob.core.windows.net/private/images/5e7536a9-a0b5-4260-8769-2d54106f2913/generated_01.png?se=2023-08-29T19%3A12%3A57Z&sig=B24ymPLSZ3HfG23uojOD9VlRFGxjvgcNmvFo4yPUbEc%3D&ske=2023-09-02T18%3A53%3A23Z&skoid=09ba021e-c417-441c-b203-c81e5dcd7b7f&sks=b&skt=2023-08-26T18%3A53%3A23Z&sktid=33e01921-4d64-4f8c-a055-5bdaffd5e33d&skv=2020-10-02&sp=r&spr=https&sr=b&sv=2020-10-02

Note

The image generation APIs come with a content moderation filter. If the service recognizes your prompt as harmful content, it won't return a generated image. For more information, see the content filter article.

Clean up resources

If you want to clean up and remove an Azure OpenAI resource, you can delete the resource. Before deleting the resource, you must first delete any deployed models.

Next steps