Esercitazione: Creare un'app di raccomandazione con .NET MAUI e ChatGPT

Articolo
04/12/2024

In questo tutorial si apprenderà come creare un'app MAUI .NET per Windows in Visual Studio che richiede le API ChatGPT di OpenAI per fornire raccomandazioni in base a una posizione immessa dall'utente. L'app avrà un'interfaccia utente intuitiva che consente all'utente di immettere una posizione e ottenere consigli per ristoranti, hotel e luoghi d'attrazione.

In questa esercitazione apprenderai a:

Creare un'interfaccia utente semplice per l'app MAUI .NET
Informazioni di riferimento e bootstrap sulla libreria Azure.AI.OpenAI
Usare una chiave API per collegare l'app a un account API OpenAI
Effettuare chiamate alle API di chat OpenAI per ottenere consigli

Prerequisiti

Un account OpenAI
Una chiave API OpenAI
I requisiti di installazione .NET MAUI
Se non si ha una versione di .NET MAUI in Windows, è consigliabile iniziare con il tutorial Creazione della prima app MAUI .NET per Windows.

Imposta la variabile di ambiente

Per usare SDK OpenAI, è necessario impostare una variabile di ambiente con la chiave API. In questo esempio, si userà la variabile di ambiente OPENAI_API_KEY. Dopo aver ottenuto la chiave API dal dashboard degli sviluppatori OpenAI, è possibile impostare la variabile di ambiente dalla riga di comando come indicato di seguito:

setx OPENAI_API_KEY <your-api-key>

Tieni presente che questo metodo funziona per lo sviluppo in Windows, ma vuoi usare un metodo più sicuro per le app di produzione e per il supporto per dispositivi mobili. Ad esempio, è possibile archiviare la chiave API in un insieme di credenziali delle chiavi sicuro a cui un servizio remoto può accedere per conto dell'app. Per altre informazioni, vedere Procedure consigliate per la sicurezza delle chiavi OpenAI.

Creare un nuovo progetto MAUI .NET con gli elementi dell'interfaccia utente necessari

Si inizierà creando un nuovo progetto MAUI .NET in Visual Studio. Si userà il modello di app .NET MAUI e si aggiungeranno alcuni elementi dell'interfaccia utente a MainPage per fornire agli utenti alcuni consigli in base a una posizione specificata. L'interfaccia utente avrà pulsanti per ottenere consigli per ristoranti, alberghi e luoghi d'attrazione.

In Visual Studio creare un nuovo progetto di app .NET MAUI denominato ChatGptRecommendationApp.
Eseguire il nuovo progetto per assicurarsi che l'app venga compilata ed eseguita correttamente.
Aprire MainPage.xaml da Esplora soluzioni

Sostituire il contenuto di questa pagina VerticalStackLayout con il seguente markup 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" />

Per compilare il progetto, è necessario aggiungere Clicked gestori eventi per ognuno dei pulsanti. Aggiungere il codice seguente al file MainPage.xaml.cs e rimuovere il gestore eventi esistente:

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

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

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

I gestori eventi sono tutti contrassegnati come async perché verranno effettuate chiamate asincrone alla libreria Azure.AI.OpenAI. A questo punto, quando si esegue l'app, dovrebbe essere visualizzata la seguente interfaccia utente.

App MAUI di Windows .NET con l'interfaccia utente per fornire raccomandazioni.

Gli utenti possono immettere la loro posizione nel Entry controllo e fare clic su uno dei pulsanti per ottenere consigli per ristoranti, alberghi o luoghi d'attrazione. Il Label controllo nella parte inferiore dell'interfaccia utente visualizzerà i risultati.

Aggiungere quindi la libreria Azure.AI.OpenAI al progetto e prepararla per effettuare alcune chiamate API.

Fare riferimento e inizializzare la libreria Azure.AI.OpenAI

Per richiedere le API ChatGPT di OpenAI, si userà un pacchetto NuGet non rilasciato dal team di Microsoft Azure denominato Azure.AI.OpenAI. Questa libreria fornisce API .NET per effettuare chiamate alle API OpenAI e OpenAI di Azure. Si aggiungerà la libreria al progetto e si avvierà il bootstrap con la chiave API.

Aprire la console Gestione pacchetti dal menu Strumenti in Visual Studio.
Eseguire il seguente comando per installare la libreria Azure.AI.OpenAI. Il flag IncludePrerelease è obbligatorio perché la libreria è ancora in anteprima:
```
Install-Package Azure.AI.OpenAI -IncludePrerelease
```
Aprire MainPage.xaml.cs, il file code-behind per la MainPage. Aggiungere il codice seguente all'inizio del file per fare riferimento alla libreria Azure.AI.OpenAI e creare una variabile per contenere la chiave API OpenAI. Aggiornare il costruttore per richiedere il metodo MainPage_Loaded quando viene caricata la pagina e aggiungere il metodo MainPage_Loaded per inizializzare la libreria OpenAI di Azure:
```
private OpenAIClient _chatGptClient;
private string openAIKey = "<your-api-key-here>";
private string openAIEndpoint = null;

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
        ? new OpenAIClient(
            new Uri(openAIEndpoint),
            new AzureKeyCredential(openAIKey))
        : new OpenAIClient(openAIKey);
}
```
Verrà avviato il bootstrap della libreria OpenAI di Azure con la chiave API e verranno impostate alcune opzioni predefinite. È possibile creare la chiave API nella pagina Impostazioni dell'API OpenAI. Il codice viene scritto in modo da poter impostare un endpoint anche se si usa l'API OpenAI di Azure. Se si usa l'API OpenAI, la variabile openAIEndpoint verrà impostata su null.
Per compilare il progetto, è necessario aggiungere le istruzioni seguenti using nella parte alta del file MainPage.xaml.cs :
```
using Azure.AI.OpenAI;
using Azure;
```

