Руководство. Создание приложения рекомендаций с помощью .NET MAUI и ChatGPT

Мақала
06/17/2024

В этом руководстве вы узнаете, как создать приложение .NET MAUI для Windows в Visual Studio, которое вызывает API ChatGPT OpenAI для предоставления рекомендаций в зависимости от расположения, введенного пользователем. Приложение будет иметь простой пользовательский интерфейс, позволяющий пользователю ввести расположение и получить рекомендации для ресторанов, отелей и достопримечательностей.

В этом руководстве описано следующее:

Создание простого пользовательского интерфейса для приложения MAUI .NET
Справочник и загрузка библиотеки API OpenAI .NET
Использование ключа API для связывания приложения с учетной записью API OpenAI
Вызовы API чата OpenAI для получения рекомендаций

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

Учетная запись OpenAI
Ключ API OpenAI
Требования к установке .NET MAUI
Если вы не знакомы с .NET MAUI в Windows, следует начать с создания первого приложения .NET MAUI для Windows .

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

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

setx OPENAI_API_KEY <your-api-key>

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

Создание проекта .NET MAUI с необходимыми элементами пользовательского интерфейса

Начнем с создания проекта .NET MAUI в Visual Studio. Мы будем использовать шаблон приложения .NET MAUI и добавить некоторые элементы пользовательского интерфейса в MainPage для предоставления пользователям некоторых рекомендаций в зависимости от предоставленного расположения. Пользовательский интерфейс будет иметь кнопки для получения рекомендаций для ресторанов, отелей и достопримечательностей.

В Visual Studio создайте проект приложения .NET MAUI с именем ChatGptRecommendationApp.
Запустите новый проект, чтобы убедиться, что приложение успешно выполняет сборку и запуск.
Откройте MainPage.xaml из Обозреватель решений.

Замените содержимое следующей VerticalStackLayout разметки XAML:

<Label
    Text="Local AI recommendations"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

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

<Button
    x:Name="RestaurantBtn"
    Text="Get restaurant recommendations"
    SemanticProperties.Hint="Gets restaurant recommendations when you click"
    Clicked="OnRestaurantClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="HotelBtn"
    Text="Get hotel recommendations"
    SemanticProperties.Hint="Gets hotel recommendations when you click"
    Clicked="OnHotelClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="AttractionBtn"
    Text="Get attraction recommendations"
    SemanticProperties.Hint="Gets attraction recommendations when you click"
    Clicked="OnAttractionClicked"
    HorizontalOptions="Center" />

<Label x:Name="SmallLabel"
    Text="Click a button for recommendations!"
    SemanticProperties.HeadingLevel="Level2"
    FontSize="18"
    HorizontalOptions="Center" />

Чтобы создать проект, необходимо добавить Clicked обработчики событий для каждой кнопки. Добавьте следующий код в файл MainPage.xaml.cs и удалите существующий обработчик событий:
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

