Explora sugerencias de opiniones sobre productos con la IA del cliente

Maud Nalpas

Fecha de publicación: 21 de octubre de 2024

Las tiendas en línea pueden ver un 270% de aumento en las conversiones mostrando opiniones sobre productos. Las opiniones negativas también son clave ya que generan credibilidad. El 82% de los compradores en línea las busca antes de comprar.

Animar a los clientes a que dejen opiniones útiles sobre los productos, en especial cuando son negativas, puede ser complicado. Aquí, exploraremos cómo usar la IA generativa para ayudar los usuarios escriben opiniones informativas que ayudan a los demás decisiones de compra.

Demostración y código

Prueba nuestra demo de opiniones sobre productos y explora el código en GitHub.

Cómo lo hicimos

IA del cliente

Término clave: Si bien la mayoría de las funciones de IA en la Web dependen de los servidores, la IA del cliente se ejecuta directamente en el navegador del usuario. Esto ofrece beneficios como latencia baja, costos reducidos del servidor, sin requisitos de claves de API, mayor privacidad del usuario y acceso sin conexión. Puedes implementar IA del cliente que funcione en todos los navegadores con bibliotecas de JavaScript, como TensorFlow.js, Transformers.js y MediaPipe GenAI.

En esta demostración, implementamos la función del cliente por las siguientes razones:

• Latencia. Queremos ofrecer sugerencias rápidamente, deja de escribir. Podemos ofrecer esto evitando los viajes de ida y vuelta del servidor.
• Costo. Si bien esta es una demostración, si estás considerando lanzar una función similar en producción, es bueno experimentar sin costo del servidor hasta que puedas validar si la función tiene sentido para tus usuarios.

Precaución: Usa la IA del cliente para validar ideas de funciones antes de migrar a un para implementar la IA del servidor tiene algunas advertencias. A medida que migres, cambiarás modelos a partir de un LLM que es lo suficientemente pequeño para descargarse y usarse del lado del cliente, para un LLM del servidor mucho más grande. Es posible que debas rediseñar la instrucción, ya que los diferentes modelos pueden responder de manera diferente a la misma instrucción. Tu ingeniería de instrucciones puede ser menos precisa con un modelo más capaz. Obtén más información en Ingeniería práctica de instrucciones para LLM más pequeños.

IA generativa de MediaPipe

Elegimos usar Gemma 2B a través de la API de MediaPipe LLM Inference (Paquete de IA generativa de MediaPipe), por los siguientes motivos:

• Precisión del modelo: Gemma 2B ofrece un gran equilibrio entre tamaño y precisión. Cuando se le hizo la pregunta correcta, proporcionó resultados que consideramos satisfactorios para esta demostración.
• Compatibilidad con varios navegadores: MediaPipe es compatible con todos los navegadores que admiten WebGPU.

Experiencia del usuario

Aplica las prácticas recomendadas de rendimiento

Si bien Gemma 2B es un LLM pequeño, sigue siendo una descarga grande. Aplica las prácticas recomendadas de rendimiento, que incluyen el uso de un trabajador web.

Hacer que la función sea opcional

Queremos que las sugerencias de opiniones basadas en IA mejoren el flujo de trabajo del usuario para publicar una opinión sobre un producto. En nuestra implementación, el usuario puede publicar una opinión incluso si el no se cargó y, por lo tanto, no ofrece sugerencias para mejorar.

Figura 1: Los usuarios pueden seguir publicando su opinión, incluso cuando la IA La función aún no está lista.

Animaciones y estados de la IU

La inferencia suele tardar más tiempo de lo que se parecería inmediato, por lo que le indicamos al usuario que el modelo está ejecutando una inferencia o que está “pensando”. Usamos animaciones para facilitar el tiempo de espera y, al mismo tiempo, garantizar al usuario que la aplicación funciona según lo previsto. Descubre los diferentes estados de la IU que implementamos en nuestra demostración, según lo que diseñó Adam Argyle.

Figura 2: Las animaciones muestran que el modelo se está cargando, luego "pensar", y finalmente listo.

Otras consideraciones

En un entorno de producción, te recomendamos que hagas lo siguiente:

