Tutorial de cómo usar GPT-3: Cree su propia aplicación GPT-3 Powered usando NextJS y Replit en 20 minutos

Tutorial de cómo usar GPT-3: Cree su propia aplicación GPT-3 Powered usando NextJS y Replit en 20 minutos

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

nuevo proyecto

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.

  • Haz clic en Importar desde Github
  • Pasado https://github.com/nextgrid/GPT-3-Nextjs-Tailwind-starter en el campo URL de GitHub
  • Haga clic en el Importar desde Github botón
  • Importe repetitivo desde Github haciendo clic en el botón Importar desde Github
    Importe repetitivo desde Github haciendo clic en el botón ‘Importar desde 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

  • Haz clic en el ícono del candado 🔒 en el lado derecho
  • En el campo clave escriba OPENAI_API_KEY
  • En el campo de valor, escriba su clave API GPT-3 que debería verse como sk-tKyMX1XbOS***Agaa5qx89UToRCy
  • Haz clic en el ícono del candado 🔒 en el lado derecho
    Para configurar nuestra clave API OpenAI GPT-3, primero debemos hacer clic en el ícono de candado 🔒 en el lado derecho
    En el campo clave, escriba OPENAI_API_KEY En el campo de valor, escriba su clave API GPT-3

    2. Actualice el comando de ejecución

    Para iniciar nuestra aplicación, necesitamos actualizar el comando de ejecución.

  • En el campo de comando de ejecución, cambie el comando a npm run start a npm run dev
  • Haga clic en el Hecho botón
  • 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

    Para configurar nuestra clave API OpenAI GPT-3, primero debemos hacer clic en el ícono de candado 🔒 en el lado derecho

    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

    Para configurar nuestra clave API OpenAI GPT-3, primero debemos hacer clic en el ícono de candado 🔒 en el lado derecho

    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:

    Aplicación con tecnología 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.

    El resultado de nuestra aplicación con tecnología GPT-3 implementada en la repetición
    Una vez que haga clic en el botón **crear**, verá el texto generado en la consola.

    ¡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.


    Comentarios

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *