使用客户端 AI 探索商品评价建议

Maud Nalpas
Maud Nalpas

发布时间:2024 年 10 月 21 日

通过展示商品评价,网店的转化次数提高 270%。负面评价也是关键,因为它们有助于建立信誉。82% 的在线买家会在购买前查看评价。

鼓励客户发表有用的商品评价(尤其是负面评价)可能并非易事。在本博文中,我们将探讨如何使用生成式 AI 帮助用户撰写信息丰富的评价,从而帮助他人做出购买决定。

演示和代码

玩玩我们的产品评价演示,并研究 GitHub 上的代码

此功能的构建过程

客户端 AI

在本演示中,我们在客户端实现了此功能,原因如下:

  • 延迟时间。我们希望在用户停止输入后立即提供建议。我们可以通过避免服务器往返来实现这一点。
  • 费用。 虽然这只是演示,但如果您正在考虑在生产环境中发布类似功能,最好在服务器端保持零费用进行实验,直到您能够验证该功能是否适合您的用户为止。

MediaPipe 生成式 AI

我们之所以选择通过 MediaPipe LLM Inference APIMediaPipe GenAI 软件包)使用 Gemma 2B 模型,是因为:

  • 模型准确性:Gemma 2B 在大小和准确性方面取得了极佳的平衡。在适当的提示下,它为此演示提供了令人满意的结果。
  • 跨浏览器支持所有支持 WebGPU 的浏览器都支持 MediaPipe。

用户体验

应用性能最佳实践

虽然 Gemma 2B 是一个小型 LLM,但下载仍然很大。 应用性能最佳实践,包括使用 Web Worker。

将功能设为可选

我们希望基于 AI 的评价建议能够改善用户发布商品评价的工作流。在我们的实现中,即使模型尚未加载,用户也可以发布评价,因此不提供改进提示。

图 1. 即使 AI 功能尚未推出,用户仍可以发布评价。

界面状态和动画

推理通常需要的时间比用户感觉到的即时时间要长,因此我们会向用户发出模型正在运行推理或“思考”的信号。我们使用动画来缓解等待时间,同时向用户保证应用正在按预期运行。了解我们在演示中实现的不同界面状态,这些状态由 Adam Argyle 设计。

图 2. 动画演示了模型正在加载、然后“思考”,最后完成。

其他注意事项

在生产环境中,您可能需要:

  • 提供反馈机制。如果建议不太理想或不合理,该怎么办?实现快速反馈机制(例如点赞和不赞),并依靠启发词语来确定用户认为有用的内容。例如,评估有多少用户在与该功能互动,以及他们是否会将其关闭。
  • 允许用户选择停用。如果用户更喜欢不使用 AI 协助而使用自己的字词,或者觉得该功能很烦人,该怎么办?允许用户根据需要选择停用和重新启用。
  • 说明此功能的存在原因。简短的说明可能会鼓励用户使用反馈工具。例如,“更好的反馈有助于其他买家决定购买什么,也有助于我们打造您想要的产品。”您可以添加详细说明,介绍该功能的运作方式以及您提供该功能的原因,例如添加指向“了解详情”链接。
  • 披露 AI 使用情况(如适用)。借助客户端 AI,用户的内容不会发送到服务器进行处理,因此可以保持私密状态。不过,如果您构建服务器端回退机制或以其他方式使用 AI 收集信息,请考虑将其添加到您的隐私权政策、服务条款或其他位置。

实现

我们实现的产品评价建议功能可用于各种应用场景。请将以下信息视为您日后构建客户端 AI 功能的基础。

网页工作器中的 MediaPipe

使用 MediaPipe LLM 推理时,AI 代码只需几行:创建文件解析器和 LLM 推理对象,方法是向其传递模型网址,然后使用该 LLM 推理实例生成回答。

不过,我们的代码示例包含的内容更加广泛。这是因为它是在 Web 工作器中实现的,因此它通过自定义消息代码使用 main 脚本传递消息。详细了解此模式

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

输入和输出

图 3. 此示意图展示了系统如何通过推理处理提示,将其转换为原始 LLM 输出,然后将其解析为“读取以显示建议”内容。

我们的完整提示是基于少量样本提示构建的。它包含用户的输入,也就是用户撰写的评价草稿。

为了根据用户输入生成提示,我们会在运行时调用实用程序函数 generatePrompt

客户端 AI 模型和库提供的实用程序通常少于服务器端 AI。例如,JSON 模式通常不可用。这意味着,我们需要在问题中提供所需的输出结构。与通过模型配置提供架构相比,这种方法的清晰性、可维护性和可靠性较低。此外,客户端模型通常较小,这意味着它们更容易在输出中出现结构错误。

在实践中,我们发现与 JSON 或 JavaScript 相比,Gemma 2B 在以文本形式提供结构化输出方面表现更好。因此,在本演示中,我们选择了基于文本的输出格式。该模型会生成文本,然后我们将输出解析为 JavaScript 对象,以便在 Web 应用中进行进一步处理。

改进提示

我的提示和 Gemini Chat 界面中的回答。
图 4. 我们要求 Gemini Chat 改进问题,它会回答问题,并说明改进了哪些方面,以及有关效果的警告。

我们使用 LLM 来迭代提示。

  • 少样本提示。为了为少样本问题生成示例,我们依赖于 Gemini Chat。Gemini Chat 使用最强大的 Gemini 模型。这确保了我们生成了高质量的示例。
  • 提示润色。问题结构完成后,我们还使用 Gemini Chat 优化了问题。这提高了输出质量。

利用情境提升质量

在问题中添加商品类型有助于模型提供更相关、更优质的建议。在此演示中,商品类型为静态。 在真实应用中,您可以根据用户正在访问的页面,将商品动态添加到提示中。

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

提示的少样本部分的示例之一:商品类型(“socks”)包含在建议的修正和示例评价中。

LLM 问题和解决方法

与功能更强大、体量更大的服务器端模型相比,Gemma 2B 通常需要更多提示工程

我们在使用 Gemma 2B 时遇到了一些问题。我们改进了结果的方式如下:

  • 太客气了。Gemma 2B 很难将评价标记为“无用”,似乎不愿做出判断。我们尝试让标签语言更中性化(使用“具体”和“不具体”而非“有用”和“无用”),并添加了示例,但效果没有改善。但在问题中坚持和重复使用该字词,确实有助于提升结果。思维链方法也可能会带来改进。
  • 说明不明确。模型有时会过度解读提示。 系统没有评估评价,而是继续显示示例列表。为了解决此问题,我们在提示中添加了一个清晰的转场:

    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>
    

    清晰地构建提示有助于模型区分示例列表(少量画面)和实际输入。

  • 目标错误。有时,模型会建议更改商品,而不是评价文本。例如,对于评价“我讨厌这些袜子”,模型可能会建议“考虑换个品牌或款式的袜子”,这并不是预期的效果。拆分提示有助于阐明任务,并提高模型对评论的关注度。