Analise as sugestões de avaliações do produto com a IA do lado do cliente

Maud Nalpas

Publicado em 21 de outubro de 2024

As lojas on-line podem notar um aumento de 270% nas conversões ao mostrar avaliações de produtos. Avaliações negativas também são importantes, à medida que agregam credibilidade. 82% dos compradores on-line procuram por eles antes de comprar.

Incentivar os clientes a deixar avaliações úteis do produto, especialmente quando negativas, pode ser complicado. Aqui, vamos saber como usar a IA generativa para ajudar os usuários escrevem avaliações informativas que ajudam as decisões de compra.

Demonstração e código

Divirta-se com nossa demonstração de avaliação do produto e investigar no GitHub (link em inglês).

Como construímos isso

IA do lado do cliente

Para esta demonstração, implementamos o recurso no lado do cliente pelos seguintes motivos:

• Latência. Queremos oferecer sugestões rapidamente, assim que o usuário para de digitar. Isso é possível evitando viagens de ida e volta do servidor.
• Custo. Embora seja uma demonstração, se você estiver pensando em lançar um recurso semelhante na produção, é ótimo experimentar sem custo do lado do servidor até validar se o recurso faz sentido para seus usuários.

IA generativa do MediaPipe

Escolhemos usar o modelo Gemma 2B na API MediaPipe LLM Inference (pacote MediaPipe GenAI) por estes motivos:

• Precisão do modelo: o Gemma 2B oferece um ótimo equilíbrio entre tamanho e precisão. Quando instruído corretamente, ele apresentou resultados que consideramos satisfatórios para esta demonstração.
• Suporte a vários navegadores: o MediaPipe tem suporte em todos os navegadores com suporte à WebGPU.

Experiência do usuário

Aplicar as práticas recomendadas de desempenho

Embora o Gemma 2B seja um LLM pequeno, ele ainda é um download grande. Aplicar as práticas recomendadas de performance, que incluir o uso de um web worker.

Tornar o recurso opcional

Queremos que as sugestões de avaliação baseadas em IA melhorem o fluxo de trabalho do usuário para postar uma avaliação do produto. Em nossa implementação, o usuário pode postar uma avaliação mesmo se o modelo não foi carregado e, por isso, não oferece dicas de melhoria.

Estados e animações da interface

A inferência normalmente leva mais tempo do que o que parece imediato. Por isso, indicamos ao usuário que o modelo está executando a inferência, ou "pensando". Usamos animações para facilitar a espera, garantindo ao usuário que o aplicativo está funcionando como esperado. Descubra os diferentes estados da interface que implementamos na nossa demonstração, conforme projetado por Adam Argyle.

Outras considerações

Em um ambiente de produção, você pode:

• Fornecer um mecanismo de feedback. E se as sugestões forem ruins, ou não fazem sentido? Implementar um mecanismo de feedback rápido (como "Gostei" e polegar para baixo) e confiar na heurística para determinar o que os usuários encontram úteis. Por exemplo, avalie quantos usuários estão interagindo com o e se ele é desativado.
• Permitir a desativação. E se o usuário preferir usar as próprias palavras sem assistência de IA ou acha o recurso incômodo? Permita que o usuário desative e ativá-lo novamente como desejado.
• Explique por que esse recurso existe. Uma explicação breve pode incentivar a usar a ferramenta de feedback. Por exemplo, "Feedback melhor ajuda outros compradores a decidir o que comprar e nos ajuda a criar os produtos que você quer". Você você poderia adicionar uma explicação detalhada de como o recurso funciona e por que forneceu, talvez como um link para saber mais.
• Divulgar o uso da IA quando relevante. Com a IA do lado do cliente, o conteúdo não é enviado a um servidor para processamento, portanto, podem ser mantidos privados. No entanto, se você criar um substituto do lado do servidor ou coletar informações com IA, adicione essa informação à sua política de privacidade, aos termos de serviço ou a outros lugares.

Implementação

Nossa implementação do sugeridor de avaliações do produto pode funcionar em uma grande variedade de casos de uso. Considere as informações a seguir como base para seus futuros recursos de IA do lado do cliente.

