Uso de IA en el dispositivo para mejorar el contenido del CMS de Webflow

La mayoría de las interacciones de las personas con la IA se realizan a través de bots y herramientas útiles (o eso esperamos) como ChatGPT. La IA puede utilizarse en casi cualquier lugar para mejorar y ampliar la experiencia (de nuevo, eso esperamos). Una de las nuevas fronteras para la IA se encuentra directamente en el propio navegador web, gracias a los esfuerzos del equipo de Google Chrome. La función de IA integrada de Chrome tiene como objetivo llevar la potencia de un modelo de lenguaje extenso (LLM) directamente al navegador del usuario. Por supuesto, esto se presenta en una forma algo más reducida, utilizando el modelo Gemini Nano, pero aun así aporta una gran potencia a los desarrolladores web. Y lo que es mejor, puede ejecutarse completamente sin conexión y, básicamente, de forma gratuita. ¡No se requieren claves de API!

Esta función aún está en sus inicios y cambia rápidamente, pero, en términos generales, el equipo de Chrome admite API centradas en tareas, así como una API de solicitud de propósito general. Las funciones actuales incluyen:

• Detección y traducción de idiomas
• Redacción y reescritura de texto según el tono y la longitud
• Resumen de contenido
• Corrección de textos
• Solicitudes de propósito general

En este momento, se trata de una función exclusiva de Chrome, pero es probable que otros navegadores basados en Chromium (como Microsoft Edge) también la admitan. Incluso dentro de Chrome, la compatibilidad aún no está implementada al 100%. El equipo de Chrome cuenta con una página de estado y resumen de la API que indica claramente qué está disponible de forma general, así como qué está disponible para Chrome frente a las extensiones de Chrome.

Teniendo todo esto en cuenta, es posible que dudes en considerar esta función, pero recuerda que es un gran ejemplo de cómo entra en juego la mejora progresiva. Dada la cuota de mercado de Chrome, cuando todas estas API estén disponibles de forma general en la versión lanzada de Chrome, un porcentaje significativo de usuarios tendrá acceso a ellas. Además, por su propia naturaleza, muchas de estas API pueden actuar como ayudantes útiles. Por ejemplo, ofrecer la capacidad de resumir el contenido de una página es una gran incorporación, aunque no sea algo estrictamente necesario.

Bien, con todo esto en mente, ¿cómo podemos aprovechar realmente estas API? Un ejemplo es utilizar la IA para analizar el sentimiento y marcar el contenido generado por el usuario como positivo o negativo para realizar revisiones rápidas y de alto nivel.

La API de Prompts a grandes rasgos

La API que estoy usando para mi demostración de hoy es la API de Prompts. Esta es la API de propósito general que resultará más útil para esta demostración en particular. En el momento en que se escribe esta entrada de blog, la API de Prompts para Chrome (no para extensiones) está detrás de una bandera: "Prompt API for Gemini Nano". Debe habilitarse en chrome://flags antes de poder utilizarla. Cuando se lance oficialmente, esto ya no será necesario.

También existen requisitos de hardware bastante estrictos. Como desarrollador, no puedes hacer nada al respecto, pero es algo que debes tener en cuenta si tu audiencia utiliza principalmente dispositivos antiguos y de menor potencia. El código en sí gestiona este requisito de hardware por nosotros, por lo que no hay nada especial que debas comprobar.

El requisito final es bastante interesante. Dado que estamos hablando de descargar un modelo grande, Chrome restringe solo el aspecto de la descarga hasta que el usuario tenga una "interacción significativa" con la página. Este es un cambio reciente en la función y puede ser un poco complicado si no lo esperas. Su documentación para desarrolladores entra en detalles, pero la solución más sencilla es simplemente colocar la interacción (lo que sea que estés haciendo con la IA) detrás de un clic en un botón. Y dado que algunas personas no quieren usar IA, esto también les da la opción de elegir.

Bien, hablando de código, el primer paso es simplemente comprobar la existencia de la propia API:

if(!('LanguageModel' in window)) {
    // either silently ignore, or let the user know
    return;
}

Si el usuario dispone de la API de modelo de lenguaje, el siguiente paso es utilizar el método availability, que realiza algunas comprobaciones:

• Comprueba los requisitos de hardware mencionados anteriormente y, si se determina que el dispositivo no puede admitir la API, se devolverá unavailable.
• Si todo está correcto, se devolverá available.
• El modelo utilizado por la función de IA de Chrome, Nano, es "pequeño", pero ese es un término relativo. Sigue siendo un modelo LLM que ocupará algo de espacio en el disco duro del usuario. Afortunadamente, cualquier sitio web puede utilizarlo y el usuario no tiene que descargarlo para cada sitio que haga uso de la función. Pero para gestionar este estado, el método availability también puede devolver downloadable y downloading. En este caso, la API será utilizable una vez que finalice la descarga. Verás cómo gestionar esto en un momento.

