Tutorial: Crie uma aplicação de recomendação com .NET MAUI e ChatGPT

Aprenda a criar uma aplicação .NET MAUI para Windows no Visual Studio que integra APIs do ChatGPT para fornecer recomendações de localização baseadas em IA. Construa sugestões de restaurantes, hotéis e atrações com orientação passo a passo.

Neste tutorial, aprenderás como:

Pré-requisitos

• Uma conta OpenAI
• Uma API chave OpenAI
• Os requisitos de instalação do .NET MAUI
• Se você é novo no .NET MAUI no Windows, deve começar com o tutorial Crie seu primeiro aplicativo .NET MAUI para Windows.

Definir a variável de ambiente

Para usar o OpenAI SDK, você precisará definir uma variável de ambiente com sua chave de API. Neste exemplo, usaremos a OPENAI_API_KEY variável de ambiente. Depois de ter sua chave de API no painel do desenvolvedor OpenAI, você pode definir a variável de ambiente a partir da linha de comando da seguinte maneira:

setx OPENAI_API_KEY <your-api-key>

Observe que esse método funciona para desenvolvimento no Windows, mas você desejará usar um método mais seguro para aplicativos de produção e para suporte móvel. Por exemplo, você pode armazenar sua chave de API em um cofre de chaves seguro que um serviço remoto pode acessar em nome do seu aplicativo. Consulte Práticas recomendadas para segurança de chaves OpenAI para obter mais informações.

Criar um novo projeto .NET MAUI com os elementos de interface necessários

Vamos começar por criar um novo projeto .NET MAUI no Visual Studio. Vamos usar o modelo da aplicação .NET MAUI e adicionar alguns elementos de interface à Página Principal para fornecer aos utilizadores algumas recomendações baseadas numa localização fornecida. A interface terá botões para obter recomendações de restaurantes, hotéis e atrações.

1. No Visual Studio, crie um novo projeto de aplicação .NET MAUI chamado ChatGptRecommendationApp.

2. Executa o novo projeto para garantir que a aplicação se constrói e corre com sucesso.

3. Abra o MainPage.xaml a partir do Explorador de Soluções.

4. Substitua o conteúdo do VerticalStackLayout pela seguinte marcação 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" />
   

5. Para construir o projeto, terá de adicionar Clicked gestores de eventos para cada um dos botões. Adicione o seguinte código ao ficheiro MainPage.xaml.cs e remova o gestor de eventos existente:

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

Os manipuladores de eventos estão todos marcados como async porque vamos fazer chamadas assíncronas para a biblioteca da API .NET do OpenAI. Agora, quando executares a aplicação, deves ver a seguinte interface:

Os utilizadores podem introduzir a sua localização no Entry controlo e clicar num dos botões para obter recomendações de restaurantes, hotéis ou atrações. O Label controlo na parte inferior da interface mostrará os resultados.

De seguida, vamos adicionar a biblioteca OpenAI ao projeto e prepará-la para fazer algumas chamadas à API.

Referência e inicialização da biblioteca OpenAI para .NET

Para chamar as APIs ChatGPT da OpenAI, vamos usar uma versão preliminar do pacote NuGet da biblioteca OpenAI para .NET. Esta biblioteca fornece às aplicações .NET acesso à API REST do OpenAI. Vamos adicionar a biblioteca ao nosso projeto e inicializá-la com a nossa chave API.

1. Abra a Consola do Gestor de Pacotes a partir do menu Ferramentas no Visual Studio.

2. Instale a biblioteca OpenAI executando o seguinte comando. A IncludePrerelease bandeira é obrigatória porque a biblioteca ainda está em pré-visualização:

   Install-Package OpenAI -IncludePrerelease
   

   Isto deverá instalar uma pré-versão da versão 2.0.0 ou posterior no seu projeto. Também pode instalar uma versão específica da biblioteca especificando o número de versão no comando. Por exemplo, para instalar a versão 2.0.0-beta.4, terá de executar o seguinte comando:

   Install-Package OpenAI -Version 2.0.0-beta.4
   