MediaPipe em um web worker

Com a inferência do LLM do MediaPipe, o código de IA tem apenas algumas linhas: crie um resolvedor de arquivos e um objeto de inferência do LLM transmitindo um URL do modelo e, mais tarde, use essa instância de inferência do LLM para gerar uma resposta.

No entanto, nosso exemplo de código é um pouco mais expansivo. Isso ocorre porque ele é implementado em um web worker, então ele transmite mensagens com o script principal usando códigos de mensagem personalizados. Saiba mais sobre este padrão.

// 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',
};

Entrada e saída

Nosso comando completo foi desenvolvido com comandos few-shot. Inclui a entrada do usuário, ou seja, o rascunho de avaliação que o usuário escrito.

Para gerar o comando com base na entrada do usuário, chamamos nosso utilitário durante a execução função generatePrompt.

Os modelos e bibliotecas de IA do lado do cliente geralmente têm menos utilitários do que a IA do lado do servidor. Por exemplo: Modo JSON e muitas vezes não está disponível. Isso significa que precisamos fornecer a estrutura de saída desejada dentro do comando. É menos limpo, fácil de manter e confiável do que fornecendo um esquema pela configuração de modelos. Além disso, os modelos do lado do cliente são menores, o que significa que são mais propensos a erros estruturais nas saída.

Na prática, observamos que o Gemma 2B é melhor ao oferecer uma saída estruturada como texto, em comparação com JSON ou JavaScript. Para esta demonstração, optamos por um formato de saída baseado em texto. O modelo gera texto, que é analisado em um objeto JavaScript para processamento no app da Web.

Melhorando nosso comando

Usamos um LLM para iterar o comando.

• Comandos de poucos disparos (few-shot). Para gerar os exemplos dos comandos few-shot, usam o Gemini Chat. O Gemini Chat usa os modelos mais avançados do Gemini. Isso garantiu a geração de exemplos de alta qualidade.
• Polimento de comando. Depois que a estrutura do comando estava pronta, também usamos Gemini Chat para refinar o comando. Isso melhorou a qualidade da saída.

Usar o contexto para aumentar a qualidade

Incluir o tipo de produto no comando ajudou o modelo a oferecer sugestões mais relevantes e de maior qualidade. Nesta demonstração, o tipo de produto é estático. Em um aplicativo real, você poderia incluir o produto dinamicamente no seu com base na página que o usuário está visitando.

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."

Um dos exemplos na seção de poucos cliques do nosso comando: o tipo de produto ("meias") está incluído na correção sugerida e na revisão de exemplo.

Erros e correções de LLM

O Gemma 2B geralmente exige mais engenharia de comando do que um modelo mais poderoso e maior do lado do servidor.

Encontramos alguns desafios com o Gemma 2B. Confira como melhoramos os resultados:

• Muito bom. A Gemma 2B teve dificuldade para marcar avaliações como "não úteis". aparentemente hesitar em julgar. Tentamos tornar a linguagem do rótulo mais neutra (“específico” e “não específico”, em vez de “útil” e “não útil”) e adicionamos exemplos, mas isso não melhorou os resultados. O que melhorou os resultados foi a insistência e a repetição na instrução. Uma abordagem de cadeia de pensamento provavelmente também geraria melhorias.

• As instruções não estão claras. O modelo às vezes interpretou demais o comando. Em vez de avaliar a revisão, ela continuou a lista de exemplos. Para corrigir isso, incluímos uma transição clara no comando:

  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>
  

  Estruturar claramente o comando ajuda o modelo a diferenciar entre as lista de exemplos (algumas fotos) e a entrada real.

• Destino incorreto. Às vezes, o modelo sugeriu mudanças no produto em vez do texto da avaliação. Por exemplo, para uma resenha que diga "Eu odeio estes meias", o modelo pode sugerir "Considere substituir as meias por um marca ou estilo", que não é o efeito desejado. Dividir o comando ajudou esclarecer a tarefa e melhorar o foco do modelo na revisão.