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

Статья
04/12/2024

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

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

Создание простого пользовательского интерфейса для приложения MAUI .NET
Справочник и загрузка библиотеки Azure.AI.OpenAI
Использование ключа 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 асинхронные вызовы в библиотеку Azure.AI.OpenAI. Теперь при запуске приложения вы увидите следующий пользовательский интерфейс:

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

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

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

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

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

Откройте консоль диспетчер пакетов из меню "Сервис" в Visual Studio.
Установите библиотеку Azure.AI.OpenAI, выполнив следующую команду. Флаг IncludePrerelease является обязательным, так как библиотека по-прежнему находится в предварительной версии:
```
Install-Package Azure.AI.OpenAI -IncludePrerelease
```
Откройте MainPage.xaml.cs, файл программной части для MainPage. Добавьте следующий код в начало файла, чтобы ссылаться на библиотеку Azure.AI.OpenAI и создать переменную для хранения ключа API OpenAI. Обновите конструктор для вызова MainPage_Loaded метода при загрузке страницы и добавьте MainPage_Loaded метод для инициализации библиотеки Azure OpenAI:
```
private OpenAIClient _chatGptClient;
private string openAIKey = "<your-api-key-here>";
private string openAIEndpoint = null;

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

private void MainPage_Loaded(object sender, EventArgs e)
{
    _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
        ? new OpenAIClient(
            new Uri(openAIEndpoint),
            new AzureKeyCredential(openAIKey))
        : new OpenAIClient(openAIKey);
}
```
Это приведет к загрузке библиотеки Azure OpenAI с помощью ключа API и задания некоторых параметров по умолчанию. Вы можете создать ключ API на странице параметров API OpenAI. Код написан так, чтобы можно было также задать конечную точку, если вы используете API Azure OpenAI. Если вы используете API OpenAI, вы оставьте переменную заданной openAIEndpointnull.
Чтобы скомпилировать проект, необходимо добавить следующие using инструкции в начало файла MainPage.xaml.cs :
```
using Azure.AI.OpenAI;
using Azure;
```

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

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

Пришло время добавить код в файл программной части, который будет использовать библиотеку Azure.AI.OpenAI для вызова 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;
    }

    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    // DeploymentName must match your custom deployment name (Azure OpenAI)
    // Or a default deployment name (such as OpenAI's GPT-3.5-turbo-0125) can be used
    ChatCompletionsOptions options = new()
    {
        DeploymentName = "gpt-3.5-turbo-0125",
        Messages =
        {
            new ChatRequestUserMessage(prompt)
        },
        ChoiceCount = 1,
        MaxTokens = 100,
    };

    var message = new ChatRequestUserMessage(prompt);
    options.Messages.Add(message);
    Response<ChatCompletions> response = await _chatGptClient.GetChatCompletionsAsync(options);
    SmallLabel.Text = response.Value.Choices[0].Message.Content;
}
```
Этот код сначала проверка, чтобы убедиться, что пользователь ввел расположение в элементе Entry управления. В противном случае отображается оповещение и возвращается. Если пользователь ввел расположение, он вызывает GetChatCompletionsAsync метод в библиотеке Azure.AI.OpenAI для вызова OpenAI. Метод GetChatCompletionsAsync принимает ChatCompletionOptions параметр. Этот параметр был создан со следующими параметрами:
- DeploymentName — это имя развертывания (модели), которую вы хотите использовать.
- Сообщения — это коллекция ChatRequestUserMessage объектов. Мы используем только одно сообщение в этом примере, но вы можете добавить дополнительные сведения в коллекцию, чтобы предоставить дополнительный контекст API.
- ChoiceCount — это количество рекомендаций, которые вы хотите вернуть из API. Мы просим только одну рекомендацию в этом примере.
- MaxTokens — это максимальное количество маркеров (слов), которые api будет возвращать в ответе. В этом примере мы запрашиваем 100 токенов.
Метод GetChatCompletionsAsync возвращает Response<ChatCompletions> объект, содержащий ответ из API. Мы получим Message.Content текст ответа от первого Choice в response.Value.Choices коллекции и отобразим его в элементе управления в нижней части пользовательского интерфейса.

Примечание.

Рекомендуется добавить обработку ошибок в GetRecommendationAsync метод для обработки исключений, которые могут быть вызваны вызовом API. Мы оставили это из этого примера для простоты.
Следующие using инструкции в верхней части файла MainPage.xaml.cs также необходимы для кода, добавленного в этом разделе:
```
using Azure.AI.OpenAI;
using Azure;
```
Запустите приложение, введите расположение и проверьте кнопки рекомендаций. Вы увидите ответ из API в Label элементе управления в нижней части пользовательского интерфейса:

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

Внимание

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