Skip to content

Commit

Permalink
Merge pull request #281 from MicrosoftDocs/main
Browse files Browse the repository at this point in the history
9/13/2024 PM Publish
  • Loading branch information
Taojunshen authored Sep 13, 2024
2 parents 4205142 + 3625916 commit 804ee13
Show file tree
Hide file tree
Showing 24 changed files with 814 additions and 107 deletions.
4 changes: 2 additions & 2 deletions articles/ai-services/openai/dall-e-quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ description: Learn how to get started generating images with Azure OpenAI Servic
#services: cognitive-services
manager: nitinme
ms.service: azure-ai-openai
ms.custom: devx-track-python, devx-track-dotnet, devx-track-extended-java, devx-track-go, devx-track-js
ms.custom: devx-track-python, devx-track-dotnet, devx-track-extended-java, devx-track-go, devx-track-js, devx-track-ts
ms.topic: quickstart
author: PatrickFarley
ms.author: pafarley
ms.date: 08/21/2024
ms.date: 09/06/2024
zone_pivot_groups: openai-quickstart-dall-e
---

Expand Down
8 changes: 7 additions & 1 deletion articles/ai-services/openai/gpt-v-quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Use this article to get started using Azure OpenAI to deploy and us
services: cognitive-services
manager: nitinme
ms.service: azure-ai-openai
ms.custom: devx-track-python
ms.custom: devx-track-python, devx-track-js, devx-track-ts
ms.topic: quickstart
author: PatrickFarley
ms.author: pafarley
Expand Down Expand Up @@ -39,6 +39,12 @@ Get started using GPT-4 Turbo with images with the Azure OpenAI Service.

::: zone-end

::: zone pivot="programming-language-javascript"

[!INCLUDE [JavaScript quickstart](includes/gpt-v-javascript.md)]

::: zone-end

## Next steps

* Learn more about these APIs in the [GPT-4 Turbo with Vision how-to guide](./gpt-v-quickstart.md)
Expand Down
137 changes: 114 additions & 23 deletions articles/ai-services/openai/includes/dall-e-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,30 @@ ms.service: azure-ai-openai
ms.topic: include
author: PatrickFarley
ms.author: pafarley
ms.date: 08/24/2023
ms.date: 09/06/2024
---

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

[Library source code](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai) | [Package (npm)](https://www.npmjs.com/package/@azure/openai) | [Samples](https://github.com/Azure/azure-sdk-for-net/blob/main/sdk/openai/Azure.AI.OpenAI/tests/Samples)
[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)

## Prerequisites

#### [TypeScript](#tab/typescript)

- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
- [TypeScript](https://www.typescriptlang.org/download/)
- 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).


#### [JavaScript](#tab/javascript)

- An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
- [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
- 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).

---

## Setup

Expand All @@ -39,10 +50,10 @@ npm init

## Install the client library

Install the Azure OpenAI client library for JavaScript with npm:
Install the client libraries with:

```console
npm install @azure/openai
npm install openai @azure/identity
```

Your app's _package.json_ file will be updated with the dependencies.
Expand All @@ -51,43 +62,123 @@ Your app's _package.json_ file will be updated with the dependencies.

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

```javascript
const { OpenAIClient, AzureKeyCredential } = require("@azure/openai");
#### [TypeScript](#tab/typescript)

```typescript
import "dotenv/config";
import { AzureOpenAI } from "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"] ;
const endpoint = process.env["AZURE_OPENAI_ENDPOINT"];
const apiKey = process.env["AZURE_OPENAI_API_KEY"];

// Required Azure OpenAI deployment name and API version
const apiVersion = "2024-07-01";
const deploymentName = "dall-e-3";

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

function getClient(): AzureOpenAI {
return new AzureOpenAI({
endpoint,
apiKey,
apiVersion,
deployment: deploymentName,
});
}
async function main() {
console.log("== Image Generation ==");

const client = getClient();

const results = await client.images.generate({
prompt,
size: "1024x1024",
n: numberOfImagesToGenerate,
model: "",
style: "vivid", // or "natural"
});

for (const image of results.data) {
console.log(`Image generation result URL: ${image.url}`);
}
}

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

1. Build the application with the following command:

```console
tsc
```

1. Run the application with the following command:

// The number of images to generate
const n = 2;
```console
node ImageGeneration.js
```


#### [JavaScript](#tab/javascript)

```javascript
require("dotenv/config");
const { AzureOpenAI } = require("openai");

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

// Required Azure OpenAI deployment name and API version
const apiVersion = "2024-07-01";
const deploymentName = "dall-e-3";

// The prompt to generate images from
const prompt = "a monkey eating a banana";
const numberOfImagesToGenerate = 1;

function getClient() {
return new AzureOpenAI({
endpoint,
apiKey,
apiVersion,
deployment: deploymentName,
});
}
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}`);
console.log("== Image Generation ==");

const client = getClient();

const results = await client.images.generate({
prompt,
size: "1024x1024",
n: numberOfImagesToGenerate,
model: "",
style: "vivid", // or "natural"
});

for (const image of results.data) {
console.log(`Image generation result URL: ${image.url}`);
}
}

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

Run the script with the following command:

```console
node _ImageGeneration.js
node ImageGeneration.js
```
---

## Output

Expand Down
Loading

0 comments on commit 804ee13

Please sign in to comment.