感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

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

Maud Nalpas

发布时间：2024 年 10 月 21 日

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

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

演示和代码

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

此功能的构建过程

客户端 AI

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

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

MediaPipe 生成式 AI

我们之所以选择通过 MediaPipe LLM Inference API（MediaPipe GenAI 软件包）使用 Gemma 2B 模型，是因为：

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

用户体验

应用性能最佳实践

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

将功能设为可选

我们希望基于 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>
```
清晰地构建提示有助于模型区分示例列表（少量画面）和实际输入。
目标错误。有时，模型会建议更改商品，而不是评价文本。例如，对于评价“我讨厌这些袜子”，模型可能会建议“考虑换个品牌或款式的袜子”，这并不是预期的效果。拆分提示有助于阐明任务，并提高模型对评论的关注度。