Freigeben über

Schnelleinstieg: DALL-E zu Ihrer .NET MAUI Windows-Desktop-App hinzufügen

  • Artikel

In diesem Schnelleinstieg zeigen wir Ihnen, wie Sie die Funktionalitäten von DALL-E zur Bilderzeugung in Ihre .NET MAUI-Windows-Desktop-App integrieren können.

Voraussetzungen

  • Visual Studio 2022 17.8 oder höher, mit installiertem .NET Multiplatform App UI Workload. Weitere Informationen finden Sie unter Installation.
  • Ein funktionales .NET MAUI-Projekt mit OpenAI-Integration, in das diese Funktionalität integriert wird. Lesen Sie Erstellen einer Empfehlungs-App mit .NET MAUI und ChatGPT - wir zeigen Ihnen, wie Sie DALL-E in die Benutzeroberfläche aus dieser Anleitung integrieren.
  • Ein OpenAI-API-Schlüssel aus Ihrem OpenAI-Entwicklerdashboard.
  • Eine .NET OpenAI NuGet-Paketversion 2.0.0 oder höher, die in Ihrem Projekt installiert ist. Diese Version ist derzeit eine Vorabversion. Wenn Sie dem .NET MAUI ChatGPT-Tutorial gefolgt sind, haben Sie diese Abhängigkeit bereits installiert und konfiguriert.

Welches Problem werden wir lösen?

Sie möchten die Funktionalitäten von DALL-E zur Bildgenerierung zu Ihrer .NET MAUI-Windows-Desktop-App hinzufügen, um den Benutzenden eine reichhaltige, interaktive Erfahrung zu bieten. Sie können die App bereits verwenden, um textbasierte Empfehlungen zu generieren, und Sie möchten die Möglichkeit hinzufügen, Bilder zu generieren, die eine Aktivität an dem Ort, den sie eingegeben haben, visualisieren.

Festlegen Ihrer Umgebungsvariablen

Um das OpenAI SDK zu verwenden, müssen Sie eine Umgebungsvariable mit Ihrem API-Schlüssel festlegen. In diesem Beispiel verwenden wir die Umgebungsvariable OPENAI_API_KEY. Sobald Sie Ihren API-Schlüssel aus dem OpenAI-Entwickler-Dashboard haben, können Sie die Umgebungsvariable wie folgt von der Kommandozeile aus setzen:

setx OPENAI_API_KEY <your-api-key>

Beachten Sie, dass diese Methode für die Entwicklung unter Windows funktioniert, Sie aber für Produktionsanwendungen und für den mobilen Support eine sicherere Methode verwenden sollten. So können Sie beispielsweise Ihren API-Schlüssel in einem sicheren Schlüsseltresor speichern, auf den ein Remote-Dienst im Namen Ihrer Anwendung zugreifen kann. Weitere Informationen finden Sie unter Bewährte Praktiken für OpenAI-Schlüsselsicherheit.

Installieren und Initialisieren der OpenAI-Bibliothek für .NET

In diesem Abschnitt installieren wir das SDK in das .NET MAUI-Projekt und initialisieren es mit Ihrem OpenAI-API-Schlüssel.

  1. Wenn Sie das OpenAI NuGet-Paket noch nicht installiert haben, können Sie dies tun, indem Sie dotnet add package OpenAI -IncludePrerelease über das Terminal-Fenster von Visual Studio ausführen.

  2. Nach der Installation können Sie die Instanz OpenAIClient aus dem SDK mit Ihrem OpenAI-API-Schlüssel in MainPage.xaml.cs wie folgt initialisieren:

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

Modifizieren der App-Benutzeroberfläche

Als Nächstes ändern wir die Benutzeroberfläche so, dass sie ein Image-Steuerelement enthält, das ein generiertes Bild unterhalb des Empfehlungstextes anzeigt.

  1. Wenn Sie mit einem neuen Projekt beginnen, kopieren Sie den XAML-code für MainPage.xaml aus dem Tutorial Erstellen einer App für Empfehlungen mit .NET MAUI und ChatGPT.

  2. Fügen Sie ein StackLayout mit einem Label-Steuerelement und einem CheckBox-Steuerelement zu MainPage.xaml unterhalb des LocationEntry-Steuerelements hinzu, um den Benutzenden die Möglichkeit zu bieten, auszuwählen, ob ein Bild erzeugt werden soll:

    ...
<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. Fügen Sie ein Image-Steuerelement unter dem SmallLabel-Steuerelement hinzu, um das generierte Bild anzuzeigen:

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

Implementieren der DALL-E-Imagegenerierung

In diesem Abschnitt fügen wir eine Methode für die Bildgenerierung hinzu und rufen sie von der vorhandenen GetRecommendationAsync-Methode aus auf, um das generierte Bild anzuzeigen.

  1. Wenn Sie mit einem neuen Projekt beginnen, vergewissern Sie sich, dass Ihr Code in MainPage.xaml.cs mit dem Code aus dem Tutorial Erstellen einer App für Empfehlungen mit .NET MAUI und ChatGPT übereinstimmt.

  2. Fügen Sie eine Methode mit dem Namen GetImageAsync hinzu, um die Bildgenerierung abzuwickeln. Die neue Methode ruft die OpenAI-API auf, um ein Bild zu erzeugen, das auf dem Prompt basiert, den wir im nächsten Schritt erstellen. Sie gibt ein ImageSource-Objekt zurück, das zur Anzeige des Bildes in der Benutzeroberfläche verwendet wird:

    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. Fügen Sie eine Using-Direktive für die Bilderzeugungsklassen am Anfang der Datei hinzu:

    using OpenAI.Images;

  4. Fügen Sie den folgenden Code am Ende der GetRecommendationAsync-Methode hinzu, um die GetImageAsync-Methode bedingt aufzurufen und das generierte Bild anzuzeigen:

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

    Die imagePrompt-Zeichenfolge wird auf der Grundlage der Ortseingabe des Benutzers und des ausgewählten Empfehlungstyps erstellt.

Ausführen und Testen

Führen Sie Ihre App aus, geben Sie einen gültigen Standort ein, und klicken Sie auf eine der Empfehlungsschaltflächen. Die Ausgabe sollte in etwa wie folgt aussehen:

Demo zur Bilderzeugung

Wie haben wir das Problem gelöst?

Wir haben die Funktionalitäten von DALL-E zur Generierung von Bildern in unsere .NET MAUI-Windows-Desktop-App integriert. Benutzende können jetzt Bilder auf der Grundlage des eingegebenen Ortes und des ausgewählten Empfehlungstyps generieren. Dies bietet ein reichhaltiges, interaktives Erlebnis für die Benutzenden und verbessert die Funktionalität der App.

Bereinigen von Ressourcen

Es ist wichtig, dass Sie sicherstellen, dass Ihr OpenAI-Konto sicher ist. Wenn Sie nicht planen, den OpenAI API-Schlüssel für andere Projekte zu verwenden, sollten Sie ihn aus Ihrem OpenAI-Entwickler-Dashboard löschen. Sie sollten auch ein angemessenes Ausgabenlimit für Ihr OpenAI-Konto festlegen, um unerwartete Kosten zu vermeiden. Sie können Ihren aktuellen Verbrauch und Ihre Ausgaben im OpenAI-Dashboard auf der Seite Usage überprüfen.

Zugehöriger Inhalt