发布时间: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>
清晰地构建提示有助于模型区分示例列表(少量镜头)和实际输入。
目标错误。有时,模型会建议更改商品 而不是评价文字。例如,对于评价“我讨厌这些袜子”,模型可能会建议“考虑换个品牌或款式的袜子”,这并不是预期的效果。拆分提示解决了问题 阐明任务,并改进模型对评论的关注度。