Tutoriel : Créer une application de recommandations avec .NET MAUI et ChatGPT

Article
06/18/2024

Dans ce tutoriel, vous apprendrez à créer une application .NET MAUI pour Windows dans Visual Studio qui appelle les API de ChatGPT d’OpenAI pour fournir des recommandations basées sur un emplacement saisi par l’utilisateur. L’application aura une interface utilisateur simple qui permet à l’utilisateur d’entrer un emplacement et d’obtenir des recommandations concernant les restaurants, les hôtels et les attractions.

Dans ce tutoriel, vous allez apprendre à :

Créer une interface utilisateur simple pour votre application .NET MAUI
Référencer et amorcer la bibliothèque d’API OpenAI .NET
Utiliser une clé API pour lier votre application à un compte d’API OpenAI
Effectuez des appels aux API de chat d’OpenAI pour obtenir des recommandations

Prérequis

Un compte OpenAI
Une clé API OpenAI
La configuration requise pour l’installation de .NET MAUI
Si vous débutez avec .NET MAUI sur Windows, vous devez commencer par le tutoriel Créer votre première application .NET MAUI pour Windows.

Définir vos variables d’environnement

Pour utiliser le Kit de développement logiciel (SDK) OpenAI, vous devez définir une variable d’environnement avec votre clé API. Dans cet exemple, nous allons utiliser la variable d'environnement OPENAI_API_KEY. Une fois que vous avez votre clé API à partir du tableau de bord du développeur OpenAI, vous pouvez définir la variable d’environnement à partir de la ligne de commande comme suit :

setx OPENAI_API_KEY <your-api-key>

Notez que cette méthode fonctionne pour le développement sur Windows, mais il est préférable d'utiliser une méthode plus sécurisée pour les applications de production et pour la prise en charge mobile. Par exemple, vous pouvez stocker votre clé API dans un coffre de clés sécurisé auquel un service distant peut accéder pour le compte de votre application. Pour plus d’informations, consultez la page Best practices for OpenAI key safety (Bonnes pratiques pour la sécurité des clés OpenAI).

Créer un projet .NET MAUI avec les éléments d’interface utilisateur requis

Nous allons commencer par créer un projet .NET MAUI dans Visual Studio. Nous allons utiliser le modèle d’application .NET MAUI et ajouter des éléments d’interface utilisateur à MainPage pour fournir aux utilisateurs des recommandations basées sur un emplacement fourni. L’interface utilisateur comportera des boutons permettant d’obtenir des recommandations concernant les restaurants, les hôtels et les attractions.

Dans Visual Studio, créez un projet d’application .NET MAUI nommé ChatGptRecommendationApp.
Exécutez le nouveau projet pour vous assurer que l’application est générée et s’exécute correctement.
Ouvrez le fichier MainPage.xaml à partir de l’Explorateur de solutions.

Remplacez le contenu de VerticalStackLayout par le balisage XAML ci-dessous :

<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" />

Pour générer le projet, vous devez ajouter des gestionnaires d’événements Clicked pour chacun des boutons. Ajoutez le code suivant au fichier MainPage.xaml.cs et supprimez le gestionnaire d’événements existant :
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

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

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

Les gestionnaires d’événements sont tous marqués async car nous ferons des appels asynchrones à la bibliothèque d’API OpenAI .NET. À présent, quand vous exécutez l’application, vous devez voir l’interface utilisateur suivante :

Application MAUI Windows .NET avec l’interface utilisateur permettant de fournir des recommandations.

Les utilisateurs peuvent entrer leur emplacement dans le contrôle Entry et cliquer sur l’un des boutons pour obtenir des recommandations concernant les restaurants, les hôtels ou les attractions. Le contrôle Label en bas de l’interface utilisateur affiche les résultats.

Ensuite, ajoutons la bibliothèque OpenAI au projet et préparons-la à effectuer des appels API.

Référencer et initialiser la bibliothèque OpenAI pour .NET

Pour appeler les API ChatGPT d’OpenAI, nous allons utiliser une préversion du package NuGet Bibliothèque OpenAI pour .NET. Cette bibliothèque donne aux applications .NET un accès à l’API REST OpenAI. Nous allons ajouter la bibliothèque à notre projet et l’amorcer avec notre clé API.

