|
| 1 | +--- |
| 2 | +title: Quickstart - Add DALL-E image generation to your .NET MAUI app for Windows |
| 3 | +description: A quickstart to get started with .NET MAUI on Windows by integrating DALL-E image capabilities into your app. |
| 4 | +ms.topic: quickstart |
| 5 | +ms.date: 02/21/2024 |
| 6 | +keywords: windows, desktop development, Windows App SDK, .net maui, openai, dall-e, ai |
| 7 | +--- |
| 8 | + |
| 9 | +# Quickstart: Add DALL-E to your .NET MAUI Windows desktop app |
| 10 | + |
| 11 | +In this quickstart, we'll demonstrate how to integrate DALL-E's image generation capabilities into your .NET MAUI Windows desktop app. |
| 12 | + |
| 13 | +## Prerequisites |
| 14 | + |
| 15 | +- Visual Studio 2022 17.8 or greater, with the .NET Multi-platform App UI workload installed. For more information, see [Installation](/dotnet/maui/get-started/installation). |
| 16 | +- A functional .NET MAUI project with OpenAI integration into which this capability will be integrated. See *[Create a recommendation app with .NET MAUI and ChatGPT](tutorial-maui-ai.md)* - we'll demonstrate how to integrate DALL-E into the user interface from this how-to. |
| 17 | +- An OpenAI API key from your [OpenAI developer dashboard](https://platform.openai.com/api-keys) assigned to the `openAIKey` variable in your project. |
| 18 | +- An [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/) NuGet package installed in your project. If you've followed along with the .NET MAUI ChatGPT tutorial, you will have this dependency installed and configured. |
| 19 | + |
| 20 | +## What problem will we solve? |
| 21 | + |
| 22 | +You want to add DALL-E's image generation capabilities to your .NET MAUI Windows desktop app to provide users with a rich, interactive experience. They can already use the app to generate text-based recommendations, and you want to add the ability to generate images that visualize an activity in the location they have entered. |
| 23 | + |
| 24 | +## Install and initialize the Azure OpenAI SDK |
| 25 | + |
| 26 | +In this section, we'll install the SDK into the .NET MAUI project and initialize it with your OpenAI API key. |
| 27 | + |
| 28 | +1. If you haven't already installed the `Azure.AI.OpenAI` NuGet package, you can do so by running `dotnet add package Azure.AI.OpenAI -IncludePrerelease` from Visual Studio's terminal window. |
| 29 | + |
| 30 | +1. Once installed, you can initialize the `OpenAIClient` instance from the SDK with your OpenAI API key in `MainPage.xaml.cs` as follows: |
| 31 | + |
| 32 | + ```csharp |
| 33 | + private OpenAIClient _chatGptClient; |
| 34 | + private Guid _sessionGuid = Guid.Empty; |
| 35 | + private string openAIKey = "MY_OPEN_AI_API_KEY"; |
| 36 | + private string openAIEndpoint = null; |
| 37 | + private char[] trimChars = { '\n', '?' }; |
| 38 | + |
| 39 | + public MainPage() |
| 40 | + { |
| 41 | + InitializeComponent(); |
| 42 | + this.Loaded += MainPage_Loaded; |
| 43 | + } |
| 44 | + |
| 45 | + private void MainPage_Loaded(object sender, EventArgs e) |
| 46 | + { |
| 47 | + _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint) |
| 48 | + ? new OpenAIClient( |
| 49 | + new Uri(openAIEndpoint), |
| 50 | + new AzureKeyCredential(openAIKey)) |
| 51 | + : new OpenAIClient(openAIKey); |
| 52 | + } |
| 53 | + ``` |
| 54 | + |
| 55 | +1. Replace `MY_OPEN_AI_API_KEY` with your OpenAI API key. |
| 56 | + |
| 57 | +## Modify your app's UI |
| 58 | + |
| 59 | +Next, we'll modify the user interface to include an `Image` control that displays a generated image below the recommendation text. |
| 60 | + |
| 61 | +1. If you are are starting with a new project, copy the XAML for `MainPage.xaml` from the [Create a recommendation app with .NET MAUI and ChatGPT](tutorial-maui-ai.md) tutorial. |
| 62 | + |
| 63 | +1. Add a `StackLayout` containing a `Label` control and a `CheckBox` control to `MainPage.xaml` below the `LocationEntry` control to allow users to select whether to generate an image: |
| 64 | + |
| 65 | + ```xml |
| 66 | + ... |
| 67 | + <Entry |
| 68 | + x:Name="LocationEntry" |
| 69 | + Placeholder="Enter your location" |
| 70 | + SemanticProperties.Hint="Enter the location for recommendations" |
| 71 | + HorizontalOptions="Center"/> |
| 72 | + |
| 73 | + <!-- Add this markup --> |
| 74 | + <StackLayout Orientation="Horizontal" |
| 75 | + HorizontalOptions="Center"> |
| 76 | + <Label Text="Generate image" VerticalOptions="Center"/> |
| 77 | + <CheckBox x:Name="IncludeImageChk" VerticalOptions="Center"/> |
| 78 | + </StackLayout> |
| 79 | + ... |
| 80 | + ``` |
| 81 | + |
| 82 | +1. Add an `Image` control below the `SmallLabel` control to display the generated image: |
| 83 | + |
| 84 | + ```xml |
| 85 | + ... |
| 86 | + <Image x:Name="GeneratedImage" |
| 87 | + WidthRequest="256" |
| 88 | + HeightRequest="256" |
| 89 | + HorizontalOptions="Center"/> |
| 90 | + </VerticalStackLayout> |
| 91 | + ``` |
| 92 | + |
| 93 | +## Implement DALL-E image generation |
| 94 | + |
| 95 | +In this section, we'll add a method to handle image generation and call it from the existing `GetRecommendation` method to display the generated image. |
| 96 | + |
| 97 | +1. If you are are starting with a new project, make sure your code in `MainPage.xaml.cs` matches the code from the [Create a recommendation app with .NET MAUI and ChatGPT](tutorial-maui-ai.md) tutorial. |
| 98 | + |
| 99 | +1. Add a method named `GetImageAsync` to handle image generation. The new method will call the OpenAI API to generate an image based on the prompt we'll build in the next step. It returns an `ImageSource` object that is used to display the image in the UI: |
| 100 | + |
| 101 | + ```csharp |
| 102 | + public async Task<ImageSource> GetImageAsync(string prompt) |
| 103 | + { |
| 104 | + Response<ImageGenerations> imageGenerations = await _chatGptClient.GetImageGenerationsAsync( |
| 105 | + new ImageGenerationOptions() |
| 106 | + { |
| 107 | + Prompt = prompt, |
| 108 | + Size = ImageSize.Size256x256, |
| 109 | + }); |
| 110 | + |
| 111 | + // Image Generations responses provide URLs you can use to retrieve requested images |
| 112 | + Uri imageUri = imageGenerations.Value.Data[0].Url; |
| 113 | + |
| 114 | + return ImageSource.FromUri(imageUri); |
| 115 | + } |
| 116 | + ``` |
| 117 | + |
| 118 | +1. Add the following code to the end of the `GetRecommendation` method to conditionally call the `GetImageAsync` method and display the generated image: |
| 119 | + |
| 120 | + ```csharp |
| 121 | + ... |
| 122 | + if (IncludeImageChk.IsChecked) |
| 123 | + { |
| 124 | + var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}."; |
| 125 | + GeneratedImage.Source = await GetImageAsync(imagePrompt); |
| 126 | + } |
| 127 | + ``` |
| 128 | + |
| 129 | + The `imagePrompt` string is built based on the user's location input and the recommendation type selected. |
| 130 | + |
| 131 | +## Run and test |
| 132 | + |
| 133 | +Run your app, enter a valid location, and click one of the recommendation buttons. You should see something like this: |
| 134 | + |
| 135 | +:::image type="content" source="images/maui-dalle-recommendation-with-image.png" alt-text="Image generation demo"::: |
| 136 | + |
| 137 | +## How did we solve the problem? |
| 138 | + |
| 139 | +We added DALL-E's image generation capabilities to our .NET MAUI Windows desktop app. Users can now generate images based on the location they enter and the type of recommendation they select. This provides a rich, interactive experience for users and enhances the app's functionality. |
| 140 | + |
| 141 | +## Clean up resources |
| 142 | + |
| 143 | +It's important to make sure your OpenAI account is secure. If you're not planning to use the [OpenAI API](https://platform.openai.com/api-keys) key for any other projects, you should delete it from your OpenAI developer dashboard. You should also set a reasonable spending limit on your OpenAI account to avoid any unexpected charges. You can check your current usage and spending in the OpenAI dashboard on the [Usage](https://platform.openai.com/usage) page. |
| 144 | +
|
| 145 | +## Related content |
| 146 | + |
| 147 | +- [.NET MAUI Installation](/dotnet/maui/get-started/installation) |
| 148 | +- [Create a recommendation app with .NET MAUI and ChatGPT](tutorial-maui-ai.md) |
| 149 | +- [Add DALL-E to your WinUI 3 / Windows App SDK desktop app](../how-tos/dall-e-winui3.md) |
| 150 | +- [Create a .NET MAUI app with C# Markup and the Community Toolkit](tutorial-csharp-ui-maui-toolkit.md) |
0 commit comments