En la actualidad, personas y empresas han desarrollado y entrenado varios modelos de IA para realizar determinadas tareas mejor que los humanos en tiempo real. Entre las innumerables aplicaciones de la IA, un \u00e1rea especialmente interesante es la generaci\u00f3n de im\u00e1genes con IA.<\/p>\n
Lo que Est\u00e1s Construyendo<\/h2>\n
Esta gu\u00eda explica c\u00f3mo construir una aplicaci\u00f3n React que se integre perfectamente con la API OpenAI DALL-E<\/a> a trav\u00e9s de un backend Node.js<\/a> y genere im\u00e1genes fascinantes basadas en indicaciones textuales.<\/p>\n Para seguir este proyecto, debes tener:<\/p>\n La API OpenAI es una plataforma basada en la nube que permite a los desarrolladores<\/a> acceder a los modelos de IA preentrenados de OpenAI, como DALL-E y GPT-3 (utilizamos este modelo para construir un clon de ChatGPT<\/a> con el c\u00f3digo de este repositorio Git<\/a>). Permite a los desarrolladores a\u00f1adir funciones de IA como el resumen, la traducci\u00f3n, la generaci\u00f3n de im\u00e1genes y la modificaci\u00f3n a sus programas sin necesidad de desarrollar y entrenar sus modelos.<\/p>\n Para utilizar la API de OpenAI, crea una cuenta utilizando tu cuenta de Google o tu correo electr\u00f3nico en el sitio web de OpenAI<\/a> y obt\u00e9n una clave API. Para generar una clave API, haz clic en Personal<\/strong> en la esquina superior derecha del sitio web y, a continuaci\u00f3n, selecciona Ver claves API<\/strong>.<\/p>\n Haz clic en el bot\u00f3n Crear nueva clave secreta<\/strong>, y guarda la clave<\/a> en alg\u00fan sitio. La utilizar\u00e1s en esta aplicaci\u00f3n para interactuar con la API DALL-E de OpenAI.<\/p>\n Puedes crear una aplicaci\u00f3n React desde cero y desarrollar tu propia interfaz, o puedes coger nuestra plantilla de inicio Git<\/a> siguiendo estos pasos:<\/p>\n Una vez completada la instalaci\u00f3n, puedes lanzar el proyecto en tu ordenador local con En este proyecto, hemos a\u00f1adido todas las dependencias necesarias para tu aplicaci\u00f3n React. Aqu\u00ed tienes un resumen de lo que se ha instalado:<\/p>\n En el core de tu aplicaci\u00f3n React se encuentra la carpeta src<\/strong>. Aqu\u00ed es donde se aloja el c\u00f3digo JavaScript esencial para Webpack. Vamos a entender los archivos y carpetas de la carpeta src<\/strong>:<\/p>\n Dentro de esta carpeta, el archivo index.js<\/strong> define dos funciones reutilizables. La primera funci\u00f3n aleatoriza la selecci\u00f3n de prompts que describen varias im\u00e1genes que se pueden generar.<\/p>\n La segunda funci\u00f3n gestiona la descarga de las im\u00e1genes generadas aprovechando la dependencia file-saver<\/strong>. Ambas funciones se han creado para ofrecer modularidad y eficacia, y pueden importarse c\u00f3modamente en componentes cuando sea necesario.<\/p>\n En el c\u00f3digo anterior, la dependencia uuid<\/strong> da a cada archivo de imagen generado un ID \u00fanico, para que no tengan el mismo nombre de archivo.<\/p>\n Son peque\u00f1os bloques de c\u00f3digo separados para que tu c\u00f3digo sea f\u00e1cil de mantener y comprender. Para este proyecto, se crearon tres componentes: Header.jsx<\/strong>, Footer.jsx<\/strong> y Form.jsx<\/strong>. El componente principal es el componente Form, donde se recibe la entrada y se pasa al archivo App.jsx<\/strong> con la funci\u00f3n En el componente Form, se crea un estado para almacenar y actualizar la solicitud. Adem\u00e1s, una funci\u00f3n te permite hacer clic en un icono aleatorio para generar los prompts aleatorios. Esto es posible gracias a la funci\u00f3n Aqu\u00ed es donde reside la mayor parte del c\u00f3digo. Aqu\u00ed se re\u00fanen todos los componentes. Tambi\u00e9n hay un \u00e1rea designada para mostrar la imagen generada. Si a\u00fan no se ha generado ninguna imagen, se muestra una imagen de marcador de posici\u00f3n (Imagen de vista previa).<\/p>\n Dentro de este archivo, se gestionan dos estados:<\/p>\n Adem\u00e1s, se importa la funci\u00f3n de utilidad Ahora que ya conoces los archivos de inicio y has configurado tu proyecto. Empecemos a manejar la l\u00f3gica de esta aplicaci\u00f3n.<\/p>\n Para aprovechar las capacidades de la API DALL-E de OpenAI, utilizar\u00e1s Node.js para establecer un servidor. Dentro de este servidor, crear\u00e1s una ruta POST. Esta ruta se encargar\u00e1 de recibir el texto del prompt enviado desde tu aplicaci\u00f3n React y de utilizarlo para generar una imagen.<\/p>\n Para empezar, instala las dependencias necesarias en el directorio de tu proyecto ejecutando el siguiente comando:<\/p>\n Adem\u00e1s, instala las siguientes dependencias como dependencias dev. Estas herramientas te ayudar\u00e1n a configurar tu servidor Node.js<\/a>:<\/p>\n Las dependencias instaladas se explican a continuaci\u00f3n:<\/p>\n Una vez realizada la instalaci\u00f3n, crea un archivo server.js<\/strong> en el root de tu proyecto. Aqu\u00ed es donde se almacenar\u00e1 todo el c\u00f3digo de tu servidor.<\/p>\n En el archivo server.js<\/strong>, importa las bibliotecas<\/a> que acabas de instalar y crea una instancia de ellas:<\/p>\n En el c\u00f3digo anterior, importa las bibliotecas necesarias. A continuaci\u00f3n, establece una instancia de la aplicaci\u00f3n Express utilizando A continuaci\u00f3n, se crea una instancia de la clase OpenAI utilizando tu clave API OpenAI. Crea un archivo .env<\/strong> en el root de tu proyecto y a\u00f1ade tu clave API utilizando la variable Ahora ya tienes configurado tu archivo server.js<\/strong>. Vamos a crear una ruta POST que puedas utilizar en tu aplicaci\u00f3n React para interactuar con este servidor:<\/p>\n En este c\u00f3digo, la ruta se establece en A continuaci\u00f3n, se invoca el m\u00e9todo Tras generar la imagen, extraes los datos de la imagen de la respuesta y los almacenas en la variable Si se produce alg\u00fan error durante este proceso, se ejecuta el c\u00f3digo dentro del bloque \u00a1Ahora el servidor est\u00e1 listo! Vamos a especificar el comando que se utilizar\u00e1 para ejecutar nuestro servidor en el archivo package.json objeto Ahora, cuando ejecutes En el archivo App.jsx<\/strong>, crear\u00e1s una funci\u00f3n En la funci\u00f3n En el c\u00f3digo anterior, comprueba si el par\u00e1metro A continuaci\u00f3n, utiliza el m\u00e9todo Una vez que el estado Este es el aspecto que tendr\u00e1 tu archivo App.jsx<\/strong> completo:<\/p>\n Hasta ahora, has construido con \u00e9xito una aplicaci\u00f3n React que interact\u00faa con Node.js, lo que la convierte en una aplicaci\u00f3n full-stack. Ahora vamos a desplegar esta aplicaci\u00f3n en Kinsta.<\/p>\n En primer lugar, configura el servidor para que sirva los archivos est\u00e1ticos generados durante el proceso de construcci\u00f3n de la aplicaci\u00f3n React. Esto se consigue importando el m\u00f3dulo Cuando ejecutes el comando Antes de desplegar tu c\u00f3digo en el proveedor Git que hayas elegido (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>), recuerda modificar la URL de solicitud HTTP en tu archivo App.jsx<\/strong>. Cambia Por \u00faltimo, en tu archivo package.json<\/strong>, a\u00f1ade un comando script para el servidor Node.js que se utilizar\u00eda para el despliegue:<\/p>\n A continuaci\u00f3n, env\u00eda tu c\u00f3digo a tu proveedor Git preferido y despliega tu repositorio en Kinsta siguiendo estos pasos:<\/p>\n![\"Generador](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-demo.gif\")
Requisitos Previos<\/h3>\n
\n
\u00bfQu\u00e9 es la API OpenAI DALL-E?<\/h2>\n
![\"El](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/09\/create-openai-api-secret-key.jpg\")
Configurar el Entorno de Desarrollo<\/h2>\n
\n
git checkout starter-files<\/code>.<\/li>\n<\/ol>\n\n
npm install<\/code>.<\/li>\n<\/ol>\nnpm run start<\/code>. Esto hace que el proyecto est\u00e9 disponible en http:\/\/localhost:3000\/<\/a>.<\/p>\n![\"Interfaz](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-ui.jpg\")
Comprender los Archivos del Proyecto<\/h3>\n
\n
\n
Comprender la Carpeta Utils<\/h4>\n
import { randomPrompts } from '..\/data';\n\nexport const getRandomPrompt = () => {\n const randomIndex = Math.floor(Math.random() * randomPrompts.length);\n const randomPrompt = randomPrompts[randomIndex];\n\n return randomPrompt;\n}<\/code><\/pre>\nimport FileSaver from 'file-saver';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport async function downloadImage(photo) {\n const _id = uuidv4();\n FileSaver.saveAs(photo, `download-${_id}.jpg`);\n}<\/code><\/pre>\nComprender los Componentes<\/h4>\n
generateImage<\/code> a\u00f1adida como evento onClick<\/code> al bot\u00f3n Generar imagen<\/strong>.<\/p>\nhandleRandomPrompt<\/code>, que utiliza la funci\u00f3n getRandomPrompt<\/code> que ya has configurado. Cuando haces clic en el icono, se obtiene un prompt aleatorio y se actualiza el estado con \u00e9l:<\/p>\nconst handleRandomPrompt = () => {\n const randomPrompt = getRandomPrompt();\n setPrompt(randomPrompt)\n}<\/code><\/pre>\nComprender el Archivo App.jsx<\/h4>\n
\n
isGenerating<\/code>: Mantiene un registro de si se est\u00e1 generando actualmente una imagen. Por defecto, se establece en falso.<\/li>\ngeneratedImage<\/code>: Este estado almacena informaci\u00f3n sobre la imagen que se ha generado.<\/li>\n<\/ul>\ndownloadImage<\/code>, que te permite activar la descarga de la imagen generada cuando pulsas el bot\u00f3n Descargar<\/strong>:<\/p>\n<button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n><\/code><\/pre>\nGenerar Im\u00e1genes con la API DALL-E de OpenAI<\/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 apiKey: process.env.OPENAI_API_KEY,\n});\n\n\/\/ Define a function to start the server\nconst startServer = async () => {\n app.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>. Despu\u00e9s, habilita CORS. A continuaci\u00f3n, se configura Express para procesar los datos JSON entrantes, especificando un l\u00edmite de tama\u00f1o de datos de 50mb<\/code>.<\/p>\nOPENAI_API_KEY<\/code>. Por \u00faltimo, define una funci\u00f3n as\u00edncrona startServer<\/code> y ll\u00e1mala para poner en marcha el servidor.<\/p>\napp.post('\/api', async (req, res) => {\n try {\n const { prompt } = req.body;\n const response = await openai.images.generate({\n prompt,\n n: 1,\n size: '1024x1024',\n response_format: 'b64_json',\n });\n const image = response.data[0].b64_json;\n res.status(200).json({ photo: image });\n } catch (error) {\n console.error(error);\n }\n});<\/code><\/pre>\n\/api<\/code>, y est\u00e1 dise\u00f1ada para gestionar las peticiones POST entrantes. Dentro de la funci\u00f3n de devoluci\u00f3n de llamada de la ruta, recibes los datos enviados desde tu aplicaci\u00f3n React utilizando req.body<\/code> – concretamente el valor prompt<\/code>.<\/p>\nimages.generate<\/code> de la biblioteca OpenAI. Este m\u00e9todo toma el prompt proporcionado y genera una imagen como respuesta. Par\u00e1metros como n<\/code> determinan el n\u00famero de im\u00e1genes a generar (aqu\u00ed, s\u00f3lo una), size<\/code> especifica las dimensiones de la imagen, y response_format<\/code> indica el formato en el que debe proporcionarse la respuesta (b64_json<\/code> en este caso).<\/p>\nimage<\/code>. A continuaci\u00f3n, env\u00edas una respuesta JSON a la aplicaci\u00f3n React con los datos de la imagen generada, estableciendo el estado HTTP en 200<\/code> (indicando \u00e9xito) utilizando res.status(200).json({ photo: image })<\/code>.<\/p>\ncatch<\/code>, registrando el error en la consola para su depuraci\u00f3n.<\/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>, tu servidor se iniciar\u00e1 en http:\/\/localhost:8080\/<\/a>, mientras que si ejecutas npm run dev:frontend<\/code>, tu aplicaci\u00f3n React se iniciar\u00e1 en http:\/\/localhost:3000\/. Aseg\u00farate de que ambas se ejecutan en terminales diferentes.<\/p>\nHacer Peticiones HTTP desde React al Servidor Node.js<\/h2>\n
generateImage<\/code> que se activa cuando se pulsa el bot\u00f3n Generar Imagen<\/strong> en el componente Form.jsx<\/strong>. Esta funci\u00f3n acepta dos par\u00e1metros: prompt<\/code> y setPrompt<\/code> del componente Form.jsx.<\/strong><\/p>\ngenerateImage<\/code>, haz una petici\u00f3n HTTP POST al servidor Node.js:<\/p>\nconst generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n};<\/code><\/pre>\nprompt<\/code> tiene un valor y, a continuaci\u00f3n, establece el estado isGenerating<\/code> en true<\/code>, ya que la operaci\u00f3n se est\u00e1 iniciando. Esto har\u00e1 que el cargador aparezca en la pantalla porque en el archivo App.jsx<\/strong>, tenemos este c\u00f3digo controlando la visualizaci\u00f3n del cargador:<\/p>\n{isGenerating && (\n <div> className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n)}<\/code><\/pre>\nfetch()<\/code> para hacer una petici\u00f3n POST al servidor utilizando http:\/\/localhost:8080\/api<\/a> \u2014 esta es la raz\u00f3n por la que instalamos CORS ya que estamos interactuando con una API en otra URL. Utilizamos la solicitud como cuerpo del mensaje. A continuaci\u00f3n, extrae la respuesta devuelta por el servidor Node.js y ponla en el estado generatedImage<\/code>.<\/p>\ngeneratedImage<\/code> tenga un valor, se mostrar\u00e1 la imagen:<\/p>\n{generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\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 const [isGenerating, setIsGenerating] = useState(false);\n const [generatedImage, setGeneratedImage] = useState({\n photo: null,\n altText: null,\n });\n\n const generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n };\n\n return (\n <div className='container'>\n <Header \/>\n <main className=\"flex-container\">\n <Form generateImage={generateImage} prompt={prompt} \/>\n <div className=\"image-container\">\n {generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n ) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n )}\n {isGenerating && (\n <div className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n )}\n <button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n >\n Download\n <\/button>\n <\/div>\n <\/main>\n <Footer \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nDespliega tu Aplicaci\u00f3n Full-Stack en Kinsta<\/h2>\n
path<\/code> y utiliz\u00e1ndolo para servir los archivos est\u00e1ticos:<\/p>\nconst path = require('path');\n\napp.use(express.static(path.resolve(__dirname, '.\/build')));<\/code><\/pre>\nnpm run build && npm run dev:backend<\/code>, tu aplicaci\u00f3n React full stack se cargar\u00e1 en http:\/\/localhost:8080\/. Esto se debe a que la aplicaci\u00f3n React se compila en archivos est\u00e1ticos<\/a> dentro de la carpeta build<\/strong>. A continuaci\u00f3n, estos archivos se incorporan a tu servidor Node.js como directorio est\u00e1tico. En consecuencia, cuando ejecutes tu servidor Node, la aplicaci\u00f3n estar\u00e1 accesible.<\/p>\nhttp:\/\/localhost:8080\/api<\/code> por \/api<\/code>, ya que se a\u00f1adir\u00e1 un prefijo a la URL.<\/p>\n\"scripts\": {\n \/\/ \u2026\n \"start\": \"node server.js\",\n},<\/code><\/pre>\n