Introduzione all'esempio di chat aziendale JavaScript con RAG

  • Articolo

Questo articolo illustra come distribuire ed eseguire l'esempio di app Di chat aziendale per JavaScript. Questo esempio implementa un'app di chat usando JavaScript, il servizio Azure OpenAI e la generazione aumentata di recupero (RAG) in Ricerca di intelligenza artificiale di Azure per ottenere risposte sulle proprietà di noleggio. L'app di chat delle proprietà di noleggio viene sottoposto a seeding con i dati dei file markdown (*.md), tra cui un'informativa sulla privacy, le condizioni per il servizio e il supporto.

Inizia subito

Seguendo le istruzioni riportate in questo articolo, potrai:

  • Distribuire un'app di chat in Azure.
  • Ottieni risposte sulle informazioni sul sito web delle proprietà di noleggio.
  • Modificare le impostazioni per cambiare il comportamento delle risposte.

Dopo aver completato questo articolo, è possibile iniziare a modificare il nuovo progetto con il codice e i dati personalizzati.

Questo articolo fa parte di una raccolta di articoli che illustrano come creare un'app di chat usando il servizio Azure OpenAI e Ricerca di intelligenza artificiale di Azure. Altri articoli della raccolta includono:

Panoramica dell'architettura

Un'architettura semplice dell'app di chat è illustrata nel diagramma seguente:

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

L'applicazione di esempio di chat è stata creata per una società fittizia denominata Contoso Real Estate e l'esperienza di chat intelligente consente ai clienti di porre domande di supporto sull'utilizzo dei suoi prodotti. I dati di esempio includono un set di documenti che descrivono le condizioni per il servizio, l'informativa sulla privacy e una guida al supporto. I documenti vengono inseriti nell'architettura durante la distribuzione

L'applicazione è costituita da più componenti, tra cui:

  • servizio di ricerca: il servizio back-end che fornisce le funzionalità di ricerca e recupero.
  • Servizio indicizzatore: servizio che indicizza i dati e crea gli indici di ricerca.
  • App Web: l'applicazione Web front-end che fornisce l'interfaccia utente e orchestra l'interazione tra l'utente e i servizi back-end.

Diagramma che mostra i servizi di Azure e il relativo flusso di integrazione per l'app front-end, la ricerca e l'inserimento di documenti.

Costo

La maggior parte delle risorse in questa architettura usa un piano tariffario di base o a consumo. I prezzi a consumo si basano sull'utilizzo, il che significa che si paga solo per ciò che si usa. Per completare questo articolo, ci sarà un addebito, ma sarà minimo. Al termine dell'articolo, è possibile eliminare le risorse per interrompere l'addebito degli addebiti.

Altre informazioni sui costi nel repository di esempio.

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:

  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. Accesso concesso ad Azure OpenAI nella sottoscrizione di Azure desiderata. Attualmente, l'accesso a questo servizio viene concesso solo dall'applicazione. È possibile richiedere l'accesso a OpenAI di Azure completando il modulo all'indirizzo https://aka.ms/oai/access. Apri un problema in questo repository per contattare Microsoft in caso di problemi.
  4. Account GitHub

Ambiente di sviluppo aperto

Inizia ora con un ambiente di sviluppo che ha tutte le dipendenze installate per completare questo articolo.

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-search-openai-javascript.

  2. Fai clic con il pulsante destro del mouse sul pulsante seguente e scegli Apri collegamento in nuove finestre per avere a disposizione allo stesso tempo sia l'ambiente di sviluppo che la documentazione.

    Aprire questo progetto in GitHub Codespaces

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

    Screenshot della schermata di conferma prima di creare un 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.

Distribuire ed eseguire

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

Distribuire l'app di chat 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 che l'applicazione è stata distribuita correttamente, viene visualizzato un URL nel terminale.

  8. Seleziona l'URL etichettato Deploying service web per aprire l'applicazione di chat in un browser.

    Screenshot dell'app chat nel browser che mostra diversi suggerimenti per l'input della chat e la casella di testo della chat per immettere una domanda.

