Introduzione ad Azure OpenAI con Assistenti e chiamate di funzione in JavaScript

Questo articolo illustra come distribuire ed eseguire l'Assistente Avvio rapido di Azure OpenAI serverless. Questo esempio implementa un'app assistants usando JavaScript, assistenti del servizio Azure OpenAI con chiamate di funzione e Funzioni di Azure.

Panoramica dell'architettura

Gli assistenti OpenAI di Azure consentono di creare assistenti di intelligenza artificiale personalizzati in base alle proprie esigenze tramite istruzioni personalizzate e ottimizzati da strumenti avanzati come l'interprete del codice e le funzioni personalizzate. In questo articolo viene fornita una procedura dettagliata per iniziare a usare l’API degli assistenti.

Diagramma che mostra l'architettura dal client all'app back-end.

Questa applicazione è basata su due componenti principali:

• Una semplice pagina HTML con file CSS e JavaScript di vaniglia e ospitata in App Web statiche di Azure.

• API serverless compilata con Funzioni di Azure e con OpenAI JavaScript SDK. L'app serverless invia la definizione degli assistenti, inclusa la chiamata di funzione all'endpoint OpenAI. L'endpoint risponde con la chiamata di funzione di completamento e i parametri necessari per completare la chiamata.

  • La chiamata di funzione dell'esempio simula una chiamata API generando un valore ticker di titolo casuale in base al simbolo azionario inviato alla funzione di Azure. Questa simulazione può essere sostituita con un'API remota nella soluzione.

  Diagramma che mostra Funzioni di Azure'integrazione con Azure OpenAI in cui Azure OpenAI può restituire i nomi delle funzioni di completamento che Funzioni di Azure chiamare.

Prerequisiti

Per completare questo articolo è disponibile un ambiente contenitore di sviluppo con tutte le dipendenze necessarie. Puoi eseguire il contenitore di sviluppo in GitHub Codespaces (in un browser) o in locale usando Visual Studio Code.

Per usare questo articolo, sono necessari i prerequisiti seguenti:

Codespaces (scelta consigliata)

1. Una sottoscrizione di Azure: creare un account gratuitamente
2. Autorizzazioni dell'account Azure: l'account Azure deve avere autorizzazioni Microsoft.Authorization/roleAssignments/write, ad esempio Amministratore accesso utenti o Proprietario.
3. Un account GitHub.

Visual Studio Code

1. Una sottoscrizione di Azure: creare un account gratuitamente
2. Autorizzazioni dell'account Azure: l'account Azure deve avere autorizzazioni Microsoft.Authorization/roleAssignments/write, ad esempio Amministratore accesso utenti o Proprietario.
3. Azure Developer CLI
4. Docker Desktop: avviare Docker Desktop se non è già in esecuzione
5. Git
6. Visual Studio Code
7. Estensione contenitore di sviluppo

Ambiente di sviluppo aperto

Usare le istruzioni seguenti per distribuire un ambiente di sviluppo preconfigurato contenente tutte le dipendenze necessarie per completare questo articolo.

GitHub Codespaces (scelta consigliata)

GitHub Codespaces esegue un contenitore di sviluppo gestito da GitHub con Visual Studio Code per il Web come interfaccia utente. Per l'ambiente di sviluppo più semplice, usa GitHub Codespaces per avere gli strumenti di sviluppo e le dipendenze corretti preinstallati per completare questo articolo.

Importante

Tutti gli account GitHub possono usare Codespaces per un massimo di 60 ore gratuite ogni mese con 2 istanze di core. Per altre informazioni, vedere Spazio di archiviazione e ore core mensili inclusi in GitHub Codespaces.

1. Avviare il processo per creare un nuovo codespace GitHub nel ramo main del repository GitHub Azure-Samples/azure-openai-assistant-javascript.

2. Fare clic con il pulsante destro del mouse sul pulsante seguente e selezionare Apri link in nuove finestre per avere sia l'ambiente di sviluppo che la documentazione disponibili contemporaneamente.

   Aprire in GitHub Codespaces

3. Nella pagina Crea codespace esaminare le impostazioni di configurazione del codespace e quindi selezionare Crea nuovo codespace

4. Attendere l'avvio del codespace. Questo processo di avvio può richiedere alcuni minuti.

5. Nel terminale nella parte inferiore della schermata, accedi ad Azure con Azure Developer CLI.

   azd auth login
   

6. Copia il codice dal terminale e incollalo in un browser. Segui le istruzioni per eseguire l'autenticazione con l'account Azure.

7. Le attività rimanenti in questo articolo vengono eseguite nel contesto di questo contenitore di sviluppo.

L'estensione Dev Containers per Visual Studio Code richiede l'installazione di Docker nel computer locale. L'estensione ospita il contenitore di sviluppo in locale usando l'host Docker con gli strumenti di sviluppo e le dipendenze corretti preinstallati per completare questo articolo.

1. Creare una copia tramite fork del repository di esempio selezionando questo collegamento Azure-Samples/azure-openai-assistant-javascript .

2. Clonare il repository fork. Sostituire <YOUR-GITHUB-ACCOUNT> con il nome dell'account GitHub.

   git clone https://github.com/<github-username>/azure-openai-assistant-javascript
   

3. Aprire Visual Studio Code nella nuova cartella.

   cd azure-openai-assistant-javascript
   code .
   

4. Assicurarsi che l'estensione Dev Containers sia installata in Visual Studio Code.

