Share via

Добавление DALL-E в классическое приложение WinUI 3 / Windows App SDK

  • Статья

В этом руководстве мы интегрируем возможности создания образов DALL-E в классическое приложение WinUI 3 / Windows App SDK.

Необходимые компоненты

Установка и инициализация пакета SDK OpenAI

Убедитесь, что он betalgo/OpenAI SDK установлен в проекте, выполнив команду dotnet add package Betalgo.OpenAI из окна терминала Visual Studio. Инициализировать пакет SDK с помощью ключа API OpenAI следующим образом:

//...
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
            });
        }
    }
}

Изменение пользовательского интерфейса приложения

Измените существующий MainWindow.xamlImage элемент управления, отображающий изображения в беседе:

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

Обратите внимание, что в этом руководстве предполагается, что у вас есть интерфейс чата с TextBox приложением и см. сведения о добавлении завершения чата OpenAI в классическое приложение WinUI 3 / Windows App SDK.Button

Реализация создания образа 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() отвечает за вызов API DALL-E OpenAI. Дополнительные примеры использования см. в вики-сайте пакета SDK Для OpenAI Betalgo.

Обратите внимание на наличие ImageUrl в MessageItem классе. Это новое свойство:

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

Запуск и тестирование

Запустите приложение, введите запрос и нажмите кнопку "Создать изображение". Отобразятся примерно следующие сведения:

Демонстрация создания изображений

Кратко

В этом руководстве вы узнали, как:

  1. Примите запросы на изображение от пользователей в пределах <TextBox>.
  2. Создайте изображения с помощью API OpenAI DALL-E.
  3. Отображение изображения в объекте <Image>.