How to Integrate Azure OpenAI DALL-E with Your Web App: Step-by-Step Guide to Generating and Displaying Images

 To design an application that uses the Azure OpenAI REST API for a DALL-E model to generate images and display thumbnails on a webpage, we can break down the process step by step. This will include setting up the necessary Azure resources, interacting with the API, and displaying the image URLs from the result element in a table.

Step 1: Create a Resource Group in Azure

Before you create and use the OpenAI service, you’ll need a resource group to organize your resources.

  1. Log in to Azure Portal: Go to portal.azure.com.
  2. Create a Resource Group:
    • Navigate to Resource Groups in the left menu.
    • Click Create and fill in the details:
      • Subscription: Choose your Azure subscription.
      • Resource Group Name: Enter a name like dalle-images-rg.
      • Region: Select the region closest to you or where you want the resources located.
    • Click Review + Create, then Create.

Step 2: Create Azure OpenAI Service

  1. Search for "Azure OpenAI" in the Azure Marketplace.
  2. Click on Azure OpenAI and then Create.
  3. Configure the Service:
    • Subscription: Select your subscription.
    • Resource Group: Select the resource group you just created (e.g., dalle-images-rg).
    • Region: Choose the appropriate region.
    • Name: Give the service a name like dalle-openai-service.
    • Pricing Tier: Select the pricing tier (Standard S0 is good for testing).
  4. Review + Create, and after validation, click Create.

Step 3: Generate API Key

After the Azure OpenAI service is created:

  1. Go to the resource you just created.
  2. Navigate to Keys and Endpoint.
  3. Copy the API Key and Endpoint. You will use these to interact with the DALL-E model.

Step 4: Make a POST Request to DALL-E via the Azure OpenAI API

Now that you have your API key and Endpoint, you can start making requests to generate images using the DALL-E model.

Here’s an example cURL command to generate an image via the DALL-E model using the Azure OpenAI REST API:

bash

curl -X POST "https://<your-endpoint>.openai.azure.com/openai/deployments/<your-deployment-name>/images/generations?api-version=2022-12-01" \
-H "Content-Type: application/json" \
-H "api-key: <your-api-key>" \
-d '{
  "prompt": "A futuristic city skyline at sunset",
  "n": 2,
  "size": "1024x1024"
}'


The name of the Azure OpenAI resource, 
the name of the DALL-E 3 model deployment, 
and the API version to be used are the three required header properties for HTTP requests
  • Replace <your-endpoint>, <your-deployment-name>, and <your-api-key> with your actual endpoint, deployment name, and API key from Step 3.
  • The "prompt" field is the description you want DALL-E to use to generate the image.
  • -d sends the JSON data (prompt, n, and size) in the body of the POST request to the Azure OpenAI API.
  • In this case, the JSON data tells the DALL-E model what to generate (prompt), how many images to generate (n), and what size the images should be (size).

Without the -d parameter, no data would be sent in the request body, and the API would not know what images you want to generate.

Step 5: Find the Image URLs in the JSON Response

The API will return a JSON response that includes the URLs of the generated images. The image URLs are located in the result element.

Example JSON response:

json

{
  "id": "generation-id",
  "created": 1682950238,
  "data": [
    {
      "result": {
        "urls": [
          "https://example.com/image1.png",
          "https://example.com/image2.png"
        ]
      }
    }
  ]
}
  • The image URLs are found inside the result.urls array.

Step 6: Display Thumbnails on a Webpage

Once you’ve retrieved the image URLs, you can display them as thumbnails in a table on your webpage using HTML.

html

<!DOCTYPE html>
<html>
<head>
    <title>Generated Images</title>
</head>
<body>
    <h1>DALL-E Generated Thumbnails</h1>
    <table border="1">
        <tr>
            <th>Thumbnail</th>
        </tr>
        <tr>
            <td><img src="https://example.com/image1.png" alt="Image 1" width="100"></td>
        </tr>
        <tr>
            <td><img src="https://example.com/image2.png" alt="Image 2" width="100"></td>
        </tr>
    </table>
</body>
</html>
  • Replace https://example.com/image1.png and https://example.com/image2.png with the URLs from the result element in the JSON response.
  • The width="100" ensures the image is displayed as a thumbnail.

Step 7: Deploy the Webpage

Once your webpage is ready, you can deploy it to a cloud platform like Azure Static Web Apps, GitHub Pages, or even host it locally for testing.

Recap of Steps:

  1. Create a resource group in Azure for organizing resources.
  2. Set up Azure OpenAI Service and generate an API key.
  3. Make a POST request to the DALL-E API to generate images.
  4. Find the image URLs in the result element of the JSON response.
  5. Create a webpage and display the thumbnails in a table using the image URLs.

This will allow you to generate images using DALL-E and display them in a clean, user-friendly format on a webpage.

No comments:

Post a Comment