鼓励用户使用设备端 Web AI 发表实用的商品评价

Maud Nalpas
Maud Nalpas
X GitHub
Kenji Baheux
Kenji Baheux
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

正面和负面的评价有助于买家做出购买决定。

根据外部研究，82% 的在线买家在购买之前会主动寻找负面评价。这些负面评价对客户和商家来说非常有用，因为提供负面评价有助于降低退货率并帮助制造商改进商品。

您可以通过以下几种方法提高评价质量：

  • 提交前，请检查每条评价是否存在恶意言论。我们可以鼓励用户移除冒犯性语言和其他无用评论，以便他们的评价能最好地帮助其他用户做出更好的购买决定。
    • 负面：这个袋子差劲，我讨厌它。
    • 负面反馈并给出实用反馈：拉链太硬，材质也很便宜。我退回了这个袋子。
  • 根据评价中所用的语言自动生成评分。
  • 判断评价是正面的还是负面的。
包含情感和星级的示例评价的屏幕截图。
在此示例中，评价者的评论获得了积极的情感和 5 星评分。

最终应该让用户对商品评分拥有最终决定权。

以下 Codelab 提供了设备端浏览器中的解决方案。无需具备 AI 开发知识，也不需要具备服务器或 API 密钥。

前提条件

虽然服务器端 AI 与解决方案（例如 Gemini API 或 OpenAI API）可为许多应用提供可靠的解决方案，但在本指南中，我们将重点介绍设备端 Web AI。设备端 Web AI 是指将 AI 模型在浏览器中运行，目的是改善 Web 用户的体验，而无需服务器往返。

在此 Codelab 中，我们综合运用了多种技术向您展示设备端 Web AI 工具箱中的内容。

我们使用以下库和模型：

  • TensforFlow.js：用于恶意分析。TensorFlow.js 是一个开源机器学习库，可用于 Web 推理和训练。
  • transformers.js 用于情感分析。Transformers.js 是 Hugging Face 推出的一个 Web AI 库。
  • Gemma 2B 用于星级评分。Gemma 是一个轻量级的开放式模型系列，以 Google 用于创建 Gemini 模型的研究和技术为基础构建而成。为了在浏览器中运行 Gemma，我们将其与 MediaPipe 的实验性 LLM Inference API 结合使用。

用户体验和安全注意事项

为了确保提供最佳用户体验和安全性，您需要考虑以下几点：

  • 允许用户修改评分。最终应该让用户知道产品评分的最终决定。
  • 向用户明确说明评分和评价是自动生成的。
  • 允许用户发布被归类为“恶意”的评价，但在服务器上运行第二次检查。这样可以防止无恶意评价被错误地归类为恶意评价（假正例）这种令人沮丧的体验。这也涵盖恶意用户设法绕过客户端检查的情况。
  • 客户端恶意性检查很有帮助，但可以绕过。也请确保在服务器端运行检查。

使用 TensorFlow.js 分析恶意内容

使用 TensorFlow.js 可以快速开始分析一条用户评价的恶意评论。

  1. 安装并import TensorFlow.js 库和恶意模型。
  2. 设置最低预测置信度。默认值为 0.85，在本例中，我们将其设置为 0.9。
  3. 异步加载模型。
  4. 异步对评价进行分类。我们的代码在任何类别都能识别超出阈值 0.9 的预测。

此模型可以对身份攻击、侮辱、淫秽内容等中的恶意言论进行分类。

例如：

import * as toxicity from '@tensorflow-models/toxicity';

// Minimum prediction confidence allowed
const TOXICITY_COMMENT_THRESHOLD = 0.9;

const toxicityModel = await toxicity.load(TOXICITY_COMMENT_THRESHOLD);
const toxicityPredictions = await toxicityModel.classify([review]);
// `predictions` is an array with the raw toxicity probabilities
const isToxic = toxicityPredictions.some(
    (prediction) => prediction.results[0].match
);

使用 Transformers.js 确定情感

  1. 安装并导入 Transformers.js 库。

  2. 使用专用流水线设置情感分析任务。首次使用流水线时，系统会下载并缓存模型。 此后，情感分析的速度应该会比以前快得多。

  3. 异步对评价进行分类。使用自定义阈值设置您认为适用于应用的置信度。

例如：

import { pipeline } from '@xenova/transformers';

const SENTIMENT_THRESHOLD = 0.9;
// Create a pipeline (don't block rendering on this function)
const transformersjsClassifierSentiment = await pipeline(
  'sentiment-analysis'
);

// When the user finishes typing
const sentimentResult = await transformersjsClassifierSentiment(review);
const { label, score } = sentimentResult[0];
if (score > SENTIMENT_THRESHOLD) {
  // The sentiment is `label`
} else {
  // Classification is not conclusive
}

使用 Gemma 和 MediaPipe 提出星级评分

借助 LLM Inference API，您可以完全在浏览器中运行大型语言模型 (LLM)。

