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

Articolo
06/17/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 API .NET 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>

Si tenga presente che questo metodo funziona per lo sviluppo in Windows, ma è preferibile 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 maggiori informazioni, consultare la sezione 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 API .NET 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 OpenAI al progetto e prepararla per effettuare alcune chiamate API.

Fare riferimento e inizializzare la libreria OpenAI per .NET

Per chiamare le API ChatGPT di OpenAI, si userà una versione non definitiva del pacchetto NuGet OpenAI per .NET . Questa libreria fornisce alle applicazioni .NET l'accesso all'API REST OpenAI. 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.
Installare la libreria OpenAI eseguendo il comando seguente. Il flag IncludePrerelease è obbligatorio perché la libreria è ancora in anteprima:
```
Install-Package OpenAI -IncludePrerelease
```
Verrà installata una versione non definitiva della versione 2.0.0 o successiva nel progetto. È anche possibile installare una versione specifica della libreria specificando il numero di versione nel comando . Ad esempio, per installare la versione 2.0.0-beta.4, eseguire il comando seguente:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Aprire MainPage.xaml.cs, il file code-behind per la MainPage. Aggiungere il codice seguente all'inizio del file per fare riferimento alla libreria OpenAI e creare una variabile per contenere il client OpenAI. Aggiornare il costruttore per chiamare il MainPage_Loaded metodo quando viene caricata la pagina e aggiungere il MainPage_Loaded metodo per ottenere la chiave API OpenAI dal Registro di sistema di Windows e inizializzare il client 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);
}
```
Verrà avviato il bootstrap della libreria OpenAI con la chiave API. È possibile creare la chiave API nella pagina Impostazioni dell'API OpenAI.
Per compilare il progetto, è necessario aggiungere le istruzioni seguenti using nella parte alta del file MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

A questo punto siamo pronti a mettere tutto insieme. Nella sezione successiva si aggiungerà codice ai tre gestori eventi per effettuare chiamate alla libreria 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 OpenAI per .NET 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;
    }

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

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 una posizione, ottiene un'istanza ChatClient e chiama il CompleteChatStreamingAsync metodo sull'oggetto per effettuare una chiamata a OpenAI. Il CompleteChatStreamingAsync metodo accetta un ChatMessage[] parametro, che può essere fornito come stringa, come avviene nell'esempio.

Il metodo restituisce un AsyncResultCollection<StreamingChatCompletionUpdate>oggetto , che trasmetterà le risposte dall'API man mano che vengono generate. Si esegue l'iterazione updates in modo asincrono su e successivamente si esegue l'iterazione su ogni ChatMessageContentPart nella risposta per compilare la stringa di risposta. La risposta viene quindi visualizzata nel SmallLabel 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à.

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 nome del modello passato a GetChatClient per GetRecommendationAsync 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.

Passaggi successivi

Passare all'articolo successivo per informazioni su come...

Aggiungere DALL-E all'app desktop windows .NET MAUI

Condividi tramite