Come integrare ChatGPT nella propria app

Cosa sono le API:

Prima di parlare di come usarle è bene sapere cosa sono: API è l'acronimo di Application Programming Interface, ovvero Interfaccia di Programmazione di una Applicazione. In termini semplici, un'API è un insieme di regole e specifiche che consentono a due sistemi software di comunicare tra loro.

In pratica, un'API funziona come un intermediario che permette a un programma di accedere ai dati e alle funzionalità di un altro. Questo rende possibile sviluppare nuove applicazioni che sfruttano software esterni, integrandoli con le necessità del singolo.

API di OpenAI:

In particolare OpenAI mette a disposizione del pubblico tramite API le interfacce per interagire con ChatGPT, Codex e DALL-E, rispettivamente per poter ottenere risposte in linguaggio naturale, generare codice e creare immagini rispettando le specifiche fornite dall’utente.

ChatGPT:

L'API di ChatGPT, oltre a permetterci di interagire con il modello di linguaggio come se stessimo usando la chat disponibile sul suo sito, ci consente di personalizzarne le risposte per adattarle al meglio ai nostri bisogni tramite 2 sistemi principali:

• Completion: un sistema di parametri da inviare alla chat insieme alla domanda che gli si vuole porre che vanno a modificarne il comportamento rendendo per esempio la risposta più casuale o più legata alla domanda, più o meno ripetitiva fino ad arrivare alla possibilità di passargli, tramite un oggetto Json, una lista di parole e la probabilità con cui queste dovrebbero o non dovrebbero apparire nella risposta.
• Fine tuning: un sistema molto più complesso che permette di partire da un modello esistente per addestrarlo e generarne uno nuovo, questo addestramento si ottiene fornendo al modello una lista di input e di output ideali in modo da “insegnare” al modello come rispondere a certi tipi di domande. Questo processo per essere efficace richiede almeno diverse centinaia di coppie input-output e in generale il miglioramento del modello cresce in modo lineare raddoppiando gli input forniti.

Per quanto questo processo possa sembrare macchinoso, può permettere la creazione di veri e propri assistenti personalizzati e specializzati in un campo definito dall’addestramento ricevuto.

Codex:

A differenza di ChatGPT questo modello è specializzato nella creazione di codice e la sua API può quindi essere usata per generare un programma a partire da un input in linguaggio naturale, ma anche per trovare e correggere bug o scrivere documentazione.

DALL-E:

È un’intelligenza artificiale che genera immagini, lo può fare sia partendo da un input testuale che descrive l’immagine o il soggetto che dovrà apparire, sia partendo da un’immagine esistente, in questo caso potrà fare tre cose diverse:

• creare un’immagine simile a quella fornita;
• modificare l’immagine o parte di essa aggiungendo o rimuovendo elementi, in questo caso l’input deve contenere sia l’immagine intera che un'immagine “maschera”. Parliamo della stessa immagine ma ritagliata in modo da mantenere la parte che si vuole lasciare identica e vuota, dove si vuole che appaia il nuovo contenuto;
• espandere un’immagine, restituendo quindi la stessa immagine ma, ad esempio, aggiungendo un continuo dello sfondo su un lato.

Come si usano:

Per iniziare ad utilizzare le API di OpenAI, è necessario creare un account e richiedere una API key. Questo passaggio è molto semplice e si effettua direttamente sul sito web di OpenAI; l’uso iniziale è gratuito anche se limitato nel numero di utilizzi, per proseguire alla creazione di una vera app sarà necessario pagare il servizio. I prezzi variano in base al modello utilizzato e sono direttamente proporzionali all’uso che se ne fa.

Una volta ottenute le chiavi per usare l’API nella documentazione è scritto tutto il necessario dall’installazione all’uso completo.

Un esempio pratico:

Per darvi una piccola dimostrazione di cosa è possibile fare, e anche di come si fa, ho creato una pagina web che contiene un campo di input, che può essere riempito sia scrivendo che parlando. La risposta viene generata da ChatGPT, visualizzata a schermo ed è possibile farla leggere: in questo esempio il flusso dall’input alla lettura dell’output è separato dalla necessità di premere dei pulsanti per attivare le diverse parti, ma nulla vieta di rendere il tutto automatico permettendo all’utente di parlare; nel momento in cui smette, la domanda viene elaborata e la risposta letta in automatico in modo da simulare una conversazione.

In questa pagina il primo riquadro contiene la trascrizione di ciò che è stato detto dopo aver premuto “inizia a parlare”: una volta registrata la domanda cliccando su “invia” ChatGPT risponde scrivendo nel secondo riquadro e col tasto “leggi” il contenuto della risposta verrà letto ad alta voce dal browser.

La parte Html del codice è molto semplice e contiene solo gli elementi con i relativi id per essere richiamabili dal javascript:

