Exercise - Add image generation capabilities to your React application

  • 15 minutes

In this exercise you will add image generation capabilities to your React application, using Azure OpenAI cognitive service and in particular DALLE2 model.

Specification

  1. Create a new Azure OpenAI Service resource in your subscription. To configure your resource properly, check the region availability for DALLE2 model before creating it. Please note that, as part of Microsoft's commitment to responsible AI, access to Azure OpenAI service is currently limited to a set of Azure customers requesting it in advance, by filling out this form. If your application doesn't match the acceptance criteria, you can rely on the OpenAI public APIs to build your prototype.

  2. Add the code to call the Azure OpenAI service API to your React application as a function 'generateImage' in a new separate module, that you can name 'azure-image-generation.js'. Note that if you are using a non-Azure endpoint, authentication and endpoint construction are handled differently and you should refer to the OpenAI API reference.

  3. Add 'generateImage' as a new module into your App.js and call the 'generateImage' function from there, in a way that the image generation action is triggered when the 'Generate' button is pressed. Ensure to hold the UI and to have a processing indicator while the action is running.

  4. In your App.js file edit the 'DisplayResults' function to display the results of the API call, along with the URL of the generated image.

Tip

Don't include the services key directly in your code, and never post it publicly. When running your app locally, you can store your credentials in environment variables. Environment variables are name-value pairs that are stored within a specific development environment. See the Azure AI services security article for more authentication options.

Check your work

To validate the work done in this exercise, run your React app locally (using npm start command) and open the URL http://localhost:3000 in a browser. Ensure you set up your environment variables with the Azure OpenAI service key and endpoint URL beforehand. You should see the same GUI as in the previous exercise, but now when you enter a textual prompt as input of the text box and press the 'Generate' button, you should see the brand-new image generated by OpenAI DALLE2 model, like in the image below: Image Generation result

You can use the prompt 'A puppy sitting in the grass' to test your app.