Compartir a través de

Guía de inicio rápido: Añadir DALL-E a la aplicación de escritorio .NET MAUI para Windows

  • Artículo

En esta guía de inicio rápido, explicamos cómo integrar las funcionalidades de generación de imágenes de DALL-E en su aplicación de escritorio .NET MAUI para Windows.

Requisitos previos

¿Qué problema resolveremos?

Quiere agregar funcionalidades de generación de imágenes de DALL-E a la aplicación de escritorio .NET MAUI para Windows para ofrecer a los usuarios una experiencia completa e interactiva. Se puede usar la aplicación para generar recomendaciones basadas en texto y se quiere agregar la opción de generar imágenes que visualicen una actividad en la ubicación que han introducido.

Establecimiento de la variable de entorno

Para usar el SDK de OpenAI, deberá establecer una variable de entorno con la clave de API. En este ejemplo, usaremos la variable de entorno OPENAI_API_KEY. Una vez que tenga la clave de API del panel para desarrolladores de OpenAI, puede establecer la variable de entorno desde la línea de comandos de la manera siguiente:

setx OPENAI_API_KEY <your-api-key>

Tenga en cuenta que este método funciona para el desarrollo en Windows, pero se recomienda usar un método más seguro para aplicaciones de producción y para soporte móvil. Por ejemplo, puede almacenar la clave de API en un almacén de claves seguro al que un servicio remoto pueda acceder en nombre de la aplicación. Consulte Procedimientos recomendados para la seguridad de claves en OpenAI para obtener más información.

Instalación e inicialización de la biblioteca OpenAI para .NET

En esta sección, instalaremos el SDK en el proyecto .NET MAUI y lo inicializaremos con la clave de API de OpenAI.

  1. Si aún no ha instalado el OpenAI paquete NuGet, puede hacerlo ejecutando dotnet add package OpenAI -IncludePrerelease a través de la ventana del terminal de Visual Studio.

  2. Una vez instalada, puede inicializar la OpenAIClient instancia a través del SDK con la clave de API de OpenAI MainPage.xaml.cs de la siguiente manera:

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

Modificación de la IU de la aplicación

A continuación, modificaremos la interfaz de usuario para incluir un control Image que muestre una imagen generada debajo del texto de la recomendación.

  1. Si está empezando con un nuevo proyecto, copie el XAML del tutorial MainPage.xaml desde el Crear una aplicación de recomendaciones con .NET MAUI y ChatGPT .

  2. Agregue un control StackLayout que incluya un control Label y un control CheckBox a MainPage.xaml debajo del control LocationEntry para permitir a los usuarios elegir si van a generar una imagen:

    ...
<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. Agregue un control Image debajo del control SmallLabel para mostrar la imagen generada:

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

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

En esta sección, incluiremos un método para controlar la generación de imágenes y llamarlo por medio del método existente GetRecommendationAsync para mostrar la imagen generada.

  1. Si está empezando con un nuevo proyecto, compruebe que el código en MainPage.xaml.cs coincide con el código del tutorial Crear una aplicación de recomendaciones con .NET MAUI y ChatGPT.

  2. Agregue un método denominado GetImageAsync para controlar la generación de imágenes. El nuevo método llamará a la API de OpenAI para generar una imagen en función de la instrucción que crearemos en el paso siguiente. Devuelve un objeto ImageSource que sirve para mostrar la imagen en la interfaz de usuario:

    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. Agregue una using (directiva) para las clases de generación de imágenes en la parte superior del archivo:

    using OpenAI.Images;

  4. Agregue el siguiente código al final del método GetRecommendationAsync para llamar condicionalmente el método GetImageAsync y mostrar la imagen generada.

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

    La cadena imagePrompt se basa en la entrada de ubicación del usuario y en el tipo de recomendación seleccionado.

Ejecución y prueba

Ejecute la aplicación, escriba una ubicación válida y haga clic en uno de los botones de recomendaciones. Deberíamos ver algo parecido a lo siguiente:

Demostración de generación de imágenes

¿Cómo solucionamos el problema?

Hemos incorporado las funcionalidades de generación de imágenes de DALL-E a nuestra aplicación de escritorio .NET MAUI para Windows. Ahora los usuarios pueden generar imágenes en función de la ubicación que escriban y el tipo de recomendación que seleccionen. Esto ofrece una experiencia completa e interactiva para los usuarios y mejora la funcionalidad de la aplicación.

Limpieza de recursos

Es importante asegurarse de que la cuenta de OpenAI sea segura. Si no tiene pensado usar la clave de API de OpenAI para cualquier otro proyecto, deberá eliminarla del panel para desarrolladores de OpenAI. También debe fijar un límite de gasto razonable en su cuenta de OpenAI para evitar cargos inesperados. Puede comprobar el uso actual y los gastos en el panel de OpenAI en la página Usage (Uso(.

Contenido relacionado