Le API di OpenAI sono uno strumento potente per creare applicazioni di AI in grado di generare testi, rispondere a domande, tradurre e molto altro. Una delle applicazioni più popolari di queste interfacce è la generazione automatica di contenuti. In questa guida capiremo come utilizzare le API di OpenAI per creare un'applicazione web di generazione di testi. Impareremo a configurare l'ambiente di sviluppo, interagire con le API di OpenAI e costruire un'applicazione di base che genererà testi in modo dinamico.
Il processo sarà suddiviso in più passaggi, in modo che tu possa seguire il flusso dall'inizio alla fine, imparando a integrare l'API OpenAI in un'applicazione React.
Prima di iniziare, assicurati di avere i seguenti prerequisiti:
- Node.js e npm installati: questo ti permetterà di gestire pacchetti e avviare il tuo progetto React.
- Un account su OpenAI: devi registrarti su OpenAI per ottenere una chiave API che ti consentirà di formulare le richieste.
- Conoscenza di base di JavaScript e React: familiarità con il framework React ti aiuterà ad operare più facilmente nella creazione dell'applicazione.
Creare un nuovo progetto React
Inizia creando un nuovo progetto React. Per farlo, apri il terminale e usa il comando create-react-app:
npx create-react-app generatore-di-testi
cd generatore-di-testiQuesto creerà un'app React di base. Puoi anche avviare l'app per testare che tutto funzioni correttamente:
npm startVisita http://localhost:3000 nel tuo browser, dovresti vedere l'app di React in esecuzione.
Installare Axios per le richieste HTTP all'API di OpenAI
Per le richieste HTTP all'API di OpenAI utilizzeremo Axios. Installa la libreria nel tuo progetto con il seguente comando:
npm install axiosUna volta configurato l'ambiente di sviluppo possiamo cominciare a costruire l'interfaccia utente dell'applicazione.
Creare un componente per l'input dell'utente
Apri il file src/App.js e sostituiscilo con il seguente codice che creerà un modulo di input per permettere agli utenti di inserire il prompt di testo:
import React, { useState } from 'react';
import axios from 'axios';
import './App.css';
const App = () => {
const [inputText, setInputText] = useState('');
const [generatedText, setGeneratedText] = useState('');
const [loading, setLoading] = useState(false);
const handleInputChange = (e) => {
setInputText(e.target.value);
};
const handleGenerateText = async () => {
if (!inputText) return;
setLoading(true);
try {
const response = await axios.post(
'https://api.openai.com/v1/completions',
{
model: 'text-davinci-003',
prompt: inputText,
max_tokens: 200,
temperature: 0.7,
},
{
headers: {
Authorization: `Bearer YOUR_API_KEY`,
},
}
);
setGeneratedText(response.data.choices[0].text);
} catch (error) {
console.error("Error generating text:", error);
setGeneratedText("There was an error generating the text.");
}
setLoading(false);
};
return (
<div className="App">
<h1>Generatore di Testi con OpenAI</h1>
<textarea
placeholder="Inserisci il tuo prompt qui"
value={inputText}
onChange={handleInputChange}
rows={5}
cols={40}
/>
<button onClick={handleGenerateText} disabled={loading}>
{loading ? 'Generando...' : 'Genera Testo'}
</button>
{generatedText && (
<div>
<h3>Testo Generato:</h3>
<p>{generatedText}</p>
</div>
)}
</div>
);
};
export default App;Gestire il codice dell'app
Nel codice sopra:
inputTextè lo stato che memorizza il testo inserito dall'utente.generatedTextè lo stato che memorizza il testo generato da OpenAI.loadingè uno stato booleano che viene usato per disabilitare il pulsante mentre l'API sta rispondendo.
Abbiamo creato un semplice modulo con una textarea per permettere all'utente di inserire un prompt. Quando egli clicca sul pulsante "Genera Testo" la funzione handleGenerateText invia una richiesta POST all'API di OpenAI per generare il testo.
Lo stile di base
Nel file src/App.css aggiungi alcune righe di CSS per migliorare l'aspetto dell'app:
.App {
text-align: center;
margin-top: 50px;
}
textarea {
width: 80%;
padding: 10px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
}
h1 {
font-size: 2rem;
}
p {
margin-top: 20px;
font-size: 1.2rem;
}Interagire con l'API di OpenAI
Per interagire con l'API di OpenAI, utilizziamo il modello text-davinci-003 che è uno dei modelli più avanzati disponibili. Nella richiesta POS, inviamo il nostro prompt insieme ad alcune opzioni come:
max_tokens: imposta il numero massimo di token (parole o porzioni di parole) che il modello può restituire. Puoi regolarlo in base alle tue necessità.temperature: controlla il livello di "creatività" delle risposte generate. Un valore tra 0 e 1, dove valori più alti (come 0.7) generano risposte più varie e creative. I valori bassi (come 0.2) portano invece a risposte più prevedibili.
Non dimenticare di sostituire YOUR_API_KEY con la chiave API OpenAI che puoi ottenere accedendo al tuo account OpenAI e andando nella sezione dedicata alle API.
Testare l'applicazione
A questo punto, se esegui npm start nel terminale dovresti vedere un'applicazione React funzionante dove puoi inserire un prompt e ottenere il testo generato. Testa diversi prompt per esplorare le capacità del modello. Come chiedere di scrivere una poesia, un articolo o anche rispondere a domande specifiche.
Aggiungere il supporto per più modelli
OpenAI offre diversi modelli, ognuno con capacità differenti. Puoi permettere agli utenti di scegliere tra modelli come text-curie-001, text-babbage-001 e text-ada-001. Modificando la proprietà model nella richiesta puoi selezionare il modello che desideri.
Aggiungere una funzione di traduzione con le API di OpenAI
Puoi usare l'API per tradurre il testo inserito in diverse lingue, semplicemente cambiando il prompt e utilizzando i modelli di traduzione.
Migliorare la UI
Puoi aggiungere altre funzionalità, come la possibilità di copiare il testo generato, salvarlo o modificarlo direttamente nell'app. Potresti anche aggiungere uno "storico" che salvi i prompt e i testi generati per disporre di un riferimento futuro.
Conclusione
In questa guida, abbiamo imparato ad utilizzare le API di OpenAI per creare un'applicazione React che genera automaticamente testi in base ad un input utente. Abbiamo configurato l'ambiente, costruito un'interfaccia di base e interagito con l'API di OpenAI per generare testi. Inoltre, abbiamo esplorato alcune possibilità di personalizzazione e miglioramento per rendere l'applicazione ancora più potente e utile.
Con queste competenze puoi espandere l'app in vari modi, come aggiungere funzionalità avanzate, personalizzare i modelli di generazione e migliorare l'esperienza utente. Buon coding!
