Fomenta opiniones sobre productos útiles con la IA web del cliente

Maud Nalpas
Maud Nalpas
Kenji Baheux
Kenji Baheux
Alexandra Klepper
Alexandra Klepper

Fecha de publicación: 16 de mayo de 2024

Las opiniones positivas y negativas pueden fundamentar la decisión de compra de un comprador.

Según una investigación externa, el 82% de los compradores en línea buscan activamente opiniones negativas antes de realizar una compra. Estas opiniones negativas son útiles para los clientes y las empresas, ya que la disponibilidad de opiniones negativas puede ayudar a reducir los porcentajes de devoluciones y a que los creadores mejoren sus productos.

Estas son algunas maneras de mejorar la calidad de las opiniones:

  • Verifica la toxicidad de cada opinión antes de enviarla. Podríamos alentar a los usuarios a quitar el lenguaje ofensivo, así como otros comentarios poco útiles, para que sus opiniones ayuden a otros usuarios a tomar una mejor decisión de compra.
    • Negativo: Este bolso es pésimo y lo odio.
    • Negativo con comentarios útiles Las cremalleras son muy rígidas y el material se siente barato. Devolví esta bolsa.
  • Generar automáticamente una calificación según el idioma que se usa en la opinión
  • Determinar si la opinión es negativa o positiva.
Captura de pantalla de una opinión de ejemplo con un sentimiento y una calificación por estrellas.
En este ejemplo, el comentario del revisor recibe una opinión positiva y una calificación de cinco estrellas.

En última instancia, el usuario debe tener la última palabra sobre la calificación del producto.

En el siguiente codelab, se ofrecen soluciones del cliente, integradas en el dispositivo y en el navegador. No se requieren conocimientos de desarrollo de IA, servidores ni claves de API.

Requisitos previos

Si bien la IA del servidor con soluciones (como la API de Gemini o la API de OpenAI) ofrece soluciones sólidas para muchas aplicaciones, en esta guía nos enfocamos en la IA web del cliente. La inferencia de IA del cliente se produce en el navegador para mejorar la experiencia de los usuarios web quitando los viajes de ida y vuelta del servidor.

En este codelab, usamos una combinación de técnicas para mostrarte lo que tienes en tu caja de herramientas para la IA del cliente.

Usamos las siguientes bibliotecas y modelos:

  • TensforFlow.js para el análisis de toxicidad TensorFlow.js es una biblioteca de aprendizaje automático de código abierto para la inferencia y el entrenamiento en la Web.
  • transformers.js para el análisis de opiniones. Transformers.js es una biblioteca de IA web de Hugging Face.
  • Gemma 2B para obtener calificaciones por estrellas. Gemma es una familia de modelos abiertos y ligeros creados a partir de la investigación y la tecnología que Google usó para crear los modelos de Gemini. Para ejecutar Gemma en el navegador, lo usamos con la API experimental de inferencia de LLM de MediaPipe.

Consideraciones de UX y seguridad

Hay algunas consideraciones para garantizar una experiencia del usuario y una seguridad óptimas:

  • Permite que el usuario edite la calificación. En última instancia, el usuario debe tener la palabra final sobre la calificación del producto.
  • Deja claro al usuario que la calificación y las opiniones son automáticas.
  • Permitir que los usuarios publiquen opiniones clasificadas como tóxicas, pero ejecutar una segunda verificación en el servidor Esto evita una experiencia frustrante en la que una opinión no tóxica se clasifica por error como tóxica (un falso positivo). Esto también abarca los casos en los que un usuario malicioso logra eludir la verificación del cliente.
  • Una verificación de toxicidad del cliente es útil, pero se puede omitir. Asegúrate de también ejecutar una verificación del servidor.

Analiza la toxicidad con TensorFlow.js

Con TensorFlow.js, puedes comenzar a analizar rápidamente la toxicidad de una opinión de un usuario.

  1. Instala y import la biblioteca de TensorFlow.js y el modelo de toxicidad.
  2. Establece una confianza mínima para la predicción. El valor predeterminado es 0.85 y, en nuestro ejemplo, lo configuramos en 0.9.
  3. Carga el modelo de forma asíncrona.
  4. Clasificar la opinión de forma asíncrona Nuestro código identifica las predicciones que superan un umbral de 0.9 para cualquier categoría.