Usare l'app chat per ottenere risposte dai file markdown

L'app di chat viene precaricata con le informazioni sul noleggio da un catalogo di file markdown. È possibile usare l'app di chat per porre domande sul processo di noleggio. I passaggi seguenti illustrano il processo di utilizzo dell'app di chat.

  1. Nel browser selezionare o immettere Qual è il criterio di rimborso nella casella di testo nella parte inferiore della pagina.

    Screenshot della prima risposta dell'app chat.

  2. Nella risposta selezionare Mostra processo di pensiero.

    Screenshot della prima risposta dell'app di chat con Mostra processo di pensiero evidenziato in una casella rossa.

  3. Nel riquadro di destra usare le schede per comprendere come è stata generata la risposta.

    Scheda Descrizione
    Processo di pensiero Si tratta di uno script delle interazioni nella chat. Puoi visualizzare la richiesta di sistema (content) e la domanda dell'utente (content).
    Contenuto di supporto Sono incluse le informazioni per rispondere alla domanda e il materiale originario. Il numero di citazioni del materiale di origine è indicato nelle impostazioni sviluppatore. Il valore predefinito è 3.
    Citazione Verrà visualizzata la pagina originale contenente la citazione.

  4. Al termine, selezionare il pulsante Nascondi indicato con una X sopra le schede.

Usa le impostazioni dell'app di chat per modificare il comportamento delle risposte

L'intelligenza dell'app di chat è determinata dal modello OpenAI e dalle impostazioni usate per interagire con il modello.

Screenshot delle impostazioni per sviluppatori di chat

Impostazione Descrizione
Esegui l'override del modello di richiesta Questo è il prompt usato per generare la risposta.
Recupera questi numerosi risultati della ricerca Questo è il numero dei risultati della ricerca usati per generare la risposta. Puoi visualizzare queste origini restituite nelle schede Processo di pensiero e Contenuto di supporto della citazione.
Escludi categoria Si tratta della categoria di documenti esclusi dai risultati della ricerca.
Usa il classificatore semantico per il recupero Si tratta di una funzionalità di Azure AI Search che usa l’apprendimento automatico per migliorare la pertinenza dei risultati della ricerca.
Usa riepiloghi contestuali di query anziché documenti interi Quando vengono controllati sia Use semantic ranker che Use query-contextual summaries, l'LLM usa didascalie estratte dai passaggi chiave, anziché da tutti i passaggi, nei documenti con classificazione più alta.
Suggerire domande di follow-up Fare in modo che l'app di chat suggerisca domande di follow-up in base alla risposta.
Modalità di recupero Vettori e testo significa che i risultati della ricerca sono basati sul testo dei documenti e sulle incorporazioni dei documenti. Vettori significa che i risultati della ricerca sono basati sulle incorporazioni dei documenti. Testo significa che i risultati della ricerca sono basati sul testo dei documenti.
Eseguire lo streaming delle risposte di completamento della chat Risposta di flusso invece di attendere fino a quando non è disponibile la risposta completa per una risposta.

I passaggi seguenti illustrano il processo di modifica delle impostazioni.

  1. Nel browser selezionare la scheda Sviluppo Impostazioni.

  2. Selezionare la casella di controllo Usa riepiloghi contestuali di query anziché porre nuovamente la stessa domanda.

    What happens if the rental doesn't fit the description?

    La chat restituita con una risposta più concisa, ad esempio la seguente.

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

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. Accedere al dashboard di GitHub Codespaces (https://github.com/codespaces).

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

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

  3. Aprire il menu di scelta rapida per il codespace e selezionare Elimina.

    Screenshot del menu di scelta rapida per un singolo codespace con l'opzione di eliminazione evidenziata.

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.

Passaggi successivi