Al final de este tutorial de GPT-3, habrá creado e implementado su propia aplicación web con tecnología GPT-3. Podrá utilizar la biblioteca GPT-3 para crear sus propias aplicaciones. El tutorial es adecuado para todos los que supongan que tiene conocimientos básicos de React y NextJS. Si no está familiarizado con estas tecnologías, puede consultar los siguientes recursos antes de comenzar
estaremos usando GPT-3 de OpenAI, un transformador de texto de 175 mil millones de parámetros. Adicionalmente estaremos usando SiguienteJS y Repetir para construir y alojar nuestra aplicación. El propósito de este tutorial es cubrir los conceptos básicos para poner en funcionamiento una aplicación web con tecnología GPT-3.
Configurando Replit e importando nuestro proyecto desde Github
Comenzamos con la creación de 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.
1. Primeros pasos con Replit
Lo primero que deberá hacer es crear un nuevo proyecto Replit. Para hacer esto, diríjase a Replit y regístrese para obtener una cuenta si aún no tiene una.
2. Crea un nuevo proyecto
Una vez que haya iniciado sesión en Replit, haga clic en el signo + en la esquina superior derecha
3. Importar plantilla GPT-3 desde Github
En este tutorial, utilizaremos el modelo GPT-3 que nos facilitará la vida y le permitirá crear su propia aplicación con tecnología GPT-3 en 20 minutos.
https://github.com/nextgrid/GPT-3-Nextjs-Tailwind-starter en el campo URL de GitHub
Instalando Dependencias y Configurando nuestro proyecto
Lo primero que debemos hacer es agregar nuestra clave API GPT-3 de OpenAI. Si no tiene uno, puede obtener uno registrándose en desde beta.openai.com. Una vez que haya creado su cuenta, puede ir a su perfil y hacer clic en la pestaña «Claves API» o simplemente hacer clic en este enlace Claves API OpenAI.
1. Agregue nuestra clave API GPT-3 al archivo .env
OPENAI_API_KEYsk-tKyMX1XbOS***Agaa5qx89UToRCy
2. Actualice el comando de ejecución
Para iniciar nuestra aplicación, necesitamos actualizar el comando de ejecución.
npm run start a npm run dev
3. Instale las dependencias y comience el entorno de desarrollo
Ahora es el momento de instalar todas las dependencias e iniciar el entorno de desarrollo. Haga clic en el verde grande
Espere a que el entorno de desarrollo se instale y comience
Una vez que haya hecho clic en el botón EJECUTAR, verá una salida en la ventana de concolse donde primero instalará los paquetes y luego iniciará el servidor de desarrollo.
Una vez hecho esto, verá su aplicación web en la ventana sobre la consola
Una vez que haya actualizado su comando de ejecución, puede hacer clic en el botón EJECUTAR para instalar sus dependencias e iniciar el entorno de desarrollo.
Construyendo nuestra aplicación con tecnología GPT-3
En este momento tenemos un frontend simple conectado a nuestro backend alimentado por GPT-3. Si ingresa un texto en el campo de texto, verá la respuesta generada. Intentemos ingresar un texto y veamos qué sucede.
Introduzca un texto en el campo de texto y haga clic en el crear botón
Tu aportación:
Salida GPT-3:
Personalice nuestra aplicación con tecnología GPT-3
En esta etapa, debe tener una aplicación con tecnología GPT-3 que puede usar para generar texto y ahora es el momento de configurar la aplicación según nuestras necesidades. En mi caso, crearé una aplicación con tecnología GPT-3 que ayude a resumir un artículo que podamos usar como nuestra copia para una publicación en las redes sociales.
1. Configuración del punto final de la API
Comience con abrir /pages/api/openai.js
El archivo debe verse algo como esto
Para facilitarnos la vida he añadido los siguientes valores
Él $beforePrompt y $afterPrompt nos facilitará agregar los valores que queremos que aparezcan antes y después de nuestro aviso antes de enviarlo a la API GPT-3.
Como estoy construyendo un generador de publicaciones en redes sociales, usaré los siguientes valores
2. Actualicemos nuestra interfaz para reflejar las funciones de nuestras aplicaciones.
Abierto /pages/index.js y editar el <title>, H1 y <p> etiquetas para reflejar las funcionalidades de nuestras aplicaciones
3. Hora de probar nuestra aplicación y el resultado
Elegí el siguiente artículo que encontré en Techcrunch para probar la aplicación.
¡Instagram acaba de anunciar una nueva función que permite a las empresas impulsar sus Reels para convertirlos en anuncios! Esta es una excelente manera de llegar a nuevas audiencias y difundir la historia de su marca. Recuerde revisar sus Estadísticas para ver qué anuncios funcionaron mejor.
Ultimas palabras
Espero que hayas disfrutado de este sencillo tutorial. Con suerte, ahora tiene una base simple que le permitirá crear otro tipo de aplicaciones.