Condividi tramite

Esercitazione su Mesh 201 Capitolo 6: Ottenere risposte alle domande con Azure OpenAI

  • Articolo

In questo capitolo si passa alla quinta e finale stazione in cui si apprenderà come implementare un assistente virtuale basato su Azure OpenAI o "chatbot". Si noti che è possibile usare qualsiasi servizio di intelligenza artificiale desiderato qui (ad esempio, Copilot Studio). Tenendo presente il tema della ricerca di una località per un parco eolico, l'assistente per l'intelligenza artificiale verrà personalizzato per rispondere alle domande correlate alle centrali eoliche.

Note importanti:

  • OpenAI è disponibile solo per i clienti e i partner aziendali approvati. Se non si è ancora in questo gruppo, è necessario inviare un modulo di registrazione. Altre informazioni sul processo di registrazione.

  • Se si verificano problemi con le sottoscrizioni e OpenAI, è possibile trovare una risposta pubblicando nel forum di Mesh Creator.

Configurazione per questa stazione

Per completare questa stazione, è necessario visitare il portale di Azure e quindi ottenere un URI (detto anche "Endpoint") e una chiave per il tenant. Successivamente, si inserirà la chiave in un codice che consentirà di chiamare Azure OpenAI. A questo punto, eseguire questo passaggio in modo che non sia necessario interrompere il flusso di lavoro in un secondo momento.

Creare e distribuire una risorsa OpenAI di Azure

  1. Nel browser passare al portale di Azure e quindi accedere.

  2. Nella casella Cerca nella parte superiore della finestra digitare "azure openai" e quindi premere INVIO. In questo modo si passa ai servizi di intelligenza artificiale di Azure | Pagina Di Azure OpenAI .

    __________________________________

  3. Fare clic sul pulsante Crea.

    __________________________________

    IMPORTANTE: per molte delle impostazioni descritte di seguito, non viene consigliata una raccomandazione specifica. È consigliabile scegliere le opzioni più appropriate per l'utente e l'organizzazione.

  4. Nella pagina Informazioni di base creare i nomi in cui sono stati richiesti e scegliere le opzioni desiderate per Sottoscrizione, Area e Piano tariffario.

  5. Nella pagina Rete scegliere l'opzione desiderata.

    __________________________________

  6. Nella pagina Tag è possibile aggiungere tag o ignorare queste opzioni.

  7. Nella pagina Rivedi e invia esaminare le informazioni e quindi fare clic sul pulsante Crea.

La risorsa viene distribuita e verrà visualizzato un messaggio che informa che la distribuzione è in corso. Alla fine, si noterà che la pagina Distribuzione è completa .

__________________________________

Distribuire il modello in Azure OpenAI Studio

  1. Fare clic sul pulsante Vai alla risorsa .

  2. Nella pagina Risorsa fare clic su Vai ad Azure OpenAI Studio.

    __________________________________

  3. Nel menu a sinistra in Gestione selezionare Distribuzioni.

    __________________________________

  4. Selezionare Crea nuova distribuzione.

  5. Fare clic sull'elenco a discesa Deploy Model (Distribuisci modello) e quindi selezionare Deploy base Model (Distribuisci modello di base).

  6. Nella finestra di dialogo Seleziona un modello selezionare "gpt-35-turbo".

  7. Per visualizzare la descrizione, attendere qualche minuto. Al termine, fare clic sul pulsante Conferma .

    __________________________________

Nota: è possibile scegliere un modello diverso, ma è necessario apportare alcune modifiche al codice.

  1. Nel campo Nome distribuzione digitare "gpt-35-turbo".

  2. Per le altre impostazioni, scegliere i nomi e le opzioni più appropriati per l'utente e l'organizzazione. Al termine, fare clic sul pulsante Distribuisci .

Copiare l'URI e la chiave

  1. Tornare alla pagina principale di Azure e quindi in Risorse selezionare la risorsa creata.

    __________________________________

  2. Nella pagina Risorsa nel menu a sinistra selezionare Chiavi ed endpoint.

    __________________________________

  3. Nella pagina Chiavi ed endpoint fare clic sul pulsante "Copia negli Appunti" per KEY 1 o KEY 2 (non importa quale chiave) e quindi incollarlo in un file di testo usando Il Blocco note di Windows o un altro editor di testo.

    __________________________________

  4. Fare clic sul pulsante "Copia negli Appunti" per Endpoint e incollarlo nello stesso file di testo.

  5. Salvare il file di testo. Queste due informazioni saranno necessarie più avanti nell'esercitazione.

