Partager via

Chapitre 6 du tutoriel Mesh 201 : Obtenir des réponses aux questions à l’aide d’Azure OpenAI

  • Article

Dans ce chapitre, nous allons passer à la cinquième station finale où vous allez apprendre à implémenter un assistant virtuel azure OpenAI ou un « chatbot ». Notez que vous pouvez utiliser n’importe quel service IA souhaité ici (par exemple, Copilot Studio). Tout en gardant le thème de la recherche d’un emplacement pour une ferme éolienne, l’assistant IA sera personnalisé pour répondre aux questions relatives à la ferme éolienne.

Remarques importantes :

  • OpenAI est disponible uniquement pour les clients et partenaires d’entreprise approuvés. Si vous n’êtes pas encore dans ce groupe, vous devez envoyer un formulaire d’inscription. En savoir plus sur le processus d’inscription.

  • Si vous rencontrez des problèmes avec les abonnements et OpenAI, vous pouvez trouver une réponse en publiant dans notre Forum Mesh Creator.

Configuration de cette station

Pour terminer cette station, vous devez visiter le portail Azure, puis obtenir un URI (également appelé « point de terminaison ») et une clé pour votre locataire. Plus tard, vous allez insérer la clé dans du code qui vous permettra d’appeler Azure OpenAI. Nous allons maintenant effectuer cette étape afin que vous n’ayez pas à interrompre votre flux de travail ultérieurement.

Créer et déployer une ressource Azure OpenAI

  1. Dans votre navigateur, accédez au portail Azure, puis connectez-vous.

  2. Dans la zone de recherche située en haut de la fenêtre, tapez « azure openai », puis appuyez sur la touche Entrée. Cela vous permet d’accéder aux services d’IA Azure | Page Azure OpenAI .

    __________________________________

  3. Cliquez sur le bouton Créer.

    __________________________________

    IMPORTANT : Pour la plupart des paramètres décrits ci-dessous, nous ne faisons pas de recommandation spécifique. Vous devez choisir les options les plus pertinentes pour vous et votre organisation.

  4. Dans la page Informations de base, créez des noms où ils sont demandés, puis choisissez les options souhaitées pour l’abonnement, la région et le niveau tarifaire.

  5. Dans la page Réseau , choisissez l’option souhaitée.

    __________________________________

  6. Dans la page Balises, vous pouvez ajouter des balises ou ignorer ces options.

  7. Dans la page Révision et Envoi, passez en revue les informations, puis cliquez sur le bouton Créer .

La ressource se déploie et vous devez voir un message indiquant que le déploiement est en cours. Finalement, une page Déploiement s’affiche .

__________________________________

Déployer le modèle dans Azure OpenAI Studio

  1. Cliquez sur le bouton Accéder à la ressource .

  2. Dans la page Ressource, cliquez sur Accéder à Azure OpenAI Studio.

    __________________________________

  3. Dans le menu de gauche sous Gestion, sélectionnez Déploiements.

    __________________________________

  4. Sélectionnez Créer un déploiement.

  5. Cliquez sur la liste déroulante Sélectionner un modèle , puis choisissez « gpt-35-turbo ». Notez que, si vous préférez, vous pouvez choisir un autre modèle ; toutefois, cela nécessiterait des modifications apportées au code.

  6. Dans le champ Nom du déploiement , tapez « gpt-35-turbo ».

  7. Pour les autres paramètres, choisissez les noms et les options les plus pertinents pour vous et votre organisation.

Copier l’URI et la clé

  1. Revenez à la page principale d’Azure, puis, sous Ressources, sélectionnez la ressource que vous avez créée.

    __________________________________

  2. Dans la page Ressource du menu de gauche, sélectionnez Clés et point de terminaison.

    __________________________________

  3. Dans la page Clés et point de terminaison , cliquez sur le bouton « Copier dans le Presse-papiers » pour KEY 1 ou KEY 2 (il n’en a pas d’importance), puis collez-le dans un fichier texte à l’aide du Bloc-notes Windows ou d’un autre éditeur de texte.

    __________________________________

  4. Cliquez sur le bouton Copier dans le Presse-papiers pour point de terminaison et collez-le dans le même fichier texte.

  5. Enregistrez le fichier texte. Vous aurez besoin de ces deux informations plus loin dans le tutoriel.

