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.