Compartir a través de

Capítulo 6 del tutorial de Mesh 201: Obtención de respuestas a preguntas mediante Azure OpenAI

  • Artículo

En este capítulo, pasaremos a la quinta y última estación, donde aprenderá a implementar una asistente virtual basada en Azure OpenAI o un "bot de chat". Tenga en cuenta que puede usar cualquier servicio de inteligencia artificial que desee aquí (por ejemplo, Copilot Studio). Siguiendo el tema de la búsqueda de una ubicación para un parque eólico, el asistente de inteligencia artificial se personalizará para responder a preguntas relacionadas con parques eólicos.

Notas importantes:

Configuración de esta estación

Para completar esta estación, deberá visitar Azure Portal y, a continuación, obtener un URI (también denominado "Punto de conexión") y una clave para el inquilino. Más adelante, insertará la clave en algún código que le permitirá llamar a Azure OpenAI. Vamos a realizar este paso ahora para que no tenga que interrumpir el flujo de trabajo más adelante.

Creación e implementación de un recurso de Azure OpenAI

  1. En el explorador, vaya a Azure Portal e inicie sesión.

  2. En el cuadro Buscar de la parte superior de la ventana, escriba "azure openai" y presione la tecla Entrar. Esto le lleva a los servicios de Azure AI | Página Azure OpenAI .

    __________________________________

  3. Haga clic en el botón Crear.

    __________________________________

    IMPORTANTE: Para muchas de las opciones de configuración que se detallan a continuación, no hacemos una recomendación específica. Debe elegir las opciones que más sentido tienen para usted y su organización.

  4. En la página Aspectos básicos, cree nombres cuando se solicite y elija las opciones que desee para Suscripción, Región y Plan de tarifa.

  5. En la página Red , elija la opción que desee.

    __________________________________

  6. En la página Etiquetas, puede agregar etiquetas o omitir estas opciones.

  7. En la página Revisar y enviar, revise la información y haga clic en el botón Crear .

El recurso se implementa y debería ver un mensaje que indica que la implementación está en curso. Finalmente, verá que la página Implementación está completa .

__________________________________

Implementación del modelo en Azure OpenAI Studio

  1. Haga clic en el botón Ir al recurso .

  2. En la página Recurso, haga clic en Ir a Azure OpenAI Studio.

    __________________________________

  3. En el menú de la izquierda, en Administración, seleccione Implementaciones.

    __________________________________

  4. Seleccione Crear nueva implementación.

  5. Haga clic en la lista desplegable Implementar modelo y, a continuación, seleccione Implementar modelo base.

  6. En el cuadro de diálogo Seleccionar un modelo , seleccione "gpt-35-turbo".

  7. Si lo desea, tómese un momento para ver la descripción. Cuando haya terminado, haga clic en el botón Confirmar .

    __________________________________

Nota: Puede elegir un modelo diferente, pero esto requeriría algunos cambios en el código.

  1. En el campo Nombre de implementación , escriba "gpt-35-turbo".

  2. Para la otra configuración, elija los nombres y las opciones que más sentido tienen para usted y su organización. Cuando haya terminado, haga clic en el botón Implementar .

Copia del URI y la clave

  1. Vuelva a la página principal de Azure y, a continuación, en Recursos, seleccione el recurso que creó.

    __________________________________

  2. En la página Recurso del menú de la izquierda, seleccione Claves y punto de conexión.

    __________________________________

  3. En la página Claves y punto de conexión , haga clic en el botón "Copiar en el Portapapeles" de KEY 1oKEY 2 (no importa cuál) y péguelo en un archivo de texto mediante el Bloc de notas de Windows u otro editor de texto.

    __________________________________

  4. Haga clic en el botón "Copiar en el Portapapeles" del punto de conexión y péguelo en el mismo archivo de texto.

  5. Guarde el archivo de texto. Necesitará estos dos fragmentos de información más adelante en el tutorial.

