Share via

Краткое руководство. Добавление DALL-E в классическое приложение .NET MAUI Для Windows

  • Статья

В этом кратком руководстве мы покажем, как интегрировать возможности создания образов DALL-E в классическое приложение .NET MAUI Для Windows.

Необходимые компоненты

  • Visual Studio 2022 17.8 или более поздней версии с установленной рабочей нагрузкой пользовательского интерфейса многоплатформенного приложения .NET. Дополнительные сведения см. в разделе Установка.
  • Функциональный проект .NET MAUI с интеграцией OpenAI, в которую будет интегрирована эта возможность. См. статью "Создание приложения рекомендаций" с помощью .NET MAUI и ChatGPT . Мы покажем, как интегрировать DALL-E в пользовательский интерфейс из этого руководства.
  • Ключ API OpenAI на панели мониторинга разработчика OpenAI.
  • Пакет NuGet Azure.AI.OpenAI, установленный в проекте. Если вы последовали вместе с руководством по .NET MAUI ChatGPT, у вас будет установлена и настроена эта зависимость.

Какая проблема будет решена?

Вы хотите добавить возможности создания образов DALL-E в классическое приложение .NET MAUI Windows, чтобы предоставить пользователям широкий интерактивный интерфейс. Они уже могут использовать приложение для создания текстовых рекомендаций, и вы хотите добавить возможность создавать изображения, визуализирующие действие в введенном расположении.

Настройка переменной среды

Чтобы использовать пакет SDK OpenAI, необходимо задать переменную среды с помощью ключа API. В этом примере мы будем использовать OPENAI_API_KEY переменную среды. После получения ключа API на панели мониторинга разработчика OpenAI можно задать переменную среды из командной строки следующим образом:

setx OPENAI_API_KEY <your-api-key>

Обратите внимание, что этот метод работает для разработки в Windows, но вы хотите использовать более безопасный метод для рабочих приложений и для поддержки мобильных устройств. Например, вы можете сохранить ключ API в безопасном хранилище ключей, к которому удаленная служба может обращаться от имени приложения. Дополнительные сведения см . в рекомендациях по безопасности ключей OpenAI.

Установка и инициализация пакета SDK Для Azure OpenAI

В этом разделе мы установим пакет SDK в проект .NET MAUI и инициализировать его с помощью ключа API OpenAI.

  1. Если вы еще не установили Azure.AI.OpenAI пакет NuGet, это можно сделать, выполнив команду dotnet add package Azure.AI.OpenAI -IncludePrerelease из окна терминала Visual Studio.

  2. После установки экземпляр можно инициализировать OpenAIClient из пакета SDK с помощью ключа API OpenAI следующим MainPage.xaml.cs образом:

    private OpenAIClient _chatGptClient;
private Guid _sessionGuid = Guid.Empty;
private string openAIEndpoint = null;
private char[] trimChars = { '\n', '?' };

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");

    _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
        ? new OpenAIClient(
            new Uri(openAIEndpoint),
            new AzureKeyCredential(openAIKey))
        : new OpenAIClient(openAIKey);
}

Изменение пользовательского интерфейса приложения

Затем мы изменим пользовательский интерфейс, чтобы включить Image элемент управления, отображающий созданное изображение под текстом рекомендации.

  1. Если вы начинаете с нового проекта, скопируйте XAML-файл из MainPage.xamlруководства по созданию приложения рекомендаций с помощью .NET MAUI и ChatGPT .

  2. Добавьте элемент StackLayoutLabel управления и CheckBox элемент управления под элементом LocationEntry управленияMainPage.xaml, чтобы разрешить пользователям выбирать, следует ли создавать изображение:

    ...
<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. Image Добавьте элемент управления под SmallLabel элементом управления для отображения созданного изображения:

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

Реализация создания образа DALL-E

В этом разделе мы добавим метод для обработки создания образа и вызовем его из существующего GetRecommendation метода для отображения созданного изображения.

  1. Если вы начинаете с нового проекта, убедитесь, что код соответствует коду MainPage.xaml.cs из руководства по созданию приложения рекомендаций с помощью .NET MAUI и ChatGPT .

  2. Добавьте метод с именем GetImageAsync для обработки создания изображений. Новый метод вызовет API OpenAI для создания образа на основе запроса, который мы создадим на следующем шаге. Он возвращает объект, используемый ImageSource для отображения изображения в пользовательском интерфейсе:

    public async Task<ImageSource> GetImageAsync(string prompt)
{
    Response<ImageGenerations> imageGenerations = await _chatGptClient.GetImageGenerationsAsync(
        new ImageGenerationOptions()
        {
            Prompt = prompt,
            Size = ImageSize.Size256x256,
        });

    // Image Generations responses provide URLs you can use to retrieve requested images
    Uri imageUri = imageGenerations.Value.Data[0].Url;

    return ImageSource.FromUri(imageUri);
}

  3. Добавьте следующий код в конец метода для условного GetRecommendation вызова GetImageAsync метода и отображения созданного изображения:

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

    Строка imagePrompt создается на основе входных данных расположения пользователя и выбранного типа рекомендации.

Запуск и тестирование

Запустите приложение, введите допустимое расположение и нажмите одну из кнопок рекомендаций. Отобразятся примерно следующие сведения:

Демонстрация создания изображений

Как мы решили проблему?

Мы добавили возможности создания образов DALL-E в классическое приложение .NET MAUI Для Windows. Теперь пользователи могут создавать изображения на основе расположения, в который они вводят, и типа выбранной рекомендации. Это обеспечивает широкий интерактивный интерфейс для пользователей и улучшает функциональные возможности приложения.

Очистка ресурсов

Важно убедиться, что ваша учетная запись OpenAI безопасна. Если вы не планируете использовать ключ API OpenAI для других проектов, удалите его с панели мониторинга разработчика OpenAI. Вы также должны задать разумный лимит расходов на учетную запись OpenAI, чтобы избежать непредвиденных расходов. Вы можете проверка текущее использование и расходы на панели мониторинга OpenAI на странице "Использование".

Связанный контент