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

Maud Nalpas

Kenji Baheux

Alexandra Klepper

正面和负面的评价可以为买家的购买决定提供参考。

根据外部研究，82% 的在线购物者会主动寻求负面信息 查看评价。这些负面评价适合 因为获得负面评价有助于 降低退货率，帮助制造商改进产品。

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

• 提交前，请检查每条评价是否包含恶意内容。我们可以鼓励用户删除冒犯性语言以及其他无用的评论，这样他们的评论就能最大程度地帮助其他用户做出更好的购买决定。
  • 负面：这个袋子实在太糟糕了，我讨厌它。
  • 负面反馈，反馈有用：拉链非常僵硬，材质也很便宜。我退回了这个袋子。
• 根据评价中使用的语言自动生成评分。
• 确定评价是负面还是正面的。

。 <ph type="x-smartling-placeholder">

</ph>

在此示例中，系统对评价者的评论进行了正面评价和 5 星评分。

归根结底，用户对产品评分有最终决定。

以下 Codelab 会在浏览器中在浏览器中提供解决方案。无 AI 开发知识、服务器或 API 密钥。

注意： 虽然设备端 Web AI 提供 充满激动人心的可能性，但要认识到它的局限性， 特别是生成式 AI 和大语言模型 (LLM)。这些模型 不仅下载大小大，而且对硬件的要求很高， 可能会影响性能和用户体验。请确保您 了解这些限制，并评估设备端是否适合 适合您的用例。

前提条件

而服务器端 AI 解决方案（如 Gemini API 或 OpenAI API）为 Cloud SQL 和 App Engine 的 许多应用，在本指南中，我们重点介绍设备端 Web AI。设备端 Web AI AI 模型在浏览器中运行，旨在改善 Web 用户的体验 无需服务器往返

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

我们使用以下库和模型：

• TensforFlow.js，用于恶意分析。TensorFlow.js 是一个开源机器学习库，可用于网络上的推理和训练。
• transformers.js，用于情感分析。Transformers.js 是 Hugging Face 的一个 Web AI 库。
• Gemma 2B：用于进行星级评分。Gemma 是一系列轻量级的开放模型，基于 Google 用来构建 Gemini 模型的研究成果和技术构建而成。为了在浏览器中运行 Gemma，我们需要将 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. 设置情感分析 任务 使用专用流水线。 首次使用流水线时，系统会下载并缓存模型。 此后，情感分析速度应该会快得多。

   注意 ：除非您指定模型，否则 Transformers.js 将使用默认模型 特定流水线。

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 的计算需求大一百多倍 传统的设备端模型。对设备端堆栈的优化有助于 包括新的运算、量化、缓存和权重共享。 来源：“使用 MediaPipe 和 TensorFlow Lite 在设备上构建大语言模型”(Large Language Models On-Device with MediaPipe and TensorFlow Lite)。

1. 安装和导入 MediaPipe LLM 推理 API。
2. 下载模型。 在这里，我们使用 Gemma 2B， 下载自 Kaggle。 Gemma 2B 是 Google 的最小开放式模型。
3. 使用 FilesetResolver 将代码指向正确的模型文件。这是 因为生成式 AI 模型可能具有特定的目录结构， 资源
4. 使用 MediaPipe 的 LLM 接口加载并配置模型。准备 要使用的模型：指定模型位置、首选响应长度 以及与温度相关的创意水平。
5. 给模型一个提示（查看示例）。
6. 等待模型的回答。
7. 解析评分：从模型的回答中提取星级。

。

注意： 我们使用的 Gemma 变体经过指令调优（请参阅 模型名称）。这意味着，你可以通过向模型提供参数， 例如聊天界面 Gemini 或 ChatGPT。

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);

提示示例

注意 ：由于 Gemma 2B 是一个小型 LLM，因此需要详细的提示才能生成 令人满意的结果。在这里，我们使用 思维链提示 和少样本提示。

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 的默认 情感分析模型达到 60 MB。像 Gemma 这样的大语言模型 大小上限为 1.3GB这超过了中位数 网页大小为 2.2 MB， 已远远大于为实现最佳性能而建议的设置。设备上 生成式 AI 在特定场景中可行。

网络上的生成式 AI 领域正在快速发展！更小 针对网页优化的模型 预计会出现 。

后续步骤

Chrome 正在尝试另一种在浏览器中运行生成式 AI 的方式。 你可以注册加入抢先试用计划 进行测试。