Oggi, persone e aziende hanno sviluppato e addestrato diversi modelli di AI per svolgere determinati compiti meglio degli esseri umani in tempo reale. Tra la miriade di applicazioni dell’AI, un’area particolarmente interessante \u00e8 quella della generazione di immagini tramite l’AI.<\/p>\n
Cosa costruiremo<\/h2>\n
Questa guida spiega come costruire un’applicazione React che si integri perfettamente con l’API OpenAI DALL-E<\/a> tramite un backend Node.js<\/a> e che generi immagini accattivanti sulla base di richieste testuali.<\/p>\n Per seguire questo progetto, \u00e8 necessario avere:<\/p>\n L\u2019API di OpenAI \u00e8 una piattaforma basata sul cloud che consente a chi sviluppa<\/a> di accedere ai modelli di intelligenza artificiale pre-addestrati di OpenAI, come DALL-E e GPT-3 (abbiamo usato questo modello per costruire un clone di ChatGPT<\/a> con il codice presente in questo repository Git<\/a>). Permette di aggiungere ai programmi funzioni di intelligenza artificiale come la sintesi, la traduzione, la generazione di immagini e la modifica senza dover sviluppare e addestrare i propri modelli.<\/p>\n Per usare OpenAI API, create un account usando il vostro account Google o la vostra email sul sito web di OpenAI<\/a> e ottenete una chiave API. Per generare una chiave API, fate clic su Personal<\/strong> nell’angolo in alto a destra del sito web, quindi selezionate View API keys<\/strong>.<\/p>\n Fate clic sul pulsante Create new secret key<\/strong> e salvate la chiave<\/a> da qualche parte. La userete in questa applicazione per interagire con l’API OpenAI DALL-E.<\/p>\n Potete creare un’applicazione React da zero e sviluppare la vostra interfaccia, oppure potete prendere il nostro modello di partenza Git<\/a> seguendo questi passaggi:<\/p>\n Una volta completata l’installazione, potete lanciare il progetto sul vostro computer locale con In questo progetto abbiamo aggiunto tutte le dipendenze necessarie per la vostra applicazione React. Ecco una panoramica di ci\u00f2 che \u00e8 stato installato:<\/p>\n Al centro della vostra applicazione React si trova la cartella src<\/strong>. \u00c8 qui che si trova il codice JavaScript essenziale per Webpack. Vediamo quali sono i file e le cartelle della cartella src<\/strong>:<\/p>\n All’interno di questa cartella, il file index.js<\/strong> definisce due funzioni riutilizzabili. La prima funzione randomizza la selezione dei messaggi che descrivono le varie immagini che possono essere generate.<\/p>\n La seconda funzione gestisce il download delle immagini generate sfruttando la dipendenza dal file-saver<\/strong>. Entrambe le funzioni sono state create per offrire modularit\u00e0 ed efficienza e possono essere importate comodamente nei componenti quando necessario.<\/p>\n Nel codice qui sopra, la dipendenza uuid<\/strong> d\u00e0 a ogni file immagine generato un ID unico, in modo che non abbiano lo stesso nome di file.<\/p>\n Si tratta di piccoli blocchi di codice separati per facilitare la manutenzione e la comprensione del codice. Per questo progetto sono stati creati tre componenti: Header.jsx<\/strong>, Footer.jsx<\/strong> e Form.jsx<\/strong>. Il componente principale \u00e8 il componente Form, dove l’input viene ricevuto e passato al file App.jsx<\/strong> con la funzione Nel componente Form viene creato uno stato per memorizzare e aggiornare il prompt. Inoltre, una funzione vi permette di fare clic su un’icona casuale per generare i messaggi casuali. Questo \u00e8 possibile grazie alla funzione \u00c8 qui che risiede la maggior parte del codice. Tutti i componenti sono riuniti qui. C’\u00e8 anche un’area designata per visualizzare l’immagine generata. Se non \u00e8 stata generata alcuna immagine, viene visualizzata un’immagine segnaposto (immagine di anteprima).<\/p>\n All’interno di questo file vengono gestiti due stati:<\/p>\n Inoltre, viene importata la funzione di utilit\u00e0 Ora che abbiamo analizzato i file di partenza e abbiamo configurato il progetto, iniziamo a gestire la logica di questa applicazione.<\/p>\n Per sfruttare le funzionalit\u00e0 dell’API OpenAI DALL-E, userete Node.js per creare un server. All’interno di questo server, create una route POST. Questa route sar\u00e0 responsabile di ricevere il testo di richiesta inviato dalla vostra applicazione React e di utilizzarlo per generare un’immagine.<\/p>\n Per iniziare, installate le dipendenze necessarie nella cartella del progetto eseguendo il seguente comando:<\/p>\n Inoltre, installate le seguenti dipendenze come dipendenze dev. Questi strumenti vi aiuteranno a configurare il vostro server Node.js<\/a>:<\/p>\n Le dipendenze installate sono spiegate di seguito:<\/p>\n Una volta che le installazioni sono andate a buon fine, create un file server.js<\/strong> nella root del vostro progetto. Qui verr\u00e0 memorizzato tutto il codice del server.<\/p>\n Nel file server.js<\/strong>, importate le librerie<\/a> appena installate e istanziatele:<\/p>\n Nel codice sopra riportato, importate le librerie necessarie. Quindi, create un’istanza dell’applicazione Express usando In seguito, viene creata un’istanza della classe OpenAI usando la vostra chiave API OpenAI. Create un file .env<\/strong> nella root del vostro progetto e aggiungete la chiave API usando la variabile Ora avete configurato il vostro file server.js<\/strong>. Creiamo una route POST da utilizzare nella vostra applicazione React per interagire con il server:<\/p>\n In questo codice, la route \u00e8 impostata su Successivamente, viene invocato il metodo Dopo aver generato l’immagine, estraete i dati dell’immagine dalla risposta e memorizzateli nella variabile In caso di errori durante questo processo, il codice all’interno del blocco Ora il server \u00e8 pronto! Specifichiamo il comando che verr\u00e0 utilizzato per eseguire il nostro server nel file package.json dell’oggetto Ora, quando eseguirete Nel file App.jsx<\/strong>, creerete una funzione Nella funzione Nel codice precedente, si controlla se il parametro Usiamo poi il metodo Quando lo stato Ecco come apparir\u00e0 il file App.jsx<\/strong> completo:<\/p>\n Finora avete realizzato con successo un’applicazione React che interagisce con Node.js, il che la rende un’applicazione full-stack. Ora distribuiamo questa applicazione su Kinsta.<\/p>\n Innanzitutto, configurate il server per servire i file statici generati durante il processo di creazione dell’applicazione React. Questo si ottiene importando il modulo Quando eseguite il comando Prima di distribuire il codice al provider Git scelto (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>), ricordatevi di modificare l’URL di richiesta HTTP nel file App.jsx<\/strong>. Cambiate Infine, nel file package.json<\/strong>, aggiungete un comando di script per il server Node.js da usare per la distribuzione:<\/p>\n Successivamente, inviate il codice al vostro provider Git preferito e distribuite il repository su Kinsta seguendo questi passaggi:<\/p>\n![\"Animazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-demo.gif\")
Prerequisiti<\/h3>\n
\n
Cos’\u00e8 l\u2019API OpenAI DALL-E?<\/h2>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/create-openai-api-secret-key.jpg\")
Impostazione dell’ambiente di sviluppo<\/h2>\n
\n
git checkout starter-files<\/code>.<\/li>\n<\/ol>\n\n
npm install<\/code>.<\/li>\n<\/ol>\nnpm run start<\/code>. In questo modo il progetto sar\u00e0 disponibile all’indirizzo http:\/\/localhost:3000\/<\/a>.<\/p>\n![\"Interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-ui.jpg\")
I file del progetto<\/h3>\n
\n
\n
La cartella Utils<\/h4>\n
import { randomPrompts } from '..\/data';\n\nexport const getRandomPrompt = () => {\n\tconst randomIndex = Math.floor(Math.random() * randomPrompts.length);\n\tconst randomPrompt = randomPrompts[randomIndex];\n\n\treturn randomPrompt;\n}<\/code><\/pre>\nimport FileSaver from 'file-saver';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport async function downloadImage(photo) {\n\tconst _id = uuidv4();\n\tFileSaver.saveAs(photo, `download-${_id}.jpg`);\n}<\/code><\/pre>\nI componenti<\/h4>\n
generateImage<\/code> aggiunta come evento onClick<\/code> al pulsante Generate Image<\/strong>.<\/p>\nhandleRandomPrompt<\/code>, che usa la funzione getRandomPrompt<\/code> gi\u00e0 impostata. Quando fate clic sull’icona, viene recuperato un messaggio casuale e lo stato viene aggiornato:<\/p>\nconst handleRandomPrompt = () => {\n\tconst randomPrompt = getRandomPrompt();\n\tsetPrompt(randomPrompt)\n}<\/code><\/pre>\nIl file App.jsx<\/h4>\n
\n
isGenerating<\/code>: tiene traccia del fatto che sia in corso la generazione di un’immagine. Per impostazione predefinita, \u00e8 impostato su false.<\/li>\ngeneratedImage<\/code>: questo stato memorizza le informazioni sull’immagine che \u00e8 stata generata.<\/li>\n<\/ul>\ndownloadImage<\/code> che vi permette di attivare il download dell’immagine generata quando fate clic sul pulsante Download<\/strong>:<\/p>\n<button\n\tclassName=\"btn\"\n\tonClick={() => downloadImage(generatedImage.photo)}\n><\/code><\/pre>\nGenerare immagini con l’API OpenAI DALL-E<\/h2>\n
npm i express cors openai<\/code><\/pre>\nnpm i -D dotenv nodemon<\/code><\/pre>\n\n
\/\/ Import the necessary libraries\nconst express = require('express');\nconst cors = require('cors');\nrequire('dotenv').config();\nconst OpenAI = require('openai');\n\n\/\/ Create an instance of the Express application\nconst app = express();\n\n\/\/ Enable Cross-Origin Resource Sharing (CORS)\napp.use(cors());\n\n\/\/ Configure Express to parse JSON data and set a data limit\napp.use(express.json({ limit: '50mb' }));\n\n\/\/ Create an instance of the OpenAI class and provide your API key\nconst openai = new OpenAI({\n\tapiKey: process.env.OPENAI_API_KEY,\n});\n\n\/\/ Define a function to start the server\nconst startServer = async () => {\n\tapp.listen(8080, () => console.log('Server started on port 8080'));\n};\n\n\/\/ Call the startServer function to begin listening on the specified port\nstartServer();<\/code><\/pre>\nconst app = express();<\/code>. Successivamente, abilitate CORS. Express viene configurato per elaborare i dati JSON in arrivo, specificando un limite di dimensione dei dati di 50mb<\/code>.<\/p>\nOPENAI_API_KEY<\/code>. Infine, definite una funzione asincrona startServer<\/code> e chiamatela per mettere in moto il server.<\/p>\napp.post('\/api', async (req, res) => {\n\ttry {\n \tconst { prompt } = req.body;\n \tconst response = await openai.images.generate({\n \tprompt,\n \tn: 1,\n \tsize: '1024x1024',\n \tresponse_format: 'b64_json',\n \t});\n \tconst image = response.data[0].b64_json;\n \tres.status(200).json({ photo: image });\n\t} catch (error) {\n \tconsole.error(error);\n\t}\n});<\/code><\/pre>\n\/api<\/code> ed \u00e8 progettata per gestire le richieste POST in arrivo. All’interno della funzione di callback della route, ricevete i dati inviati dalla vostra applicazione React usando req.body<\/code>, in particolare il valore prompt<\/code>.<\/p>\nimages.generate<\/code> della libreria OpenAI. Questo metodo prende il prompt fornito e genera un’immagine in risposta. Parametri come n<\/code> determinano il numero di immagini da generare (in questo caso solo una), size<\/code> specifica le dimensioni dell’immagine e response_format<\/code> indica il formato in cui deve essere fornita la risposta (in questo casob64_json<\/code> ).<\/p>\nimage<\/code>. Quindi, inviate una risposta JSON all’applicazione React con i dati dell’immagine generata, impostando lo stato HTTP a 200<\/code> (che indica il successo) utilizzando res.status(200).json({ photo: image })<\/code>.<\/p>\ncatch<\/code> viene eseguito, registrando l’errore nella console per il debug.<\/p>\nscripts<\/code>:<\/p>\n\"scripts\": {\n \"dev:frontend\": \"react-scripts start\",\n \"dev:backend\": \"nodemon server.js\",\n \"build\": \"react-scripts build\",\n},<\/code><\/pre>\nnpm run dev:backend<\/code>, il vostro server si avvier\u00e0 su http:\/\/localhost:8080\/<\/a>, mentre se eseguirete npm run dev:frontend<\/code>, la vostra applicazione React si avvier\u00e0 su http:\/\/localhost:3000\/. Verificate che entrambi siano in esecuzione in terminali diversi.<\/p>\nEffettuare richieste HTTP da React al server Node.js<\/h2>\n
generateImage<\/code> che viene attivata quando il pulsante Generate Image<\/strong> viene cliccato nel componente Form.jsx<\/strong>. Questa funzione accetta due parametri: prompt<\/code> e setPrompt<\/code> dal componente Form.jsx<\/strong>.<\/p>\ngenerateImage<\/code>, fate una richiesta HTTP POST al server Node.js:<\/p>\nconst generateImage = async (prompt, setPrompt) => {\n\tif (prompt) {\n \ttry {\n \tsetIsGenerating(true);\n \tconst response = await fetch(\n \t'http:\/\/localhost:8080\/api',\n \t{\n \tmethod: 'POST',\n \theaders: {\n \t'Content-Type': 'application\/json',\n \t},\n \tbody: JSON.stringify({\n \tprompt,\n \t}),\n \t}\n \t);\n \tconst data = await response.json();\n \tsetGeneratedImage({\n \tphoto: `data:image\/jpeg;base64,${data.photo}`,\n \taltText: prompt,\n \t});\n \t} catch (err) {\n \talert(err);\n \t} finally {\n \tsetPrompt('');\n \tsetIsGenerating(false);\n \t}\n\t} else {\n \talert('Please provide proper prompt');\n\t}\n};<\/code><\/pre>\nprompt<\/code> ha un valore, quindi si imposta lo stato isGenerating<\/code> su true<\/code> poich\u00e9 l’operazione sta iniziando. In questo modo il loader apparir\u00e0 sullo schermo perch\u00e9 nel file App.jsx<\/strong> abbiamo questo codice che controlla la visualizzazione del loader:<\/p>\n{isGenerating && (\n\t<div> className=\"loader-comp\">\n \t<img src={Loader} alt=\"\" className='loader-img' \/>\n\t<\/div>\n)}<\/code><\/pre>\nfetch()<\/code> per fare una richiesta POST al server utilizzando http:\/\/localhost:8080\/api<\/a>: questo \u00e8 il motivo per cui abbiamo installato CORS, dato che stiamo interagendo con un’API su un altro URL. Usiamo il prompt come corpo del messaggio. Quindi, estraete la risposta restituita dal server Node.js e impostatela sullo stato generatedImage<\/code>.<\/p>\ngeneratedImage<\/code> avr\u00e0 un valore, l’immagine verr\u00e0 visualizzata:<\/p>\n{generatedImage.photo ? (\n\t<img\n \tsrc={generatedImage.photo}\n \talt={generatedImage.altText}\n \tclassName=\"imgg ai-img\"\n\t\/>\n) : (\n\t<img\n \tsrc={preview}\n \talt=\"preview\"\n \tclassName=\"imgg preview-img\"\n\t\/>\n)}<\/code><\/pre>\nimport { Form, Footer, Header } from '.\/components';\nimport preview from '.\/assets\/preview.png';\nimport Loader from '.\/assets\/loader-3.gif'\nimport { downloadImage } from '.\/utils';\nimport { useState } from 'react';\n\nconst App = () => {\n\tconst [isGenerating, setIsGenerating] = useState(false);\n\tconst [generatedImage, setGeneratedImage] = useState({\n \tphoto: null,\n \taltText: null,\n\t});\n\n\tconst generateImage = async (prompt, setPrompt) => {\n \tif (prompt) {\n \ttry {\n \tsetIsGenerating(true);\n \tconst response = await fetch(\n \t'http:\/\/localhost:8080\/api',\n \t{\n \tmethod: 'POST',\n \theaders: {\n \t'Content-Type': 'application\/json',\n \t},\n \tbody: JSON.stringify({\n \tprompt,\n \t}),\n \t}\n \t);\n \tconst data = await response.json();\n \tsetGeneratedImage({\n \tphoto: `data:image\/jpeg;base64,${data.photo}`,\n \taltText: prompt,\n \t});\n \t} catch (err) {\n \talert(err);\n \t} finally {\n \tsetPrompt('');\n \tsetIsGenerating(false);\n \t}\n \t} else {\n \talert('Please provide proper prompt');\n \t}\n\t};\n\n\treturn (\n \t<div className='container'>\n \t<Header \/>\n \t<main className=\"flex-container\">\n \t<Form generateImage={generateImage} prompt={prompt} \/>\n \t<div className=\"image-container\">\n \t{generatedImage.photo ? (\n \t<img\n \tsrc={generatedImage.photo}\n \talt={generatedImage.altText}\n \tclassName=\"imgg ai-img\"\n \t\/>\n \t) : (\n \t<img\n \tsrc={preview}\n \talt=\"preview\"\n \tclassName=\"imgg preview-img\"\n \t\/>\n \t)}\n \t{isGenerating && (\n \t<div className=\"loader-comp\">\n \t<img src={Loader} alt=\"\" className='loader-img' \/>\n \t<\/div>\n \t)}\n \t<button\n \tclassName=\"btn\"\n \tonClick={() => downloadImage(generatedImage.photo)}\n \t>\n \tDownload\n \t<\/button>\n \t<\/div>\n \t<\/main>\n \t<Footer \/>\n \t<\/div>\n\t);\n};\n\nexport default App;<\/code><\/pre>\nDistribuire l\u2019applicazione full-stack su Kinsta<\/h2>\n
path<\/code> e usandolo per servire i file statici:<\/p>\nconst path = require('path');\n\napp.use(express.static(path.resolve(__dirname, '.\/build')));<\/code><\/pre>\nnpm run build && npm run dev:backend<\/code>, la vostra applicazione React full stack verr\u00e0 caricata all’indirizzo http:\/\/localhost:8080\/. Questo perch\u00e9 l’applicazione React viene compilata in file statici<\/a> all’interno della cartella build<\/strong>. Questi file vengono poi incorporati nel vostro server Node.js come directory statica. Di conseguenza, quando eseguite il vostro server Node, l’applicazione sar\u00e0 accessibile.<\/p>\nhttp:\/\/localhost:8080\/api<\/code> in \/api<\/code>, in quanto l’URL verr\u00e0 aggiunto.<\/p>\n\"scripts\": {\n \/\/ \u2026\n \"start\": \"node server.js\",\n},<\/code><\/pre>\n