Skip to content

Commit 62e9bfe

Browse files
alvinashcraftalvinashcraft
committed
Add steps to walkthrough and app image
1 parent 4133625 commit 62e9bfe

File tree

2 files changed

+117
-62
lines changed

2 files changed

+117
-62
lines changed

‎hub/apps/windows-dotnet-maui/dall-e-maui-windows.md

Lines changed: 117 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ In this quickstart, we'll demonstrate how to integrate DALL-E's image generation
2323
<!-- Use this exact H2 -->
2424
## What problem will we solve?
2525

26-
TODO: Write a brief description of the problem and how the product or service solves that problem. Include one or more diagrams when appropriate to show the solution architecture and/or the dataflow.
26+
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.
2727

2828
<!--
2929
@@ -42,73 +42,128 @@ Each H2 should describe either what they'll do in the step or which part of the
4242
* An image, code block, or other graphical element comes after numbered step it illustrates.
4343
4444
-->
45-
## "\<verb\> * \<noun\>"
46-
TODO: Add introduction sentence(s)
47-
[Include a sentence or two to explain only what is needed to complete the procedure.]
48-
TODO: Add ordered list of procedure steps
49-
1. Step 1
50-
1. Step 2
51-
1. Step 3
52-
53-
## Task 2
54-
TODO: Add introduction sentence(s)
55-
[Include a sentence or two to explain only what is needed to complete the procedure.]
56-
TODO: Add ordered list of procedure steps
57-
1. Step 1
58-
1. Step 2
59-
1. Step 3
60-
61-
## Task 3
62-
TODO: Add introduction sentence(s)
63-
[Include a sentence or two to explain only what is needed to complete the procedure.]
64-
TODO: Add ordered list of procedure steps
65-
1. Step 1
66-
1. Step 2
67-
1. Step 3
45+
## Install and initialize the Azure OpenAI SDK
46+
47+
In this section, we'll install the SDK into the .NET MAUI project and initialize it with your OpenAI API key.
48+
49+
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.
50+
51+
1. Once installed, you can initialize the `OpenAIClient` instance from the SDK with your OpenAI API key as follows:
52+
53+
```csharp MainPage.xaml.cs
54+
private OpenAIClient _chatGptClient;
55+
private Guid _sessionGuid = Guid.Empty;
56+
private string openAIKey = "MY_OPEN_AI_API_KEY";
57+
private string openAIEndpoint = null;
58+
private char[] trimChars = { '\n', '?' };
59+
60+
public MainPage()
61+
{
62+
InitializeComponent();
63+
this.Loaded += MainPage_Loaded;
64+
}
65+
66+
private void MainPage_Loaded(object sender, EventArgs e)
67+
{
68+
_chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
69+
? new OpenAIClient(
70+
new Uri(openAIEndpoint),
71+
new AzureKeyCredential(openAIKey))
72+
: new OpenAIClient(openAIKey);
73+
}
74+
```
75+
76+
1. Replace `MY_OPEN_AI_API_KEY` with your OpenAI API key.
77+
78+
## Modify your app's UI
79+
80+
In this section, we'll modify the user interface to include an `Image` control that displays a generated image below the recommendation text.
81+
82+
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.
83+
84+
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:
85+
86+
```xml MainPage.xaml
87+
...
88+
<Entry
89+
x:Name="LocationEntry"
90+
Placeholder="Enter your location"
91+
SemanticProperties.Hint="Enter the location for recommendations"
92+
HorizontalOptions="Center"/>
93+
94+
<!-- Add this markup -->
95+
<StackLayout Orientation="Horizontal"
96+
HorizontalOptions="Center">
97+
<Label Text="Generate image" VerticalOptions="Center"/>
98+
<CheckBox x:Name="IncludeImageChk" VerticalOptions="Center"/>
99+
</StackLayout>
100+
...
101+
```
102+
103+
1. Add an `Image` control to your `MainPage.xaml` below the `SmallLabel` control to display the generated image:
104+
105+
```xml MainPage.xaml
106+
...
107+
<Image x:Name="GeneratedImage"
108+
WidthRequest="256"
109+
HeightRequest="256"
110+
HorizontalOptions="Center"/>
111+
</VerticalStackLayout>
112+
```
113+
114+
## Implement DALL-E image generation
115+
116+
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.
117+
118+
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:
119+
120+
```csharp MainPage.xaml.cs
121+
public async Task<ImageSource> GetImageAsync(string prompt)
122+
{
123+
Response<ImageGenerations> imageGenerations = await _chatGptClient.GetImageGenerationsAsync(
124+
new ImageGenerationOptions()
125+
{
126+
Prompt = prompt,
127+
Size = ImageSize.Size256x256,
128+
});
129+
130+
// Image Generations responses provide URLs you can use to retrieve requested images
131+
Uri imageUri = imageGenerations.Value.Data[0].Url;
132+
133+
return ImageSource.FromUri(imageUri);
134+
}
135+
```
136+
137+
1. Add the following code to the end of the `GetRecommendation` method to conditionally call the `GetImageAsync` method and display the generated image:
138+
139+
```csharp MainPage.xaml.cs
140+
...
141+
if (IncludeImageChk.IsChecked)
142+
{
143+
var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}.";
144+
GeneratedImage.Source = await GetImageAsync(imagePrompt);
145+
}
146+
```
147+
148+
The `imagePrompt` string is built based on the user's location input and the recommendation type selected.
149+
150+
## Run and test
151+
152+
Run your app, enter a valid location, and click one of the recommendation buttons. You should see something like this:
153+
154+
:::image type="content" source="images/maui-dalle-recommendation-with-image.png" alt-text="Image generation demo":::
68155