<body>
    <h1>Parla con ChatGPT</h1>
    <textarea type="text" id="voice-input" placeholder='Scrivi qui la tua domanda o premi "inizia a parlare"'></textarea>
    <button id="start-btn" >Inizia a parlare</button>
    <button id="stop-btn" style="display: none;">Visualizza il parlato</button>
   
    <button id="send">Invia</button>


    <p id="responseBox"></p>
    <button id="speak">Leggi</button>
  </body>

La parte interessante del codice è il javascript, in cui prima si importa la libreria di OpenAI, da installare precedentemente col comando “npm install openai”, poi si esegue la chiamata all’API passandogli il testo di input, “PROMPT” in questo caso. Infine si inserisce la risposta in “responseBox” per essere visualizzata a schermo:

import { Configuration, OpenAIApi } from "openai";


const API_KEY = 'la tua chiave API ottenuta sul sito di OpenAI';
const ENGINE = 'text-davinci-003';


const configuration = new Configuration({
  apiKey: API_KEY,
});
const openai = new OpenAIApi(configuration);


async function runCompletion (PROMPT) {
const completion = await openai.createCompletion({
  model: ENGINE,
  prompt: PROMPT,
});
document.getElementById('responseBox').innerText = completion.data.choices[0].text;
}

Degno di nota è il valore dato ad “ENGINE”, questo identifica il modello che si vuole usare, in questo caso “text-davinci-003” corrisponde al modello principale di ChatGPT.

All’interno di questa funzione è possibile inserire i parametri che fanno parte della “completion” citata sopra, scrivendo ad esempio “temperature: 2” sotto al PROMPT diciamo alla chat di essere più creativa e meno legata alla nostra domanda.

La risposta arriva sotto forma di Json all’interno della variabile “completion” e in particolare la risposta testuale si trova in “completion.data.choices[0].text”

A questo codice, che compone la parte centrale del programma, ho aggiunto la parte che permette l’input vocale e la lettura della risposta, questo è stato realizzato usando le funzioni integrate del javascript senza usare librerie esterne, non essendo l’argomento principale di questo articolo, ma solo un esempio, non ne parlerò nel dettaglio:

//scrittura della voce
var recognition = new webkitSpeechRecognition();            //inizializzo riconoscimento vocale
recognition.continuous = true;                              //settaggio per ascoltare sempre fino allo stop
recognition.lang = 'it-IT';                                 //settaggio per la lingua


const voiceInput = document.getElementById('voice-input');  //campo di input
var content = '';


recognition.addEventListener('result', event => {


    var current = event.resultIndex;
    var transcript = event.results[current][0].transcript;
    content += transcript;


    voiceInput.value = content;
});


const startBtn = document.getElementById('start-btn');      //bottone di inizio riconoscimento vocale
const stopBtn = document.getElementById('stop-btn');        //bottone di stop


startBtn.addEventListener("click", function(){
    recognition.start();                                    //inizio del riconoscimento
    startBtn.style.display = 'none';
    stopBtn.style.display = 'inline-block';
});


document.getElementById('stop-btn').addEventListener("click", function(){
    recognition.stop();                                     //fine del riconoscimento
    startBtn.style.display = 'inline-block';
    stopBtn.style.display = 'none';
});


//invio dell'input a ChatGPT
const sendRequest = document.getElementById('send');
sendRequest.addEventListener("click", function(){
    runCompletion (voiceInput.value);
});


//lettura del testo
const synth = window.speechSynthesis;


const speakBtn = document.getElementById('speak');          //tasto per leggere la risposta


speakBtn.addEventListener("click", function(){
    const voices = synth.getVoices();
    const selectedVoice = voices.find(voice => voice.lang === 'it-IT');
    const utterance = new SpeechSynthesisUtterance(document.getElementById('responseBox').innerText);
    utterance.voice = selectedVoice;
    synth.speak(utterance);
});

Come si può migliorare:

Quello appena mostrato è solo un esempio per testare questa tecnologia e può essere migliorato, ad esempio, aggiungendo delle librerie per la lettura con una qualità della voce migliore o l’aggiunta di altre funzioni provenienti dall’API di OpenAI. Un esempio? Aggiungere alla risposta testuale anche un’immagine autogenerata da DALL-E, che contenga una raffigurazione della risposta.

Potenzialità future:

In questo articolo ho solo fatto vedere che è possibile integrare l’intelligenza artificiale all’interno delle applicazioni ma non ne ho fatto vedere un uso concreto. Al momento queste API non sono molto usate, ma ogni giorno vengono fuori nuove applicazioni e sperimentazioni. Per esempio il sito chess.com ha aggiunto ChatGPT come bot da sfidare, in grado di interagire nella chat delle giocate che vengono fatte.
Data la grande possibilità di personalizzazione delle API in futuro sempre più applicazioni potranno offrire servizi di chat, assistenza o altri usi più fantasiosi.

Siamo ancora solo agli inizi nello sfruttamento dell’intelligenza artificiale e solo il tempo ci farà comprendere tutti i suoi usi.