Aggiungere il prefab per Station 5

  1. Nella cartella Project passare ad Assets>MeshCloudScripting e quindi trascinare il prefab 5 - AIAssistant nella gerarchia e inserirlo come oggetto figlio in Mesh Cloud Scripting e appena sotto 4 - GlobeWithCloudScripting.

    __________________________________

Inserire le informazioni sull'URI e sull'API per Azure OpenAI

  1. Nella gerarchia selezionare Mesh Cloud Scripting GameObject.

  2. In Inspector (Controllo) passare al componente Mesh Cloud Scripting (Scripting cloud mesh) e quindi fare clic su Apri cartella dell'applicazione. Verrà aperta la cartella del progetto che contiene i file per lo scripting cloud mesh in Windows Esplora file.

    __________________________________

  3. Aprire il file denominato appsettings. UnityLocalDev.json nell'editor di codice. Le ultime due righe di codice contengono commenti segnaposto per le impostazioni di configurazione di Azure OpenAI.

    __________________________________

  4. Incollare l'URI e la chiave copiati in precedenza dal portale di Azure in queste due righe, sostituendo i commenti segnaposto.

    __________________________________

  5. Salva e chiudi il file.

Aggiornare il file Directory.packages.props

  1. Nella finestra Esplora file che visualizza i file mesh cloud scripting aprire il file denominato Directory.Packages.props nell'editor di codice. Si noti il commento relativo all'aggiunta di riferimenti al pacchetto.

    __________________________________

  2. Sostituire il commento con la riga seguente:

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

  3. Salva e chiudi il file.

Aggiornare il file csproj

  1. Nella finestra Esplora file che visualizza i file mesh cloud scripting aprire il file denominato StartingPoint.csproj nell'editor di codice.

    __________________________________

  2. Si noti che nella parte inferiore del file, appena sopra l'elemento ItemGroup con le informazioni WeatherAPI, è presente un commento con un segnaposto per un riferimento al pacchetto.

    __________________________________

  3. Eliminare il commento e sostituirlo con la riga seguente:

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

    __________________________________

  4. Salva e chiudi il file.

Aggiungere il codice che abilita OpenAI

  1. Nella finestra Esplora file in cui sono visualizzati i file mesh cloud scripting passare alla cartella StartingPoint e quindi aprire il file denominato App.cs nell'editor di codice.

    __________________________________

  2. Nel file App.cs trovare il commento "Incolla codice qui" nella parte superiore dell'elenco delle using direttive.

    __________________________________

  3. Copia il codice seguente.

    using Azure;
using Azure.AI.OpenAI;

  4. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

  5. Trovare il commento "Incolla codice qui" che si trova sotto il _weatherAPIKey_ campo.

    __________________________________

  6. Copia il codice seguente.

    private OpenAIClient _openAIClient;

  7. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    ___

  8. Trovare il commento "Incolla codice qui" che si trova nel corpo del costruttore.

    __________________________________

  9. Copia il codice seguente.

    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. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

  11. Trovare il commento "Incolla codice qui" che segue l'istruzione refreshButtonNode if all'interno del StartAsync() metodo .

    __________________________________

  12. Copia il codice seguente.

    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. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

Aggiungere il codice che visualizza la finestra di dialogo di input OpenAI

  1. Trovare il commento "Incolla codice qui" che si trova poco dopo il GetCurrentWeather() metodo nell'istruzione infoButton if .

    __________________________________

  2. Copia il codice seguente.

    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. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

    Il codice esegue le seguenti attività:

    • Chiamare Mesh Cloud Scripting tramite il metodo denominato ShowInputDialogToParticipantAsync(). Gli argomenti sono il messaggio a cui si vuole chiedere all'utente ("Ask Azure OpenAI") e a chi si vuole visualizzare la finestra di dialogo di input (argomenti). Partecipante).
    • Quando viene visualizzata la finestra di dialogo di input, verificare la presenza di errori.
    • Salvare qualsiasi elemento digitato dal partecipante in (il risultato) in participantInput come stringa.

Inviare GPT-3.5 Turbo il risultato della finestra di dialogo di input

