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. As avaliações negativas também são importantes, porque aumentam a 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 a escrever avaliações informativas que auxiliam na decisão de compra de outras pessoas.

Demonstração e código

Teste nossa demonstração de avaliação de produto e confira o código no GitHub.

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 parar de digitar. Isso é possível evitando viagens de ida e volta do servidor.
• Custo. Embora esta seja uma demonstração, se você estiver pensando em lançar um recurso semelhante na produção, é ótimo testar sem custo no lado do servidor até que você possa 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 solicitado corretamente, ele forneceu resultados satisfatórios para esta demonstração.
• Suporte a vários navegadores: o MediaPipe tem suporte em todos os navegadores compatíveis com a 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. Aplique as práticas recomendadas de desempenho, que incluem o uso de um worker da Web.

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. Na nossa implementação, o usuário pode postar uma avaliação mesmo que o modelo não tenha sido carregado e, portanto, não esteja oferecendo 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, é recomendado:

• Ofereça um mecanismo de feedback. E se as sugestões forem medíocres ou não fizerem sentido? Implemente um mecanismo de feedback rápido (como polegares para cima e para baixo) e use heurísticas para determinar o que os usuários acham útil. Por exemplo, avalie quantos usuários estão interagindo com o recurso e se eles o desativam.
• Permitir a desativação. E se o usuário preferir usar as próprias palavras sem a assistência de IA ou achar o recurso irritante? Permita que o usuário desative e ative o recurso quando quiser.
• Explique por que esse recurso existe. Uma explicação curta pode incentivar os usuários 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ê pode adicionar uma explicação longa sobre como o recurso funciona e por que você o ofereceu, talvez como um link para saber mais.
• Divulgar o uso da IA quando relevante. Com a IA do lado do cliente, o conteúdo do usuário não é enviado para um servidor para processamento, podendo ser mantido em particular. 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 para o sugeridor de avaliações de produtos pode funcionar para uma ampla gama 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 worker da Web

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

No entanto, nosso exemplo de código é um pouco mais extenso. Isso acontece porque ele é implementado em um web worker e, portanto, transmite mensagens com o script principal por meio de códigos de mensagens personalizados. Saiba mais sobre este padrão.

// Trigger model preparation *before* the first message arrives
self.postMessage({ code: MESSAGE_CODE.PREPARING_MODEL });
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 });
} catch (error) {
  self.postMessage({ code: MESSAGE_CODE.MODEL_ERROR });
}

// Trigger inference upon receiving a message from the main script
self.onmessage = async function (message) {
  // Run inference = Generate an LLM response
  let response = null;
  try {
    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 });
    return;
  }
  // 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

Nossa solicitação completa foi criada com comandos de poucos disparos. Ele inclui a entrada do usuário, ou seja, o rascunho da avaliação que o usuário escreveu.

Para gerar a solicitação com base na entrada do usuário, chamamos a função utilitária generatePrompt no momento da execução.

Os modelos e as bibliotecas de IA do lado do cliente geralmente vêm com menos utilitários do que a IA do lado do servidor. Por exemplo, o modo JSON muitas vezes não está disponível. Isso significa que precisamos fornecer a estrutura de saída desejada dentro do comando. Isso é menos simples, confiável e fácil de manter do que fornecer um esquema pela configuração do modelo. Além disso, os modelos do lado do cliente tendem a ser menores, o que significa que são mais propensos a erros estruturais na saída.

Na prática, observamos que o Gemma 2B é melhor ao fornecer 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 um texto que, em seguida, analisa a saída em um objeto JavaScript para processamento adicional no app da Web.

Melhorando nosso comando

Usamos um LLM para iterar nossa solicitação.

• Comandos de poucos disparos (few-shot). Para gerar os exemplos de comandos de poucos disparos, usamos o Gemini Chat. O Gemini Chat usa os modelos mais avançados do Gemini. Isso garantiu que gerássemos exemplos de alta qualidade.
• Polimento de comandos. Quando a estrutura do comando estava pronta, também usamos o Gemini Chat para refiná-lo. 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 fornecer sugestões mais relevantes e de melhor qualidade. Nesta demonstração, o tipo de produto é estático. Em um aplicativo real, você pode incluir o produto de forma dinâmica no comando, 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 da seção few-shots do nosso comando: o tipo de produto ("meias") está incluído na correção sugerida e na análise de exemplo.

Erros e correções do 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. Veja como melhoramos os resultados:

• Muito bom. A Gemma 2B teve dificuldade para marcar avaliações como "não úteis" e, aparentemente, estava hesitante 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.

• Instruções pouco claras. O modelo às vezes interpretou demais o comando. Em vez de avaliar a revisão, ele 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 a lista de exemplos (algumas imagens) e a entrada real.

• Destino incorreto. Ocasionalmente, o modelo sugeriu mudanças no produto em vez do texto da avaliação. Por exemplo, para uma avaliação que diz "Eu odeio essas meias", o modelo pode sugerir "Considere substituir as meias por uma marca ou estilo diferente", o que não é o efeito desejado. A divisão da instrução ajudou a esclarecer a tarefa e melhorou o foco do modelo na revisão.