|
| 1 | +--- |
| 2 | +title: 'Quickstart: Use Azure OpenAI Service with the JavaScript SDK to generate images' |
| 3 | +titleSuffix: Azure OpenAI |
| 4 | +description: Walkthrough on how to get started with Azure OpenAI and make your first image generation call with the JavaScript SDK. |
| 5 | +#services: cognitive-services |
| 6 | +manager: nitinme |
| 7 | +ms.service: azure-ai-openai |
| 8 | +ms.topic: include |
| 9 | +author: PatrickFarley |
| 10 | +ms.author: pafarley |
| 11 | +ms.date: 10/23/2024 |
| 12 | +--- |
| 13 | + |
| 14 | +Use this guide to get started generating images with the Azure OpenAI SDK for JavaScript. |
| 15 | + |
| 16 | +[Reference documentation](https://platform.openai.com/docs/api-reference/images/create) | [Source code](https://github.com/openai/openai-node) | [Package (npm)](https://www.npmjs.com/package/openai) | [Samples](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples) |
| 17 | + |
| 18 | +## Prerequisites |
| 19 | + |
| 20 | + |
| 21 | +- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true) |
| 22 | +- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule) |
| 23 | +- [TypeScript](https://www.typescriptlang.org/download/) |
| 24 | +- [Azure CLI](/cli/azure/install-azure-cli) used for passwordless authentication in a local development environment, create the necessary context by signing in with the Azure CLI. |
| 25 | +- An Azure OpenAI resource created in a supported region (see [Region availability](/azure/ai-services/openai/concepts/models#model-summary-table-and-region-availability)). For more information, see [Create a resource and deploy a model with Azure OpenAI](../how-to/create-resource.md). |
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | +## Setup |
| 30 | + |
| 31 | +[!INCLUDE [get-key-endpoint](get-key-endpoint.md)] |
| 32 | + |
| 33 | +[!INCLUDE [environment-variables](environment-variables.md)] |
| 34 | + |
| 35 | + |
| 36 | +## Create a Node application |
| 37 | + |
| 38 | +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. |
| 39 | + |
| 40 | +```console |
| 41 | +npm init |
| 42 | +``` |
| 43 | + |
| 44 | +## Install the client library |
| 45 | + |
| 46 | +Install the client libraries with: |
| 47 | + |
| 48 | +```console |
| 49 | +npm install openai @azure/identity |
| 50 | +``` |
| 51 | + |
| 52 | +Your app's _package.json_ file will be updated with the dependencies. |
| 53 | + |
| 54 | +## Generate images with DALL-E |
| 55 | + |
| 56 | +Create a new file named _ImageGeneration.ts_ and open it in your preferred code editor. Copy the following code into the _ImageGeneration.ts_ file: |
| 57 | + |
| 58 | +#### [Microsoft Entra ID](#tab/typescript-keyless) |
| 59 | + |
| 60 | +```typescript |
| 61 | +import { AzureOpenAI } from "openai"; |
| 62 | +import { |
| 63 | + DefaultAzureCredential, |
| 64 | + getBearerTokenProvider |
| 65 | +} from "@azure/identity"; |
| 66 | + |
| 67 | +// You will need to set these environment variables or edit the following values |
| 68 | +const endpoint = process.env["AZURE_OPENAI_ENDPOINT"]; |
| 69 | + |
| 70 | +// Required Azure OpenAI deployment name and API version |
| 71 | +const apiVersion = "2024-07-01"; |
| 72 | +const deploymentName = "dall-e-3"; |
| 73 | + |
| 74 | +// keyless authentication |
| 75 | +const credential = new DefaultAzureCredential(); |
| 76 | +const scope = "https://cognitiveservices.azure.com/.default"; |
| 77 | +const azureADTokenProvider = getBearerTokenProvider(credential, scope); |
| 78 | + |
| 79 | +function getClient(): AzureOpenAI { |
| 80 | + return new AzureOpenAI({ |
| 81 | + endpoint, |
| 82 | + azureADTokenProvider, |
| 83 | + apiVersion, |
| 84 | + deployment: deploymentName, |
| 85 | + }); |
| 86 | +} |
| 87 | +async function main() { |
| 88 | + console.log("== Image Generation =="); |
| 89 | + |
| 90 | + const client = getClient(); |
| 91 | + |
| 92 | + const results = await client.images.generate({ |
| 93 | + prompt, |
| 94 | + size: "1024x1024", |
| 95 | + n: numberOfImagesToGenerate, |
| 96 | + model: "", |
| 97 | + style: "vivid", // or "natural" |
| 98 | + }); |
| 99 | + |
| 100 | + for (const image of results.data) { |
| 101 | + console.log(`Image generation result URL: ${image.url}`); |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +main().catch((err) => { |
| 106 | + console.error("The sample encountered an error:", err); |
| 107 | +}); |
| 108 | +``` |
| 109 | + |
| 110 | +1. Build the application with the following command: |
| 111 | + |
| 112 | + ```console |
| 113 | + tsc |
| 114 | + ``` |
| 115 | + |
| 116 | +1. Run the application with the following command: |
| 117 | + |
| 118 | + ```console |
| 119 | + node ImageGeneration.js |
| 120 | + ``` |
| 121 | + |
| 122 | +#### [API key](#tab/typescript-key) |
| 123 | + |
| 124 | +```typescript |
| 125 | +import { AzureOpenAI } from "openai"; |
| 126 | + |
| 127 | +// You will need to set these environment variables or edit the following values |
| 128 | +const endpoint = process.env["AZURE_OPENAI_ENDPOINT"]; |
| 129 | +const apiKey = process.env["AZURE_OPENAI_API_KEY"]; |
| 130 | + |
| 131 | +// Required Azure OpenAI deployment name and API version |
| 132 | +const apiVersion = "2024-07-01"; |
| 133 | +const deploymentName = "dall-e-3"; |
| 134 | + |
| 135 | +// The prompt to generate images from |
| 136 | +const prompt = "a monkey eating a banana"; |
| 137 | +const numberOfImagesToGenerate = 1; |
| 138 | + |
| 139 | +function getClient(): AzureOpenAI { |
| 140 | + return new AzureOpenAI({ |
| 141 | + endpoint, |
| 142 | + apiKey, |
| 143 | + apiVersion, |
| 144 | + deployment: deploymentName, |
| 145 | + }); |
| 146 | +} |
| 147 | +async function main() { |
| 148 | + console.log("== Image Generation =="); |
| 149 | + |
| 150 | + const client = getClient(); |
| 151 | + |
| 152 | + const results = await client.images.generate({ |
| 153 | + prompt, |
| 154 | + size: "1024x1024", |
| 155 | + n: numberOfImagesToGenerate, |
| 156 | + model: "", |
| 157 | + style: "vivid", // or "natural" |
| 158 | + }); |
| 159 | + |
| 160 | + for (const image of results.data) { |
| 161 | + console.log(`Image generation result URL: ${image.url}`); |
| 162 | + } |
| 163 | +} |
| 164 | + |
| 165 | +main().catch((err) => { |
| 166 | + console.error("The sample encountered an error:", err); |
| 167 | +}); |
| 168 | +``` |
| 169 | + |
| 170 | +1. Build the application with the following command: |
| 171 | + |
| 172 | + ```console |
| 173 | + tsc |
| 174 | + ``` |
| 175 | + |
| 176 | +1. Run the application with the following command: |
| 177 | + |
| 178 | + ```console |
| 179 | + node ImageGeneration.js |
| 180 | + ``` |
| 181 | + |
| 182 | +--- |
| 183 | + |
| 184 | +## Output |
| 185 | + |
| 186 | +The URL of the generated image is printed to the console. |
| 187 | + |
| 188 | +```console |
| 189 | +== Batch Image Generation == |
| 190 | +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 |
| 191 | +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 |
| 192 | +``` |
| 193 | + |
| 194 | +> [!NOTE] |
| 195 | +> 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](../concepts/content-filter.md) article. |
| 196 | +
|
| 197 | +## Clean up resources |
| 198 | + |
| 199 | +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. |
| 200 | + |
| 201 | +- [Azure portal](../../multi-service-resource.md?pivots=azportal#clean-up-resources) |
| 202 | +- [Azure CLI](../../multi-service-resource.md?pivots=azcli#clean-up-resources) |
| 203 | + |
| 204 | +## Next steps |
| 205 | + |
| 206 | +* Explore the image generation APIs in more depth with the [DALL-E how-to guide](../how-to/dall-e.md). |
| 207 | +* For more examples check out the [Azure OpenAI Samples GitHub repository](https://github.com/Azure/openai-samples). |
0 commit comments