5. Aprire un nuovo terminale nell'editor.

   Suggerimento

   È possibile usare il menu principale per passare all'opzione di menu Terminale e quindi selezionare l'opzione Nuovo terminale.

   Screenshot dell'opzione di menu per aprire un nuovo terminale.

6. Accedi ad Azure con Azure Developer CLI.

   azd auth login
   

   Copia il codice dal terminale e incollalo in un browser. Segui le istruzioni per eseguire l'autenticazione con l'account Azure.

7. Aprire il riquadro comandi, cercare i comandi Dev Containers e quindi selezionare Dev Containers: Reopen in Container (Dev Containers: Riapri nel contenitore).

   Suggerimento

   Visual Studio Code potrebbe richiedere automaticamente di riaprire la cartella esistente all'interno di un contenitore di sviluppo. Questa funzionalità equivale a usare il riquadro comandi per riaprire l'area di lavoro corrente in un contenitore.

8. Riaprire nuovamente la finestra del terminale (CTRL + `) e lasciarla aperta.

9. Gli esercizi rimanenti in questo progetto si svolgono nel contesto di questo contenitore di sviluppo.

Distribuire ed eseguire

Il repository di esempio contiene tutti i file di codice e configurazione necessari per distribuire un'app per le funzioni in Azure. La procedura seguente illustra il processo di distribuzione dell'esempio in Azure.

Distribuire l'app Assistants in Azure

Importante

Le risorse di Azure create in questa sezione comportano costi immediati, principalmente per la risorsa Azure AI Search. Queste risorse possono accumulare costi anche se si interrompe il comando prima che venga eseguito completamente.

1. Esegui il seguente comando Azure Developer CLI per effettuare il provisioning delle risorse di Azure e distribuire il codice sorgente:

   azd up
   

2. Quando ti viene richiesto di immettere un nome ambiente, sceglilo breve e in minuscolo. Ad esempio: myenv. Viene usato come parte del nome del gruppo di risorse.

3. Quando richiesto, seleziona una sottoscrizione in cui creare le risorse.

4. Quando ti viene richiesto di selezionare una posizione la prima volta, seleziona una posizione nelle vicinanze. Questa posizione viene usato per la maggior parte delle risorse, incluso l'hosting.

5. Se viene ti richiesta una posizione per il modello OpenAI, seleziona una posizione vicina. Se la stessa posizione è disponibile come prima posizione, selezionala.

6. Attendi la distribuzione dell'app. Il completamento della distribuzione potrebbe richiedere da 5 a 10 minuti.

7. Dopo aver distribuito correttamente l'applicazione, viene visualizzato un URL nel terminale.

8. Selezionare l'URL etichettato Deploying service web per aprire l'applicazione assistente in un browser.

Usare l'app di assistente

È possibile usare l'app assistente per ottenere il prezzo del mercato azionario di MSFT. I passaggi seguenti illustrano il processo di utilizzo dell'app assistente. L'assistente può inviare le risposte tramite posta elettronica. Poiché la funzionalità di invio della posta elettronica non è configurata, modificare il prompt per non usare tale istruzione.

1. Nel browser copiare e incollare il prompt seguente:

   Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT). 
   

2. Selezionare il pulsante Run (Esegui). I risultati dovrebbero essere simili alla risposta seguente.

   Screenshot della prima risposta dell'app assistente.

Pulire le risorse

Pulire le risorse di Azure

Le risorse di Azure create in questo articolo vengono fatturate alla sottoscrizione di Azure. Se prevedi che queste risorse non ti servano in futuro, eliminale per evitare di incorrere in costi aggiuntivi.

Esegui il seguente comando Azure Developer CLI per eliminare le risorse di Azure e rimuovere il codice sorgente:

azd down --purge

Pulire GitHub Codespaces

GitHub Codespaces

L'eliminazione dell'ambiente GitHub Codespaces offre la possibilità di aumentare le ore gratuite per core a cui si ha diritto per l'account.

Importante

Per altre informazioni sui diritti dell'account GitHub, vedere Ore di archiviazione e di core mensili incluse in GitHub Codespaces.

1. Accedi al dashboard di GitHub Codespaces .

2. Individuare i codespace attualmente in esecuzione provenienti dal repository GitHub Azure-Samples/azure-openai-assistant-javascript.

   Screenshot di tutti i codespace in esecuzione, inclusi lo stato e i modelli.

3. Aprire il menu di scelta rapida, ..., per lo spazio di codice e quindi selezionare Elimina.

Non si è tenuti necessariamente a pulire l'ambiente locale, ma è possibile arrestare il contenitore di sviluppo in esecuzione e tornare a eseguire Visual Studio Code nel contesto di un'area di lavoro locale.

1. Aprire il riquadro comandi, cercare i comandi Dev Containers e quindi selezionare Dev Containers: Reopen Folder Locally.

   Screenshot dell'opzione del riquadro comandi per riaprire la cartella corrente nell'ambiente locale.

Suggerimento

Il contenitore di sviluppo in esecuzione verrà arrestato da Visual Studio Code, ma continuerà a esistere in Docker in uno stato arrestato. È sempre possibile eliminare l'istanza del contenitore, l'immagine del contenitore e i volumi da Docker per liberare più spazio nel computer locale.

Come ottenere assistenza

Questo repository di esempio offre informazioni sulla risoluzione dei problemi.

Se il rilascio non viene risolto, registrare il problema in Problemi del repository.

Contenuto correlato

• Che cos'è l'API Assistenti OpenAI di Azure?
• Introduzione alla valutazione delle risposte in un'app di chat in JavaScript