Compartir vía

Tutorial de Mesh 201 Capítulo 6: 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 un asistente virtual basado 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). Manteniendo el tema de la búsqueda de una ubicación para un parque eólico, el asistente de IA se personalizará para responder a preguntas relacionadas con la granja eólica.

Notas importantes:

  • OpenAI solo está disponible para clientes y asociados empresariales aprobados. Si aún no está en este grupo, debe enviar un formulario de registro. Obtenga más información sobre el proceso de registro.

  • Si tiene problemas con las suscripciones y OpenAI, puede encontrar una respuesta publicando en nuestro Foro de Mesh Creator.

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 y, a continuación, 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 de Azure OpenAI .

    __________________________________

  3. Haga clic en el botón Crear.

    __________________________________

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

  4. En la página Aspectos básicos, cree nombres donde se solicite y elija las opciones que desea 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á una página Implementación 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 una 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, dedique un momento a 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 tengan más sentido 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 al Portapapeles" para KEY 1 o KEY 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 al Portapapeles" para 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 objeto prefabricado para Station 5

  1. En la carpeta Proyecto, vaya a Assets>MeshCloudScripting y arrastre el 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 de la información de URI y API para Azure OpenAI

  1. En la jerarquía, seleccione Mesh Cloud Scripting GameObject.

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

    __________________________________

  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 las opciones de 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.

Actualización del archivo Directory.packages.props

  1. En la ventana Explorador de archivos que muestra los archivos Mesh Cloud Scripting, abra el archivo denominado Directory.Packages.props en el editor de código. Anote 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 Mesh Cloud Scripting, 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 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.

Adición del código que habilita OpenAI

  1. En la ventana Explorador de archivos que muestra los archivos Mesh Cloud Scripting, vaya a la carpeta StartingPoint y, a continuación, 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 siguiente código.

    using Azure;
using Azure.AI.OpenAI;

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

    __________________________________

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

    __________________________________

  6. Copie el siguiente código.

    private OpenAIClient _openAIClient;

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

    ___

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

    __________________________________

  9. Copie el siguiente código.

    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 con el código que copió.

    __________________________________

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

    __________________________________

  12. Copie el siguiente código.

    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 con el código que copió.

    __________________________________

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

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

    __________________________________

  2. Copie el siguiente código.

    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 con el código que copió.

    __________________________________

    El código realiza lo siguiente:

    • Llame a Mesh Cloud Scripting a través del método denominado ShowInputDialogToParticipantAsync().. Los argumentos son el mensaje que desea solicitar al usuario ("Preguntar a Azure OpenAI") y a quién desea mostrar el cuadro de diálogo de entrada en (argumentos). Participante).
    • Cuando aparezca el cuadro de diálogo de entrada, compruebe si hay errores.
    • Guarde lo que el participante escriba (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 el try... catch bloque que acabas 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 con el código que copió.

    __________________________________

    El código realiza 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 debe responder el asistente a 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 a LLM (modelo de lenguaje grande).

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

  1. Busque el comentario restante "Pegar código aquí" en el try... catch bloque que acabas 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 con el código que copió.

    __________________________________

    El código realiza lo siguiente:

    • Espere la respuesta del LLM.
    • LLM devuelve varias respuestas en una matriz (responseMessage). Puedes elegir la que quieras mostrar.
    • Llame a ShowMessageToParticipant() en mesh Cloud Scripting API para mostrar la respuesta.

  4. Guarde y cierre el archivo.

Comprobación del trabajo

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

  2. Tu avatar se genera en el lado de la Terraza sphere que contiene las tres primeras estaciones. Navegue hasta el lado opuesto de la terraza sphere y luego colócese delante de la estación 5.

    __________________________________

  3. Haga clic en el botón Información ubicado en el cuadro de texto de información de Station 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

Felicidades. En este tutorial de Mesh 201, ha aprendido lo siguiente:

  • Carga de archivos HTML compartidos y no compartidos locales en un WebSlate.
  • Usar 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 muestranlos en 3D.
  • Configure interacciones con tecnología de inteligencia artificial mediante un asistente virtual basado en Azure OpenAI o un "bot de chat".

Ahora puede poner sus nuevas habilidades de Malla para trabajar y crear experiencias colaborativas que sean 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 cómo preparar un proyecto 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 cómo compilar y publicar su entorno y siga las instrucciones que se indican allí. En un momento determinado, tendrá que ir a un artículo complementario con instrucciones especializadas para compilar un proyecto con Mesh Cloud Scripting y volver al artículo principal de compilación y publicación. Este flujo está todo diseñado 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. Asegúrese de compartir sus esfuerzos en nuestro Foro para desarrolladores de Mesh.