Cómo construir una aplicación generadora de imágenes AI en React usando OpenAI

Índice de contenido:

• ¿Qué es un generador de imágenes AI en React.js?
• Paso 1: Crear un proyecto de React.js
• Paso 2: Configurar la estructura de archivos
• Paso 3: Diseñar la página web
• Paso 4: Agregar funcionalidad para generar imágenes
• Paso 5: Mostrar la imagen generada en la página
• Paso 6: Agregar una barra de carga
• Paso 7: Estilizar la página web

¿Qué es un generador de imágenes AI en React.js?

Un generador de imágenes AI es una aplicación que utiliza la inteligencia artificial para crear imágenes automáticamente a partir de descripciones proporcionadas por el usuario. En este Tutorial, aprenderemos a crear un generador de imágenes AI en React.js utilizando la API de Open AI.

Paso 1: Crear un proyecto de React.js

Para comenzar, necesitamos crear un nuevo proyecto de React.js. Abra su terminal y ejecute el siguiente comando:

npx create-react-app generador-imagenes-ai

Esto creará un nuevo directorio llamado "generador-imagenes-ai" con todos los archivos necesarios para nuestro proyecto.

Paso 2: Configurar la estructura de archivos

Una vez que se haya creado el proyecto de React.js, debemos configurar la estructura de archivos necesaria para nuestro generador de imágenes AI. A continuación, se muestra la estructura de archivos que utilizaremos:

└── src
    ├── components
    │   ├── ImageGenerator.jsx
    │   └── ImageGenerator.css
    └── assets
        └── default-image.jpg

Dentro de la carpeta "components", crearemos un archivo llamado "ImageGenerator.jsx" que contendrá nuestro componente principal y un archivo CSS asociado llamado "ImageGenerator.css" para estilizar el componente.

También necesitaremos una imagen predeterminada que se mostrará cuando no haya imágenes generadas. Coloque esta imagen en la carpeta "assets" con el nombre "default-image.jpg".

Paso 3: Diseñar la página web

Ahora podemos comenzar a diseñar la página web para nuestro generador de imágenes AI. Usaremos JSX y CSS para crear los elementos necesarios.

Comencemos estableciendo la estructura básica del componente ImageGenerator.jsx:

import React from 'react';
import './ImageGenerator.css';

const ImageGenerator = () => {
  return (
    <div className="container">
      <div className="header">
        <h1>Generador de Imágenes AI</h1>
      </div>
      <div className="image-container">
        <img src={defaultImage} alt="Imagen generada" />
      </div>
      <div className="search-box">
        <input type="text" placeholder="Descripción de la imagen" />
        <button>Generar</button>
      </div>
    </div>
  );
};

export default ImageGenerator;

En el código anterior, hemos creado un componente funcional llamado "ImageGenerator" que renderiza la estructura básica de nuestra página web.

Paso 4: Agregar funcionalidad para generar imágenes

Ahora agregaremos la funcionalidad necesaria para generar imágenes utilizando la API de Open AI. Para hacer esto, necesitaremos utilizar el estado de React y el concepto de referencias.

Primero, agregaremos el estado para almacenar la URL de la imagen generada. Dentro del componente "ImageGenerator", agregue el siguiente código antes de la declaración del componente:

import React, { useState, useRef } from 'react';

const ImageGenerator = () => {
  const [imageURL, setImageURL] = useState(null);
  const inputRef = useRef(null);

  // Resto del código del componente...
};

En el código anterior, hemos utilizado el gancho useState para crear una variable de estado llamada "imageURL" que almacenará la URL de la imagen generada. También hemos utilizado el gancho useRef para referenciar el campo de entrada de texto.

Ahora, crearemos una función asincrónica que se ejecutará cuando hagamos clic en el botón "Generar". Esta función enviará una solicitud a la API de Open AI para generar la imagen. Dentro del componente "ImageGenerator", agregue el siguiente código después de la declaración del componente:

import React, { useState, useRef } from 'react';

