快速入门：将 DALL-E 添加到 .NET MAUI Windows 桌面应用

  • 项目

在此快速入门中，我们将展示如何将 DALL-E 的图像生成功能集成到 .NET MAUI Windows 桌面应用中。

先决条件

  • Visual Studio 2022 17.8 或更高版本，并安装了 .NET Multi-platform App UI 工作负载。 有关详细信息，请参阅安装。
  • 一个附带 OpenAI 集成的 .NET MAUI 功能性项目，而此功能将集成到其中。 请参阅使用 .NET MAUI 和 ChatGPT 创建推荐应用 - 我们将演示如何通过本操作方法将 DALL-E 集成到用户界面中。
  • OpenAI 开发人员仪表板中的 OpenAI API 密钥。
  • 已在项目中安装了 .NET OpenAI NuGet 包版本 2.0.0 或更高版本。 此版本当前为预发行版本。 如果已按照 .NET MAUI ChatGPT 教程中的说明进行操作，则此依赖项将会已经安装并完成配置。

我们将解决什么问题？

你想将 DALL-E 的图像生成功能添加到 .NET MAUI Windows 桌面应用，从而为用户提供丰富的交互式体验。 他们已可使用此应用来生成基于文本的建议，而你想添加生成图像的功能，以便在他们的输入位置实现活动的可视化。

设置环境变量

要使用 OpenAI SDK，需要使用 API 密钥设置环境变量。 在本示例中，我们将使用 OPENAI_API_KEY 环境变量。 从 OpenAI 开发人员仪表板获取 API 密钥后，可以从命令行设置环境变量，如下所示：

setx OPENAI_API_KEY <your-api-key>

请注意，此方法适用于 Windows 上的开发，但您需要使用更安全的方法用于生产应用和移动支持。 例如，可以将 API 密钥存储在远程服务可以代表应用访问的安全密钥保管库中。 有关详细信息，请参阅 OpenAI 密钥安全的最佳做法。

安装和初始化适用于 .NET 的 OpenAI 库

在本节中，我们会将此 SDK 安装到 .NET MAUI 项目，并使用 OpenAI API 密钥对其进行初始化。

  1. 如果尚未安装 OpenAI NuGet 包，则可通过从 Visual Studio 的终端窗口运行 dotnet add package OpenAI -IncludePrerelease 来执行此操作。

  2. 安装后，可使用 MainPage.xaml.cs 中的 OpenAI API 密钥从 SDK 初始化 OpenAIClient 实例，如下所示：

    private OpenAIClient _chatGptClient;

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");

    _chatGptClient = new(openAiKey);
}

修改应用的 UI

接着，我们将修改用户界面，以包含用于在建议文本下方显示所生成图像的 Image 控件。

  1. 如果要从新项目开始，请根据使用 .NET MAUI 和 ChatGPT 创建推荐应用教程来复制 MainPage.xaml 的 XAML。

  2. 将包含 Label 和 CheckBox 控件的 StackLayout 添加到 LocationEntry 控件下方的 MainPage.xaml，从而允许用户选择是否生成图像：

    ...
<Entry
    x:Name="LocationEntry"
    Placeholder="Enter your location"
    SemanticProperties.Hint="Enter the location for recommendations"
    HorizontalOptions="Center"/>

<!-- Add this markup -->
<StackLayout Orientation="Horizontal"
                HorizontalOptions="Center">
    <Label Text="Generate image" VerticalOptions="Center"/>
    <CheckBox x:Name="IncludeImageChk" VerticalOptions="Center"/>
</StackLayout>
...

  3. 在 SmallLabel 控件下方添加 Image 控件，以显示生成的图像：

    ...
    <Image x:Name="GeneratedImage"
           WidthRequest="256"
           HeightRequest="256"
           HorizontalOptions="Center"/>
</VerticalStackLayout>

实现 DALL-E 映像生成

在本节中，我们将添加一个方法来处理图像生成，并从现有 GetRecommendationAsync 方法调用它从而显示生成的图像。

  1. 如果要从新项目开始，请确保 MainPage.xaml.cs 中的代码与使用 .NET MAUI 和 ChatGPT 创建推荐应用教程中的代码匹配。

  2. 添加一个名为 GetImageAsync 的方法来处理图像生成。 此新方法会调用 OpenAI API，以根据我们将在下一步中生成的提示来生成图像。 它会返回 ImageSource 对象，而该对象可用于在 UI 中显示该图像：

    public async Task<ImageSource> GetImageAsync(string prompt)
{
    // Use the DALL-E 3 model for image generation.
    ImageClient imageClient = _chatGptClient.GetImageClient("dall-e-3");

    // Generate an image based on the prompt with a 1024x1024 resolution, the default for DALL-E 3.
    ClientResult<GeneratedImage> response = await imageClient.GenerateImageAsync(prompt, 
        new ImageGenerationOptions
        {
            Size = GeneratedImageSize.W1024xH1024,
            ResponseFormat = GeneratedImageFormat.Uri
        });

    // Image generation responses provide URLs you can use to retrieve requested image(s).
    Uri imageUri = response.Value.ImageUri;

    return ImageSource.FromUri(imageUri);
}

  3. 在文件顶部为图像生成类添加一个 using 指令：

    using OpenAI.Images;

  4. 将以下代码添加到 GetRecommendationAsync 方法的末尾，以对 GetImageAsync 方法进行有条件调用并显示已生成的图像：

    if (IncludeImageChk.IsChecked)
{
    var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}.";
    GeneratedImage.Source = await GetImageAsync(imagePrompt);
}

    imagePrompt 字符串会基于用户的位置输入和所选建议类型来生成。

运行和测试

运行应用，输入有效位置，然后单击某一建议按钮。 你应看到与下面类似的内容：

图像生成演示

我们如何解决问题？

我们已向 .NET MAUI Windows 桌面应用添加 DALL-E 的图像生成功能。 用户现在可根据输入的位置以及所选建议类型来生成图像。 此特性可为用户提供丰富的交互式体验，并增强此应用的功能。

清理资源

请务必确保 OpenAI 帐户处于安全状态。 如果不打算将 OpenAI API 密钥用于任何其他项目，则应将其从 OpenAI 开发人员仪表板中删除。 此外，还应为 OpenAI 帐户设置合理的支出限额，以免出现任何意外费用。 可在 OpenAI 仪表板的使用情况页面上查看当前的使用情况和支出。

相关内容