Agregar el prefabricado para la estación 5

  1. En la carpeta Proyecto , vaya a Assets>MeshCloudScripting y, a continuación, arrastre el objeto prefabricado 5 - AIAssistant a la jerarquía y colóquelo como un objeto secundario en Mesh Cloud Scripting y justo debajo de 4 - GlobeWithCloudScripting.

    __________________________________

Inserción del URI y la información de API para Azure OpenAI

  1. En Jerarquía, seleccione mesh Cloud Scripting GameObject.

  2. En el Inspector, vaya al componente Mesh Cloud Scripting y, a continuación, haga clic en Abrir carpeta de aplicación. Se abrirá la carpeta del proyecto que contiene los archivos de Mesh Cloud Scripting en windows Explorador de archivos.

    __________________________________

  3. Abra el archivo denominado appsettings. UnityLocalDev.json en el editor de código. Las dos últimas líneas de código contienen comentarios de marcador de posición para la configuración de Azure OpenAI.

    __________________________________

  4. Pegue el URI y la clave que copió anteriormente de Azure Portal en estas dos líneas, reemplazando los comentarios del marcador de posición.

    __________________________________

  5. Guarde y cierre el archivo.

Actualizar el archivo Directory.packages.props

  1. En la ventana Explorador de archivos que muestra los archivos de scripting en la nube de Mesh, abra el archivo denominado Directory.Packages.props en el editor de código. Tenga en cuenta el comentario sobre cómo agregar referencias de paquete.

    __________________________________

  2. Reemplace el comentario por la línea siguiente:

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

  3. Guarde y cierre el archivo.

Actualización del archivo csproj

  1. En la ventana Explorador de archivos que muestra los archivos de scripting en la nube de Mesh, abra el archivo denominado StartingPoint.csproj en el editor de código.

    __________________________________

  2. Tenga en cuenta que en la parte inferior del archivo, justo encima del elemento ItemGroup con la información de WeatherAPI, hay un comentario con un marcador de posición para una referencia de paquete.

    __________________________________

  3. Elimine el comentario y reemplácelo por la línea siguiente:

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

    __________________________________

  4. Guarde y cierre el archivo.

Agregar el código que habilita OpenAI

  1. En la ventana Explorador de archivos que muestra los archivos de scripting en la nube de Mesh, vaya a la carpeta StartingPoint y abra el archivo denominado App.cs en el editor de código.

    __________________________________

  2. En el archivo App.cs, busque el comentario "Pegar código aquí" en la parte superior de la lista de using directivas.

    __________________________________

  3. Copie el código siguiente.

    using Azure;
using Azure.AI.OpenAI;

  4. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

  5. Busque el comentario "Pegar código aquí" situado debajo del _weatherAPIKey_ campo.

    __________________________________

  6. Copie el código siguiente.

    private OpenAIClient _openAIClient;

  7. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    ___

  8. Busque el comentario "Pegar código aquí" ubicado en el cuerpo del constructor.

    __________________________________

  9. Copie el código siguiente.

    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. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

  11. Busque el comentario "Pegar código aquí" que sigue a la refreshButtonNode instrucción if dentro del StartAsync() método .

    __________________________________

  12. Copie el código siguiente.

    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. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

Agregue el código que muestra el cuadro de diálogo de entrada de OpenAI.

  1. Busque el comentario "Pegar código aquí" situado poco después del GetCurrentWeather() método en la infoButton instrucción if.

    __________________________________

  2. Copie el código siguiente.

    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. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

    El código hace lo siguiente:

    • Llame a Mesh Cloud Scripting a través del método denominado ShowInputDialogToParticipantAsync(). Los argumentos son el mensaje con el que desea preguntar al usuario ("Preguntar a Azure OpenAI") y a quién desea mostrar el cuadro de diálogo de entrada en (args. Participante).
    • Cuando aparezca el cuadro de diálogo de entrada, compruebe si hay errores.
    • Guarde lo que el participante haya escrito en (el resultado) en participantInput como una cadena.

Enviar GPT-3.5 Turbo el resultado del cuadro de diálogo de entrada

