Compartilhar via

Tutorial do Mesh 201 Capítulo 6: Obter respostas para perguntas usando o Azure OpenAI

  • Artigo

Neste capítulo, passamos para a quinta e última estação, onde você aprenderá a implementar um assistente virtual ou "chatbot" baseado em OpenAI do Azure. Observe que você pode usar qualquer serviço de IA que desejar aqui (por exemplo, Copilot Studio). Mantendo o tema da busca de um local para um parque eólico, o assistente de IA será personalizado para responder a perguntas relacionadas ao parque eólico.

Observações importantes;

  • O OpenAI está disponível apenas para clientes e parceiros corporativos aprovados. Se você ainda não faz parte desse grupo, deve enviar um formulário de inscrição. Saiba mais sobre o processo de registro.

  • Se você tiver problemas com assinaturas e OpenAI, poderá encontrar uma resposta postando em nosso Fórum de criadores de malha.

Configurando para esta estação

Para concluir essa estação, você precisará visitar o Portal do Azure e obter um URI (também chamado de "Ponto de Extremidade") e uma chave para seu locatário. Posteriormente, você inserirá a chave em algum código que permitirá chamar o Azure OpenAI. Vamos fazer esta etapa agora para que você não precise interromper seu fluxo de trabalho mais tarde.

Criar e implantar um recurso OpenAI do Azure

  1. No navegador, navegue até o Portal do Azure e faça logon.

  2. Na caixa Pesquisar na parte superior da janela, digite "azure openai" e pressione a tecla Enter. Isso leva você aos serviços de IA do Azure | Página do OpenAI do Azure.

    __________________________________

  3. Selecione o botão Criar.

    __________________________________

    IMPORTANTE: Para muitas das configurações detalhadas abaixo, não fazemos uma recomendação específica. Você deve escolher as opções que fazem mais sentido para você e sua organização.

  4. Na página Noções básicas, crie nomes quando solicitado e escolha as opções desejadas para Assinatura, Região e Tipo de preço.

  5. Na página Rede, escolha a opção desejada.

    __________________________________

  6. Na página Tags, você pode adicionar tags ou ignorar essas opções.

  7. Na página Revisar e Enviar, revise as informações e clique no botão Criar .

O recurso é implantado e você deve ver uma mensagem informando que a implantação está em andamento. Eventualmente, você verá uma página A implantação está concluída .

__________________________________

Implantar o modelo no Azure OpenAI Studio

  1. Clique no botão Ir para o recurso .

  2. Na página Recurso, clique em Ir para o Azure OpenAI Studio.

    __________________________________

  3. No menu do lado esquerdo, em Gerenciamento, selecione Implantações.

    __________________________________

  4. Selecione Criar nova implantação.

  5. Clique no menu suspenso Selecionar um modelo e escolha "gpt-35-turbo". Observe que, se preferir, você pode escolher um modelo diferente; no entanto, isso exigiria algumas alterações no código.

  6. No campo Nome da implantação , digite "gpt-35-turbo".

  7. Para as outras configurações, escolha os nomes e as opções que fazem mais sentido para você e sua organização.

Copie o URI e a chave

  1. Navegue de volta para a página principal do Azure e, em Recursos, selecione o recurso que você criou.

    __________________________________

  2. Na página Recurso no menu do lado esquerdo, selecione Chaves e Ponto de Extremidade.

    __________________________________

  3. Na página Chaves e Ponto de Extremidade , clique no botão "Copiar para a área de transferência" para KEY 1 ou KEY 2 (não importa qual) e cole-o em um arquivo de texto usando o Bloco de Notas do Windows ou outro editor de texto.

    __________________________________

  4. Clique no botão "Copiar para a área de transferência" do Endpoint e cole-o no mesmo arquivo de texto.

  5. Salve o arquivo de texto. Você precisará dessas duas informações mais adiante no tutorial.

Adicionar o pré-fabricado para a Estação 5

  1. Na pasta Project, navegue até Assets>MeshCloudScripting e arraste o pré-fabricado 5 - AIAssistant para a Hierarquia e coloque-o como um objeto filho para Mesh Cloud Scripting e pouco menos de 4 - GlobeWithCloudScripting.

    __________________________________

Inserir as informações de URI e API para o Azure OpenAI

  1. Na Hierarquia, selecione o GameObject de script de nuvem de malha.

  2. No Inspetor, navegue até o componente Script de nuvem de malha e clique em Abrir pasta do aplicativo. Isso abre a pasta do projeto que contém os arquivos para Script de Nuvem de Malha no Explorador de Arquivos do Windows.

    __________________________________

  3. Abra o arquivo chamado appsettings. UnityLocalDev.json em seu editor de código. As duas últimas linhas de código contêm comentários de espaço reservado para as definições de configuração do OpenAI do Azure.

    __________________________________

  4. Cole o URI e a chave que você copiou anteriormente do Portal do Azure nessas duas linhas, substituindo os comentários do espaço reservado.

    __________________________________

  5. Salve e feche o arquivo.

