Partager via

Démarrage rapide : ajouter DALL-E à votre application de bureau .NET MAUI sur Windows

  • Article

Dans ce guide de démarrage rapide, nous allons vous montrer comment intégrer les capacités de génération d’images de DALL-E dans votre application de bureau .NET MAUI sur Windows.

Prérequis

  • Visual Studio 2022 17.8 ou version ultérieure, avec la charge de travail de l’interface utilisateur de l’application multiplateforme .NET installée. Pour plus d’informations, consultez Installation.
  • Un projet .NET MAUI fonctionnel avec l’intégration d’OpenAI dans laquelle cette fonctionnalité sera intégrée. Consultez Créer une application de recommandation avec .NET MAUI et ChatGPT. Dans ce guide, nous allons vous montrer comment intégrer DALL-E à l’interface utilisateur.
  • Clé API OpenAI à partir de votre tableau de bord du développeur OpenAI.
  • Un package NuGet OpenAI .NET version 2.0.0 ou ultérieure installé dans votre projet. Cette version est actuellement en préversion. Si vous avez suivi le didacticiel sur .NET MAUI ChatGPT, cette dépendance est installée et configurée.

Quel problème résoudrons-nous ?

Vous souhaitez ajouter les fonctionnalités de génération d’images de DALL-E à votre application de bureau Windows .NET MAUI pour procurer aux utilisateurs une expérience riche et interactive. Ils peuvent déjà utiliser l’application pour générer des recommandations basées sur du texte, et vous voulez leur donner la possibilité de générer des images qui permettent de visualiser une activité à l’endroit qu’ils ont indiqué.

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).

Installer et initialiser la bibliothèque OpenAI pour .NET

Dans cette section, nous allons installer le kit de développement logiciel (SDK) dans le projet .NET MAUI et l’initialiser avec votre clé API OpenAI.

  1. Si vous n’avez pas encore installé le package NuGet OpenAI, vous pouvez le faire en exécutant dotnet add package OpenAI -IncludePrerelease dans la fenêtre de terminal de Visual Studio.

  2. Vous pouvez ensuite initialiser l’instance OpenAIClient à partir du kit de développement logiciel (SDK) avec votre clé API OpenAI dans MainPage.xaml.cs de la façon suivante :

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

Modifiez l’interface utilisateur de votre application

Nous allons maintenant modifier l’interface utilisateur pour inclure un contrôle Image qui affiche une image générée sous le texte de recommandation.

  1. Si vous commencez par un nouveau projet, copiez le code XAML pour MainPage.xaml depuis le didacticiel Créer une application de recommandation avec .NET MAUI et ChatGPT.

  2. Ajoutez un StackLayout contenant un contrôle Label et un contrôle CheckBox à MainPage.xaml sous le contrôle LocationEntry pour permettre aux utilisateurs de décider de générer ou non une image :

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

<!-- Add this markup -->
<StackLayout Orientation="Horizontal"
                HorizontalOptions="Center">
    <Label Text="Generate image" VerticalOptions="Center"/>
    <CheckBox x:Name="IncludeImageChk" VerticalOptions="Center"/>
</StackLayout>
...

  3. Ajoutez un contrôle Image sous le contrôle SmallLabel pour afficher l’image générée :

    ...
    <Image x:Name="GeneratedImage"
           WidthRequest="256"
           HeightRequest="256"
           HorizontalOptions="Center"/>
</VerticalStackLayout>

Implémentez la génération d’images DALL-E

Dans cette section, nous allons ajouter une méthode pour gérer la génération d’images et l’appeler à partir de la méthode GetRecommendationAsync existante pour afficher l’image générée.

  1. Si vous commencez avec un nouveau projet, vérifiez que votre code dans MainPage.xaml.cs correspond à celui du didacticiel Créer une application de recommandation avec .NET MAUI et ChatGPT.

  2. Ajoutez une méthode nommée GetImageAsync pour gérer la génération d’images. La nouvelle méthode appelle l’API OpenAI pour générer une image basée sur l’invite que nous allons générer à l’étape suivante. Elle retourne un objet ImageSource utilisé pour afficher l’image dans l’interface utilisateur :

    public async Task<ImageSource> GetImageAsync(string prompt)
{
    // Use the DALL-E 3 model for image generation.
    ImageClient imageClient = _chatGptClient.GetImageClient("dall-e-3");

    // Generate an image based on the prompt with a 1024x1024 resolution, the default for DALL-E 3.
    ClientResult<GeneratedImage> response = await imageClient.GenerateImageAsync(prompt, 
        new ImageGenerationOptions
        {
            Size = GeneratedImageSize.W1024xH1024,
            ResponseFormat = GeneratedImageFormat.Uri
        });

    // Image generation responses provide URLs you can use to retrieve requested image(s).
    Uri imageUri = response.Value.ImageUri;

    return ImageSource.FromUri(imageUri);
}

  3. Ajoutez une directive using pour les classes de génération d’images en haut du fichier :

    using OpenAI.Images;

  4. Ajoutez le code suivant à la fin de la méthode GetRecommendationAsync pour appeler de manière conditionnelle la méthode GetImageAsync et afficher l’image générée :

    if (IncludeImageChk.IsChecked)
{
    var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}.";
    GeneratedImage.Source = await GetImageAsync(imagePrompt);
}

    La chaîne imagePrompt est créée en fonction de la localisation de l’utilisateur et du type de recommandation sélectionné.

Exécuter et tester

Exécutez votre application, saisissez un emplacement valide, puis cliquez sur l’un des boutons de recommandation. Un résultat semblable à celui-ci doit s’afficher :

Démonstration de génération d’images

Comment avons-nous résolu le problème ?

Nous avons ajouté les fonctionnalités de génération d’images de DALL-E à notre application de bureau Windows .NET MAUI. Les utilisateurs peuvent désormais générer des images en fonction de l’emplacement qu’ils indiquent et du type de recommandation qu’ils sélectionnent. Les utilisateurs bénéficient ainsi d’une expérience riche et interactive et les fonctionnalités de l’application s’en trouve améliorée.

Nettoyer les ressources

Il est important de s’assurer que votre compte OpenAI est sécurisé. Si vous ne prévoyez pas d’utiliser la clé d’API OpenAI pour d’autres projets, vous devez la supprimer de votre tableau de bord du développeur OpenAI. Vous devriez également fixer une limite de dépenses raisonnable sur votre compte OpenAI afin d’éviter toute dépense imprévue. Vous pouvez suivre votre utilisation et vos dépenses actuelles dans le tableau de bord OpenAI, sur la page Utilisation.

Contenu connexe