Il codice seguente invia il modello GPT-3.5 Turbo il risultato della finestra di dialogo di input con istruzioni su come rispondere con i dati meteo correnti.

  1. Trovare il primo commento "Incolla codice qui" nel tentativo... catch blocca che hai appena incollato.

    __________________________________

  2. Copiare il codice seguente:

        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. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

    Il codice esegue le seguenti attività:

    • Creare un'istanza della classe ChatCompletionOptions denominata chatCompletionOptions.
    • Inizializzare una variabile denominata DeploymentName con il nome di distribuzione creato in precedenza ("gpt-35-turbo").
    • Inizializzare una nuova istanza di ChatRequestSystemMessage con indicazioni su come l'assistente deve rispondere alle domande. Sono incluse le località con i dati meteo a cui si è interessati e le condizioni correnti (_currentWeatherText) per tali località. Il valore di _currentWeatherText è stato ricevuto quando abbiamo chiamato weatherapi.com nel capitolo 5.
    • Inizializzare una nuova istanza di ChatRequestUserMessage con la domanda posta dal partecipante.
    • Inviare le informazioni sulla richiesta all'LLM (Large Language Model).

Aggiungere il codice che visualizza la risposta da LLM

  1. Trovare il commento "Incolla codice qui" rimanente nel tentativo... catch blocca che hai appena incollato.

    __________________________________

  2. Copiare il codice seguente:

            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. Sostituire il commento "Incolla codice qui" appena trovato con il codice copiato.

    __________________________________

    Il codice esegue le seguenti attività:

    • Attendere la risposta dall'LLM.
    • LLM restituisce diverse risposte in una matrice (responseMessage). È possibile scegliere quello che si vuole mostrare.
    • Chiamare ShowMessageToParticipant() nell'API Mesh Cloud Scripting per visualizzare la risposta.

  4. Salva e chiudi il file.

Testare il lavoro

  1. Nell'editor di Unity salvare il progetto e quindi premere il pulsante Riproduci.

  2. L'avatar viene generato sul lato della terrazza sphere che contiene le prime tre stazioni. Passa al lato opposto della Terrazza Sphere e poi posizionati di fronte alla Stazione 5.

    __________________________________

  3. Fare clic sul pulsante Info che si trova nella casella di testo informazioni per Stazione 5.

    __________________________________

  4. Quando viene visualizzata la finestra di dialogo Chiedi ad Azure OpenAI , digitare una domanda.

    __________________________________

  5. La risposta viene visualizzata nella finestra di dialogo. Al termine, fare clic su OK.

    __________________________________

Conclusione

Complimenti. In questa esercitazione di Mesh 201 sono state illustrate le operazioni seguenti:

  • Caricamento di file HTML condivisi e non condivisi locali in un WebSlate.
  • Uso di un asset 3D per chiamare un'API Web e scaricare i dati in un WebSlate.
  • Eseguire il pull dei dati da origini interne o pubbliche nella scena e visualizzarla in 3D.
  • Configurare interazioni basate su intelligenza artificiale usando un assistente virtuale basato su Azure OpenAI o un "chatbot".

Ora è possibile mettere le nuove competenze mesh per lavorare e creare esperienze di collaborazione ancora più utili ed emozionanti!

Passaggi successivi

Compilare e pubblicare

Se si vuole compilare e pubblicare questo progetto di esercitazione, eseguire le operazioni seguenti:

  1. Passare all'articolo sulla preparazione di un progetto di scripting cloud mesh e quindi seguire le istruzioni per registrare il gruppo di risorse e l'ID sottoscrizione.
  2. Passare all'articolo sulla compilazione e la pubblicazione dell'ambiente e quindi seguire le istruzioni disponibili. A un certo punto, è necessario passare a un articolo supplementare con istruzioni specializzate per la compilazione di un progetto con Mesh Cloud Scripting e quindi tornare all'articolo principale di compilazione e pubblicazione. Questo flusso è tutto disposto per l'utente negli articoli.
  3. Se si vuole, è possibile testare l'ambiente nell'app Mesh.

Altre informazioni sui WebSlate

Visitare l'articolo WebSlates nel sito della Guida di Mesh.

Leggere un post di blog scritto dal Product Manager WebSlates.

Esercizio

Provare a creare una stazione personalizzata con un WebSlate e un pulsante che carica un file HTML. Assicurati di condividere i tuoi sforzi nel forum per sviluppatori mesh!