Integración API NLPCloud en VUE.js para el uso de modelos neuronales remotos desde un cliente
Introducción y objetivos
Hola buenas, en este post les voy a explicar cómo conectar de manera muy sencilla un proyecto de VUE.js desde 0 a un modelo neuronal. He decidido basarme en los modelos alojados en NLPCloud, que es una plataforma que da acceso libre a los desarrolladores y usuarios para que trabajen con ciertos modelos. Estos modelos, de diferentes temáticas, (desde generadores de texto, a imágenes) preentrenados con un gran volumen de datos, son modelos desarrollados por empresas privadas como Facebook, DeepMind o Google, y dependiendo de la categoría algunos se encuentran bloqueados tras un paywall (como es el caso de Dalle-2), otros (los menos) son open source, y la gran mayoría, están colgados en servidores que son capaces de procesar y organizar las peticiones y devolver resultados. Esta arquitectura es empleada debido al gran volumen de procesamiento de datos que tienen que llevar a cabo a tiempo real, transformando en la ejecución en la nube (ya sea a través de una librería, un cliente, o una api) como la opción más viable para un usuario promedio, que no posee el hardware necesario para ejecutarlo satisfactoriamente.
En este proyecto he decidido usar NLPCloud por varios motivos. Primero, es un servidor en el que cualquiera puede subir sus propios modelos con su dataset específico, así como nos deja elegir el modelo a usar a la hora de llamarlo a través de la API. Segundo, el acceso a la API, a pesar de ciertas limitaciones como el número de peticiones por hora a ciertos modelos, como veremos más adelante, es totalmente gratuito. Y por último, porque el manejo en sí es muy sencillo, lo cual lo vuelve muy adaptable y permite su integración en diversos proyectos.
Requisitos previos. Token y creación proyecto
Para poder conectarnos con uno de estos modelos necesitamos cumplir dos pasos muy sencillos. El primero, necesitamos un token de acceso que irá en el encabezado de la petición a la API. Para ello debemos simplemente acceder a su web y registrarnos, dando nuestros datos reales (el número de teléfono lo piden de cara a evitar cuentas duplicadas). Metemos nuestros datos, confirmamos el email y el teléfono, y ya estaría
Una vez estemos registrados correctamente, accedemos a nuestro perfil a través de este enlace. Aquí veremos nuestro token, que tendremos que guardarnos a mano ya que va a ser la «llave» que nos desbloquee el acceso a las peticiones de la API.
A continuación ya podemos crear nuestro proyecto vue. Para ello vamos a la carpeta donde queremos alojar el proyecto, escribimos «cmd» en la barra de navegación, y dentro de la consola escribimos los siguientes comandos
Si fuese nuestro primer proyecto en vue, antes habría que escribir el comando «npm install -g @vue/cli» para añadir la librería, así como el «npm install vue bootstrap boostrap -vue» para la librería de los estilos Bootstrap. Una vez creado el proyecto, el último comando del bloque de arriba nos abrirá un puerto para realizar una conexión en local con el servidor, que dejaremos en un navegador para visualizar el html de nuestro proyecto.
Desarrollo de la solución
Primero añadimos los componentes con los que vamos a trabajar (un componente realizará una petición a un modelo para resumir textos, otro para generar imágenes, y finalmente otro para traducir textos), uno para el home, y un menú y los enrutamos en un archivo Router.js que nos vamos a crear también
En el router enrutamos todos los componentes, en el menú copiamos este navbar de la documentación oficial de Bootstrap, sustituimos las rutas por defecto por nuestras rutas personalizadas, y luego modificamos el main.js y App.vue para introducir nuestro router así como nuestro menú. Finalmente modificamos index.html para añadir las referencias a Bootstrap. Con esto tendremos hecha la estructura y la navegación del programa.
Conexión con la api
Vamos al primer componente, el de resumir. Dejamos de momento el html (contenido en las etiquetas <template></template>) vacío. En el <script> </script> vamos a añadir un método (yo lo he llamado «prueba») que realizará la conexión con la api cuando sea llamado, en este caso cuando pulsemos el botón del formulario. Primero vamos a la documentación oficial de la api de NLPCloud y buscamos la herramienta que vamos a utilizar, en el apartado Endpoints (en el que explica conexiones con modelos preentrenados) vamos a la parte «summarization» donde nos figura la estructura de la petición para el modelo que nos resume textos con un ejemplo.
Como se puede observar, tenemos un encabezado en el que figura la url (api.nlpcloud) + el modelo a usar (<model_name>) + el request (/summarization). A continuación tenemos el token que debimos guardarnos antes, el content type que no hace falta especificar en nuestro header porque se queda por defecto, y finalmente se hace el POST mandando como «data» el texto a resumir. De esta forma, diseñamos nuestra petición recogiendo el valor del texto a través de un v-model a una caja de texto llamada «textoAResumir». Creamos el header especificando nuestro token, elegimos un modelo que nos permite realizar esta herramienta («bart-large-cnn», por ejemplo), y construimos la petición enlazando la url, el data «text», y los headers, y recogemos la respuesta (recogida en el valor response.data.summary_text, como podemos ver más arriba en el output de la api) en otra variable llamada textoResumido. Al inicio del método se ha añadido una validación «if(this.textoAResumir…)» para evitar enviar peticiones vacías a la api.
Finalmente, rellenamos el template con un form para recoger el texto, y un label que se actualizará con el texto enviado de vuelta por la api
El componente enlazado a un modelo generador de imágenes (en este caso Stable Diffusion) va a ser muy similar, como podemos ver la estructura de la petición
El input es exactamente el mismo cambiando el modelo por el citado y la request por «/image-generation». El output es un string url de un servidor en la cual se alojará la imagen generada (un png de 512×512 píxeles). Es por ello que la estructura del método del componente que llame a la api es exactamente la misma. Esto es lo que mencioné en la introducción, que una vez diseñemos una petición correcta, el resto son muy similares, teniendo que fijarnos únicamente en los parámetros adiciones en el envío de datos, como veremos en el último componente.
En el template el único cambio sustancial es que el output de la api, «this.urlImagen = response.data.url» lo vamos a incluir en un <a><img src=»this.urlImagen»>…» para visualizar la imagen desde nuestro programa. NOTA: este modelo, el Stable Diffusion, tiene bastantes limitaciones con el número de peticiones por cliente ya que el procesamiento es más pesado por cada petición. Es por ello que si hacemos pruebas repetidas veces la api nos acabará devolviendo el error 429 continuamente, que sencillamente significa que hemos realizado muchas peticiones simultáneas y debemos esperarnos. Esto es una de las limitaciones que comenté al principio de trabajar con modelos en remoto, y dependiendo del modelo tenemos que tenerlo presento a la hora de diseñar nuestro programa.
El aspecto del template con el formulario y la imagen a generar sería el siguiente (he añadido un <div v-if=»this.urlImagen!=»»> para que la imagen no se dibuje hasta que la api no haya devuelto una url).
Y finalmente, el componente traductor. Esta api es algo más compleja, ya que en su petición hay que añadir además como parámetros del data «source» y «target», que serán los idiomas origen y destino. Cada idioma tiene un código asociado que se puede consultar en la documentación oficial de la api. Estos códigos de idiomas serán los «value» de un select que preguntará por el idioma origen y destino. El aspecto del template por tanto será el siguiente
Y recogiendo dichos valores, los introduciremos como «source» y «target» en el data, introducimos el texto a traducir, en la url el modelo a usar «nllb-200-3-3b» (licenciado por Facebook) y la request «/translation», y recogemos el valor «translation_text» del response en una variable «textoTraducido» que luego será pintada en un label en el template.
Y con esto ya tendríamos 3 componentes funcionales dentro de nuestro proyecto, cada uno utilizando requests distintas llamando a distintos modelos pero integrados dentro del mismo servidor, con la facilidad que eso nos da (hemos utilizado el mismo token todo el rato para todos los modelos). Evidentemente esto tan sólo es la superficie, como ya mencioné, NLP también nos ofrece crear y entrenar nuestros propios modelos desde 0, y luego subirlos a su servidor para poder generar nuestros propios request. Pero eso ya es materia de otro post. Espero que les haya sido útil mi explicación. En el pie del artículo pueden encontrar el repositorio. Un saludo
Autor: Sergio Guijarro de Cabo
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar
Año académico: 2022-2023
Enlace repositorio: https://github.com/SergioGuijarrodeCabo/proyectovuenplsg.git
Mi Linkedln: www.linkedin.com/in/sergio-guijarro-de-cabo-a60851146