Generador de logos usando IA

🌱 ¿Cómo iniciar este proyecto?

No clones este repositorio porque vamos a utilizar una plantilla diferente.

Recomendamos abrir la plantilla de React utilizando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonar el repositorio de GitHub en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

https://github.com/4GeeksAcademy/react-hello

⚠ Necesitarás tener Node.js instalado si lo haces localmente, pero todo eso ya está instalado en Codespaces o Gitpod.

📝 Instrucciones

Paso 1: Configura el Proyecto

• Configura el proyecto boilerplate desde la plantilla de React proporcionada.
• Sigue las instrucciones en el README del repositorio para configurar tu entorno de desarrollo.

Paso 2: Obtén acceso a la API de ChatGPT

• Regístrate para obtener una cuenta en OpenAI.
• Navega a la sección de API y obtén tu clave API para acceder a ChatGPT.

Paso 3: Crea un Formulario de Entrada

• En tu aplicación React, crea un formulario donde los usuarios puedan proporcionar detalles sobre la empresa:

Paso 4: Conecta a la API de ChatGPT

• Utiliza la entrada del usuario para crear un prompt para la API de ChatGPT.
• Realiza una solicitud a la API de ChatGPT cuando se envíe el formulario.

Ejemplo:

1const handleGenerateLogo = async ({ companyName, industry, style }) => {
2  const prompt = `Crea una descripción detallada de un logotipo para una empresa llamada "${companyName}", que opera en la industria de "${industry}". El logotipo debería tener un estilo "${style}".`;
3
4  try {
5    const response = await fetch('https://api.openai.com/v1/engines/text-davinci-003/completions', {
6      method: 'POST',
7      headers: {
8        'Authorization': `Bearer TU_CLAVE_API_DE_OPENAI`,
9        'Content-Type': 'application/json',
10      },
11      body: JSON.stringify({
12        prompt: prompt,
13        max_tokens: 150,
14        n: 1,
15        stop: null,
16        temperature: 0.7,
17      }),
18    });
19
20    const data = await response.json();
21    const description = data.choices[0].text.trim();
22    setLogoDescription(description);
23  } catch (error) {
24    console.error('Error al generar la descripción del logotipo:', error);
25  }
26};

Nota: Recuerda reemplazar 'TU_CLAVE_API_DE_OPENAI' con tu clave API real de OpenAI.

Paso 5: Muestra la Descripción del Logotipo Generado

• Muestra la descripción del logotipo devuelta por la API al usuario en tu aplicación React.
• Asegúrate de que la descripción se presente en un formato legible, posiblemente con estilos para mejorar la experiencia del usuario.

Paso 6: Bonus - Representación Visual

• Intenta agregar una función donde generes visualmente un logotipo simple basado en la descripción proporcionada por ChatGPT. Puedes usar librerías como Canvas API, Fabric.js, o Konva.js para crear diseños visuales básicos.
• Alternativamente, puedes integrar una API de generación de imágenes con IA como DALL·E para crear una imagen basada en la descripción.

Sección de Bonus

Características Adicionales para Practicar y Mejorar el Proyecto

1. Variaciones de Logotipo: Permite a los usuarios generar múltiples descripciones de logotipos con diferentes estilos o temas modificando el prompt.

2. Estilización: Mejora la apariencia de tu aplicación usando CSS o librerías de estilos como Bootstrap o Material-UI.

3. Guardar Descripciones: Implementa funcionalidad para guardar o descargar las descripciones de logotipos generadas para referencia futura.

4. Cuentas de Usuario: Agrega un sistema de autenticación para que los usuarios puedan guardar sus ideas de logotipos y acceder a ellas más tarde.

5. Manejo de Errores: Agrega un manejo de errores robusto para gestionar errores de API, problemas de red o entradas inválidas de manera adecuada.

6. Diseño Responsivo: Asegúrate de que tu aplicación se vea bien en varios tamaños de pantalla implementando prácticas de diseño responsivo.

¡Explora diferentes mejoras para hacer tu aplicación generadora de logotipos más interactiva y visualmente atractiva!