const ImageGenerator = () => {
  const [imageURL, setImageURL] = useState(null);
  const inputRef = useRef(null);

  const generateImage = async () => {
    if (inputRef.current.value === '') return;

    // Código para enviar la solicitud a la API de Open AI...

    // Código para actualizar la URL de la imagen generada...
  };

  // Resto del código del componente...
};

En el código anterior, hemos creado una función asincrónica llamada "generateImage" que primero verifica si el campo de entrada de texto está vacío. Si el campo de entrada está vacío, la función se detendrá y no se realizará ninguna acción.

En el siguiente paso, agregaremos el código para enviar la solicitud a la API de Open AI y actualizar la URL de la imagen generada.

Paso 5: Mostrar la imagen generada en la página

Una vez que hayamos recibido la respuesta de la API de Open AI con la URL de la imagen generada, actualizaremos el estado de "imageURL" y mostraremos la imagen en la página.

Dentro del componente "ImageGenerator", agregue el siguiente código justo después de la declaración del componente:

import React, { useState, useRef } from 'react';

const ImageGenerator = () => {
  const [imageURL, setImageURL] = useState(null);
  const inputRef = useRef(null);

  const generateImage = async () => {
    if (inputRef.current.value === '') return;

    // Código para enviar la solicitud a la API de Open AI...

    const data = await response.json();
    setImageURL(data[0].URL);
  };

  return (
    <div className="container">
      // Resto del código del componente...

      <div className="image-container">
        <img src={imageURL ? imageURL : defaultImage} alt="Imagen generada" />
      </div>

      // Resto del código del componente...
    </div>
  );
};

export default ImageGenerator;

En el código anterior, hemos utilizado el operador ternario para elegir entre la URL de la imagen generada y la imagen predeterminada cuando se renderiza el elemento .

Paso 6: Agregar una barra de carga

Para mejorar la experiencia del usuario, agregaremos una barra de carga que se mostrará mientras se Genera la imagen. Utilizaremos el estado de React y CSS para lograr esto.

Dentro del componente "ImageGenerator", agregue el siguiente código después del estado de "imageURL":

import React, { useState, useRef } from 'react';

const ImageGenerator = () => {
  const [imageURL, setImageURL] = useState(null);
  const [loading, setLoading] = useState(false);
  const inputRef = useRef(null);

  // Resto del código del componente...
};

En el código anterior, hemos agregado una variable de estado llamada "loading" para controlar si se muestra la barra de carga o no. También hemos inicializado el estado en falso, lo que significa que la barra de carga estará oculta por defecto.

Ahora, agregaremos el elemento de la barra de carga en el componente "ImageGenerator". Dentro del componente "ImageGenerator", agregue el siguiente código justo después del elemento :

import React, { useState, useRef } from 'react';

const ImageGenerator = () => {
  // Resto del código del componente...

  return (
    <div className="container">
      // Resto del código del componente...

      <div className={`loading ${loading ? 'loading-full' : ''}`}>
        <div className="loading-bar"></div>
        <div className="loading-text">Cargando...</div>
      </div>

      // Resto del código del componente...
    </div>
  );
};

export default ImageGenerator;

En el código anterior, hemos agregado un elemento

.container {
  display: flex;
  flex-direction: column;
  margin: 10px;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
}

.image-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.image-container img {
  width: 512px;
}

.search-box {
  display: flex;
  height: 40px;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  background: #f0f0f0;
}

.search-input {
  width: 70%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding-left: 10px;
  margin-right: 10px;
  font-size: 16px;
  color: #333;
}

.generate-btn {
  width: 20%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

.loading {
  width: 100%;
  height: 10px;
  background: #f0f0f0;
}

.loading-full {
  height: 100%;
  transition: height 15s;
}

.loading-bar {
  width: 0;
  height: 100%;
  background: #007bff;
  transition: width 15s;
}

.loading-text {
  font-size: 18px;
}

.loading-text.display-none {
  display: none;
}