Cómo construir un generador de imágenes en React usando la API DALL-E

La inteligencia artificial está mejorando continuamente y ahora puede crear imágenes asombrosas. Un ejemplo viral reciente mostraba a las personas más ricas e influyentes del mundo con ropa rasgada, viviendo en un entorno de tugurios. Lo impresionante de las imágenes es el alto nivel de detalle capturado tanto en las personas como en su entorno.

Modelos de lenguaje como DALL-E y Midjourney impulsan estas capacidades de generación de imágenes, tomando descripciones textuales como entrada y generando imágenes cautivadoras.

Aprenda a integrar la API DALL-E de OpenAI para generar imágenes en una aplicación React.

Generación de imágenes utilizando el modelo de lenguaje DALL-E de OpenAI

¿Cómo genera realmente imágenes el modelo de lenguaje DALL-E? Sin profundizar demasiado en las complejidades de la generación de imágenes de IA, DALL-E primero interpreta las descripciones textuales que recibe como entradas mediante el procesamiento de lenguaje natural (NLP). A continuación, muestra una imagen realista que se asemeja mucho a la descripción dada.

Las indicaciones de entrada pueden incluir descripciones textuales de una persona, objeto o escena. Además, también puede incluir detalles como un color, forma y tamaño en particular. Independientemente de la complejidad o la simplicidad del texto de entrada, DALL-E generará una imagen que se asemeja mucho a la descripción de entrada.

Es importante tener en cuenta que el modelo de lenguaje, al igual que otros modelos, se entrenó en un gran conjunto de datos. con millones de datos de imágenes para aprender a identificar y generar imágenes fotorrealistas a partir de datos entradas.

Primeros pasos con la API DALL-E de OpenAI

La API DALL-E de OpenAI está disponible para su uso como versión beta pública. Para integrar la API para su uso en su aplicación React, necesitará una clave para la API de OpenAI. Dirigirse a IA abiertae inicie sesión en la página de descripción general de su cuenta para obtener su clave API.

Una vez que inicie sesión, haga clic en el icono de perfil de usuario en la sección superior derecha de su página de resumen. A continuación, seleccione y haga clic en Ver claves API.

En la página de configuración de claves API, haga clic en el Crear nueva clave secreta, proporcione un nombre para su clave API y haga clic en Crear clave secreta para generar su clave API.

Crear un proyecto de reacción

Ejecute los siguientes comandos en su terminal para crear un nuevo proyecto React localmente. Tenga en cuenta que debe tener instalado Node.js.

Consulte estos dos artículos para aprender a instalar Node.js en Windows y cómo instalar Node.js en Ubuntu.

Proyecto de reacción mkdir 
cd React-proyecto
npx create-react-app image-generator-app
cd image-generator-app
inicio de npm

Alternativamente, en lugar de usar el comando create-react-app, puede usar Visite para configurar su proyecto React. Vite es una herramienta de compilación diseñada para crear aplicaciones web de manera rápida y eficiente.

Integre la API DALL-E de OpenAI para generar imágenes

Una vez que tenga su aplicación React en funcionamiento, instale la biblioteca Node.js de OpenAI para usarla en sus aplicaciones React.

npm instalar openai

A continuación, en el directorio raíz de la carpeta de su proyecto, cree un nuevo .env archivo para guardar su clave API.

REACT_APP_OPENAI_API_KEY = "CLAVE API"

Puedes encontrar el código de este proyecto en este repositorio GitHub.

Crear un componente generador de imágenes

En el /src directorio, cree una nueva carpeta, asígnele un nombre componentes, y cree un nuevo archivo dentro de él llamado ImageGenerator.js. Agregue el siguiente código a este archivo.

Comience importando los módulos requeridos:

importar'../Aplicación.css'; 
importar { estado de uso } de"reaccionar"; 
importar { Configuración, OpenAIApi } de"abierto";

El módulo de configuración configura el cliente API de OpenAI para su uso, mientras que el módulo OpenAIApi proporciona métodos para interactuar con la API de OpenAI. Estos dos módulos hacen posible acceder y utilizar las funciones de DALL-E desde la aplicación React.

A continuación, defina un componente funcional y agréguele el siguiente código:

