3 Aplicaciones Potentes Usando Next.js y Replit en 20 Minutos

Por qué deberías construir una aplicación impulsada por GPT-3

Sumérgete en el mundo de la IA con este tutorial de GPT-3. En 20 minutos, estarás manejando el poder de un transformador de texto de 175 mil millones de parámetros, GPT-3 de OpenAI. Esta guía, adecuada para aquellos con un entendimiento básico de React y NextJS, te guiará a través de los pasos sencillos para crear y desplegar tu propia aplicación web. Si eres nuevo en estas tecnologías, no te preocupes, tenemos recursos para ponerte al día. Usaremos NextJS y Replit para construir y alojar nuestra aplicación, cubriendo todos los conceptos básicos para que tu aplicación GPT-3 esté en funcionamiento.

Configurar Replit e importar nuestro proyecto desde GitHub

Comenzamos creando una cuenta en Replit donde importaremos e inicializaremos nuestro proyecto. Esto nos permitirá obtener una compilación funcional para que podamos ver nuestras actualizaciones en tiempo real.

Comenzando con Replit

1. Lo primero que necesitas hacer es crear un nuevo proyecto en Replit. Para hacer esto, dirígete a Replit y regístrate para obtener una cuenta si aún no tienes una.

2. Una vez que hayas iniciado sesión en Replit, haz clic en el signo + en la esquina superior derecha.

3. En este tutorial, utilizaremos la plantilla básica de GPT-3 que hará nuestras vidas más fáciles y te permitirá construir tu propia aplicación impulsada por GPT-3 en 20 minutos.

4. Haz clic en Importar desde GitHub.

5. Pega https://github.com/nextgrid/GPT-3-Nextjs-Tailwind-starter en el campo de URL de GitHub.

6. Haz clic en el botón Importar desde GitHub.

Instalación de dependencias y configuración de nuestro proyecto

Lo primero que necesitamos hacer es agregar nuestra clave de API de GPT-3 de OpenAI. Si no tienes una, puedes obtener una registrándote en beta.openai.com. Una vez que tu cuenta esté creada, puedes ir a tu perfil y hacer clic en la pestaña "Claves de API" o simplemente hacer clic en este enlace para las Claves de API de OpenAI.

Agregar nuestra clave de API de GPT-3 al archivo .env

1. Haz clic en el ícono de candado en el lado derecho.

2. En el campo de clave, escribe OPENAI_API_KEY.

3. En el campo de valor, escribe tu clave de API de GPT-3 que debería parecerse a sk-tKyMX1XbOS***Agaa5qx89UToRCy.

4. Para iniciar nuestra aplicación, necesitamos actualizar el comando de ejecución. En el campo del comando de ejecución, cambia el comando de npm run start a npm run dev.

5. Haz clic en el botón Hecho.

Instalar dependencias e iniciar el entorno de desarrollo

Ahora es el momento de instalar todas las dependencias e iniciar el entorno de desarrollo. Sigue estos pasos:

1. Haz clic en el gran botón verde RUN.
2. Espera a que se instale y inicie el entorno de desarrollo.
3. Una vez que hayas hecho clic en el botón RUN, verás la salida en la ventana de la consola donde primero se instalan los paquetes y luego se inicia nuestro servidor de desarrollo.
4. Una vez que esto esté hecho, verás tu aplicación web en la ventana sobre la consola.

Construyendo nuestra aplicación impulsada por GPT-3

En este momento, tenemos un frontend simple conectado a nuestro backend impulsado por GPT-3. Si ingresas un texto en el campo de texto, verás la respuesta generada. Probemos ingresar texto y veamos qué sucede:

Tu entrada:

Salida de GPT-3:

Personalizando nuestra aplicación impulsada por GPT-3

En esta etapa, deberías tener una aplicación impulsada por GPT-3 que puedes usar para generar texto. Ahora es el momento de configurar la aplicación a nuestras necesidades. Por ejemplo, podemos crear una aplicación impulsada por GPT-3 que ayude a resumir un artículo que podemos usar como nuestro contenido para una publicación en redes sociales.

Configurando el endpoint de la API

Comienza abriendo /pages/api/openai.js. El archivo debería verse similar a esto:

Para facilitar nuestras vidas, hemos agregado los siguientes valores: $beforePrompt y $afterPrompt agilizarán la adición de valores deseados antes y después de nuestro aviso antes de enviarlo a la API de GPT-3.

Mientras construimos un generador de publicaciones en redes sociales, utilizaremos marcadores de posición específicos para modificar el aviso.

Probando nuestra aplicación

Ahora, probemos nuestra aplicación utilizando un artículo de TechCrunch. Aquí hay un fragmento:

Instagram acaba de anunciar una nueva función que permite a las empresas promocionar sus Reels para convertirlos en anuncios. ¡Esta es una gran manera de alcanzar nuevas audiencias y dar a conocer tu historia de marca! Recuerda revisar tus Insights para ver qué anuncios funcionaron mejor.

Palabras finales

¡Felicidades por completar este tutorial de GPT-3! En solo 20 minutos, has puesto las bases para construir aplicaciones diversas. Pero, ¿por qué detenerse aquí? Únete a nuestros Hackatones de IA, donde en solo siete horas puedes colaborar con una comunidad global de más de 52,000 entusiastas para crear un prototipo de aplicación de IA funcional.

¡Demos forma al futuro con IA!