Este modelo puede categorizar la toxicidad en ataques de identidad, insultos, obscenidad y mucho más.

Por ejemplo:

import * as toxicity from '@tensorflow-models/toxicity';

// Minimum prediction confidence allowed
const TOXICITY_COMMENT_THRESHOLD = 0.9;

const toxicityModel = await toxicity.load(TOXICITY_COMMENT_THRESHOLD);
const toxicityPredictions = await toxicityModel.classify([review]);
// `predictions` is an array with the raw toxicity probabilities
const isToxic = toxicityPredictions.some(
    (prediction) => prediction.results[0].match
);

Determina la opinión con Transformers.js.

  1. Instala y, luego, importa la biblioteca Transformers.js.

  2. Configura la tarea de análisis de opiniones con una canalización dedicada. Cuando se usa una canalización por primera vez, el modelo se descarga y se almacena en caché. A partir de ese momento, el análisis de sentimientos debería ser mucho más rápido.

  3. Clasifica la opinión de forma asíncrona. Usa un umbral personalizado para establecer el nivel de confianza que consideres utilizable para tu aplicación.

Por ejemplo:

import { pipeline } from '@xenova/transformers';

const SENTIMENT_THRESHOLD = 0.9;
// Create a pipeline (don't block rendering on this function)
const transformersjsClassifierSentiment = await pipeline(
  'sentiment-analysis'
);

// When the user finishes typing
const sentimentResult = await transformersjsClassifierSentiment(review);
const { label, score } = sentimentResult[0];
if (score > SENTIMENT_THRESHOLD) {
  // The sentiment is `label`
} else {
  // Classification is not conclusive
}

Cómo sugerir una calificación por estrellas con Gemma y MediaPipe

Con la API de LLM Inference, puedes ejecutar modelos grandes de lenguaje (LLM) por completo en el navegador.

Esta nueva función es particularmente transformadora, teniendo en cuenta las demandas de procesamiento y memoria de los LLM, que son más de cien veces más grandes que los modelos del cliente. Las optimizaciones en la pila web hacen esto posible, incluidas las operaciones nuevas, la cuantización, el almacenamiento en caché y el uso compartido de pesos. Fuente: "Large Language Models On-Device with MediaPipe and TensorFlow Lite".

  1. Instala y, luego, importa la API de inferencia de LLM de MediaPipe.
  2. Descarga un modelo. Aquí, usamos Gemma 2B, que se descargó de Kaggle. Gemma 2B es el más pequeño de los modelos de ponderación abierta de Google.
  3. Apunta el código a los archivos de modelo correctos con FilesetResolver. Esto es importante porque los modelos de IA generativa pueden tener una estructura de directorio específica para sus recursos.
  4. Carga y configura el modelo con la interfaz de LLM de MediaPipe. Prepara el modelo para su uso: especifica su ubicación, la longitud preferida de las respuestas y el nivel de creatividad preferido con la temperatura.
  5. Proporciona una instrucción al modelo (consulta un ejemplo).
  6. Espera la respuesta del modelo.
  7. Analiza la calificación: Extrae la calificación con estrellas de la respuesta del modelo.
import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';

