{"id":29833,"date":"2024-09-26T13:39:40","date_gmt":"2024-09-26T11:39:40","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=29833"},"modified":"2024-09-26T14:14:00","modified_gmt":"2024-09-26T12:14:00","slug":"guia-practica-para-construir-un-chatbot-de-ia-en-el-navegador","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/guia-practica-para-construir-un-chatbot-de-ia-en-el-navegador\/","title":{"rendered":"Gu\u00eda pr\u00e1ctica para construir un Chatbot de IA en el navegador"},"content":{"rendered":"\n
\u00a1Descubramos c\u00f3mo podemos crear una conversaci\u00f3n aut\u00e9ntica con un asistente virtual basado en un modelo de IA similar a ChatGPT, sin tener que comunicarnos con un servidor, sino completamente dentro del navegador!<\/p>\n\n\n\n
\u00bfEs realmente posible hacer esto sin costo alguno completamente del lado del cliente con JavaScript? \u00bfRealmente llegaremos a algo \"similar a ChatGPT\"? \u00bfNos dirigimos hacia un futuro con asistentes virtuales fuera de l\u00ednea y control total de la privacidad?<\/pre>\n\n\n\n
Responderemos a estas preguntas con este tutorial especializado en Transformers.js, centr\u00e1ndonos en crear un chatbot basado en un modelo LLM real de Hugging Face.<\/p>\n\n\n\n
Gu\u00eda pr\u00e1ctica para un Chatbot basado en IA integrado en una p\u00e1gina web<\/h2>\n\n\n\n
Requisitos<\/h3>\n\n\n\n
\u00a1Esta gu\u00eda, al igual que la anterior, est\u00e1 dise\u00f1ada para ser clara y accesible!<\/p>\n\n\n\n
Por ejemplo, no usaremos ning\u00fan agrupador, sino una simple carpeta \/public que se servir\u00e1 con tu servidor web favorito.<\/p>\n\n\n\n
Ingredientes<\/h3>\n\n\n\n
Para nuestra aplicaci\u00f3n web, necesitaremos tres ingredientes principales correspondientes a los cuatro archivos del proyecto en los que trabajaremos:<\/p>\n\n\n\n
Dentro de nuestro index.html<\/code> tendremos:<\/p>\n\n\n\n
\n
#chat-messages<\/code> donde aparecer\u00e1n los mensajes del usuario, asistente virtual y del sistema (con diferentes estilos).<\/li>\n\n\n\n
#chat-input-container<\/code> para enviar un mensaje desde el teclado y con un bot\u00f3n.<\/li>\n<\/ul>\n\n\n\n
Un web worker (cargado como m\u00f3dulo): contendr\u00e1 nuestro modelo de IA y nos permitir\u00e1 consultarlo sin bloquear la interfaz de usuario del hilo principal.<\/p>\n\n\n\n
La l\u00f3gica de la aplicaci\u00f3n de un chat cl\u00e1sico: el usuario puede enviar sus mensajes, y tambi\u00e9n lo har\u00e1 el modelo de IA.<\/p>\n\n\n\n
Preparaci\u00f3n<\/h3>\n\n\n\n
Un chat simple<\/h4>\n\n\n\n
Para este experimento, nos limitaremos a un contenedor para albergar todo el chat con un #chat-header<\/code>, #chat-messages<\/code> y #chat-input-container<\/code> dentro.<\/p>\n\n\n\n
Agreguemos todo lo que necesitamos a nuestro index.html<\/code>:<\/p>\n\n\n\n
Ahora a\u00f1adamos a nuestro app.js<\/code> el sistema para enviar mensajes escritos por el usuario en su caja. Nos conectaremos a su env\u00edo para enviar el mensaje a nuestra IA\u2026 pero primero, creemos un sistema simple para enviar y recibir mensajes.<\/p>\n\n\n\n
\u00a1La parte exterior est\u00e1 lista! \u00bfNo puedes ya saborear el resultado? \ud83e\udd24<\/p>\n\n\n\n
\u00a1Estamos listos para el sistema de comunicaci\u00f3n real con nuestro modelo de IA!<\/p>\n\n\n\n\u00a1Estamos listos para el sistema de comunicaci\u00f3n real con nuestro modelo de IA!<\/figcaption><\/figure>\n\n\n\n
Ejecutando un Modelo de IA Dentro de un Web Worker \ud83c\udf36\ufe0f \ud83c\udf36\ufe0f \ud83c\udf36\ufe0f<\/h3>\n\n\n\n
Hemos llegado a la parte m\u00e1s emocionante de la receta: crear un web worker para descargar y ejecutar el modelo LLM en el navegador sin bloquear el hilo principal.<\/p>\n\n\n\n
\u00bfNo conoces los Web Workers? \u00a1Es una gran oportunidad para probarlos!<\/p>\n\n\n\n
En el archivo app.js<\/code>, incluiremos el archivo worker.js<\/code> como un m\u00f3dulo:<\/p>\n\n\n\n
var aiWorker = new Worker('worker.js', { type: \"module\" }); <\/code><\/pre>\n\n\n\n
Implementemos las dos funciones que nos permitir\u00e1n enviar mensajes al web worker utilizando el m\u00e9todo postMessage()<\/code>, reemplazando los falsos:<\/p>\n\n\n\n
\/\/ Para enviar mensajes a la IA const chat = (message) => { aiWorker.postMessage({ action: \"chat\", content: message, }); }; \/\/ Para cargar el modelo de IA: sucede solo la primera vez const download = (modelURL) => { addMessage( '<small id=\"downloading-message\">Descargando modelo...<\/small>', \"system\" ); aiWorker.postMessage({ action: \"download\", model: modelURL, }); }; <\/code><\/pre>\n\n\n\n
Para escuchar las respuestas del Web Worker, simplemente necesitamos agregar un listener de eventos que nos informar\u00e1 de cada mensaje. Ten en cuenta que el evento siempre es “message”, pero el contenido pasado al callback contendr\u00e1 un objeto que definir\u00e1s: en la pr\u00e1ctica, \u00a1puedes inventar tu propio protocolo formado por par\u00e1metros y banderas!<\/p>\n\n\n\n
Para esta receta, solo necesitamos recibir dos tipos de mensajes:<\/p>\n\n\n\n
\n
Si la respuesta contiene la propiedad de estado, entonces es la se\u00f1al de que el modelo est\u00e1 listo (es decir, la respuesta al mensaje con action: ‘download’ enviado por nosotros una vez que se carga app.js).<\/li>\n\n\n\n
De lo contrario, es el texto generado por el modelo y contenido en la propiedad result.<\/li>\n<\/ul>\n\n\n\n
Veamos nuestro sistema completo de recepci\u00f3n de mensajes con las reacciones correspondientes de nuestra interfaz de usuario:<\/p>\n\n\n\n
\/\/ \u00a1todo comienza con esta solicitud! download('Felladrin\/onnx-Pythia-31M-Chat-v1'); <\/code><\/pre>\n\n\n\n
\u00a1S\u00ed, lo le\u00edste bien: tenemos un par\u00e1metro modelURL! \u00a1Unos pocos pasos y descubriremos para qu\u00e9 sirve, pero puedes imaginarlo! \ud83e\udd13<\/p>\n\n\n\n
Web Worker Repleto de un Chatbot Real<\/h3>\n\n\n\n
\u00a1Todo est\u00e1 listo para dar inteligencia a nuestro asistente virtual basado en modelos de generaci\u00f3n de texto (LLM) cargados completamente en el navegador gracias a Transformers.js!<\/p>\n\n\n\n
Primero, carguemos la \u00faltima versi\u00f3n de Transformers.js directamente desde un servicio CDN. \u00a1Atenci\u00f3n! \ud83d\udd25 No te quemes: podemos cargar esta u otras bibliotecas de esta manera exclusivamente porque cargamos el Web Worker con la opci\u00f3n type: “module”! \ud83d\ude42\u200d\u2195\ufe0f<\/p>\n\n\n\n
import { pipeline, env, } from \"https:\/\/cdn.jsdelivr.net\/npm\/@xenova\/transformers@2.17.1\";
Ahora, todo lo que tenemos que hacer es implementar nuestra pipeline como en los ejemplos de la documentaci\u00f3n oficial, pero dentro del web worker y cuando la aplicaci\u00f3n lo solicite.<\/p>\n\n\n\n
La funci\u00f3n downloadModel descargar\u00e1 los archivos del modelo desde Hugging Face y finalmente crear\u00e1 nuestro generador, que es una pipeline de generaci\u00f3n de texto.<\/p>\n\n\n\n
\u00a1Seguramente has notado async<\/code> y await<\/code>! Cuando descargamos el modelo, el Web Worker esperar\u00e1 a que la descarga se complete y luego notificar\u00e1 a nuestra aplicaci\u00f3n que todo est\u00e1 listo con self.postMessage()<\/code> con la propiedad de estado: “ready” (que es exactamente lo que nuestra l\u00f3gica de aplicaci\u00f3n est\u00e1 esperando para activar la interfaz de usuario y as\u00ed poder usar el chat).<\/p>\n\n\n\n
Aqu\u00ed es donde ocurre la magia de los modelos de generaci\u00f3n de texto y su capacidad para parecer “inteligentes”: \u00a1qu\u00e9 emocionante!<\/p>\n\n\n\n
const generateResponse = async (content) => { \/\/ los modelos de generaci\u00f3n de texto para chatbots toman un chat como entrada const messages = [ { role: \"system\", content: \"Eres un asistente muy conocedor y amigable.\", }, { role: \"user\", content: content, }, ];
\/\/ Los mensajes del chat con sus roles se alimentan a un \/\/ tokenizador especial espec\u00edfico de ese modelo que los transformar\u00e1 en vectores (embedding) const textInput = generator.tokenizer.apply_chat_template(messages, { tokenize: false, add_generation_prompt: true, });
\/\/ \u00a1la pipeline en acci\u00f3n! Aqu\u00ed es donde podemos pasar muchos par\u00e1metros para cambiar el resultado de la generaci\u00f3n de texto const output = await generator(textInput, { max_new_tokens: 64, do_sample: true, });
\/\/ La conversaci\u00f3n se nos devuelve en un formato espec\u00edfico del modelo \/\/ pero al profundizar en la tarjeta en Hugging Face encontraremos toda la informaci\u00f3n \/\/ y podemos extraer el contenido de la \u00faltima respuesta.
\/\/ En este momento, a\u00fan no hay consenso sobre c\u00f3mo deber\u00eda ser una plantilla de chat, pero para extraer la \u00faltima frase (es decir, la respuesta de la IA) simplemente corta lo que sigue a la \u00faltima ocurrencia de la cadena `\"assistant\\n\"` por ejemplo as\u00ed:
\/\/ todo listo para enviar la respuesta generada por la IA self.postMessage({ result: lastMessage, }); }; <\/code><\/pre>\n\n\n\n
Todo lo que queda es amalgamar el Web Worker con las solicitudes de nuestra app.js.<\/p>\n\n\n\n
Hemos preparado todo previamente para enviar dos mensajes action: ‘download’ y action: ‘chat’, y aqu\u00ed no hacemos m\u00e1s que recibirlos y reaccionar en consecuencia.<\/p>\n\n\n\n
Cuando interact\u00faas por primera vez con tu chatbot, es posible que encuentres que sus respuestas son un poco limitadas o extra\u00f1as. Esto es normal para un modelo peque\u00f1o, y es importante entender por qu\u00e9:<\/p>\n\n\n\n
El Tama\u00f1o del Modelo Importa:<\/strong> El modelo que usamos (Felladrin\/onnx-Pythia-31M-Chat-v1) es muy peque\u00f1o, solo tiene alrededor de 31 millones de par\u00e1metros. Si bien esto hace que sea r\u00e1pido de cargar y ejecutar en un navegador, limita significativamente sus capacidades.<\/p>\n\n\n\n
Mejorando Respuestas:<\/strong> Puedes ajustar algunos par\u00e1metros para potencialmente mejorar las salidas:<\/p>\n\n\n\n
const output = await generator(textInput, { max_new_tokens: 1024, \/\/ Permite respuestas m\u00e1s largas repetition_penalty: 1.2, \/\/ Reduce la repetici\u00f3n de palabras do_sample: true, }); <\/code><\/pre>\n\n\n\n
Modelos M\u00e1s Grandes, Mejores Resultados:<\/strong> Para respuestas m\u00e1s coherentes y capaces, considera usar modelos m\u00e1s grandes:<\/p>\n\n\n\n
\n
Felladrin\/onnx-TinyMistral-248M-Chat-v2 (248 millones de par\u00e1metros)<\/li>\n\n\n\n
Xenova\/Qwen1.5-0.5B-Chat (500 millones de par\u00e1metros)<\/li>\n<\/ul>\n\n\n\n
Estos modelos m\u00e1s grandes tardar\u00e1n m\u00e1s en cargar, pero ofrecer\u00e1n un rendimiento significativamente mejorado.<\/p>\n\n\n\n
Siguientes Pasos y Desaf\u00edos<\/h3>\n\n\n\n
Ahora que has construido un chatbot de IA b\u00e1sico, aqu\u00ed hay algunas formas de expandir tu proyecto:<\/p>\n\n\n\n
\n
Animaciones Suaves:<\/strong> Implementa una animaci\u00f3n de escritura para las respuestas del chatbot para que la interacci\u00f3n se sienta m\u00e1s natural.<\/li>\n\n\n\n
Integraci\u00f3n del Lado del Servidor:<\/strong> Crea un backend en Python para interactuar con modelos de lenguaje a\u00fan m\u00e1s grandes (7-8B par\u00e1metros) para capacidades m\u00e1s avanzadas.<\/li>\n\n\n\n
Asistentes Especializados:<\/strong> Adapta el chatbot para prop\u00f3sitos espec\u00edficos, como crear un NPC (Personaje No Jugador) para un juego.<\/li>\n\n\n\n
Explora Otras Tareas de IA:<\/strong> Prueba a implementar modelos de visi\u00f3n por computadora o reconocimiento de voz usando Transformers.js. Busca modelos del autor de la biblioteca en Hugging Face para opciones compatibles.<\/li>\n\n\n\n
Mejoras en la UI:<\/strong> Mejora la interfaz de chat con caracter\u00edsticas como historial de mensajes, perfiles de usuario o personalizaci\u00f3n de temas.<\/li>\n\n\n\n
Manejo de Errores y Robustez:<\/strong> Implementa un mejor manejo de errores para fallos en la carga del modelo o problemas de red.<\/li>\n<\/ul>\n\n\n\n
Recuerda que el campo de la IA y el procesamiento de lenguaje natural est\u00e1 evolucionando r\u00e1pidamente. Sigue experimentando, aprendiendo y manteni\u00e9ndote actualizado con los \u00faltimos desarrollos en modelos de transformadores y aplicaciones de IA basadas en el navegador.<\/p>\n\n\n\n
Esperamos que hayas disfrutado de este tutorial y que lo encuentres valioso para entender c\u00f3mo crear chatbots impulsados por IA directamente en el navegador. \u00a1Feliz codificaci\u00f3n!<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/09\/image-2.png\")