funciónGenerador de imágenes() {
constante [prompt, setPrompt] = useState("");
constante [resultado, setResult] = useState("");
constante [cargando, setLoading] = useState(FALSO);
constante [marcador de posición, establecer marcador de posición] = useState(
"Busca un león con pinceles pintando el cuadro de la mona lisa..."
 );
constante configuración = nuevo Configuración({
 apiKey: proceso.env. REACT_APP_OPENAI_API_KEY,
 });

constante abierto = nuevo OpenAIApi (configuración);

constante generarImagen = asíncrono () => {
 establecer marcador de posición (`Buscar ${prompt}..`);
 setCargando(verdadero);
intentar {
constante resolución = esperar openai.createImage({
 aviso: aviso,
 norte: 1,
 tamaño: "512x512",
 });
 setCargando(FALSO);
 setResult (res.datos.datos[0].url);
 } atrapar (error) {
 setCargando(FALSO);
consola.error(`Error al generar la imagen: ${error.respuesta.datos.error.mensaje}`);
 }
 };

Este código define un componente funcional de React llamado Generador de imágenes. El componente utiliza varias variables de estado para administrar la solicitud de entrada, el resultado de salida, el estado de carga y el texto de marcador de posición.

El componente también crea un configuración objeto para el cliente API de OpenAI, que incluye la clave de API recuperada de la variable de entorno.

el asincrónico generarImagen La función se ejecutará cuando el usuario haga clic en un botón, transmitiendo el aviso del usuario.

Luego, llama al openai.createImage método para generar una imagen basada en el aviso dado. Este método devuelve un objeto de respuesta que incluye la URL de la imagen generada.

Si la llamada a la API tiene éxito, el código actualiza el resultado variable de estado con la URL y establece el estado de carga en FALSO. Si la llamada API falla, aún establece el estado de carga en FALSO, pero también registra un mensaje de error en la consola.

Finalmente, renderice los elementos React JSX que componen el componente generador de imágenes.

devolver (
"envase">
 { ¿cargando? (
 <>
Generando imagen... Por favor espera...</h3>
 </>
 ): (
 <>
Genere una imagen usando Open AI API</h2>


 nombreclase="entrada de la aplicación"
 marcador de posición={marcador de posición}
 onChange={(e) => setPrompt (e.objetivo.valor)}
 filas ="10"
 cols="100"
 />
Generar una Imagen</button>
 { resultado.longitud > 0? (
"imagen-resultado" src={resultado} alt="resultado" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}
exportarpor defecto Generador de imágenes

El código de este componente representa condicionalmente diferentes elementos en función del valor de la cargando variable de estado.

Si cargando es cierto, muestra un mensaje de carga. Por el contrario, si cargando es falso, muestra la interfaz principal para generar una imagen utilizando la API de OpenAI que consta de un área de texto que captura las indicaciones del usuario y un botón de envío.

El resultado La variable de estado contiene la URL de la imagen generada que luego se representa en el navegador.

Actualice el componente App.js

Agregue este código a su archivo App.js:

importar'./Aplicación.css';
importar Generador de imágenes de'./componente/GeneradorImagen';
funciónaplicación() {
devolver (

"Aplicación">
"Encabezado de la aplicación">

 </header>
 </div>
 );
}
exportarpor defecto aplicación;

Ahora puede continuar y activar el servidor de desarrollo para actualizar los cambios y navegar a http://localhost: 3000 con su navegador para probar la funcionalidad de generación de imágenes.

Para obtener los mejores resultados posibles al usar una herramienta de IA para generar una imagen, asegúrese de proporcionar un aviso detallado en el área de texto. Esto significa describir la imagen lo más minuciosamente posible, sin dejar ningún detalle fuera.

Este proceso se denomina Ingeniería de avisos e implica proporcionar avisos detallados para que el modelo de lenguaje pueda producir los mejores resultados en función de las entradas proporcionadas por el usuario.

Dado el reciente aumento en el software de IA disponible en el mercado, seguir una carrera en ingeniería rápida puede ser una oportunidad lucrativa.

Maximice el poder de los modelos de lenguaje en el desarrollo de software

Las herramientas de IA impulsadas por grandes modelos de lenguaje han conquistado el campo del desarrollo de software debido a sus increíbles características y capacidades.

Estas herramientas poseen el potencial de mejorar el ecosistema de software actual al permitir que los desarrolladores integren funciones geniales de IA. que mejoran el uso de diferentes productos: el uso de la tecnología de IA presenta una oportunidad única para crear software en forma innovadora maneras.