Atualize o arquivo Directory.packages.props

  1. Na janela do Explorador de Arquivos que exibe os arquivos de Script de Nuvem de Malha, abra o arquivo chamado Directory.Packages.props no editor de código. Observe o comentário sobre a adição de referências de pacote.

    __________________________________

  2. Substitua o comentário pela linha abaixo:

    <PackageVersion Include="Azure.AI.OpenAI" Version="1.0.0-beta.15"/>

  3. Salve e feche o arquivo.

Atualizar o arquivo csproj

  1. Na janela Explorador de Arquivos que exibe os arquivos de Script de Nuvem de Malha, abra o arquivo chamado StartingPoint.csproj no editor de código.

    __________________________________

  2. Observe que na parte inferior do arquivo, logo acima do elemento ItemGroup com as informações da WeatherAPI, há um comentário com um espaço reservado para uma referência de pacote.

    __________________________________

  3. Exclua o comentário e substitua-o pela linha abaixo:

    <PackageReference Include="Azure.AI.OpenAI" />

    __________________________________

  4. Salve e feche o arquivo.

Adicione o código que habilita o OpenAI

  1. Na janela do Explorador de Arquivos que exibe os arquivos do Mesh Cloud Scripting, navegue até a pasta StartingPoint e abra o arquivo chamado App.cs no editor de código.

    __________________________________

  2. No arquivo App.cs, encontre o comentário "Colar código aqui" na parte superior da lista de using diretivas.

    __________________________________

  3. Copie o código abaixo.

    using Azure;
using Azure.AI.OpenAI;

  4. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    __________________________________

  5. Encontre o comentário "Colar código aqui" localizado abaixo do _weatherAPIKey_ campo.

    __________________________________

  6. Copie o código abaixo.

    private OpenAIClient _openAIClient;

  7. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    ___

  8. Encontre o comentário "Cole o código aqui" localizado no corpo do construtor.

    __________________________________

  9. Copie o código abaixo.

    Uri azureOpenAIResourceUri = new(configuration.GetValue<string>("AZURE_OPENAI_API_URI"));
AzureKeyCredential azureOpenAIApiKey = new(configuration.GetValue<string>("AZURE_OPENAI_API_KEY"));
_openAIClient = new(azureOpenAIResourceUri, azureOpenAIApiKey);

  10. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    __________________________________

  11. Encontre o comentário "Colar código aqui" que segue a refreshButtonNode instrução if dentro do StartAsync() método.

    __________________________________

  12. Copie o código abaixo.

    var aiParentNode = _app.Scene.FindFirstChild("5 - AIAssistant", true) as TransformNode;
var infoButton = aiParentNode?.FindFirstChild<InteractableNode>(true);

if (infoButton != null)
{
    infoButton.Selected += async (sender, args) =>
    {
        // Ensure we have weather data before beginning the conversation
        await GetCurrentWeather(_latlong);

        // Display an input dialog for the user to send a message to the large language model (LLM)
        // Paste code here
    };
}

  13. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    __________________________________

Adicione o código que exibe a caixa de diálogo de entrada do OpenAI

  1. Encontre o comentário "Colar código aqui" localizado logo após o GetCurrentWeather() método na infoButton instrução if .

    __________________________________

  2. Copie o código abaixo.

    await _app.ShowInputDialogToParticipantAsync("Ask Azure OpenAI", args.Participant).ContinueWith(async (response) =>
{
    try
    {
        if (response.Exception != null)
        {
            throw response.Exception.InnerException ?? response.Exception;
        }

        string participantInput = response.Result;

        // Paste code here

        // Wait for a response from OpenAI based on the user's message
        // Paste code here
    }
    catch (Exception ex)
    {
        var log = $"Exception during OpenAI request: {ex.Message}";
        _logger.LogCritical(log);

        if (!response.IsCanceled)
        {
            _app.ShowMessageToParticipant(log, args.Participant);
        }
    }
}, TaskScheduler.Default);

  3. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    __________________________________

    O código faz o seguinte:

    • Chame o Script de Nuvem de Malha por meio do método chamado ShowInputDialogToParticipantAsync(). Os argumentos são a mensagem que você deseja solicitar ao usuário ("Pergunte ao Azure OpenAI") e para quem você deseja exibir a caixa de diálogo de entrada (args. Participante).
    • Quando a caixa de diálogo de entrada aparecer, verifique se há erros.
    • Salve o que o participante digitou (o resultado) em participantInput como uma String.

Envie ao GPT-3.5 Turbo o resultado da caixa de diálogo de entrada