const mediaPipeGenAi = await FilesetResolver.forGenAiTasks();
const llmInference = await LlmInference.createFromOptions(mediaPipeGenAi, {
    baseOptions: {
        modelAssetPath: '/gemma-2b-it-gpu-int4.bin',
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.5,
    randomSeed: 101,
});

const prompt = 
const output = await llmInference.generateResponse(prompt);

const int = /\d/;
const ratingAsString = output.match(int)[0];
rating = parseInt(ratingAsString);

Ejemplo de instrucción

const prompt = `Analyze a product review, and then based on your analysis give me the
corresponding rating (integer). The rating should be an integer between 1 and 5.
1 is the worst rating, and 5 is the best rating. A strongly dissatisfied review
that only mentions issues should have a rating of 1 (worst). A strongly
satisfied review that only mentions positives and upsides should have a rating
of 5 (best). Be opinionated. Use the full range of possible ratings (1 to 5). \n\n
  \n\n
  Here are some examples of reviews and their corresponding analyses and ratings:
  \n\n
  Review: 'Stylish and functional. Not sure how it'll handle rugged outdoor use,
  but it's perfect for urban exploring.'
  Analysis: The reviewer appreciates the product's style and basic
  functionality. They express some uncertainty about its ruggedness but overall
  find it suitable for their intended use, resulting in a positive, but not
  top-tier rating.
  Rating (integer): 4
  \n\n
  Review: 'It's a solid backpack at a decent price. Does the job, but nothing
  particularly amazing about it.'
  Analysis: This reflects an average opinion. The backpack is functional and
  fulfills its essential purpose. However, the reviewer finds it unremarkable
  and lacking any standout features deserving of higher praise.
  Rating (integer): 3
  \n\n
  Review: 'The waist belt broke on my first trip! Customer service was
  unresponsive too. Would not recommend.'
  Analysis: A serious product defect and poor customer service experience
  naturally warrants the lowest possible rating. The reviewer is extremely
  unsatisfied with both the product and the company.
  Rating (integer): 1
  \n\n
  Review: 'Love how many pockets and compartments it has. Keeps everything
  organized on long trips. Durable too!'
  Analysis: The enthusiastic review highlights specific features the user loves
  (organization and durability), indicating great satisfaction with the product.
  This justifies the highest rating.
  Rating (integer): 5
  \n\n
  Review: 'The straps are a bit flimsy, and they started digging into my
  shoulders under heavy loads.'
  Analysis: While not a totally negative review, a significant comfort issue
  leads the reviewer to rate the product poorly. The straps are a key component
  of a backpack, and their failure to perform well under load is a major flaw.
  Rating (integer): 1
  \n\n
  Now, here is the review you need to assess:
  \n
  Review: "${review}" \n`;

Conclusiones

No se requiere experiencia en IA o AA. El diseño de una instrucción requiere iteraciones, pero el resto del código es desarrollo web estándar.

Los modelos del cliente son bastante precisos. Si ejecutas los fragmentos de este documento, observarás que tanto el análisis de toxicidad como el de opiniones proporcionan resultados precisos. En su mayoría, las calificaciones de Gemma coincidieron con las calificaciones del modelo de Gemini de algunas opiniones de referencia probadas. Para validar esa precisión, se requieren más pruebas.

Dicho esto, diseñar la instrucción para Gemma 2B requiere trabajo. Como Gemma 2B es un LLM pequeño, necesita una instrucción detallada para producir resultados satisfactorios, en particular más detallados que los que se requieren con la API de Gemini.

La inferencia puede ser muy rápida. Si ejecutas los fragmentos de este documento, deberías observar que la inferencia puede ser rápida, posiblemente más rápida que los viajes de ida y vuelta del servidor, en varios dispositivos. Dicho esto, la velocidad de inferencia puede variar mucho. Se necesitan comparativas exhaustivas en los dispositivos de destino. Esperamos que la inferencia del navegador sea más rápida con las actualizaciones de WebGPU, WebAssembly y de la biblioteca. Por ejemplo, Transformers.js agrega compatibilidad con GPU web en la versión 3, que puede acelerar la inferencia en el dispositivo varias veces.

Los tamaños de descarga pueden ser muy grandes. La inferencia en el navegador es rápida, pero cargar modelos de IA puede ser un desafío. Para realizar IA en el navegador, por lo general, necesitas una biblioteca y un modelo, que se agregan al tamaño de descarga de tu app web.

Mientras que el modelo de toxicidad de TensorFlow (un modelo clásico de procesamiento de lenguaje natural) es de solo unos pocos kilobytes, los modelos de IA generativa, como el modelo de análisis de opiniones predeterminado de Transformers.js, alcanzan los 60 MB. Los modelos de lenguaje grandes, como Gemma, pueden ser de hasta 1.3 GB. Esto supera la mediana de 2.2 MB de tamaño de página web, que ya es mucho mayor que lo recomendado para obtener el mejor rendimiento. La IA generativa del cliente es viable en situaciones específicas.

El campo de la IA generativa en la Web evoluciona rápidamente. Se espera que surgieron modelos más pequeños y optimizados para la Web en el futuro.

Próximos pasos

Chrome está probando otra forma de ejecutar la IA generativa en el navegador. Puedes registrarte en el programa de versión preliminar anticipada para probarlo.