Intégration de ChatGPT dans .NET MAUI à partir de zéro

Découvrez comment implémenter ChatGPT dans votre application .NET MAUI en cinq étapes simples : c’est plus facile que vous ne le pensez !

L’intelligence artificielle (IA) est un outil puissant qui nous permet de créer des applications plus intelligentes, offrant des fonctionnalités supérieures à nos utilisateurs. Vous pensez peut-être qu’intégrer l’IA dans vos applications .NET MAUI est un défi, mais cet article vous montrera à quel point c’est simple ! Vous apprendrez comment intégrer les API ChatGPT d’OpenAI dans vos applications .NET MAUI à partir de zéro. 😎

1. Générez la clé API OpenAI

⚠️ Avant de passer à la première étape, vous devez disposer d’un compte OpenAI. Si vous n’en avez pas encore, prenez quelques minutes en créer un.

Nous devons générer une clé API, qui est un composant essentiel pour utiliser les services OpenAI, tels que ChatGPT, DALL-E et tous les autres modèles d’IA disponibles via cette API. Pour y parvenir, appliquez les étapes suivantes :

➖ Accédez au Configuration des clés APIet cliquez sur Créer une nouvelle clé secrète bouton.

➖ Pour créer la clé, vous devez remplir les champs suivants :

• Nom: Facultativement (mais de préférence), nommez votre clé. Pour cet exercice, j’ai nommé le mien MonTestClé.
• Projet: Spécifiez le propriétaire du projet de la clé.
• Autorisations : Définissez les autorisations souhaitées. Dans mon cas, j’ai donné toutes les autorisations.

Une fois que vous avez renseigné ces informations, cliquez sur le Générer une clé secrète bouton.

➖ Une boîte contenant votre clé secrète apparaîtra ensuite. Il est crucial de conserver cette clé dans un sûr et accessible lieu. Pour des raisons de sécurité, vous ne pourrez pas le récupérer en cas de perte et devrez plutôt générer un nouveau mot de passe.

C’est ça! Votre clé API est maintenant prête ! 😎 Passons à l’étape suivante !

2. Définissez la variable d’environnement

Vous devrez définir une variable d’environnement contenant votre clé API. Dans cet exemple, nous utiliserons le OPENAI_API_KEY variable d’environnement. Veuillez noter que cet exemple est purement éducatif et qu’il existe des moyens plus sécurisés de stocker votre clé. La documentation officielle suggère de lire l’article Meilleures pratiques pour la sécurité des clés API.

Voyons donc comment configurer cela pour Windows et Mac :

Sous Windows – Utilisation de PowerShell :

1. Ouvrez PowerShell et utilisez le setx commande pour définir la variable d’environnement. Remplacer <your-api-key> avec la clé que vous avez générée à l’étape précédente.

setx OPENAI_API_KEY "<your-api-key>"

2. Cette action définira de manière permanente le OPENAI_API_KEY variable d’environnement. Sachez que vous devez redémarrer PowerShell ou toute fenêtre d’invite de commande actuellement ouverte pour que ces modifications prennent effet.

Sur Mac – Utilisation du Terminal :

Commencez par ouvrir le terminal. Nous ajouterons la variable à votre fichier de profil shell pour conserver la variable d’environnement pour toutes les futures sessions de terminal.

En fonction de votre shell, le fichier de configuration varie :

• Pour bash (utilisé dans macOS Mojave (10.14) et les versions antérieures), utilisez ~/.bash_profile ou ~/.bashrc.
• Pour zsh (par défaut dans macOS Catalina (10.15) et versions ultérieures), utilisez ~/.zshrc.

Vous pouvez ajouter la variable en exécutant la commande suivante. (N’oubliez pas de remplacer <your-api-key> avec votre clé API réelle.)

echo 'export OPENAI_API_KEY="<your-api-key>"' >> ~/.zshrc

Après avoir terminé l’étape précédente, rechargez votre profil pour appliquer les modifications à l’aide de la commande suivante :

source ~/.zshrc

Pour vérifier que le OPENAI_API_KEY a été enregistré correctement, utilisez la commande suivante :

echo $OPENAI_API_KEY

Et c’est tout! Alternativement, si vous utilisez bash :