3. Abra MainPage.xaml.cs, o ficheiro de código associado da MainPage. Adicione o seguinte código no topo do ficheiro para referenciar a biblioteca OpenAI e crie uma variável para guardar o seu cliente OpenAI. Atualize o construtor para chamar o MainPage_Loaded método quando a página for carregada e adicione o MainPage_Loaded método para obter a sua chave da API OpenAI do registo do Windows e inicialize o cliente 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);
   }
   

   Isto vai arrancar a biblioteca OpenAI com a tua chave API. Pode criar a sua chave de API na página de definições da API do OpenAI.

4. Para compilar o projeto, terá de adicionar as seguintes using instruções no topo do ficheiro MainPage.xaml.cs :

   using OpenAI;
   using OpenAI.Chat;
   using System.ClientModel;
   

Agora estamos prontos para juntar tudo. Na secção seguinte, vamos adicionar algum código aos três gestores de eventos para fazer chamadas à biblioteca OpenAI e mostrar os resultados das recomendações.

Adicione chamadas à API do ChatGPT e teste a aplicação

Está na altura de adicionar o código ao nosso ficheiro code-behind que irá usar a biblioteca OpenAI para .NET para fazer chamadas à API OpenAI ChatGPT. Vamos adicionar o código aos três gestores de eventos que criámos anteriormente. O código obtém a localização do utilizador através do Entry controlo e passa-a para a API para obter recomendações. Depois vamos mostrar os resultados no Label controlo na parte inferior da interface.

1. Crie um async método chamado GetRecommendationAsync e chame-o a partir de cada um dos gestores de eventos:

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

   Este código verifica primeiro se o utilizador introduziu uma localização no Entry controlo. Caso contrário, mostra um alerta e retorna. Se o utilizador introduziu uma localização, recebe uma ChatClient instância e chama o CompleteChatStreamingAsync método nesse objeto para fazer uma chamada à OpenAI. O CompleteChatStreamingAsync método recebe um ChatMessage[] parâmetro, que pode ser fornecido como uma cadeia, como estamos a fazer no exemplo.

   O método devolve um AsyncResultCollection<StreamingChatCompletionUpdate>, que irá transmitir as respostas da API à medida que são geradas. Iteramos assíncronamente sobre o updates e, subsequentemente, iteramos sobre cada ChatMessageContentPart na resposta para construir a cadeia de resposta. A resposta é então exibida no SmallLabel controlo na parte inferior da interface.

   Observação

   É uma boa ideia adicionar a manipulação de erros ao método GetRecommendationAsync para lidar com quaisquer exceções que possam ser lançadas pela chamada à API. Deixámos isso de fora deste exemplo por simplicidade.

2. Abre a aplicação, insere uma localização e testa os botões de recomendação. Deves ver uma resposta da API no Label controlo na parte inferior da interface:

   

É isso! Criou com sucesso uma aplicação Windows .NET MAUI que utiliza a API OpenAI ChatGPT para fornecer recomendações de restaurantes, hotéis e atrações. Tenta mudar os prompts para ver se consegues melhorar os resultados. Também podes tentar mudar o nome do modelo passado para GetChatClient in GetRecommendationAsync para ver se obténs melhores resultados com outro modelo.

Próximos passos

Avance para o próximo artigo para saber como...

Consulte também

• Crie um aplicativo .NET MAUI com marcação C# e o Kit de Ferramentas da Comunidade
• Crie aplicativos do Windows com o .NET MAUI
• Anúncio da biblioteca oficial OpenAI para .NET
• Desenvolvendo aplicativos e recursos de IA generativa responsável no Windows
• Vídeo Microsoft DevRadio: Como construir uma aplicação com OpenAI e .NET MAUI