Udostępnij przez

Szybki start: dodawanie DALL-E do aplikacji klasycznej .NET MAUI dla systemu Windows

Zintegruj funkcje generowania obrazów DALL-E z aplikacją klasyczną systemu Windows .NET MAUI, aby ulepszyć środowisko użytkownika dzięki wizualizacjom generowanym przez sztuczną inteligencję. Ten przewodnik zawiera instrukcje krok po kroku z przykładami kodu, aby dodać zaawansowane funkcje generowania obrazów do aplikacji.

Wymagania wstępne

  • Program Visual Studio 2022 w wersji 17.8 lub nowszej z zainstalowanym pakietem pracy interfejsu użytkownika aplikacji wieloplatformowej platformy .NET. Aby uzyskać więcej informacji, zobacz Installation.
  • Funkcjonalny projekt MAUI platformy .NET z integracją openAI, w którym ta funkcja zostanie zintegrowana. Zobacz Tworzenie aplikacji rekomendacji przy użyciu interfejsu .NET MAUI i ChatGPT — pokażemy, jak zintegrować DALL-E z interfejsem użytkownika z tego przewodnika.
  • Klucz API OpenAI z pulpitu nawigacyjnego dewelopera OpenAI.
  • Pakiet NuGet .NET OpenAI w wersji 2.0.0 lub nowszej jest zainstalowany w Twoim projekcie. Ta wersja jest obecnie w wersji przedpremierowej. Jeśli śledziłeś samouczek .NET MAUI ChatGPT, będziesz mieć tę zależność zainstalowaną i skonfigurowaną.

Jaki problem rozwiążemy?

Chcesz dodać możliwości generowania obrazów przez DALL-E do swojej aplikacji desktopowej .NET MAUI na Windows, aby zapewnić użytkownikom bogate, interaktywne doświadczenie. Mogą już używać aplikacji do generowania rekomendacji opartych na tekście i chcesz dodać możliwość generowania obrazów wizualizowania działania w wprowadzonej lokalizacji.

Ustawianie zmiennej środowiskowej

Aby korzystać z zestawu OpenAI SDK, należy ustawić zmienną środowiskową przy użyciu klucza interfejsu API. W tym przykładzie użyjemy zmiennej środowiskowej OPENAI_API_KEY . Po uzyskaniu klucza interfejsu API z pulpitu nawigacyjnego dewelopera OpenAI, możesz ustawić zmienną środowiskową z poziomu wiersza polecenia w następujący sposób:

setx OPENAI_API_KEY <your-api-key>

Należy pamiętać, że ta metoda działa na potrzeby programowania w systemie Windows, ale należy użyć bezpieczniejszej metody dla aplikacji produkcyjnych i obsługi urządzeń przenośnych. Możesz na przykład przechowywać klucz interfejsu API w bezpiecznym magazynie kluczy, do którego usługa zdalna może uzyskać dostęp w imieniu aplikacji. Aby uzyskać więcej informacji , zobacz Best practices for OpenAI key safety (Najlepsze rozwiązania dotyczące bezpieczeństwa kluczy openAI ).

Instalowanie i inicjowanie biblioteki OpenAI dla platformy .NET

W tej sekcji zainstalujemy zestaw SDK w projekcie .NET MAUI i zainicjujemy go przy użyciu klucza interfejsu API OpenAI.

  1. Jeśli pakiet NuGet nie został jeszcze zainstalowany OpenAI , możesz to zrobić, uruchamiając polecenie dotnet add package OpenAI -IncludePrerelease w oknie terminalu programu Visual Studio.

  2. Po zainstalowaniu można zainicjować OpenAIClient wystąpienie z zestawu SDK przy użyciu klucza interfejsu API OpenAI w następujący MainPage.xaml.cs sposób:

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

Modyfikowanie interfejsu użytkownika aplikacji

Następnie zmodyfikujemy interfejs użytkownika tak, aby zawierał kontrolkę Image , która wyświetla wygenerowany obraz poniżej tekstu zalecenia.

  1. Jeśli zaczynasz nowy projekt, skopiuj kod XAML z samouczka MainPage.xaml.

  2. Dodaj kontrolkę StackLayout zawierającą kontrolkę Label i kontrolkę CheckBox poniżej MainPage.xaml kontrolki LocationEntry , aby umożliwić użytkownikom wybranie, czy ma zostać wygenerowany obraz:

    ...
<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. Dodaj kontrolkę Image poniżej kontrolki, SmallLabel aby wyświetlić wygenerowany obraz:

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

Implementacja generowania obrazów DALL-E

W tej sekcji dodamy metodę do obsługi generowania obrazów i wywołania jej z istniejącej GetRecommendationAsync metody w celu wyświetlenia wygenerowanego obrazu.

  1. Jeśli zaczynasz od nowego projektu, upewnij się, że kod w MainPage.xaml.cs pliku jest zgodny z kodem z samouczka Create a recommendation app with .NET MAUI and ChatGPT (Tworzenie aplikacji rekomendacji przy użyciu programu .NET MAUI i ChatGPT ).

  2. Dodaj metodę o nazwie GetImageAsync do obsługi generowania obrazów. Nowa metoda wywoła interfejs API OpenAI w celu wygenerowania obrazu na podstawie monitu, który utworzymy w następnym kroku. Zwraca ImageSource obiekt używany do wyświetlania obrazu w interfejsie użytkownika:

    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. Dodaj dyrektywę using dla klas generowania obrazów w górnej części pliku:

    using OpenAI.Images;

  4. Dodaj następujący kod na końcu GetRecommendationAsync metody, aby warunkowo wywołać metodę GetImageAsync i wyświetlić wygenerowany obraz:

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

    Ciąg imagePrompt jest tworzony na podstawie danych wejściowych lokalizacji użytkownika i wybranego typu zalecenia.

Uruchamianie i testowanie

Uruchom aplikację, wprowadź prawidłową lokalizację i kliknij jeden z przycisków rekomendacji. Powinna zostać wyświetlona zawartość podobna do następującej:

Zrzut ekranu aplikacji .NET MAUI z obrazem wygenerowanym przez DALL-E, przedstawiającym wesołe aktywności w przestrzeni miejskiej z rekomendacjami.

Jak rozwiązaliśmy ten problem?

Dodaliśmy możliwości generowania obrazów DALL-E do naszej aplikacji desktopowej .NET MAUI systemu Windows. Użytkownicy mogą teraz generować obrazy na podstawie wprowadzonej lokalizacji i typu wybranej rekomendacji. Zapewnia to zaawansowane, interaktywne środowisko dla użytkowników i zwiększa funkcjonalność aplikacji.

Uprzątnij zasoby

Ważne jest, aby upewnić się, że twoje konto OpenAI jest bezpieczne. Jeśli nie planujesz używania klucza interfejsu API OpenAI dla innych projektów, usuń go z pulpitu nawigacyjnego dewelopera openAI. Należy również ustawić rozsądny limit wydatków na koncie OpenAI, aby uniknąć nieoczekiwanych opłat. Bieżące użycie i wydatki można sprawdzić na pulpicie nawigacyjnym interfejsu OpenAI na stronie Użycie .

Zobacz także

  • Last updated on