Fomenta opiniones útiles sobre productos con la IA web integrada en el dispositivo

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

Las opiniones positivas y negativas pueden informar la decisión de compra del comprador.

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

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

  • Verifica la toxicidad de cada opinión antes de enviarla. Podríamos recomendarles a los usuarios que eliminen 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.
    • Negativa: Esta bolsa apesta y la odio.
    • Negativo con comentarios útiles: Las cremalleras son muy rígidas y el material parece económico. Devolví esta bolsa.
  • Genera automáticamente una calificación basada en el idioma usado en la opinión.
  • Determina si la opinión es negativa o positiva.
Captura de pantalla de una opinión de ejemplo con una opinión y una calificación por estrellas.
En este ejemplo, se le da una opinión positiva al comentario del revisor y se le otorga 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 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) ofrecen soluciones sólidas para muchas aplicaciones, en esta guía nos enfocamos en la IA web en el dispositivo. La IA web en el dispositivo ocurre cuando los modelos de IA se ejecutan en el navegador para mejorar la experiencia de los usuarios web sin recorridos de ida y vuelta en el servidor.

En este codelab, usamos una combinación de técnicas para mostrarte lo que hay en tu caja de herramientas de IA web en el dispositivo.

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 inferencia y entrenamiento en la Web.
  • transformers.js para realizar un 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 ligeros y abiertos diseñados a partir de la investigación y la tecnología que Google utilizó 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 sobre la UX y la seguridad

Para garantizar una experiencia del usuario y una seguridad óptimas, existen algunas consideraciones:

  • Permite que el usuario edite la calificación. En última instancia, el usuario debe tener la palabra final en la calificación del producto.
  • Deja claro al usuario que la calificación y las opiniones son automáticas.
  • Permitir que los usuarios publiquen una opinión clasificada como tóxica, pero que ejecuten 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 omitir la verificación del cliente.
  • Una verificación de toxicidad del cliente es útil, pero se puede eludir. Asegúrate de ejecutar también una verificación del servidor.

Analiza la toxicidad con TensorFlow.js

Puedes comenzar a analizar rápidamente la toxicidad de la opinión de un usuario con TensorFlow.js.

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

Este modelo puede clasificar la toxicidad por ataques de identidad, insultos, obscenidades y 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 e 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 opiniones debería ser mucho más rápido.

  3. Clasifica la opinión de forma asíncrona. Usa un umbral personalizado a fin de establecer el nivel de confianza que consideras útil 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
}

Sugiere una calificación por estrellas con Gemma y MediaPipe

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

Esta nueva capacidad es particularmente transformadora si se tienen en cuenta las demandas de memoria y procesamiento de los LLM, que son más de cien veces más grandes que los modelos tradicionales integrados en el dispositivo. Las optimizaciones en la pila integrada en el dispositivo hacen que esto sea 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 e importa la API de inferencia del LLM de MediaPipe.
  2. Descarga un modelo. Aquí, usamos Gemma 2B, que se descargó de Kaggle. Gemma 2B es el modelo de peso abierto más pequeño de Google.
  3. Apunta el código a los archivos del 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 del LLM de MediaPipe. Prepara el modelo para su uso: especifica la ubicación del modelo, la longitud preferida de las respuestas y el nivel preferido de creatividad con la temperatura.
  5. Envía una instrucción al modelo (consulta un ejemplo).
  6. Espera la respuesta del modelo.
  7. Analizar la calificación: Extrae la calificación por 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);

Instrucción de ejemplo

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/AA. El diseño de una instrucción requiere iteraciones, pero el resto del código corresponde al desarrollo web estándar.

Los modelos integrados en el dispositivo son bastante precisos. Si ejecutas los fragmentos de este documento, observarás que el análisis de opiniones y la toxicidad dan resultados precisos. En su mayor parte, las calificaciones de Gemma coincidieron con las calificaciones del modelo Gemini de algunas revisiones de referencia probadas. Para validar esa exactitud, se requieren más pruebas.

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

La inferencia puede ser extremadamente rápida. Si ejecutas los fragmentos de este documento, deberías observar que la inferencia puede ser rápida, potencialmente más rápida que las idas y vueltas del servidor, en varios dispositivos. Dicho esto, la velocidad de inferencia puede variar mucho. Se requieren comparativas completas en los dispositivos de destino. Esperamos que la inferencia en el dispositivo sea cada vez más rápida gracias a las actualizaciones de GPU web, WebAssembly y bibliotecas. Por ejemplo, Transformers.js agrega compatibilidad con GPU web en v3, lo que puede acelerar la inferencia en el dispositivo de muchas 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. Por lo general, para ejecutar la IA en el navegador, necesitas una biblioteca y un modelo, que aumentan el tamaño de descarga de la app web.

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

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

Próximos pasos

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