• Proporciona un mecanismo de comentarios. ¿Qué sucede si las sugerencias son mediocres o no tienen sentido? Implementa un mecanismo de comentarios rápidos (como Me gusta y No me gusta) y recurre a la heurística para determinar qué les resulta útil a los usuarios. Por ejemplo, evalúa cuántos de tus usuarios interactúan con la función y si la desactivan.
• Permitir inhabilitar ¿Qué sucede si el usuario prefiere usar sus propias palabras sin asistencia de IA o considera que la función es molesta? Permite que el usuario inhabilite la opción volver a habilitarlas según lo desees.
• Explica por qué existe esta función. Una explicación breve puede alentar a los usuarios a usar la herramienta de comentarios. Por ejemplo, "Los comentarios más útiles ayudan a los compradores a decidir qué comprar y nos ayudan a crear los productos que desean". Tú podrías agregar una explicación larga sobre cómo funciona la función y por qué tal vez como información vinculada a un vínculo.
• Divulga el uso de la IA cuando sea relevante. Con la IA del cliente, el contenido del usuario no se envían a un servidor para su procesamiento, por lo que se pueden mantener en privado. Sin embargo, si crea un resguardo del servidor o recopila información con IA considera agregarla a tu política de privacidad, a las condiciones del servicio o a otros lugares.

Implementación

Nuestra implementación del generador de sugerencias de opiniones sobre productos podría funcionar para una amplia variedad de casos de uso. Considera la siguiente información como base para tus futuras funciones de IA del cliente.

MediaPipe en un trabajador web

Con la inferencia de LLM de MediaPipe, el código de IA es de solo unas pocas líneas: crea un solucionador de archivos y un objeto de inferencia de LLM pasándole una URL de modelo y, luego, usa esa instancia de inferencia de LLM para generar una respuesta.

Sin embargo, nuestra muestra de código es un poco más amplia. Eso se debe a que es que se implementa en un trabajador web, por lo que pasa mensajes con la secuencia de comandos principal por códigos de mensaje personalizados. Obtén más información sobre este patrón.

Nota: La inferencia de MediaPipe se basa en la GPU, por lo que no afecta la instancia principal conversación. Sin embargo, los pasos de preparación del modelo pueden ralentizar el subproceso principal, por lo que es mejor moverlo a un trabajador web. Para simplificar, trasladamos todo nuestro código de IA a un trabajador web.

Precaución: En Firefox, WebGPU solo está disponible en un trabajador web detrás de una marca.

// Trigger model preparation *before* the first message arrives
self.postMessage({ code: MESSAGE_CODE.PREPARING_MODEL, payload: null });
try {
  // Create a FilesetResolver instance for GenAI tasks
  const genai = await FilesetResolver.forGenAiTasks(MEDIAPIPE_WASM);
  // Create an LLM Inference instance from the specified model path
  llmInference = await LlmInference.createFromModelPath(genai, MODEL_URL);
  self.postMessage({ code: MESSAGE_CODE.MODEL_READY, payload: null });
} catch (error) {
  self.postMessage({ code: MESSAGE_CODE.MODEL_ERROR, payload: null });
}

// Trigger inference upon receiving a message from the main script
self.onmessage = function (message) {
  if (!llmInference) {
    // Just in case. This condition shouldn't normally be hit because
    // the inference UI button is disabled until the model is ready
    throw new Error("Can't run inference, the model is not ready yet");
  }
  (async function () {
    // Run inference = Generate an LLM response
    try {
    const response = await llmInference.generateResponse(
      // Create a prompt based on message.data, which is the actual review
      // draft the user has written. generatePrompt is a local utility function.
      generatePrompt(message.data)
    );
    } catch (error) {
      self.postMessage({ code: MESSAGE_CODE.INFERENCE_ERROR, payload: null });
    }
    // Parse and process the output using a local utility function
    const reviewHelperOutput = generateReviewHelperOutput(response);
    // Post a message to the main thread
    self.postMessage({
      code: MESSAGE_CODE.RESPONSE_READY,
      payload: reviewHelperOutput,
    });
  })();
};

export const MESSAGE_CODE ={
  PREPARING_MODEL: 'preparing-model',
  MODEL_READY: 'model-ready',
  GENERATING_RESPONSE: 'generating-response',
  RESPONSE_READY: 'response-ready',
  MODEL_ERROR: 'model-error',
  INFERENCE_ERROR: 'inference-error',
};

INPUT y OUTPUT

Figura 3: Un diagrama que demuestra el procesamiento de la instrucción a través de la inferencia a un resultado LLM sin procesar, que luego se analiza en una recomendación de lectura para mostrar.

Nuestro prompt completo se compiló con instrucciones con varios ejemplos. Incluye la entrada del usuario o, en otras palabras, el borrador de la opinión que tiene. escrita.

