¡Construir apps en JavaScript con AI es más fácil de lo que piensas!

Índice de contenido

1. Introducción
2. Paso 1: Obtención de la clave de la API de Open AI
3. Paso 2: Creación de la estructura de archivos y carpetas del proyecto
4. Paso 3: Construcción de la interfaz de usuario
5. Paso 4: Configuración de un servidor de desarrollo
6. Paso 5: Escritura del código JavaScript
7. Paso 6: Escritura de la función de generación de respuestas
8. Paso 7: Manejo de eventos de clic y tecla Enter
9. Paso 8: Conexión con la API de Open AI y generación de respuestas
10. Paso 9: Actualización de la interfaz de usuario con la respuesta generada
11. Paso 10: Mejoras en la experiencia del usuario

Introducción

¡Hola a todos! En este Tutorial, aprenderemos cómo utilizar la API de Open AI para construir una aplicación simple de asistente de inteligencia artificial en JavaScript. Si estás interesado en desarrollar aplicaciones con inteligencia artificial pero no sabes por dónde empezar, ¡estás en el lugar Correcto! Las aplicaciones basadas en inteligencia artificial son muy populares en la actualidad, pero puede resultar abrumador dar los primeros pasos. En este video tutorial, te mostraré cómo usar la API de Open AI para construir una aplicación JavaScript que responda a tus indicaciones. ¡Imagínalo como un asistente de IA muy sencillo! Este tutorial te proporcionará una base sólida para empezar a construir tus propias aplicaciones potenciadas por IA.

Paso 1: Obtención de la clave de la API de Open AI

El primer paso para trabajar con la API de Open AI es obtener una clave de API. Si aún no tienes una, dirígete a platform.OpenAI.com, regístrate y crea una cuenta. Una vez que hayas iniciado sesión, ve a tu perfil, ve a "API keys" y crea una nueva clave secreta. Asegúrate de copiar y almacenar de forma segura esta clave de API, ya que la necesitarás para acceder a los servicios de la API de Open AI.

Paso 2: Creación de la estructura de archivos y carpetas del proyecto

En tu entorno de desarrollo, crea una carpeta llamada "AI JavaScript". Dentro de esta carpeta, crea un archivo "index.html" y un archivo "index.js". El archivo HTML contendrá el código HTML y CSS de nuestra aplicación, mientras que el archivo JavaScript contendrá las funciones para comunicarse con la API de Open AI y actualizar la interfaz de usuario con las respuestas obtenidas.

Paso 3: Construcción de la interfaz de usuario

Para construir la interfaz de usuario de nuestra aplicación, utilizaremos HTML y CSS. Copia y pega el código necesario en el archivo "index.html" para ahorrar tiempo. Asegúrate de obtener el código necesario en el enlace proporcionado en el comentario anclado. La interfaz de usuario está construida con HTML y Tailwind CSS, pero siéntete libre de utilizar cualquier solución de estilo de tu elección. Puedes escribir clases CSS simples o utilizar Algo como Bootstrap, ¡depende de ti! El código enlaza los estilos de Tailwind CSS desde un CDN en el encabezado. A continuación, en la sección del cuerpo, tenemos un título que dice "Streaming Open AI Completions in JavaScript", un elemento de entrada para aceptar la indicación del usuario, un botón para comenzar a generar la respuesta de IA y un botón para detener el proceso de generación. Encima del elemento de entrada, tenemos una sección vacía donde se mostrará el contenido obtenido de la API. Esta sección tiene un ID de "result-text".

Paso 4: Configuración de un servidor de desarrollo

Para ejecutar nuestra aplicación, necesitamos configurar un servidor de desarrollo. Si estás utilizando VS Code, puedes instalar la extensión Live Server que te permitirá abrir el archivo HTML con un servidor en vivo. Ve a las extensiones, busca "Live Server" e instálala. Después de la instalación, haz clic derecho en el archivo HTML y selecciona "Open with Live Server". Ahora podrás ver la interfaz de usuario sin problemas. Este paso es necesario porque las solicitudes fetch que utilizaremos en nuestro archivo JavaScript no funcionan con el protocolo de archivo debido a restricciones de seguridad. Por lo tanto, tener un servidor de desarrollo es esencial para ejecutar nuestra aplicación correctamente.

Paso 5: Escritura del código JavaScript

Ahora pasemos a escribir el código JavaScript para nuestra aplicación. Comenzaremos definiendo constantes para el endpoint de la API de Open AI y la clave de API. En el archivo "index.js", declara una constante llamada "API key" y asígnale el valor de la clave de API que obtuviste en el paso 1. Luego, declara una constante llamada "API endpoint" y asígnale el valor especificado en la documentación de la API de Open AI. Asegúrate de utilizar la referencia correcta para el "chat completion". Recuerda que debes generar tu propia clave de API, ya que la clave mostrada en este video no funcionará para ti.

Paso 6: Obtención de elementos del DOM

