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

Maud Nalpas

发布时间：2024 年 10 月 21 日

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

鼓励客户留下有用的商品评价（尤其是负面评价）可能很棘手。在本文中，我们将探讨如何使用生成式 AI 帮助用户撰写有实用价值的评价，从而帮助他人做出购买决定。

演示和代码

试用我们的商品评价演示，并在 GitHub 上查看代码。

此功能的构建过程

客户端 AI

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

• 延迟时间。我们希望在用户登录后， 停止输入。我们可以通过避免服务器往返来实现这一点。
• 费用。 这只是一个演示，如果您正在考虑推出类似的 功能投入到生产环境中，那么在 您可以验证该功能是否适合您的用户。

MediaPipe 生成式 AI

我们选择使用 Gemma 2B 编码器 - 解码器架构 MediaPipe LLM Inference API （MediaPipe GenAI 软件包）， 原因如下：

• 模型准确率：Gemma 2B 很好地平衡了大小和准确率。在适当的提示下，它为此演示提供了令人满意的结果。
• 跨浏览器支持：以下国家/地区支持 MediaPipe 所有支持 WebGPU 的浏览器。

用户体验

应用性能最佳实践

虽然 Gemma 2B 是一个小型 LLM，但下载仍然很大。 运用性能最佳做法， 包括使用 Web worker

将该功能设为可选功能

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

界面状态和动画

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

其他注意事项

在生产环境中，您可能需要执行以下操作：

• 提供反馈机制。如果建议不太理想或不合理，该怎么办？实现快速反馈机制（例如点赞） 并依靠启发法来确定用户可看到的内容 实用。例如，评估有多少用户在与该功能互动，以及他们是否会将其关闭。
• 允许选择停用。如果用户更喜欢使用自己的语言， AI 辅助功能，还是觉得这项功能令人厌烦？允许用户选择停用 根据需要重新启用这些功能。
• 说明此功能的存在原因。简短的说明可能有助于您 鼓励用户使用反馈工具。例如，“更好的反馈可以帮助其他成员 并帮助我们为您打造符合您需求的产品。”您 可以详细解释一下该功能的运作原理， 例如链接，以了解更多信息
• 在适当情况下披露 AI 使用情况。借助客户端 AI，用户的内容 不会发送到服务器进行处理，因此可以保持私密状态。不过，如果您构建了服务器端回退或以其他方式使用 AI 收集信息，不妨考虑将相关信息添加到隐私权政策、服务条款或其他位置。

实现

我们对商品评价建议工具的实现适用于很多范围 应用场景。请将以下信息视为您日后构建客户端 AI 功能的基础。

网页工作器中的 MediaPipe

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

不过，我们的代码示例包含的内容更加广泛。这是因为 这是在 Web Worker 中实现的，因此它会通过主脚本传递消息， 自定义消息代码。详细了解 此格式。

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

输入和输出

我们的完整提示是使用少样本提示构建的。其中包括用户的输入，也就是用户撰写的评价草稿。

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

客户端 AI 模型和库提供的实用程序通常少于 服务器端 AI。例如，JSON 模式通常不可用。这意味着，我们需要在问题中提供所需的输出结构。相较于后者，相较于 通过模型配置提供架构。此外，客户端模型通常较小，这意味着它们更容易在输出中出现结构错误。

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

改进提示

我们使用 LLM 迭代提示。

• 少样本提示。为了生成少样本提示的样本， 依赖于 Gemini Chat。Gemini Chat 使用最强大的 Gemini 模型。这确保了我们生成高质量的样本。
• 优化提示。提示的结构准备就绪后，我们还使用 来优化提示。这提高了输出质量。

利用背景信息提升质量

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

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

提示的“少样本”部分中的示例之一：建议的修复方法和示例评价中都包含商品类型（“袜子”）。

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>
  

  清晰地构建提示有助于模型区分示例列表（少量镜头）和实际输入。

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