考虑到 LLM 的内存和计算需求，这种新功能极具变革性，LLM 是传统设备端模型的一百多倍。通过对设备端堆栈进行优化，包括新操作、量化、缓存和权重共享等。来源：“使用 MediaPipe 和 TensorFlow Lite 在设备上大语言模型”(Large Language Models on-Device with MediaPipe and TensorFlow Lite)。

  1. 安装并导入 MediaPipe LLM 推断 API。
  2. 下载模型。 在这里，我们使用从 Kaggle 下载的 Gemma 2B。Gemma 2B 是 Google 的最小开放权重模型。
  3. 使用 FilesetResolver 将代码指向正确的模型文件。这一点非常重要，因为生成式 AI 模型的资源可能具有特定的目录结构。
  4. 使用 MediaPipe 的 LLM 接口加载并配置模型。准备模型以供使用：指定模型位置、首选响应长度和首选创造力级别（与温度一起）。
  5. 给模型一个提示（查看示例）。
  6. 等待模型响应。
  7. 解析评分：从模型的响应中提取星级。
import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';

const mediaPipeGenAi = await FilesetResolver.forGenAiTasks();
const llmInference = await LlmInference.createFromOptions(mediaPipeGenAi, {
    baseOptions: {
        modelAssetPath: '/gemma-2b-it-gpu-int4.bin',
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.5,
    randomSeed: 101,
});

const prompt = …
const output = await llmInference.generateResponse(prompt);

const int = /\d/;
const ratingAsString = output.match(int)[0];
rating = parseInt(ratingAsString);

示例提示

const prompt = `Analyze a product review, and then based on your analysis give me the
corresponding rating (integer). The rating should be an integer between 1 and 5.
1 is the worst rating, and 5 is the best rating. A strongly dissatisfied review
that only mentions issues should have a rating of 1 (worst). A strongly
satisfied review that only mentions positives and upsides should have a rating
of 5 (best). Be opinionated. Use the full range of possible ratings (1 to 5). \n\n
  \n\n
  Here are some examples of reviews and their corresponding analyses and ratings:
  \n\n
  Review: 'Stylish and functional. Not sure how it'll handle rugged outdoor use, but it's perfect for urban exploring.'
  Analysis: The reviewer appreciates the product's style and basic functionality. They express some uncertainty about its ruggedness but overall find it suitable for their intended use, resulting in a positive, but not top-tier rating.
  Rating (integer): 4
  \n\n
  Review: 'It's a solid backpack at a decent price. Does the job, but nothing particularly amazing about it.'
  Analysis: This reflects an average opinion. The backpack is functional and fulfills its essential purpose. However, the reviewer finds it unremarkable and lacking any standout features deserving of higher praise.
  Rating (integer): 3
  \n\n
  Review: 'The waist belt broke on my first trip! Customer service was unresponsive too. Would not recommend.'
  Analysis: A serious product defect and poor customer service experience naturally warrants the lowest possible rating. The reviewer is extremely unsatisfied with both the product and the company.
  Rating (integer): 1
  \n\n
  Review: 'Love how many pockets and compartments it has. Keeps everything organized on long trips. Durable too!'
  Analysis: The enthusiastic review highlights specific features the user loves (organization and durability), indicating great satisfaction with the product. This justifies the highest rating.
  Rating (integer): 5
  \n\n
  Review: 'The straps are a bit flimsy, and they started digging into my shoulders under heavy loads.'
  Analysis: While not a totally negative review, a significant comfort issue leads the reviewer to rate the product poorly. The straps are a key component of a backpack, and their failure to perform well under load is a major flaw.
  Rating (integer): 1
  \n\n
  Now, here is the review you need to assess:
  \n
  Review: "${review}" \n`;

掌握要点

无需具备 AI/机器学习专业知识。设计提示需要迭代，但代码的其余部分是标准的 Web 开发。

设备端模型相当准确。如果您运行本文档中的片段，会发现恶意性和情感分析都给出准确的结果。在一些经过测试的参考评价中，Gemma 评分与 Gemini 模型评分大体相当。为了验证准确率，需要进行更多测试。

不过，为 Gemma 2B 设计提示仍然很费力。由于 Gemma 2B 是一个小型 LLM，因此需要详细的提示才能产生令人满意的结果，特别是比 Gemini API 所要求的结果更详细。

推断速度快如闪电。如果运行本文档中的代码段，您应该会发现推断在许多设备上的速度可能比服务器往返更快。也就是说，推理速度可能会有很大差异。需要在目标设备上进行全面的基准化分析。我们预计设备端推断会随着 Web GPU、WebAssembly 和库的更新不断提高。例如，Transformers.js 增加了 v3 中的 Web GPU 支持，这可以以多种方式加快设备端推断速度。

下载内容可能非常大。在浏览器中进行推断的速度很快，但加载 AI 模型可能是一项挑战。如需执行浏览器内 AI，您通常需要库和模型，这会增加 Web 应用的下载大小。

虽然 TensorFlow 恶意模型（一种经典的自然语言处理模型）只有几千字节，但 Transformers.js 的默认情感分析模型等生成式 AI 模型的大小却达到了 60MB。Gemma 等大语言模型最多可达到 1.3GB。这超过了 2.2 MB 的网页大小中位数，这已经远远大于为了实现最佳性能而建议的网页大小。设备端生成式 AI 在特定场景中是可行的。

网络生成式 AI 领域正在快速发展！预计未来会出现针对网页进行了优化的较小模型。

后续步骤

Chrome 正在试验另一种在浏览器中运行生成式 AI 的方式。 您可以注册加入早期预览版计划以对其进行测试。