echo 'export OPENAI_API_KEY="<your-api-key>"' >> ~/.bash_profile
source ~/.bash_profile

3. Construisez le projet

Nous allons maintenant créer une interface utilisateur de base qui permettra l’interaction avec OpenAI. Cet exemple montrera principalement comment obtenir des recommandations de restaurants en fonction de l’emplacement souhaité.

C’est pourquoi nous allons créer un écran nommé MainPage.xaml avec les éléments suivants :

• Image décorative
• Une étiquette pour le titre
• Un champ de saisie pour saisir l’emplacement pour lequel vous souhaitez une recommandation de restaurant
• Un bouton qui déclenche l’appel API via un événement de clic

Tous ces éléments seront à l’intérieur d’un Disposition de la pile verticale. Voyons le XAML :

<VerticalStackLayout 
Padding="30,0" 
Spacing="25"> 

    <Image 
    Source="dotnet_bot.png" 
    HeightRequest="185" 
    Aspect="AspectFit"/> 
    <Label Text="AI Recommendations"/>
     
    <Entry x:Name="LocationEntry"
		    Placeholder="Write the location for recommended restaurants."/> 
    
    <Button Text="Click me" 
		    Clicked="OnRestaurantRecommendationClicked"/> 
    
    <Label x:Name="lblRecomendations"/>
    
</VerticalStackLayout>

Et créons les gestionnaires d’événements pour le bouton dans le MainPage.xaml.cs.

private async void OnRestaurantRecommendationClicked(object sender, EventArgs e)
{

}

✍️ Notez qu’il est marqué comme asynchrone car nous effectuerons des appels asynchrones à la bibliothèque Azure.AI.OpenAI.

Votre résultat devrait ressembler à l’image suivante :

4. Initialisez la bibliothèque Azure.AI.OpenAI

Le Azure.AI.OpenAI La bibliothèque fournit l’API .NET pour effectuer des appels aux API OpenAI et Azure OpenAI. Cette bibliothèque a été développée par l’équipe Microsoft Azure et est actuellement en pré-version.

Pour l’ajouter, ouvrez le package NuGet et recherchez la bibliothèque Azure.AI.OpenAI. Puisqu’il s’agit d’une version préliminaire, cochez la case « Inclure les versions préliminaires ».

⚠️ Si vous choisissez d’utiliser PowerShell, vous pouvez exécuter la commande suivante :

Install-Package Azure.AI.OpenAI -IncludePrerelease

Intégrons la configuration Azure dans votre MainPage.xaml.cs

1. Vous devez ajouter ce qui suit using déclarations au début de MainPage.xaml.cs déposer:

using Azure.AI.OpenAI;
using Azure;

2. En haut du fichier, incluez le code pour initialiser la bibliothèque Azure OpenAI avec votre clé API.

➖ La première variable, de type OpenAIClient, permet de stocker une instance du client API. Ce client interagira avec le service OpenAI, et pour cet exemple, il est nommé _chatGptClient.

private OpenAIClient _chatGptClient;

➖ Ensuite, continuons avec la variable qui stockera la clé que nous avons générée précédemment :

private string openAIKey = "<your-api-key-here>";

➖ Pour l’instant, nous laisserons cette variable nulle car nous utiliserons l’API OpenAI pour notre exemple. Cependant, vous pouvez ajouter n’importe quel point de terminaison dont vous avez besoin, y compris un pour l’API Azure OpenAI.

private string openAIEndpoint = null;

3. Il est temps de créer la méthode chargée.

Dans le même fichier, nous allons créer le MainPage_Loaded méthode. Celui-ci est responsable de l’initialisation de la bibliothèque Azure OpenAI. Après avoir créé cette méthode, incluez-la dans le MainPage constructeur afin qu’il soit invoqué à chaque chargement de la page.

Ci-dessous, je montre comment créer cette méthode et l’intégrer dans le constructeur. Je montre également à quoi devrait ressembler votre code après la mise en œuvre de toutes les étapes précédentes.

using Azure.AI.OpenAI; 
using Azure; 

namespace OpenAiSample; 
public partial class MainPage : ContentPage 
{ 
    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); 
	    }

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

}

