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

Maud Nalpas
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 explorar como usar a IA generativa para ajudar os usuários a escrever avaliações informativas que ajudem nas decisões de compra de outras pessoas.

Demonstração e código

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

Como criamos 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 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 de inferência de LLM do MediaPipe (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. 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 ofereça dicas de melhoria.

Figura 1. Os usuários ainda podem postar a avaliação, mesmo quando o recurso de IA ainda não está pronto.

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.

Figura 2. As animações demonstram que o modelo está sendo carregado, "pensando" e, finalmente, concluído.

Outras considerações

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

  • Fornecer 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.
  • Divulgue o uso da IA quando for relevante. Com a IA do lado do cliente, o conteúdo do usuário não é enviado para um servidor para processamento e, portanto, pode 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 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 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 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 });
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

Figura 3. Um diagrama que demonstra o processamento do comando por inferência para uma saída bruta do LLM, que é analisada para uma recomendação de leitura pronta para exibição.

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 desejado 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 eles são mais propensos a erros estruturais na saída.

Na prática, observamos que o Gemma 2B faz um trabalho 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 texto, que é analisado em um objeto JavaScript para processamento no app da Web.

Como melhorar nosso comando

Minha solicitação e a resposta na interface do Gemini Chat.
Figura 4. Pedimos ao Gemini Chat para melhorar nosso comando, e ele responde com uma explicação sobre quais melhorias foram feitas e uma ressalva sobre a eficácia.

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 ficou 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 oferecer sugestões mais relevantes e de maior 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 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 as avaliações como "não úteis", aparentemente hesitando 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. Às vezes, o modelo 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 a instrução ajuda o modelo a diferenciar a lista de exemplo (algumas fotos) da 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.