将 DALL-E 添加到 WinUI 3/Windows 应用 SDK 桌面应用中

项目
07/17/2024

在此操作说明中，我们将 DALL-E 的映像生成功能集成到 WinUI 3/Windows 应用 SDK 桌面应用中。

先决条件

设置开发计算机（请参阅 WinUI 入门）。
此功能将集成到的功能聊天界面。请参阅如何将 OpenAI 聊天完成功能添加到 WinUI 3/Windows 应用 SDK 桌面应用中 - 我们将演示如何根据本操作说明将 DALL-E 集成到聊天界面中。
OpenAI 开发人员仪表板中分配给 OPENAI_API_KEY 环境变量的 OpenAI API 密钥。
项目中安装的 OpenAI SDK。有关社区库的列表，请参阅 OpenAI 文档。在本操作说明中，我们将使用 betalgo/openai。

安装和初始化 OpenAI SDK

通过从 Visual Studio 的终端窗口运行 dotnet add package Betalgo.OpenAI，确保你的项目中已安装 betalgo/OpenAI SDK。使用 OpenAI API 密钥初始化 SDK，如下所示：

//...
using OpenAI;
using OpenAI.Managers;
using OpenAI.ObjectModels.RequestModels;
using OpenAI.ObjectModels;

namespace ChatGPT_WinUI3
{
    public sealed partial class MainWindow : Window
    {
        private OpenAIService openAiService;

        public MainWindow()
        {
            this.InitializeComponent();
           
            var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");

            openAiService = new OpenAIService(new OpenAiOptions(){
                ApiKey = openAiKey
            });
        }
    }
}

修改应用的 UI

修改现有 MainWindow.xaml 以包含在对话中显示图像的 Image 控件：

<!-- ... existing XAML ... -->
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Image Source="{Binding ImageUrl}" Margin="5" Stretch="UniformToFill"/>
    </DataTemplate>
</ItemsControl.ItemTemplate>
<!-- ... existing XAML ... -->

请注意，本操作说明假定你具有一个聊天界面，其中包括 TextBox 和 Button；请参阅如何将 OpenAI 聊天完成功能添加到 WinUI 3/Windows 应用 SDK 桌面应用中。

实现 DALL-E 映像生成

在 MainWindow.xaml.cs 中，添加以下方法以处理映像生成和显示：

// ... existing using statements ...

private async void SendButton_Click(object sender, RoutedEventArgs e)
{
    ResponseProgressBar.Visibility = Visibility.Visible;
    string userInput = InputTextBox.Text;
    if (!string.IsNullOrEmpty(userInput))
    {
        InputTextBox.Text = string.Empty;
        var imageResult = await openAiService.Image.CreateImage(new ImageCreateRequest
        {
            Prompt = userInput,
            N = 2,
            Size = StaticValues.ImageStatics.Size.Size256, // StaticValues is available as part of the Betalgo OpenAI SDK
            ResponseFormat = StaticValues.ImageStatics.ResponseFormat.Url,
            User = "TestUser"
        });

        if (imageResult.Successful)
        {
            foreach (var imageUrl in imageResult.Results.Select(r => r.Url))
            {
                AddImageMessageToConversation(imageUrl);
            }
        }
        else
        {
            AddMessageToConversation("GPT: Sorry, something bad happened: " + imageResult.Error?.Message);
        }
    }
    ResponseProgressBar.Visibility = Visibility.Collapsed;
}

private void AddImageMessageToConversation(string imageUrl)
{
    var imageMessage = new MessageItem
    {
        ImageUrl = imageUrl
    };
    ConversationList.Items.Add(imageMessage);
}

该 openAiService.Image.CreateImage() 方法负责调用 OpenAI 的 DALL-E API。有关更多用法示例，请参阅 Betalgo OpenAI SDK wiki。

请注意 MessageItem 类中存在 ImageUrl。这是一种新属性：

public class MessageItem
{
    public string Text { get; set; }
    public SolidColorBrush Color { get; set; }
    public string ImageUrl { get; set; } // new
}

运行和测试

运行应用，输入提示，然后单击“生成映像”按钮。你应看到与下面类似的内容：

图像生成演示

概括回顾

在本指南中，你已了解如何：

在 <TextBox> 中接受来自用户的映像提示。
使用 OpenAI DALL-E API 生成映像。
在 <Image> 中显示映像。

通过