5. Ajouter des appels API ChatGPT

Créons le GetRecommendationAsync méthode. Cela nous permettra d’exécuter la logique de recommandation et de l’utiliser plus tard dans l’événement de clic de bouton que nous avons créé précédemment.

➖ Le GetRecommendationAsync la méthode doit être asynchrone, renvoie un Task et acceptez une chaîne comme paramètre. Cette chaîne sera le texte que nous recevrons pour les recommandations. Au sein de cette méthode, vous trouverez différentes lignes commentées. Ces lignes représentent le code nécessaire, que nous allons détailler étape par étape. Vous pouvez identifier chaque étape grâce au commentaire correspondant.

private async Task GetRecommendationAsync(string recommendationType)
{
    // 1. Validating Entry's information
    // 2. Adding ChatCompletionsOptions
}

➖ Validation des informations de l’entrée : Confirme que Entry contient des informations avant d’effectuer l’appel API. Dans le cas contraire, il affiche une alerte.

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

➖ Ajout des ChatCompletionsOptions : Il s’agit d’une classe qui personnalise les demandes de discussion envoyées à l’API OpenAI. Il configure le traitement et la réponse de l’API aux données d’entrée fournies par l’utilisateur, également appelées invites. Il reçoit les paramètres suivants :

▪️ Nom du déploiement : Cela accepte une chaîne comme valeur, faisant référence au nom du déploiement (modèle) que vous souhaitez utiliser.

▪️ Messages: Cette fonction accepte une collection de ChatRequestUserMessage objets. Dans cet exemple, nous utilisons un texte spécifique pour demander précisément des recommandations de restaurants en fonction d’une localisation donnée :

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

Bien que nous n’utilisions que le message dans cet exemple, je vous encourage à explorer d’autres types de données qui peuvent être envoyés pour fournir un contexte plus riche à l’API.

▪️ Nombre de choix : Accepte un Int valeur, représentant le nombre de recommandations que vous souhaitez recevoir de l’API.

▪️ MaxTokens : Accepte un Int valeur, qui représente le nombre maximum de jetons (mots) que vous souhaitez que l’API renvoie dans la réponse.

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

ChatCompletionsOptions options = new()
{
    DeploymentName = "gpt-3.5-turbo",
    Messages = { new ChatRequestUserMessage(prompt) },
    ChoiceCount = 3,
    MaxTokens = 100,
};

▪️ Enfin, nous recevrons la réponse de l’API. Cette réponse sera un Response<ChatCompletions> objet, et grâce à cela nous pourrons montrer les informations obtenues dans le lblRecomendations étiquette.

Response<ChatCompletions> response = await _chatGptClient.GetChatCompletionsAsync(options); 
    
lblRecomendations.Text = response.Value.Choices[0].Message.Content;

Si vous avez appliqué toutes les étapes, votre méthode GetRecommendationAsync devrait ressembler à celui ci-dessous :

    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}"; 
    
    ChatCompletionsOptions options = new()
    { 
	    DeploymentName = "gpt-3.5-turbo",
	    Messages = { new ChatRequestUserMessage(prompt) },
	    ChoiceCount = 3,
	    MaxTokens = 100,
    };
    
    Response<ChatCompletions> response = await _chatGptClient.GetChatCompletionsAsync(options);
    lblRecomendations.Text = response.Value.Choices[0].Message.Content;

}

Pour terminer notre implémentation, il nous suffit d’invoquer le GetRecommendationAsync méthode dans l’événement de clic sur le bouton. Dans cet exemple, j’ai directement passé le recommendationType paramètre, qui nous permet de rechercher des recommandations au sein de la catégorie du restaurant.

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

Nous sommes prêts! Ci-dessous, une image des recommandations de restaurants que l’IA m’a données pour Saint-Domingue !

Conclusion

Nous avons développé une application simple qui vous demande un emplacement et vous suggère des restaurants lorsque vous cliquez sur le bouton. Tout cela est intégré à l’API ChatGpt OpenAI !

J’espère que cet article vous aidera à comprendre comment intégrer l’IA dans vos applications .NET MAUI à l’avenir. 💚💕

À la prochaine! 🙋‍♀️

Les références

Cet article était basé sur la documentation officielle :