A questo punto siamo pronti a mettere tutto insieme. Nella sezione successiva si aggiungerà un codice ai tre gestori eventi per effettuare chiamate alla libreria Azure.AI.OpenAI e visualizzare i risultati delle raccomandazioni.

Aggiungere chiamate API ChatGPT e testare l'app

È possibile aggiungere il codice al file code-behind che userà la libreria Azure.AI.OpenAI per effettuare chiamate all'API OpenAI ChatGPT. Il codice verrà aggiunto ai tre gestori eventi creati in precedenza. Il codice otterrà la posizione dell'utente dal Entry controllo e lo passerà all'API per ottenere raccomandazioni. Verranno quindi visualizzati i risultati nel Label controllo nella parte inferiore dell'interfaccia utente.

Creare un async metodo denominato GetRecommendationAsync e richiederlo da ognuno dei gestori eventi:
```
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;
    }

    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    // DeploymentName must match your custom deployment name (Azure OpenAI)
    // Or a default deployment name (such as OpenAI's GPT-3.5-turbo-0125) can be used
    ChatCompletionsOptions options = new()
    {
        DeploymentName = "gpt-3.5-turbo-0125",
        Messages =
        {
            new ChatRequestUserMessage(prompt)
        },
        ChoiceCount = 1,
        MaxTokens = 100,
    };

    var message = new ChatRequestUserMessage(prompt);
    options.Messages.Add(message);
    Response<ChatCompletions> response = await _chatGptClient.GetChatCompletionsAsync(options);
    SmallLabel.Text = response.Value.Choices[0].Message.Content;
}
```
Questo codice effettua una verifica prima di tutto per assicurarsi che l'utente abbia immesso una posizione nel Entry controllo . In caso contrario, viene visualizzato un avviso e viene restituito. Se l'utente ha immesso un percorso, richiedere il GetChatCompletionsAsync metodo nella libreria Azure.AI.OpenAI per effettuare una chiamata a OpenAI. Il metodo GetChatCompletionsAsync accetta un ChatCompletionOptions parametro. Questo parametro è stato creato con le opzioni seguenti:
- DeploymentName : nome della distribuzione (modello) da usare.
- Messaggi : si tratta di una raccolta di ChatRequestUserMessage oggetti. In questo esempio viene usato un solo messaggio, ma è possibile aggiungere altri elementi alla raccolta per fornire più contesto all'API.
- ChoiceCount : numero di raccomandazioni da recuperare dall'API. In questo esempio viene chiesto solo un consiglio.
- MaxTokens : numero massimo di token (parole) che si vuole che l'API restituisca nella risposta. In questo esempio vengono chiesti 100 token.
Il metodo GetChatCompletionsAsync restituisce un oggetto Response<ChatCompletions> contenente la risposta dall'API. Si otterrà il testo della Message.Content risposta dal primo Choice nella raccolta response.Value.Choices e lo si visualizzerà in un controllo nella parte inferiore dell'interfaccia utente.

Nota

È consigliabile aggiungere la gestione degli errori al GetRecommendationAsync metodo per gestire eventuali eccezioni che potrebbero essere generate dalla chiamata API. Questo esempio è stato lasciato fuori per semplicità.
Nella using parte superiore del file MainPage.xaml.cs sono necessarie anche le istruzioni seguenti per il codice aggiunto in questa sezione:
```
using Azure.AI.OpenAI;
using Azure;
```
Eseguire l'app, immettere un percorso e testare i pulsanti di raccomandazione. Verrà visualizzata una risposta dall'API nel controllo Label nella parte inferiore dell'interfaccia utente:

Ecco fatto! È stata creata correttamente un'app MAUI di Windows .NET che usa l'API OpenAI ChatGPT per fornire consigli per ristoranti, hotel e luoghi d'attrazione. Provare a modificare le richieste per verificare se è possibile migliorare i risultati. È anche possibile provare a modificare il DeploymentName valore nell'oggetto ChatCompletionsOptions in GetRecommendationAsync per verificare se si ottengono risultati migliori da un modello diverso.

Importante

Ricordarsi di tenere d'occhio l'utilizzo dell'API dopo la scadenza del periodo di valutazione. È anche possibile impostare limiti di spesa mensili per l'account OpenAI per evitare addebiti imprevisti.