Compartir a través de

Adición de DALL-E a la aplicación de escritorio del SDK de Aplicaciones para Windows o WinUI 3

  • Artículo

En este tutorial, integraremos las funcionalidades de generación de imágenes de DALL-E en su aplicación de escritorio del SDK de Aplicaciones para Windows o WinUI 3.

Requisitos previos

Instalación e inicialización del SDK de OpenAI

Asegúrese de que betalgo/OpenAI SDK esté instalado en el proyecto ejecutando dotnet add package Betalgo.OpenAI desde la ventana del terminal de Visual Studio. Inicialice el SDK con la clave de API de OpenAI de la siguiente manera:

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

Modificación de la IU de la aplicación

Modifique el MainWindow.xaml existente para que incluya un control de Image que muestre imágenes dentro de la conversación:

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

Tenga en cuenta que para este procedimiento se supone que tiene una interfaz de chat con TextBox y Button; consulte Cómo añadir finalizaciones de chat de OpenAI a la aplicación de escritorio del SDK de Aplicaciones para Windows o WinUI 3.

Implementación de la generación de imágenes DALL-E

En su MainWindow.xaml.cs, añada los métodos siguientes para controlar la generación y visualización de imágenes:

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

El método openAiService.Image.CreateImage() es responsable de llamar a la API DALL-E de OpenAI. Consulte la wiki del SDK de OpenAI de Betalgo para obtener más ejemplos de uso.

Observe la presencia de ImageUrl en la clase MessageItem. Esta es una propiedad nueva:

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

Ejecución y prueba

Ejecute la aplicación, escriba una solicitud y haga clic en el botón "Generar imagen". Deberíamos ver algo parecido a lo siguiente:

Demostración de generación de imágenes

Resumen

En esta guía ha aprendido a:

  1. Aceptar las solicitudes de imagen de los usuarios dentro de <TextBox>.
  2. Generar imágenes mediante la API DALL-E de OpenAI.
  3. Visualizar la imagen en una <Image>.