Benvenuti su Vivacity Design

Vi piace ChatGPT e volete crearvene un clone a vostro uso e consumo?

Benissimo! In questo post vi spiegheremo i principi base per crearne una versione basilare ma non troppo, e vi daremo il codice HTML/CSS/JS per realizzare il vostro chatbot personale client-side.

Intanto, cosa intendiamo con client-side?
Se guardate i vari tutorial su Youtube o sul sito OpenAI che parlano di come implementare il proprio chatbot, noterete che richiedono sempre un intervento back-end e quindi richiedono l'installazione di un server virtuale o, se volete caricarlo sul vostro hosting, l'accesso a dotazioni server-side non sempre disponibili, come yarn, npm ed altro.
Inoltre, la maggior parte dei tutorial offrono codice Python o NodeJS, che richiedono delle installazioni personalizzate di dipendenze e pacchetti.
Noi, invece, vi faremo creare un chatbot in puri HTML, CSS e Javascript che funziona sul vostro browser, sia in locale che sul vostro hosting, senza dipendenze o requisiti particolari sul server.

Principi operativi
I principi operativi su cui si basa questo tutorial sono fondamentalmente quattro:

1. Creazione di una struttura HTML contenente un campo di input per il prompt utente e un div 'vuoto' da popolare con la chat
2. Creazione di una funzione Javascript di cattura input e invio messaggio
3. Creazione e popolamento della memoria del chatbot con i messaggi inviati e le risposte ricevute
4. Creazione di una funzione Javascript che interroghi il modello LLM di OpenAI (in questo caso ChatGPT3.5) e ne riceva la risposta

Il passaggio più importante tra questi è senza dubbio la funzione di interrogazione del modello, che avviene tramite una richiesta all'API di OpenAI, e quindi necessita di una API Key ottenibile gratuitamente dal sito.
ATTENZIONE: pur se la API key è gratuita, il modello viene interrogato con richieste a pagamento. Dovrete quindi aprire un conto prepagato sul sito OpenAI e caricarlo con una minima cifra a seconda degli usi che intendete fare. I costi dei token per i vari modelli sono riportati nel sito di OpenAI.

Una richiesta API è composta da due parti fondamentali: l' interrogazione del modello tramite la definizione di una richiesta dati che contiene la configurazione, e la ricezione della risposta che viene mostrata all'utente ed eventualmente, come nel nostro caso, aggiunta alla memoria di conversazione.
La richiesta con configurazione ha la struttura seguente:

const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer yourapikeyhere'            
 },
            body: JSON.stringify({
                "model": "gpt-3.5-16k", //update with last available model if necessary
                "messages": [
                    ...chatMemory,
                    {"role": "user", "content": userInput}
                ]
            })
        });

Come potete vedere, ci sono alcuni parametri passati attraverso il ricorso a JSON per configurare la richiesta. Questi sono i parametri minimi e necessari, ai quali se ne possono anche aggiungere altri per scopi più specifici (ad esempio: richiesta del numero di token usati). In questo caso, abbiamo commentato due righe molto importanti:

1. La riga contenente la API Key (qui sostituita da un testo segnaposto) che deve essere quella valida registrata sul sito OpenAI
2. La riga contenete il nome del modello, che deve essere scritto esattamente come compare nella lista modelli del sito OpenAI

La risposta ottenuta dall'API, poi, viene catturata e manipolata applicando tutti i filtraggi di testo che vogliamo. Nel nostro caso, nel codice seguente, applicchiamo delle semplici manipolazioni del testo per eliminare i fastidiosi backticks che precedono le parti di codice quando usiamo il chatbot per programmare. A puro scopo didattico filtriamo solo se i linguaggi utilizzati dal chatbot sono HTML, CSS, e Javascript.

const chatGPTResponse = data.choices[0].message.content.trim();
        var cleanResponse = chatGPTResponse.replace(/(```html|```css|```javascript)(.*?)/gs, '$2');
        cleanResponse = cleanResponse.replace(/```/g, "");
        showMessage("GPT", cleanResponse);

        // pushes the answer into context memory array
        chatMemory.push({ role: 'user', content: userInput });
        chatMemory.push({ role: 'assistant', content: cleanResponse });

        // returns updated context memory array
        return chatMemory;

Come potete vedere, la risposta è aggiunta ad un array chatMemory che viene gestito in un altro punto del codice, e la risposta viene passata alla funzione showMessage definita altrove.

Speriamo di avervi illustrato chiaramente i concetti essenziali per questo genere di applicazione web, e qui vi lasciamo una Pen con il codice completo, nel quale dovrete solo inserire la vostra API key personale.

ATTENZIONE: una nota di sicurezza... non è buona pratica pubblicare la API Key direttamente nel vostro codice, rendendola vulnerabile a malintenzionati. Dovreste quindi studiare il modo per leggerla, ad esempio da un file esterno, ed inglobarla nella vostra richiesta SOLO al momento dell'effettiva spedizione dell'input all' API, in modo che se qualche malintenzionato visualizza il vostro codice Javascript, non possa rubarvela.

See the Pen Pure Vanilla JS ChatGPT based Chatbot with memory by Alessandro (@MrCoder74) on CodePen.