private async void OnHotelClicked(object sender, EventArgs e)
{
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
}
```

Обработчики событий помечаются так, async как мы будем выполнять асинхронные вызовы библиотеки API OpenAI .NET. Теперь при запуске приложения вы увидите следующий пользовательский интерфейс:

Приложение Windows .NET MAUI с пользовательским интерфейсом для предоставления рекомендаций.

Пользователи могут ввести свое расположение в Entry элементе управления и нажать одну из кнопок, чтобы получить рекомендации для ресторанов, отелей или достопримечательностей. Элемент Label управления в нижней части пользовательского интерфейса отобразит результаты.

Далее давайте добавим библиотеку OpenAI в проект и подготовимся к выполнению некоторых вызовов API.

Справочник и инициализация библиотеки OpenAI для .NET

Чтобы вызвать API ChatGPT OpenAI, мы будем использовать предварительную версию библиотеки OpenAI для пакета NuGet .NET . Эта библиотека предоставляет приложения .NET с доступом к REST API OpenAI. Мы добавим библиотеку в проект и загрузим ее с помощью ключа API.

Откройте консоль диспетчер пакетов из меню "Сервис" в Visual Studio.
Установите библиотеку OpenAI, выполнив следующую команду. Флаг IncludePrerelease является обязательным, так как библиотека по-прежнему находится в предварительной версии:
```
Install-Package OpenAI -IncludePrerelease
```
Это должно установить предварительную версию 2.0.0 или более поздней версии в проект. Вы также можете установить определенную версию библиотеки, указав номер версии в команде. Например, чтобы установить версию 2.0.0-beta.4, выполните следующую команду:
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
Откройте MainPage.xaml.cs, файл программной части для MainPage. Добавьте следующий код в начало файла, чтобы ссылаться на библиотеку OpenAI и создать переменную для хранения клиента OpenAI. Обновите конструктор для вызова MainPage_Loaded метода при загрузке страницы и добавьте MainPage_Loaded метод, чтобы получить ключ API OpenAI из реестра Windows и инициализировать клиент OpenAI:
```
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);
}
```
Это приведет к загрузке библиотеки OpenAI с помощью ключа API. Вы можете создать ключ API на странице параметров API OpenAI.
Чтобы скомпилировать проект, необходимо добавить следующие using инструкции в начало файла MainPage.xaml.cs :
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

Теперь мы готовы собрать все вместе. В следующем разделе мы добавим код в три обработчика событий для вызова библиотеки OpenAI и отображения результатов рекомендаций.

Добавление вызовов API ChatGPT и тестирование приложения

Пришло время добавить код в файл программной части, который будет использовать библиотеку OpenAI для .NET для вызова API OpenAI ChatGPT. Мы добавим код в три обработчика событий, которые мы создали ранее. Код получит расположение пользователя из Entry элемента управления и передает его в API, чтобы получить рекомендации. Затем мы отобразим результаты в Label элементе управления в нижней части пользовательского интерфейса.

async Создайте метод с именем GetRecommendationAsync и вызовите его из каждого обработчика событий:
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("restaurant");
}

private async void OnHotelClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("hotel");
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("attraction");
}

private async Task GetRecommendationAsync(string recommendationType)
{
    if (string.IsNullOrWhiteSpace(LocationEntry.Text))
    {
        await DisplayAlert("Empty location", "Please enter a location (city or postal code)", "OK");
        return;
    }

    // The model passed to GetChatClient must match an available OpenAI
    // model in your account.
    var client = _chatGptClient.GetChatClient("gpt-3.5-turbo-16k");
    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    AsyncResultCollection<StreamingChatCompletionUpdate> updates = client.CompleteChatStreamingAsync(prompt);
    StringWriter responseWriter = new();

    await foreach (StreamingChatCompletionUpdate update in updates)
    {
        foreach (ChatMessageContentPart updatePart in update.ContentUpdate)
        {
            responseWriter.Write(updatePart.Text);
        }
    }

    var returnMessage = responseWriter.ToString();
    SmallLabel.Text = returnMessage;
}
```
Этот код сначала проверяет, что пользователь ввел расположение в элементе Entry управления. В противном случае отображается оповещение и возвращается. Если пользователь ввел расположение, он получает ChatClient экземпляр и вызывает CompleteChatStreamingAsync метод в этом объекте для вызова OpenAI. Метод CompleteChatStreamingAsync принимает ChatMessage[] параметр, который можно указать как строку, как мы делаем в примере.

Метод возвращает ответы AsyncResultCollection<StreamingChatCompletionUpdate>из API по мере их создания. Мы асинхронно updates передаем итерацию по каждому из них ChatMessageContentPart в ответе, чтобы создать строку ответа. Затем ответ отображается в SmallLabel элементе управления в нижней части пользовательского интерфейса.

Примечание.

Рекомендуется добавить обработку ошибок в GetRecommendationAsync метод для обработки исключений, которые могут быть вызваны вызовом API. Мы оставили это из этого примера для простоты.
Запустите приложение, введите расположение и проверьте кнопки рекомендаций. Вы увидите ответ из API в Label элементе управления в нижней части пользовательского интерфейса:

Вот и все! Вы успешно создали приложение Windows .NET MAUI, использующее API OpenAI ChatGPT для предоставления рекомендаций для ресторанов, отелей и достопримечательностей. Попробуйте изменить запросы, чтобы узнать, можно ли улучшить результаты. Кроме того, можно попробовать изменить имя модели, переданное в GetChatClientGetRecommendationAsync систему, чтобы узнать, получают ли вы лучшие результаты из другой модели.

Внимание

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

Следующие шаги

Дополнительные сведения см. в следующей статье:

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

Бөлісу құралы: