Come creare un generatore di immagini in React utilizzando l'API DALL-E

L'intelligenza artificiale è in continuo miglioramento e ora può creare immagini sorprendenti. Un recente esempio virale raffigurava le persone più ricche e influenti del mondo con abiti strappati, che vivevano in un ambiente di baraccopoli. Ciò che colpisce delle immagini è l'alto livello di dettaglio catturato sia nelle persone che nei loro dintorni.

Modelli linguistici come DALL-E e Midjourney alimentano queste capacità di generazione di immagini, prendendo in input descrizioni testuali e generando immagini accattivanti.

Scopri come integrare l'API DALL-E di OpenAI per generare immagini in un'applicazione React.

Generazione di immagini utilizzando il modello di linguaggio DALL-E di OpenAI

In che modo il modello di linguaggio DALL-E genera effettivamente immagini? Senza scavare troppo in profondità nelle complessità della generazione di immagini AI, DALL-E interpreta innanzitutto le descrizioni testuali che gli vengono fornite come input utilizzando l'elaborazione del linguaggio naturale (NLP). Quindi esegue il rendering di un'immagine realistica che corrisponde strettamente alla descrizione fornita.

I prompt di input possono includere descrizioni testuali di una persona, un oggetto o una scena. Inoltre, può anche includere dettagli come un particolare colore, forma e dimensione. Indipendentemente dalla complessità o dalla semplicità del testo di input, DALL-E genererà un'immagine che corrisponde strettamente alla descrizione di input.

È importante notare che il modello linguistico, proprio come altri modelli, è stato addestrato su un set di dati di grandi dimensioni con milioni di dati di immagini per imparare a identificare e generare immagini fotorealistiche da dati ingressi.

Introduzione all'API DALL-E di OpenAI

L'API DALL-E di OpenAI è disponibile per l'utilizzo come beta pubblica. Per integrare l'API per l'utilizzo nella tua applicazione React, avrai bisogno di una chiave per l'API di OpenAI. Vai a OpenAIe accedi alla pagina della panoramica del tuo account per prendere la tua chiave API.

Una volta effettuato l'accesso, fai clic sull'icona del profilo utente nella sezione in alto a destra della pagina di panoramica. Quindi, seleziona e fai clic su Visualizza le chiavi API.

Nella pagina delle impostazioni delle chiavi API, fare clic su Crea nuova chiave segreta pulsante, fornire un nome per la chiave API e fare clic su Crea chiave segreta per generare la tua chiave API.

Crea un progetto React

Esegui i comandi seguenti sul tuo terminale per creare un nuovo progetto React in locale. Nota, dovresti avere Node.js installato.

Fare riferimento a questi due articoli per sapere come installa Node.js su Windows E come installare Node.js su Ubuntu.

mkdir progetto React 
cd progetto React
npx create-react-app generatore di immagini-app
cd image-generator-app
inizio npm

In alternativa, invece di utilizzare il comando create-react-app, puoi utilizzare Vite per impostare il tuo progetto React. Vite è uno strumento di compilazione progettato per creare applicazioni Web in modo rapido ed efficiente.

Integra l'API DALL-E di OpenAI per generare immagini

Una volta che la tua applicazione React è attiva e funzionante, installa la libreria Node.js di OpenAI per l'utilizzo nelle tue applicazioni React.

npm installa openai

Successivamente, nella directory principale della cartella del progetto, crea un nuovo file .env file per contenere la tua chiave API.

REACT_APP_OPENAI_API_KEY = "CHIAVE API"

Puoi trovare il codice di questo progetto in questo Deposito GitHub.

Creare un componente generatore di immagini

Nel /src directory, creare una nuova cartella, nominarla componentie crea un nuovo file al suo interno denominato ImageGenerator.js. Aggiungi il codice qui sotto a questo file.

Inizia importando i moduli richiesti:

importare'../App.css'; 
importare { usaStato } da"reagire"; 
importare { Configurazione, OpenAIApi } da"apri";

Il modulo Configurazione configura il client API di OpenAI per l'utilizzo, mentre il modulo OpenAIApi fornisce metodi per interagire con l'API di OpenAI. Questi due moduli consentono di accedere e utilizzare le funzionalità di DALL-E dall'applicazione React.

Successivamente, definisci un componente funzionale e aggiungi il seguente codice:

funzioneGeneratore di immagini() {
cost [prompt, setPrompt] = useState("");
cost [risultato, setResult] = useState("");
cost [caricamento in corso, setLoading] = useState(falso);
cost [segnaposto, setPlaceholder] = useState(
"Cerca un leone con i pennelli che dipingono il dipinto Monna Lisa..."
 );
cost configurazione = nuovo Configurazione({
 Chiave API: process.env. REACT_APP_OPENAI_API_KEY,
 });

cost apriai = nuovo OpenAIApi (configurazione);

cost generateImage = asincrono () => {
 setPlaceholder(`Cerca ${richiesta}..`);
 setCaricamento(VERO);
Tentativo {
cost ris = aspetta openai.createImage({
 sollecito: sollecito,
 N: 1,
 misurare: "512x512",
 });
 setCaricamento(falso);
 setResult (res.data.data[0].url);
 } presa (errore) {
 setCaricamento(falso);
consolare.errore(`Errore durante la generazione dell'immagine: ${errore.response.dati.errore.messaggio}`);
 }
 };

Questo codice definisce un componente funzionale React chiamato Generatore di immagini. Il componente utilizza diverse variabili di stato per gestire il prompt di input, il risultato di output, lo stato di caricamento e il testo segnaposto.

Il componente crea anche un file configurazione oggetto per il client API OpenAI, che include la chiave API recuperata dalla variabile di ambiente.

L'asincrono generateImage funzione verrà eseguita quando l'utente fa clic su un pulsante, passando il prompt dell'utente.

Quindi, chiama il openai.createImage metodo per generare un'immagine in base al prompt specificato. Questo metodo restituisce un oggetto risposta che include l'URL dell'immagine generata.

Se la chiamata API ha esito positivo, il codice aggiorna il file risultato state variabile con l'URL e imposta lo stato di caricamento su falso. Se la chiamata API non riesce, imposta comunque lo stato di caricamento su falso, ma registra anche un messaggio di errore nella console.

Infine, esegui il rendering degli elementi React JSX che compongono il componente Generatore di immagini.

ritorno (
"contenitore">
 { caricamento? (
 <>
Generazione immagine... Per favore aspetta...</h3>
 </>
 ): (
 <>
Genera un'immagine utilizzando l'API Open AI</h2>


 nomeclasse="app-input"
 segnaposto={segnaposto}
 onChange={(e) => setPrompt (e.target.value)}
 righe="10"
 colonne="100"
 />
Genera un'immagine</button>
 {risultato.lunghezza> 0? (
"immagine-risultato" src={risultato} alt="risultato" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
esportarepredefinito Generatore di immagini

Il codice di questo componente esegue il rendering condizionale di diversi elementi in base al valore di caricamento variabile di stato.

Se caricamento è vero, mostra un messaggio di caricamento. Al contrario, Se caricamento è falso, mostra l'interfaccia principale per la generazione di un'immagine utilizzando l'API OpenAI costituita da un'area di testo che cattura i prompt dell'utente e un pulsante di invio.

IL risultato La variabile di stato contiene l'URL dell'immagine generata che viene successivamente visualizzata nel browser.

Aggiorna il componente App.js

Aggiungi questo codice al tuo file App.js:

importare'./App.css';
importare Generatore di immagini da'./componente/ImageGenerator';
funzioneApp() {
ritorno (

"App">
"Intestazione app">

 </header>
 </div>
 );
}
esportarepredefinito Applicazione;

Ora puoi andare avanti e avviare il server di sviluppo per aggiornare le modifiche e navigare verso http://localhost: 3000 con il tuo browser per testare la funzionalità di generazione delle immagini.

Per ottenere i migliori risultati possibili quando si utilizza uno strumento AI per generare un'immagine, assicurarsi di fornire un prompt dettagliato nell'area di testo. Ciò significa descrivere l'immagine nel modo più completo possibile, senza tralasciare alcun dettaglio.

Questo processo è chiamato Prompt Engineering e prevede la fornitura di prompt dettagliati in modo che il modello linguistico possa produrre i migliori risultati in base agli input forniti dall'utente.

Data la recente ondata di software AI disponibili sul mercato, perseguire una carriera in Prompt Engineering può essere un'opportunità redditizia.

Massimizza la potenza dei modelli linguistici nello sviluppo software

Gli strumenti di intelligenza artificiale alimentati da modelli di linguaggio di grandi dimensioni hanno preso d'assalto il campo dello sviluppo software grazie alle loro incredibili caratteristiche e capacità.

Questi strumenti possiedono il potenziale per migliorare l'attuale ecosistema software consentendo agli sviluppatori di integrare fantastiche funzionalità di intelligenza artificiale che migliorano l'utilizzo di diversi prodotti: l'utilizzo della tecnologia AI rappresenta un'opportunità unica per creare software innovativo modi.