Costruire un assistente alimentato da ChatGPT e abilitato alla voce utilizzando React e Express

Creare assistente con ChatGPT, voce abilitata con React ed Express.

Con i grandi modelli di linguaggio che diventano sempre più popolari nel mondo di oggi, l’interesse per il loro utilizzo nello sviluppo sta aumentando, anche se non è sempre facile capire da dove cominciare.

In questo post, illustreremo come creare un semplice chatbot basato sul modello di linguaggio ChatGPT (in questo caso, gpt-35-turbo), come modo per capire come questi modelli possono essere implementati in un’applicazione reale. Il chatbot che svilupperemo consisterà in una semplice applicazione web, scritta principalmente in TypeScript. Utilizzeremo il servizio Azure OpenAI per accedere al modello, Azure AI Speech per abilitare le funzionalità di speech-to-text e text-to-speech, un server Express per gestire le richieste delle API e la comunicazione tra il chatbot e i servizi Azure, e infine un front-end React.

Una breve demo dell’applicazione.

• Stendi le tue ali Falcon 180B è qui
• On-Policy vs. Off-Policy Monte Carlo, con visualizzazioni
• Questa newsletter sull’AI è tutto ciò di cui hai bisogno #63

GPT sta per “Generative Pre-trained Transformer”. È un modello di apprendimento automatico che viene addestrato su un ampio corpus di dati testuali per prevedere la probabilità che una parola o una frase appaia in un determinato contesto. I modelli GPT possono essere utilizzati per una varietà di compiti di elaborazione del linguaggio naturale, tra cui la traduzione del linguaggio, la sintesi del testo e lo sviluppo di chatbot. Invece di approfondire come funzionano questi tipi di modelli, preferisco indirizzarti a un ottimo articolo molto approfondito scritto da Beatriz Stollnitz qui.

L’applicazione può essere trovata in questo repository GitHub: github.com/gcordido/VoiceEnabledGPT, che contiene istruzioni su come installarla e eseguirla, consigli su Prompt Engineering e su come preparare al meglio il modello per ottenere risultati accurati.

Per sviluppare questa applicazione, dobbiamo prima considerare la sua “architettura” e per affrontare questo dobbiamo rispondere alle seguenti domande: Come appare l’interfaccia del chatbot? Come fornisce l’utente l’input al bot? Come comunica l’applicazione con il modello? Come sarà l’input? Come otteniamo le informazioni dal modello per l’utente?

Diagramma dell’architettura dell’applicazione

Prima di tutto, tracciamo come apparirebbe la finestra di chat. In questo contesto, ho optato per un’interfaccia di chat tipica in cui la finestra visualizza un elenco di messaggi, con i messaggi dell’utente a destra e le risposte del chatbot a sinistra. Per ottenere questo, utilizziamo un componente React per renderizzare l’interfaccia di chat, inclusi elementi come una casella di input, un pulsante di speech-to-text e un corpo della chat espandibile.

La comunicazione tra l’applicazione e il modello viene facilitata utilizzando le API. Il servizio Azure OpenAI fornisce l’accesso a questi modelli effettuando chiamate attraverso un REST API, che richiedono un insieme di parametri e vengono accessibili utilizzando segreti sotto forma di un endpoint e una chiave API. Poiché queste ultime sono, beh, segreti, dobbiamo assicurarci che non vengano esposti quando effettuiamo la chiamata API. Pertanto, creiamo un server Express per gestire queste richieste delle API.

Il server riceverà una chiamata dall’interfaccia principale del chatbot una volta che l’utente preme il pulsante “Invia” e riceverà l’elenco dei messaggi precedenti per fornirli al modello durante la chiamata API. Nota che ho detto l’elenco dei messaggi precedenti, invece del solo ultimo messaggio. Questo è intenzionale, poiché una delle caratteristiche più interessanti dei modelli GPT è la loro capacità di mantenere il contesto durante una conversazione finché viene fornito. Questo elenco è codificato come un elenco di oggetti, ognuno dei quali possiede due proprietà: ‘ruolo’ e ‘contenuto’. La proprietà ‘ruolo’ differenzia i messaggi dall’utente e dall’assistente, mentre la proprietà ‘contenuto’ contiene semplicemente il testo del messaggio.

Con il processo di comunicazione tra l’applicazione e il modello GPT ora definito, l’ultimo passo è aggiungere il supporto audio. Per questo, utilizziamo Azure AI Speech, che fornisce un SDK facile da usare per JavaScript. Lo SDK fornisce metodi per rilevare l’audio dal microfono in tempo reale, riconoscere il discorso e sintetizzare il discorso dal testo.

Per accedere allo SDK di Speech e ai suoi metodi dal client, abbiamo bisogno di un token di autorizzazione. Questo token viene generato autenticando la nostra applicazione con il servizio Azure AI Speech, utilizzando la sua chiave API e la regione sul lato del server. Una volta ottenuto il token, possiamo utilizzare il metodo SpeechRecognizer dello SDK per rilevare e trascrivere l’audio dal microfono. Questa trascrizione viene quindi aggiunta alla nostra lista di messaggi come input dell’utente e inviata al server allo stesso modo dell’input scritto.

Dopo aver generato una risposta, l’output del modello viene inviato nuovamente all’interfaccia di chat dal server. Viene aggiunta una nuova voce alla lista dei messaggi sotto il ruolo dell’assistente e la finestra di chat viene aggiornata con il messaggio del chatbot che riflette la nuova voce. Questa nuova voce può quindi essere passata attraverso il metodo SpeechSynthesizer del Speech SDK, consentendo all’applicazione di leggere ad alta voce la risposta del chatbot attraverso gli altoparlanti.

Sebbene l’applicazione non vada molto oltre, ci sono ancora molti modi per sperimentare e modificare il modo in cui comuniciamo con il modello e come esso ci risponde.

Come sostenitore convinto dell’apprendimento attraverso la pratica, suggerisco vivamente di provare l’applicazione stessa clonando il repository e sperimentando con i parametri dell’applicazione. Ad esempio, prova a cambiare il “System Prompt” (istruzioni iniziali) per far sì che il modello risponda in prosa o in haiku, cambia la lingua del sintetizzatore vocale in spagnolo o limita il numero di messaggi mantenuti per il contesto e osserva come il modello risponde!

Articolo originariamente pubblicato qui. Ripubblicato con il permesso dell’autore.