Aquí tienes un ejemplo:

const availability = await LanguageModel.availability();

Una vez que hayas determinado que el usuario puede utilizar la API (el resultado debería ser uno de los siguientes: available, downloadable o downloading), puedes crear una sesión. La sesión representa tu interacción con el modelo de IA, y cada una de las API tiene varias opciones que puedes utilizar para personalizar cómo funcionará la sesión. Recuerda: esto puede tener que ocurrir después de que el usuario interactúe con la página web.

Para la API de Prompts, podemos mantenerlo bastante simple:

// Copied from the docs: https://developer.chrome.com/docs/ai/prompt-api#use_the_prompt_api
const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Ten en cuenta que el argumento pasado al método create es un controlador de eventos para la descarga. En este ejemplo, se registra un mensaje en la consola, pero en casi todos los casos de uso reales, querrás informar al usuario actualizando el DOM. No es obligatorio y no siempre tiene que mostrarse, pero por lo general deberías hacerlo (en la demostración que comparto, en realidad no lo hago, ya que no tiene sentido en el contexto).

Como nota rápida, incluso si el modelo se ha descargado y el resultado del método availability fue available, el controlador de eventos para downloadprogress siempre se dispara dos veces: una con un valor loaded de 0 y otra con 1. Esto es instantáneo, pero es algo que debes tener en cuenta si estás informando al usuario sobre el progreso.

Por fin, ya puedes llamar al modelo:

let result = await session.prompt('Why are cats so much better than dogs?');

El resultado es un valor de cadena que puedes usar como mejor te parezca.

Esa es la idea principal, pero como puedes imaginar, las integraciones complejas de IA son posibles y requerirán bastante más trabajo. Echemos un vistazo a un caso de uso real para esto dentro de Webflow.

Uso de IA con contenido del CMS de Webflow

En mi sitio de Webflow, tengo una serie de reseñas de productos creadas por clientes que quiero actualizar para reflejar si son positivas, negativas o neutrales. Estas reseñas son solo bloques de texto, un nombre y una fecha en la que se creó la reseña.

En mi sitio, creé una página y añadí un componente de Lista de colección vinculado a mis reseñas, ordenadas por la fecha de creación. Hice un poco de diseño en el bloque de elemento de colección para mostrar cada reseña con un borde azul a la derecha. Puedes verlo tú mismo aquí, pero aquí tienes una captura de pantalla:

Ahora mismo, esta página está bien. ¡Funciona! Pero, ¿cómo podemos usar la IA en el dispositivo para mejorarla?

Al observar cada reseña, podemos usar JavaScript para acceder al texto de la reseña en sí. Luego, podemos comprobar el sentimiento de cada una de estas reseñas. Después, podemos aplicar estilos a las reseñas para resaltar el sentimiento positivo o negativo. Lo importante es recordar que esta es una función adicional de la página: una mejora para aquellas personas que realmente pueden usarla.

Muy bien, vamos a ello. En el Diseñador de Webflow, fui a la configuración de mi página y utilicé la función de Código personalizado, específicamente el código que se coloca antes de la etiqueta </body>. Empecemos con un poco de código de configuración:

async function canDoIt() {
	if(!window.LanguageModel) return false;
	return (await LanguageModel.availability()) !== 'unavailable';
}

document.addEventListener('DOMContentLoaded', init, false);

async function init() {
		
	let canWe = await canDoIt();
	if(!canWe) {
		return;
	}

	console.log('This browser can do AI stuff.');

  let reviewList = document.querySelector('#reviewList');
  let btnHTML = `
  <p>
  <button onclick="doReviews()">Use AI to Categorize Reviews</button>
  </p>
  `;
  reviewList.insertAdjacentHTML('beforebegin',btnHTML);
}

Para empezar, uso mi controlador DOMContentLoaded para ejecutar código cuando se carga la página; lo primero es una llamada a la función de utilidad canDoIt() (que admito no es el mejor nombre), que realiza la detección de funciones base seguida de una llamada a availability en el objeto LanguageModel. En este caso, estamos mejorando la página, así que no hay necesidad de avisar al usuario si algo sale mal. La vida es perfecta. Continúa.

Si el modelo de IA es compatible, debemos añadir algún tipo de interacción del usuario para poner las cosas en marcha. Técnicamente, esto solo es realmente necesario cuando el estado es descargando o descargable, así que podrías omitirlo si lo deseas. Mi solución fue sencilla: añadir un botón con un evento click que activará el trabajo específico de la IA e insertarlo antes de las reseñas. Puedes verlo a continuación:

