Tutorial: Creación de una aplicación de recomendación con .NET MAUI y ChatGPT

Artículo
06/19/2024

En este tutorial, obtendrá información sobre cómo crear una aplicación .NET MAUI para Windows en Visual Studio que llame a las API de ChatGPT de OpenAI para proporcionar recomendaciones basadas en una ubicación especificada por el usuario. La aplicación tendrá una interfaz de usuario sencilla que permite al usuario entrar en una ubicación y obtener recomendaciones para restaurantes, hoteles y atracciones.

En este tutorial, aprenderá a:

Creación de una interfaz de usuario sencilla para la aplicación .NET MAUI
Hacer referencia y arrancar la biblioteca API OpenAI para .NET
Uso de una clave de API para vincular la aplicación a una cuenta de API de OpenAI
Realizar llamadas a las API de chat de OpenAI para obtener recomendaciones

Requisitos previos

Una cuenta de OpenAI
Una clave de API de OpenAI
Requisitos de instalación de .NET MAUI
Si no está familiarizado con .NET MAUI en Windows, debería empezar con el tutorial Crea tu primera aplicación .NET MAUI para Windows.

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.

Creación de un nuevo proyecto .NET MAUI con los elementos de interfaz de usuario necesarios

Empezaremos creando un nuevo proyecto .NET MAUI en Visual Studio. Usaremos la plantilla Aplicación .NET MAUI y agregaremos algunos elementos de interfaz de usuario a MainPage para proporcionar a los usuarios algunas recomendaciones basadas en una ubicación proporcionada. La interfaz de usuario tendrá botones para obtener recomendaciones para restaurantes, hoteles y atracciones.

En Visual Studio, cree un nuevo proyecto Aplicación .NET MAUI denominado ChatGptRecommendationApp.
Ejecute el nuevo proyecto para asegurarse de que la aplicación se compila y se ejecuta correctamente.
Abra MainPage.xaml desde el Explorador de soluciones.

Reemplace el contenido del archivo VerticalStackLayout por el siguiente marcado XAML:

<Label
    Text="Local AI recommendations"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

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

<Button
    x:Name="RestaurantBtn"
    Text="Get restaurant recommendations"
    SemanticProperties.Hint="Gets restaurant recommendations when you click"
    Clicked="OnRestaurantClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="HotelBtn"
    Text="Get hotel recommendations"
    SemanticProperties.Hint="Gets hotel recommendations when you click"
    Clicked="OnHotelClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="AttractionBtn"
    Text="Get attraction recommendations"
    SemanticProperties.Hint="Gets attraction recommendations when you click"
    Clicked="OnAttractionClicked"
    HorizontalOptions="Center" />

<Label x:Name="SmallLabel"
    Text="Click a button for recommendations!"
    SemanticProperties.HeadingLevel="Level2"
    FontSize="18"
    HorizontalOptions="Center" />

Para compilar el proyecto, deberá agregar controladores de eventos Clicked para cada uno de los botones. Agregue el código siguiente al archivo MainPage.xaml.cs y quite el controlador de eventos existente:

private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

private async void OnHotelClicked(object sender, EventArgs e)
{
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
}

Todos los controladores de eventos están marcados como async porque realizaremos llamadas asincrónicas a la biblioteca API OpenAI para .NET. Ahora, al ejecutar la aplicación, debería ver la siguiente interfaz de usuario:

Aplicación .NET MAUI de Windows con la interfaz de usuario para proporcionar recomendaciones.

Los usuarios pueden introducir su ubicación en el control Entry y hacer clic en uno de los botones para obtener recomendaciones para restaurantes, hoteles o atracciones. El control Label situado en la parte inferior de la interfaz de usuario mostrará los resultados.

A continuación, vamos a añadir la biblioteca OpenAI al proyecto y los vamos a preparar para realizar algunas llamadas a la API.

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

Para llamar a las API de ChatGPT de OpenAI, vamos a usar una versión preliminar de la biblioteca OpenAI para el paquete NuGet de .NET . Esta biblioteca proporciona a las aplicaciones .NET acceso a la API de REST de OpenAI. Agregaremos la biblioteca al proyecto y la arrancaremos con nuestra clave de API.