Ajouter le préfabriqué pour la station 5

  1. Dans le dossier Projet, accédez à Assets>MeshCloudScripting, puis faites glisser le préfabriqué 5 - AIAssistant vers la hiérarchie et placez-le en tant qu’objet enfant vers Mesh Cloud Scripting et juste sous 4 - GlobeWithCloudScripting.

    __________________________________

Insérer les informations d’URI et d’API pour Azure OpenAI

  1. Dans la hiérarchie, sélectionnez Mesh Cloud Scripting GameObject.

  2. Dans l’Inspecteur, accédez au composant Mesh Cloud Scripting, puis cliquez sur Ouvrir le dossier d’application. Cela ouvre le dossier de projet qui contient les fichiers pour Mesh Cloud Scripting dans windows Explorateur de fichiers.

    __________________________________

  3. Ouvrez le fichier nommé appsettings. UnityLocalDev.json dans votre éditeur de code. Les deux dernières lignes de code contiennent des commentaires d’espace réservé pour les paramètres de configuration Azure OpenAI.

    __________________________________

  4. Collez l’URI et la clé que vous avez copiés précédemment à partir du portail Azure dans ces deux lignes, en remplaçant les commentaires d’espace réservé.

    __________________________________

  5. Enregistrez le fichier et fermez-le.

Mettre à jour le fichier Directory.packages.props

  1. Dans la fenêtre Explorateur de fichiers qui affiche les fichiers Mesh Cloud Scripting, ouvrez le fichier nommé Directory.Packages.props dans votre éditeur de code. Notez le commentaire sur l’ajout de références de package.

    __________________________________

  2. Remplacez le commentaire par la ligne ci-dessous :

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

  3. Enregistrez le fichier et fermez-le.

Mettre à jour le fichier csproj

  1. Dans la fenêtre Explorateur de fichiers qui affiche les fichiers Mesh Cloud Scripting, ouvrez le fichier nommé StartingPoint.csproj dans votre éditeur de code.

    __________________________________

  2. Notez qu’au bas du fichier, juste au-dessus de l’élément ItemGroup avec les informations WeatherAPI, il existe un commentaire avec un espace réservé pour une référence de package.

    __________________________________

  3. Supprimez le commentaire et remplacez-le par la ligne ci-dessous :

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

    __________________________________

  4. Enregistrez le fichier et fermez-le.

Ajouter le code qui active OpenAI

  1. Dans la fenêtre Explorateur de fichiers qui affiche les fichiers Mesh Cloud Scripting, accédez au dossier StartingPoint, puis ouvrez le fichier nommé App.cs dans votre éditeur de code.

    __________________________________

  2. Dans le fichier App.cs, recherchez le commentaire « Coller le code ici » en haut de la liste des using directives.

    __________________________________

  3. Copiez le code ci-dessous.

    using Azure;
using Azure.AI.OpenAI;

  4. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    __________________________________

  5. Recherchez le commentaire « Coller le code ici » situé sous le _weatherAPIKey_ champ.

    __________________________________

  6. Copiez le code ci-dessous.

    private OpenAIClient _openAIClient;

  7. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    ___

  8. Recherchez le commentaire « Coller le code ici » situé dans le corps du constructeur.

    __________________________________

  9. Copiez le code ci-dessous.

    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. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    __________________________________

  11. Recherchez le commentaire « Coller le code ici » qui suit l’instruction refreshButtonNode if à l’intérieur de la StartAsync() méthode.

    __________________________________

  12. Copiez le code ci-dessous.

    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. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    __________________________________

Ajouter le code qui affiche la boîte de dialogue d’entrée OpenAI

  1. Recherchez le commentaire « Coller le code ici » situé peu après la GetCurrentWeather() méthode dans l’instruction infoButton if .

    __________________________________

  2. Copiez le code ci-dessous.

    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. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    __________________________________

    Le code effectue les actions suivantes :

    • Appelez mesh Cloud Scripting via la méthode nommée ShowInputDialogToParticipantAsync(). Les arguments sont le message à envoyer à l’utilisateur (« Demander à Azure OpenAI ») et à qui vous souhaitez afficher la boîte de dialogue d’entrée (arguments). Participant).
    • Lorsque la boîte de dialogue d’entrée s’affiche, vérifiez les erreurs.
    • Enregistrez tout ce que le participant a tapé (le résultat) pour participantInput sous forme de chaîne.

Envoyer GPT-3.5 Turbo le résultat de la boîte de dialogue d’entrée