Para generar nuestra instrucción a partir de la entrada del usuario, llamamos en tiempo de ejecución a nuestra función generatePrompt.

Los modelos y las bibliotecas de IA del cliente suelen tener menos utilidades que IA del servidor. Por ejemplo, el modo JSON a menudo no está disponible. Esto significa que debemos proporcionar la estructura de salida deseada dentro de la instrucción. Esto es menos claro, mantenible y confiable que proporcionar un esquema a través de la configuración del modelo. Además, los modelos del cliente suelen ser más pequeños, lo que significa que son más propensos a tener errores estructurales en su salida.

En la práctica, observamos que Gemma 2B hace un mejor trabajo para proporcionar un resultado estructurado como texto en comparación con JSON o JavaScript. Entonces, para esta demostración, optamos por un formato de salida basado en texto. El modelo genera texto que luego analizar los datos de salida en un objeto de JavaScript para procesarlos en nuestro sitio web .

Mejoramos nuestra instrucción

Figura 4: Le pedimos a Gemini Chat que mejore nuestra instrucción, y nos responde junto con una explicación de las mejoras realizadas y una advertencia sobre la eficacia.

Usamos un LLM para iterar en nuestra instrucción.

• Instrucciones con ejemplos limitados. Para generar los ejemplos de nuestras instrucciones con ejemplos limitados, se basa en Gemini Chat. Gemini Chat usa los modelos de Gemini más potentes. Esto garantizó que generáramos ejemplos de alta calidad.
• Mejora de los mensajes. Una vez que la estructura de la instrucción estaba lista, también usamos Gemini Chat para definir mejor la instrucción. Esto mejoró la calidad de los resultados.

Usa el contexto para aumentar la calidad

Incluir el tipo de producto en la instrucción ayudó al modelo a proporcionar sugerencias más relevantes y de mejor calidad. En esta demostración, el tipo de producto es estático. En una aplicación real, podrías incluir el producto de forma dinámica en tu basado en la página que visita el usuario.

Review: "I love these."
Helpful: No  
Fix: Be more specific, explain why you like these **socks**.
Example: "I love the blend of wool in these socks. Warm and not too heavy."

Uno de los ejemplos de la sección con ejemplos limitados de nuestra instrucción: el tipo de producto ("medias") se incluye en la corrección sugerida y en la opinión de ejemplo.

Contratiempos y soluciones de LLM

Gemma 2B suele requerir más ingeniería de instrucciones que una un modelo del servidor potente y más grande.

Tuvimos algunos desafíos con Gemma 2B. A continuación, te mostramos cómo mejoramos los resultados:

• Muy bien. Gemma 2B tuvo dificultades para marcar las opiniones como “poco útiles” y, al parecer, tenía dudas para juzgarlas. Intentamos que el lenguaje de las etiquetas fuera más neutral ("específico" y "no específico", en lugar de "útil" y "no útil") y agregamos ejemplos, pero esto no mejoró los resultados. Lo que mejoró los resultados fue la insistencia y la repetición en la instrucción. Es probable que un enfoque de cadena de pensamiento también genere mejoras.

• Las instrucciones no son claras. En ocasiones, el modelo interpretó en exceso la instrucción. En lugar de evaluar la opinión, continuó con la lista de ejemplos. Para solucionar esto, incluimos una transición clara en la consigna:

  I'll give you example reviews and outputs, and then give you one review
  to analyze. Let's go:
  Examples:
  <... Examples>
  
  Review to analyze:
  <... User input>
  

  Una estructura clara de la instrucción ayuda al modelo a diferenciar entre los una lista de ejemplos (algunas tomas) y la entrada real.

• Objetivo incorrecto. En ocasiones, el modelo sugirió cambios para el producto en lugar del texto de la opinión. Por ejemplo, para una opinión que dice "Odio estos calcetines", el modelo podría sugerir "Considera reemplazar los calcetines por una marca o un estilo diferente", que no es el efecto deseado. Dividir la instrucción ayudó a aclarar la tarea y mejoró el enfoque del modelo en la revisión.

Éxito: ¿Implementaste la IA del cliente para alguna de las funciones de tus productos? ¿Estás buscando otras formas en las que podamos demostrar cómo la IA generativa puede tener un impacto? tus sitios web y aplicaciones web? Envíanos un tweet @ChromiumDev: presentar una solicitud de contenido o establece horarios de consulta individuales con el equipo de IA de Web.dev.