69-
<!-- Use this exact H2 -->
70156
## How did we solve the problem?
71-
TODO: End the demonstration with a few paragraphs of analysis to make it clear that the product or service was a good choice to solve the customer problem.
72-
73-
<!-- 8. Clean up resources ------------------------------------------------------------------------
74-
75-
Required: To avoid any costs associated with following the Quickstart procedure, a Clean up resources (H2) should come just before Next step or Related content (H2)
76157

77-
If there is a follow-on Quickstart that uses the same resources, make that option clear so that a reader doesn't need to recreate those resources.
78-
79-
-->
158+
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.
80159

81-
<!-- Use this exact H2 -->
82160
## Clean up resources
83161

84-
If you're not going to continue to use this application, delete <resources> with the following steps:
85-
86-
1. From the left-hand menu...
87-
2. ...click Delete, type...and then click Delete
88-
89-
<!-- 9. Next step/Related content ------------------------------------------------------------------------
90-
91-
Optional: You have two options for manually curated links in this pattern: Next step and Related content. You don't have to use either, but don't use both.
92-
- For Next step, provide one link to the next step in a sequence. Use the blue box format
93-
- For Related content provide 1-3 links. Include some context so the customer can determine why they would click the link. Add a context sentence for the following links.
94-
95-
-->
96-
97-
## Next step
98-
99-
TODO: Add your next step link(s)
100-
101-
> [!div class="nextstepaction"]
102-
> [Write concepts](article-concept.md)
103-
104-
<!-- OR -->
162+
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.
105163
106164
## Related content
107165

108-
TODO: Add your next step link(s)
109-
110-
- [Write concepts](article-concept.md)
111-
112-
<!--
113-
Remove all the comments in this template before you sign-off or merge to the main branch.
114-
-->
166+
- [.NET MAUI Installation](/dotnet/maui/get-started/installation)
167+
- [Create a recommendation app with .NET MAUI and ChatGPT](tutorial-maui-ai.md)
168+
- [Add DALL-E to your WinUI 3 / Windows App SDK desktop app](../how-tos/dall-e-winui3.md)
169+
- [Create a .NET MAUI app with C# Markup and the Community Toolkit](tutorial-csharp-ui-maui-toolkit.md)

‎hub/apps/windows-dotnet-maui/images/maui-dalle-recommendation-with-image.png

157 KB
Loading

0 commit comments

Comments
 (0)