Le code ci-dessous envoie le modèle GPT-3.5 Turbo le résultat de la boîte de dialogue d’entrée avec des instructions sur la façon de répondre aux données météorologiques actuelles.

  1. Recherchez le premier commentaire « Coller le code ici » dans l’essai... catch block vous vient de coller.

    __________________________________

  2. Copiez le code ci-dessous :

        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. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    __________________________________

    Le code effectue les actions suivantes :

    • Créez une instance de la classe ChatCompletionOptions nommée chatCompletionOptions.
    • Initialisez une variable nommée DeploymentName avec le nom de déploiement que vous avez créé précédemment (« gpt-35-turbo »).
    • Initialisez une nouvelle instance de ChatRequestSystemMessage avec des conseils sur la façon dont l’Assistant doit répondre aux questions. Cela inclut les emplacements avec les données météorologiques qui vous intéressent et les conditions actuelles (_currentWeatherText) pour ces emplacements. La valeur de _currentWeatherText a été reçue lorsque nous avons appelé weatherapi.com au chapitre 5.
    • Initialisez une nouvelle instance de ChatRequestUserMessage avec la question que le participant a posée.
    • Envoyez les informations relatives à la requête au LLM (modèle de langage volumineux).

Ajouter le code qui affiche la réponse à partir du LLM

  1. Recherchez le commentaire « Coller le code ici » dans l’essai... catch block vous vient de coller.

    __________________________________

  2. Copiez le code ci-dessous :

            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. Remplacez le commentaire « Coller le code ici » que vous venez de trouver par le code que vous avez copié.

    __________________________________

    Le code effectue les actions suivantes :

    • Attendez la réponse du LLM.
    • Le LLM renvoie plusieurs réponses dans un tableau (responseMessage). Vous pouvez choisir celui que vous souhaitez afficher.
    • Appelez ShowMessageToParticipant() dans l’API Mesh Cloud Scripting pour afficher la réponse.

  4. Enregistrez le fichier et fermez-le.

Tester votre travail

  1. Dans l’Éditeur Unity, enregistrez le projet, puis appuyez sur le bouton Lecture.

  2. Votre avatar est généré sur le côté de la Terrasse Sphere qui contient les trois premières stations. Accédez au côté opposé de la terrasse Sphere, puis positionnez-vous devant la station 5.

    __________________________________

  3. Cliquez sur le bouton Informations situé dans la zone de texte d’informations de la station 5.

    __________________________________

  4. Lorsque la boîte de dialogue Poser Azure OpenAI s’affiche, tapez une question.

    __________________________________

  5. La réponse s’affiche dans la boîte de dialogue. Lorsque vous avez terminé, cliquez sur OK.

    __________________________________

Conclusion

Félicitations ! Dans ce tutoriel Mesh 201, vous avez découvert les éléments suivants :

  • Chargement de fichiers HTML partagés locaux et non partagés dans un WebSlate.
  • Utilisation d’une ressource 3D pour appeler une API Web et télécharger des données dans un WebSlate.
  • Extrayez des données à partir de sources internes ou publiques dans votre scène et affichez-les en 3D.
  • Configurez des interactions basées sur l’IA à l’aide d’un assistant virtuel basé sur Azure OpenAI ou d’un « chatbot ».

Vous pouvez maintenant mettre vos nouvelles compétences Mesh pour travailler et créer des expériences collaboratives qui sont encore plus utiles et excitantes !

Étapes suivantes

Générer et publier

Si vous souhaitez générer et publier ce projet de didacticiel, procédez comme suit :

  1. Accédez à notre article sur la préparation d’un projet Mesh Cloud Scripting, puis suivez les instructions pour enregistrer votre groupe de ressources et votre ID d’abonnement.
  2. Accédez à notre article sur la création et la publication de votre environnement , puis suivez les instructions ci-dessous. À un moment donné, vous devrez accéder à un article supplémentaire avec des instructions spécialisées pour la création d’un projet avec Mesh Cloud Scripting, puis revenir à la build principale et à l’article de publication. Ce flux est tous disposés pour vous dans les articles.
  3. Si vous le souhaitez, vous pouvez tester votre environnement dans l’application Mesh.

En savoir plus sur WebSlates

Visitez l’article WebSlates sur le site d’aide mesh.

Lisez un billet de blog écrit par le responsable de produit WebSlates.

Problème

Essayez de créer votre propre station avec un WebSlate et un bouton qui charge un fichier HTML. Veillez à partager vos efforts dans notre Forum des développeurs Mesh !