Muy bien, ahora viene la parte compleja. Por lo general, nuestro proceso se desglosará en:

• Obtener todas las reseñas, que son llamadas simples a la API del DOM.
• Para cada conjunto de texto de reseña, realizar un análisis de sentimiento.
• Según el resultado, aplicar un estilo CSS que represente positivo o negativo. Los elementos intermedios no se tocarán y mantendrán su estilo azul.

Veamos eso. Primero, doReviews:

async function doReviews() {
	let session = await LanguageModel.create({
		initialPrompts: [
			{role:'system', content:'You rate the sentiment value of text, giving it a score from 0 to 1 with 0 being the most negative, and 1 being the most positive.'}
		]
	});
	
  let reviews = document.querySelectorAll('div.review');

	console.log('Kicking off review analyzing.');
  
  // each review element is the wrapper dom
  
	for(let i=0; i<reviews.length; i++) {
  	let reviewText = reviews[i].querySelector('p').innerText;
    console.log('reviewText', reviewText);
		let result = await session.prompt([
			{
				role:"user",
				content: [ { type: "text", value:reviewText } ]
			}], { responseConstraint: schema });
		
		/*
			logic for display is:
			if result is <= 0.2, negative
			if result >= 0.7, positive
		*/

		if(result <= 0.2) {
			console.log('negative');
			reviews[i].classList.add('review-negative');
		} else if(result >= 0.7) {
			console.log('positive');
			reviews[i].classList.add('review-positive');
		} else console.log('neutral');
	
	}
}

Comenzamos creando una sesión con nuestro modelo y pasando un prompt del sistema, una característica estándar en la IA generativa que ayuda a dirigir la salida del modelo hacia lo que necesitamos (en este caso, un valor numérico de sentimiento). Refinaremos esto un poco más en un momento.

A continuación, las reseñas se obtienen mediante querySelectorAll, y para cada una, el código comienza capturando el texto del primer párrafo. Luego, se ejecuta una llamada al método prompt en nuestro objeto de sesión con el valor de esa reseña. Observa la parte de responseConstraint. Este es un ejemplo de salida estructurada, donde nuestro código especifica la respuesta exacta que debe obtener de la API. Esto se hace mediante JSON Schema y se definió anteriormente en nuestro código:

const schema = {
	title:"Sentiment",
	description:"A rating of the sentiment (bad versus good) of input text.",
	type:"number", 	
	minimum:0,
	maximum:1
};

JSON Schema puede ayudar a definir estructuras de datos increíblemente complejas, pero para esta demostración, solo necesitamos asegurarnos de que el resultado caiga en un rango de 0 a 1. La parte final maneja el valor de "qué es negativo" y "qué es positivo", lo cual, para ser honesto, es algo en lo que quizás quieras pensar detenidamente. Mucho dependerá de la naturaleza de tu producto, las reseñas, la audiencia, etcétera. En este caso, se aplicó uno de los dos estilos CSS. También añadí esto en la configuración de mi página:

<style>
.review-positive {
  border-left: 4px solid #00FF00; 
}

.review-negative {
  border-left: 4px solid #FF0000; 
}
</style>

El resultado neto es el siguiente: el usuario (en un navegador Chrome, por ahora) accede al sitio y, una vez que se detecta la compatibilidad con IA, se añade el botón en la parte superior. Después de que se descarga el modelo (que es una operación única para todos los sitios), si hacen clic, las reseñas se comprobarán y se codificarán por colores en consecuencia. Si tienes la última versión de Google Chrome y has habilitado la bandera adecuada, puedes verlo tú mismo aquí: https://chrome-ai-test.webflow.io/review-demo-page. Por supuesto, incluso si no estás en Chrome, puedes acceder a esa URL y no pasará nada malo.

Aquí tienes una captura de pantalla en acción:

Próximos pasos

Añadir un estilo codificado por colores a las reseñas es solo un ejemplo de cómo se puede utilizar esta nueva y genial API. Otros ejemplos incluyen:

• Añadir un botón para filtrar solo las reseñas positivas o negativas
• Añadir un botón para crear resúmenes generales de las reseñas

Por si no ha quedado claro con las múltiples advertencias anteriores, esta nueva función es todavía bastante experimental. Dicho esto, creo sinceramente que poder usar IA generativa directamente en el dispositivo y gratis será una pasada, sobre todo cuando permite mejorar progresivamente la experiencia de tu sitio web. Si quieres saber más, echa un vistazo a la documentación y explora también las otras API.