Quickstart: DALL-E toevoegen aan uw .NET MAUI Windows-bureaublad-app

Integreer DALL-E mogelijkheden voor het genereren van afbeeldingen in uw WINDOWS-bureaublad-app van .NET MAUI om de gebruikerservaring te verbeteren met door AI gegenereerde visuals. Deze handleiding bevat stapsgewijze instructies met codevoorbeelden om krachtige functies voor het genereren van afbeeldingen toe te voegen aan uw toepassing.

Vereiste voorwaarden

Visual Studio 2022 17.8 of hoger, waarbij de ui-workload van de .NET-app voor meerdere platforms is geïnstalleerd. Zie Installationvoor meer informatie.
Een functioneel .NET MAUI-project met OpenAI-integratie waarin deze mogelijkheid zal worden geïntegreerd. Zie Een aanbevelings-app maken met .NET MAUI en ChatGPT - we zullen demonstreren hoe u DALL-E in de gebruikersinterface van deze handleiding kunt integreren.
Een OpenAI API-sleutel vanuit uw OpenAI-ontwikkelaarsdashboard.
Een .NET OpenAI NuGet-pakket versie 2.0.0 of hoger dat in uw project is geïnstalleerd. Deze versie bevindt zich momenteel in de pre-release fase. Als u de .NET MAUI ChatGPT tutorial hebt gevolgd, hebt u deze afhankelijkheid geïnstalleerd en geconfigureerd.

Welk probleem gaan we oplossen?

Wilt u de beeldgeneratie mogelijkheden van DALL-E toevoegen aan uw .NET MAUI Windows desktop-app om gebruikers een rijke, interactieve ervaring te bieden? Ze kunnen de app al gebruiken om aanbevelingen op basis van tekst te genereren en u wilt de mogelijkheid toevoegen om afbeeldingen te genereren die een activiteit visualiseren op de locatie die ze hebben ingevoerd.

Uw omgevingsvariabele instellen

Als u de OpenAI SDK wilt gebruiken, moet u een omgevingsvariabele instellen met uw API-sleutel. In dit voorbeeld gebruiken we de OPENAI_API_KEY omgevingsvariabele. Zodra u uw API-sleutel hebt vanuit het OpenAI-ontwikkelaarsdashboard, kunt u de omgevingsvariabele als volgt instellen vanaf de opdrachtregel:

setx OPENAI_API_KEY <your-api-key>

Houd er rekening mee dat deze methode werkt voor ontwikkeling in Windows, maar u wilt een veiligere methode gebruiken voor productie-apps en voor mobiele ondersteuning. U kunt uw API-sleutel bijvoorbeeld opslaan in een beveiligde sleutelkluis waartoe een externe service namens uw app toegang heeft. Zie best practices voor OpenAI-sleutelveiligheid voor meer informatie.

De OpenAI-bibliotheek voor .NET installeren en initialiseren

In deze sectie installeren we de SDK in het .NET MAUI-project en initialiseren we deze met uw OpenAI API-sleutel.

Als u het OpenAI NuGet-pakket nog niet hebt geïnstalleerd, kunt u dit doen door het terminalvenster van Visual Studio uit te voeren dotnet add package OpenAI -IncludePrerelease .

Zodra het is geïnstalleerd, kunt u het OpenAIClient exemplaar van de SDK als volgt initialiseren met uw OpenAI API-sleutel MainPage.xaml.cs :

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

De gebruikersinterface van uw app wijzigen

Vervolgens wijzigen we de gebruikersinterface om een Image besturingselement op te nemen dat een gegenereerde afbeelding weergeeft onder de aanbevelingstekst.

Als u aan een nieuw project begint, kopieert u de XAML voor MainPage.xaml uit de zelfstudie Een aanbevelings-app maken met .NET MAUI en ChatGPT.

Voeg een StackLayout controle met een Label controle en een CheckBox controle toe aan MainPage.xaml, onder het LocationEntry controle, zodat gebruikers kunnen kiezen of ze een afbeelding willen genereren.

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

Voeg een Image besturingselement toe onder het SmallLabel besturingselement om de gegenereerde afbeelding weer te geven:

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

Implementatie van DALL-E-afbeeldingsgeneratie

In deze sectie voegen we een methode toe om beeldgeneratie te verwerken en roepen we deze aan vanuit de bestaande GetRecommendationAsync methode om de gegenereerde afbeelding weer te geven.

Als u met een nieuw project begint, moet u ervoor zorgen dat uw code in MainPage.xaml.cs overeenkomt met de code uit de zelfstudie Een aanbevelings-app maken met .NET MAUI en ChatGPT.

Voeg een methode toe met de naam GetImageAsync om het genereren van afbeeldingen te behandelen. Met de nieuwe methode wordt de OpenAI-API aangeroepen om een installatiekopieën te genereren op basis van de prompt die we in de volgende stap gaan bouwen. Het retourneert een ImageSource object dat wordt gebruikt om de afbeelding weer te geven in de gebruikersinterface:

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

Voeg een using-instructie toe voor de klassen voor het genereren van installatiekopieën boven aan het bestand:
```
using OpenAI.Images;
```
Voeg de volgende code toe aan het einde van de GetRecommendationAsync methode om de GetImageAsync methode voorwaardelijk aan te roepen en de gegenereerde afbeelding weer te geven:
```
if (IncludeImageChk.IsChecked)
{
    var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}.";
    GeneratedImage.Source = await GetImageAsync(imagePrompt);
}
```
De imagePrompt tekenreeks is gebouwd op basis van de locatie-invoer van de gebruiker en het geselecteerde aanbevelingstype.

Uitvoeren en testen

Voer uw app uit, voer een geldige locatie in en klik op een van de aanbevelingsknoppen. U zou iets moeten zien dat er ongeveer zo uitziet:

Schermopname van de .NET MAUI-app met DALL-E gegenereerde afbeelding van leuke activiteiten op een plaatslocatie met aanbevelingstekst.

Hoe hebben we het probleem opgelost?

We hebben DALL-E's mogelijkheden voor het genereren van afbeeldingen toegevoegd aan onze .NET MAUI Windows desktop-app. Gebruikers kunnen nu afbeeldingen genereren op basis van de locatie die ze invoeren en het type aanbeveling dat ze selecteren. Dit biedt een rijke, interactieve ervaring voor gebruikers en verbetert de functionaliteit van de app.

De hulpbronnen opschonen

Het is belangrijk om ervoor te zorgen dat uw OpenAI-account veilig is. Als u niet van plan bent om de OpenAI API-sleutel voor andere projecten te gebruiken, moet u deze verwijderen uit uw OpenAI-ontwikkelaarsdashboard. U moet ook een redelijke bestedingslimiet instellen voor uw OpenAI-account om onverwachte kosten te voorkomen. U kunt uw huidige gebruik en uitgaven controleren in het OpenAI-dashboard op de pagina Gebruik .

Zie ook

Feedback

Is deze pagina nuttig?

Last updated on 2025-08-05