Abra la consola del Administrador de paquetes en el menú Herramientas de Visual Studio.
Instale la biblioteca OpenAI ejecutando el siguiente comando. La marca IncludePrerelease es necesaria porque la biblioteca todavía está en versión preliminar:
```
Install-Package OpenAI -IncludePrerelease
```
Esto debe instalar una versión preliminar de la versión 2.0.0 o posterior en el proyecto. También puede instalar una versión específica de la biblioteca especificando el número de versión en el comando. Por ejemplo, para instalar la versión 2.0.0-beta.4, ejecutaría el siguiente comando:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Abra MainPage.xaml.cs, el archivo de código subyacente de MainPage. Agregue el código siguiente a la parte superior del archivo para hacer referencia a la biblioteca OpenAI y cree una variable que contenga la clave de cliente de OpenAI. Actualice el constructor para llamar al método MainPage_Loaded cuando se cargue la página y agregue el método MainPage_Loaded para inicializar la clave de API de OpenAI del registro de Windows e iniciar el cliente de OpenAI:
```
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);
}
```
Esto arrancará la biblioteca OpenAI con su clave de AP. Puede crear la clave de API en la página de configuración de la API de OpenAI.
Para compilar el proyecto, deberá añadir las siguientes instrucciones using en la parte superior del archivo MainPage.xaml.cs:
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Ahora ya podemos montarlo todo. En la siguiente sección, añadiremos código a los tres controladores de eventos para realizar llamadas a la biblioteca OpenAI y ver los resultados de la recomendación.

Incorporación de llamadas API de ChatGPT y prueba de la aplicación

Es hora de añadir el código a nuestro archivo de código subyacente que usará la biblioteca OpenAI para .NET para realizar llamadas a la API ChatGPT de OpenAI. Agregaremos el código a los tres controladores de eventos que creamos anteriormente. El código obtendrá la ubicación del usuario del control Entry y la pasará a la API para obtener recomendaciones. A continuación, mostraremos los resultados en el control Label en la parte inferior de la interfaz de usuario.

Cree un método async denominado GetRecommendationAsync y llámelo desde cada uno de los controladores de eventos:

private async void OnRestaurantClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("restaurant");
}

private async void OnHotelClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("hotel");
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("attraction");
}

private async Task GetRecommendationAsync(string recommendationType)
{
    if (string.IsNullOrWhiteSpace(LocationEntry.Text))
    {
        await DisplayAlert("Empty location", "Please enter a location (city or postal code)", "OK");
        return;
    }

    // The model passed to GetChatClient must match an available OpenAI
    // model in your account.
    var client = _chatGptClient.GetChatClient("gpt-3.5-turbo-16k");
    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    AsyncResultCollection<StreamingChatCompletionUpdate> updates = client.CompleteChatStreamingAsync(prompt);
    StringWriter responseWriter = new();

    await foreach (StreamingChatCompletionUpdate update in updates)
    {
        foreach (ChatMessageContentPart updatePart in update.ContentUpdate)
        {
            responseWriter.Write(updatePart.Text);
        }
    }

    var returnMessage = responseWriter.ToString();
    SmallLabel.Text = returnMessage;
}

En primer lugar, este código comprueba si el usuario ha escrito una ubicación en el control Entry. Si no es así, muestra una alerta y vuelve. Si el usuario ha escrito una ubicación, obtiene una instancia ChatClient y llama al método CompleteChatStreamingAsync en el objeto para realizar una llamada a OpenAI. El método CompleteChatStreamingAsync toma un parámetro ChatMessage[], que se puede proporcionar como una cadena, como se hace en el ejemplo.

El método devuelve un objeto AsyncResultCollection<StreamingChatCompletionUpdate>, que transmitirá las respuestas de la API a medida que se generan. Iteramos de forma asincrónica sobre updates y, posteriormente, recorremos en iteración cada ChatMessageContentPart en la respuesta para compilar la cadena de respuesta. A continuación, mostraremos la respuesta en el control SmallLabel en la parte inferior de la interfaz de usuario.

Nota:

Es una buena idea añadir el control de errores al método GetRecommendationAsync para controlar las excepciones que podría producir la llamada a la API. Lo hemos dejado fuera de este ejemplo por motivos de simplicidad.

Ejecute la aplicación, escriba una ubicación y pruebe los botones de recomendación. Debería ver una respuesta de la API en el control Label en la parte inferior de la interfaz de usuario:

Eso es todo. Ha creado correctamente una aplicación MAUI de Windows .NET que usa la API de ChatGPT de OpenAI para proporcionar recomendaciones para restaurantes, hoteles y atracciones. Intente cambiar las indicaciones para ver si puede mejorar los resultados. También puede intentar cambiar el nombre del modelo de GetChatClient a GetRecommendationAsync para ver si obtiene mejores resultados de un modelo diferente.

Importante

Recuerde tener en cuenta el uso de la API después de que haya expirado el período de prueba. También puede establecer límites de gasto mensuales en su cuenta de OpenAI para evitar cargos inesperados.

Pasos siguientes

Avance al siguiente artículo para obtener información sobre...

Añadir DALL-E a la aplicación de escritorio .NET MAUI para Windows

Compartir a través de