Para manipular la interfaz de usuario y obtener los datos ingresados por el usuario, necesitamos obtener referencias a los elementos del DOM relevantes. Declara constantes para el elemento de entrada de la indicación, los botones de generación y detención, y la sección de resultado. Utiliza el método "document.getElementById()" para obtener estos elementos según sus ID correspondientes en el archivo HTML.

Paso 7: Manejo de eventos de clic y tecla Enter

Manejemos los eventos para enviar la indicación del usuario a la API de chat. Añadamos un event listener al botón de generación y al elemento de entrada de indicación. Cuando se hace clic en el botón de generación o se presiona la tecla Enter mientras el elemento de entrada está enfocado, se debe llamar a una función llamada "generate". Utiliza el método "addEventListener()" en los elementos de DOM correspondientes y especifica el evento ("click" para el botón, y "keyup" para la tecla Enter) y la función de devolución de llamada que se ejecutará cuando ocurra el evento.

Paso 8: Conexión con la API de Open AI y generación de respuestas

Ahora vamos a escribir la función "generate" que establecerá una conexión con el endpoint de la API de Open AI y generará una respuesta basada en la indicación proporcionada por el usuario. Dentro de la función, utiliza un bloque "try...catch" para capturar y manejar errores. En el bloque "try", realiza una solicitud fetch a la API de Open AI utilizando la clave y el endpoint establecidos anteriormente. Asegúrate de incluir la clave de autorización en los encabezados de la solicitud fetch. Además, especifica el cuerpo de la solicitud POST, que debe contener el modelo de IA y la indicación del usuario. Utiliza el formato adecuado para especificar la indicación en el cuerpo de la solicitud. Una vez que obtengas la respuesta de la API, guárdala en una constante llamada "data" y regístrala en la consola. En el bloque "catch", captura cualquier error que ocurra y regístralo en la consola.

Paso 9: Actualización de la interfaz de usuario con la respuesta generada

Para mostrar la respuesta generada en la interfaz de usuario, necesitamos asignar el contenido de la respuesta al elemento de texto de resultado en el archivo HTML. Actualiza la propiedad "innerText" del elemento correspondiente con la respuesta obtenida de la API. Asegúrate de acceder a la respuesta correctamente utilizando la estructura de objetos proporcionada en la respuesta JSON. Ahora, cuando se invoque la función "generate", la respuesta generada se mostrará en la interfaz de usuario.

Paso 10: Mejoras en la experiencia del usuario

Finalmente, vamos a mejorar la experiencia del usuario en nuestra aplicación. Primero, si el usuario no ha ingresado una indicación, no realizaremos la llamada a la API de Open AI. Si el valor del elemento de entrada de indicación está vacío, mostraremos una alerta pidiendo al usuario que ingrese una indicación. También desactivaremos el botón de generación y mostraremos un texto de carga para indicar que se está realizando la solicitud fetch. Si se produce algún error durante el proceso, mostraremos un mensaje de error al usuario. Finalmente, habilitaremos nuevamente el botón de generación después de que termine el bloque "try...catch". Implementando estas mejoras, nuestra aplicación será más clara y amigable para el usuario.

Estos fueron los 10 pasos necesarios para integrar la API de Open AI en un proyecto de JavaScript con Vanilla JS. Resumiendo, hemos construido la interfaz de usuario para aceptar una indicación, realizado una solicitud POST a través del endpoint de chat completion de la API de Open AI, y actualizado la interfaz de usuario con la respuesta generada. ¡Ahora ya tienes una base sólida para construir tus propias aplicaciones potenciadas por IA!

En este punto, es posible que tengas algunas preguntas. Veamos las más comunes en la siguiente sección de preguntas frecuentes.

FAQ

P: ¿Cuál es el propósito del título "Streaming Open AI Completions"? El título se refiere al proceso de obtención y visualización de las respuestas generadas por la API de Open AI de forma continua. En este tutorial, hemos desarrollado el primer paso para obtener las respuestas, pero en la parte dos del tutorial exploraremos cómo obtener respuestas en tiempo real, similar al funcionamiento de ChatGPT.

P: ¿Cuál es el propósito del botón "Detener" y cómo se usa? El botón "Detener" tiene como propósito ofrecer al usuario la posibilidad de interrumpir el proceso de generación de respuestas en caso de que desee detenerlo antes de que se complete. En la parte dos del tutorial, desarrollaremos la funcionalidad del botón "Detener" para que funcione de manera adecuada.

P: ¿Por qué el proceso de generación de respuestas lleva cierto tiempo, especialmente para respuestas más largas? La generación de respuestas a través de la API de Open AI implica el procesamiento de una gran cantidad de datos y la ejecución de algoritmos avanzados de IA. Esto puede requerir cierto tiempo, especialmente para respuestas más largas o complejas. Es importante tener en cuenta que la generación de respuestas en tiempo real es un desafío y puede variar dependiendo de la complejidad de las solicitudes y la capacidad de procesamiento disponible.

¡Gracias por ver este tutorial y espero que te haya resultado útil! No dudes en suscribirte al canal para más contenido sobre desarrollo de IA para principiantes. ¡Nos vemos en el próximo video!