Ouvrez la console du Gestionnaire de package à partir du menu Outils de Visual Studio.
Installez la bibliothèque OpenAI en exécutant la commande suivante. L’indicateur IncludePrerelease est requis car la bibliothèque est encore en préversion :
```
Install-Package OpenAI -IncludePrerelease
```
Cela devrait installer une préversion de la version 2.0.0 ou ultérieure dans votre projet. Vous pouvez également installer une version spécifique de la bibliothèque en spécifiant le numéro de version dans la commande. Par exemple, pour installer la version 2.0.0-beta.4, exécutez la commande suivante :
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Ouvrez MainPage.xaml.cs, le fichier code-behind pour MainPage. Ajoutez le code suivant en haut du fichier pour référencer la bibliothèque OpenAI et créer une variable pour contenir votre client OpenAI. Mettez à jour le constructeur pour appeler la méthode MainPage_Loaded lorsque la page est chargée, et ajoutez la méthode MainPage_Loaded pour obtenir votre clé API OpenAI à partir du registre Windows et initialiser le 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);
}
```
Cela initialisera la bibliothèque OpenAI avec votre clé API. Vous pouvez créer votre clé API sur la page des paramètres de l’API OpenAI.
Pour compiler le projet, vous devrez ajouter les déclarations using suivantes en haut du fichier MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Nous allons à présent regrouper tous les éléments. Dans la section suivante, nous ajouterons du code aux trois gestionnaires d’événements pour effectuer des appels à la bibliothèque OpenAI et afficher les résultats des recommandations.

Ajouter des appels d’API ChatGPT et tester l’application

Il est temps d’ajouter le code à notre fichier code-behind qui utilisera la bibliothèque OpenAI pour .NET pour effectuer des appels à l’API OpenAI ChatGPT. Nous allons ajouter le code aux trois gestionnaires d’événements que nous avons créés précédemment. Le code récupérera l’emplacement de l’utilisateur à partir du contrôle Entry et le transmettra à l’API pour obtenir des recommandations. Ensuite, nous allons afficher les résultats dans le contrôle Label en bas de l’interface utilisateur.

Créez une méthode async nommée GetRecommendationAsync et appelez-la depuis chacun des gestionnaires d’événements :

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

Ce code vérifie d’abord que l’utilisateur a entré un emplacement dans le contrôle Entry. Si ce n’est pas le cas, il affiche une alerte et revient à l’étape précédente. Si l’utilisateur a entré un emplacement, il obtient une instance ChatClient et appelle la méthode CompleteChatStreamingAsync sur cet objet pour effectuer un appel à OpenAI. La méthode CompleteChatStreamingAsync prend un paramètre ChatMessage[], qui peut être fourni en tant que chaîne, comme nous le faisons dans l’exemple.

La méthode retourne un AsyncResultCollection<StreamingChatCompletionUpdate>, qui diffuse les réponses de l’API à mesure qu’elles sont générées. Nous itérerons de façon asynchrone sur updates et itérons ensuite sur chaque ChatMessageContentPart pour générer la chaîne de réponse. La réponse est ensuite affiché dans le contrôle SmallLabel en bas de l’interface utilisateur.

Remarque

Il est conseillé d’ajouter une gestion des erreurs à la méthode GetRecommendationAsync pour gérer les exceptions qui pourraient être levées par l’appel API. Nous avons omis cela dans cet exemple pour des raisons de simplicité.

Exécutez l’application, entrez un emplacement, puis testez les boutons de recommandations. Une réponse de l’API devrait s’afficher dans le contrôle Label en bas de l’interface utilisateur :

Et voilà ! Vous avez créé une application Windows .NET MAUI qui utilise l’API ChatGPT d’OpenAI pour fournir des recommandations concernant les restaurants, les hôtels et les attractions. Essayez de modifier les invites pour voir si vous pouvez améliorer les résultats. Vous pouvez également essayer de le nom de modèle passé à GetChatClient dans GetRecommendationAsync pour voir si vous obtenez de meilleurs résultats à partir d’un modèle différent.

Important

N’oubliez pas de surveiller l’utilisation de votre API après l’expiration de votre période d’essai. Vous pouvez également définir des limites de dépense mensuelles sur votre compte OpenAI pour éviter des frais inattendus.

Étapes suivantes

Passez à l’article suivant pour savoir comment…

Ajouter DALL-E à votre application bureautique .NET MAUI sur Windows

Partager via