El código siguiente envía al modelo GPT-3.5 Turbo el resultado del cuadro de diálogo de entrada con instrucciones sobre cómo responder con los datos meteorológicos actuales.

  1. Busque el primer comentario "Pegar código aquí" en try... bloque catch que acaba de pegar.

    __________________________________

  2. Copie el código siguiente:

        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. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

    El código hace lo siguiente:

    • Cree una instancia de la clase ChatCompletionOptions denominada chatCompletionOptions.
    • Inicialice una variable denominada DeploymentName con el nombre de implementación que creó anteriormente ("gpt-35-turbo").
    • Inicialice una nueva instancia de ChatRequestSystemMessage con instrucciones sobre cómo el asistente debe responder a las preguntas. Esto incluye las ubicaciones con los datos meteorológicos que le interesan y las condiciones actuales (_currentWeatherText) para esas ubicaciones. El valor de _currentWeatherText se recibió cuando llamamos a weatherapi.com en el capítulo 5.
    • Inicialice una nueva instancia de ChatRequestUserMessage con la pregunta que hizo el participante.
    • Envíe la información sobre la solicitud al LLM (modelo de lenguaje grande).

Agregue el código que muestra la respuesta del LLM.

  1. Busque el comentario restante "Pegar código aquí" en el try... bloque catch que acaba de pegar.

    __________________________________

  2. Copie el código siguiente:

            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. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

    El código hace lo siguiente:

    • Espere la respuesta del LLM.
    • El LLM devuelve varias respuestas en una matriz (responseMessage). Puede elegir el que quiera mostrar.
    • Llame a ShowMessageToParticipant() en Mesh Cloud Scripting API para mostrar la respuesta.

  4. Guarde y cierre el archivo.

Prueba del trabajo

  1. En el Editor de Unity, guarde el proyecto y, a continuación, presione el botón Reproducir.

  2. Tu avatar se genera a un lado de la terraza de Sphere que contiene las tres primeras estaciones. Navegue hasta el lado opuesto de la terraza sphere y colócate delante de la estación 5.

    __________________________________

  3. Haga clic en el botón Información situado en el cuadro de texto de información de La estación 5.

    __________________________________

  4. Cuando aparezca el cuadro de diálogo Preguntar a Azure OpenAI , escriba una pregunta.

    __________________________________

  5. La respuesta aparece en el cuadro de diálogo. Cuando haya terminado, haga clic en Aceptar.

    __________________________________

Conclusión

Enhorabuena. En este tutorial de Mesh 201, aprendió lo siguiente:

  • Carga de archivos HTML locales compartidos y no compartidos en webSlate.
  • Uso de un recurso 3D para llamar a una API web y descargar datos en un webSlate.
  • Extraiga datos de orígenes internos o públicos en la escena y muételos en 3D.
  • Configure interacciones con inteligencia artificial mediante un asistente virtual basado en Azure OpenAI o un "bot de chat".

Ahora puede poner sus nuevas habilidades de Mesh para trabajar y crear experiencias colaborativas que son aún más útiles y emocionantes!

Pasos siguientes

Compilación y publicación

Si desea compilar y publicar este proyecto de tutorial, haga lo siguiente:

  1. Vaya a nuestro artículo sobre la preparación de un proyecto de Mesh Cloud Scripting y siga las instrucciones para registrar el grupo de recursos y el identificador de suscripción.
  2. Vaya a nuestro artículo sobre la creación y publicación de su entorno y siga las instrucciones que se indican allí. En un momento determinado, tendrá que navegar a un artículo complementario con instrucciones especializadas para crear un proyecto con Mesh Cloud Scripting y, a continuación, volver al artículo principal de compilación y publicación. Este flujo está todo dispuesto para usted en los artículos.
  3. Si lo desea, puede probar el entorno en la aplicación Mesh.

Más información sobre WebSlates

Visite el artículo WebSlates en el sitio de ayuda de Mesh.

Lea una entrada de blog escrita por el administrador de productos de WebSlates.

Desafío

Pruebe a crear su propia estación con un WebSlate y un botón que cargue un archivo HTML. ¡No olvide compartir sus esfuerzos en nuestro Foro para desarrolladores de Mesh!