O código abaixo envia ao modelo GPT-3.5 Turbo o resultado da caixa de diálogo de entrada com instruções sobre como responder com os dados meteorológicos atuais.

  1. Encontre o primeiro comentário "Colar código aqui" na tentativa ... bloco catch que você acabou de colar.

    __________________________________

  2. Copie o código abaixo:

        var chatCompletionsOptions = new ChatCompletionsOptions()
    {
        DeploymentName = "gpt-35-turbo", // Use DeploymentName for "model" with non-Azure clients
        Messages =
        {
            // The system message represents instructions or other guidance about how the assistant should behave
            new ChatRequestSystemMessage(
                "You are a helpful assistant." +
                "You're part of a developer sample for the Mesh Toolkit." +
                "Use brief answers, less than 1 paragraph." +
                "You can suggest a good location for a wind farm based on current and historical weather data." +
                "We're looking at globe with the current weather data displayed for each of these locations:  Lagos Nigeria, Redmond WA USA, Dublin Ireland" +
                "Current weather conditions for these locations:" + _currentWeatherText
                ),
            new ChatRequestUserMessage(participantInput),
        }
    };

  3. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    __________________________________

    O código faz o seguinte:

    • Crie uma instância da classe ChatCompletionOptions chamada chatCompletionOptions.
    • Inicialize uma variável chamada DeploymentName com o nome da implantação que você criou anteriormente ("gpt-35-turbo").
    • Inicialize uma nova instância de ChatRequestSystemMessage com diretrizes sobre como o assistente deve responder a perguntas. Isso inclui os locais com os dados meteorológicos nos quais você está interessado e as condições atuais (_currentWeatherText) desses locais. O valor de _currentWeatherText foi recebido quando chamamos weatherapi.com no Capítulo 5.
    • Inicialize uma nova instância de ChatRequestUserMessage com a pergunta que o participante fez.
    • Envie as informações sobre a solicitação para o LLM (Large Language Model).

Adicione o código que exibe a resposta do LLM

  1. Encontre o comentário "Colar código aqui" restante na tentativa ... bloco catch que você acabou de colar.

    __________________________________

  2. Copie o código abaixo:

            var aiResponse = await _openAIClient.GetChatCompletionsAsync(chatCompletionsOptions);

        // Display the first response from the LLM
        var responseMessage = aiResponse.Value.Choices[0].Message;
        _app.ShowMessageToParticipant($"<i>You asked: {participantInput}</i>\n\nResponse: {responseMessage.Content}", args.Participant);

  3. Substitua o comentário "Cole o código aqui" que você acabou de encontrar pelo código que você copiou.

    __________________________________

    O código faz o seguinte:

    • Aguarde a resposta do LLM.
    • O LLM envia de volta várias respostas em uma matriz (responseMessage). Você pode escolher o que deseja mostrar.
    • Chame ShowMessageToParticipant() na API Mesh Cloud Scripting para exibir a resposta.

  4. Salve e feche o arquivo.

Teste o trabalho

  1. No Editor do Unity, salve o projeto e pressione o botão Reproduzir.

  2. Seu avatar é gerado no lado do Sphere Terrace que contém as três primeiras estações. Navegue até o lado oposto do Sphere Terrace e posicione-se em frente à Estação 5.

    __________________________________

  3. Clique no botão Informações localizado na caixa de texto de informações da Estação 5.

    __________________________________

  4. Quando a caixa de diálogo Perguntar ao Azure OpenAI for exibida, digite uma pergunta.

    __________________________________

  5. A resposta aparece na caixa de diálogo. Quando tiver terminado, clique em OK.

    __________________________________

Conclusão

Parabéns! Neste tutorial do Mesh 201, você aprendeu sobre o seguinte:

  • Carregamento de arquivos HTML locais compartilhados e não compartilhados em um WebSlate.
  • Usando um ativo 3D para chamar uma API Web e baixar dados em um WebSlate.
  • Extraia dados de fontes internas ou públicas para sua cena e exiba-os em 3D.
  • Configure interações baseadas em IA usando um assistente virtual ou "chatbot" baseado em OpenAI do Azure.

Agora você pode colocar suas novas habilidades de malha para trabalhar e criar experiências colaborativas que são ainda mais úteis e emocionantes!

Próximas etapas

Construir e publicar

Se você quiser criar e publicar este projeto de tutorial, faça o seguinte:

  1. Acesse nosso artigo sobre como preparar um projeto de Script de Nuvem em Malha e siga as instruções para registrar seu Grupo de Recursos e ID de Assinatura.
  2. Acesse nosso artigo sobre como criar e publicar seu ambiente e siga as instruções. Em um determinado ponto, você terá que navegar para um artigo suplementar com instruções especializadas para criar um projeto com o Mesh Cloud Scripting e, em seguida, retornar ao artigo principal de compilação e publicação. Esse fluxo é todo apresentado para você nos artigos.
  3. Se desejar, você pode testar seu ambiente no aplicativo Mesh.

Saiba mais sobre o WebSlates

Visite o artigo do WebSlates no site de Ajuda do Mesh.

Leia uma postagem de blog escrita pelo gerente de produto do WebSlates.

Desafio

Tente criar sua própria estação com um WebSlate e um botão que carregue um arquivo HTML. Certifique-se de compartilhar seus esforços em nosso Fórum de Desenvolvedores Mesh!