A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Generador de logos usando IA

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

🌱 ¿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

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

Paso 3: Crea un Formulario de Entrada

Paso 4: Conecta a la API de ChatGPT

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

Paso 6: Bonus - Representación Visual

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!

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

4 hrs

Dificultad

  • intermediate

Duración promedio

4 hrs

Dificultad

  • intermediate

Duración promedio

4 hrs

Dificultad

  • intermediate

Duración promedio

4 hrs

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

4 hrs

Dificultad

  • intermediate

Duración promedio

4 hrs

Material de apoyo

Para prepararte mejor para completar estos ejercicios, sugerimos los siguientes materiales

Lección

Hooks de React

Lección

Aprender React Aquí: Tutorial de React Js

Ejercicio

Curso de React.js desde cero y ejercicios interactivos