本頁面由 Cloud Translation API 翻譯而成。

運用用戶端網頁 AI 鼓勵使用者提供實用的產品評論

Maud Nalpas

Kenji Baheux

Alexandra Klepper

發布日期：2024 年 5 月 16 日

正面和負面評論都可能影響買家的購買決定。

根據外部研究，82% 的線上購物者會在購買前主動尋找負面評論。這些負面評論對消費者和商家都很有幫助，因為負面評論有助於降低退貨率，並協助製造商改善產品。

以下提供幾種改善評論品質的方法：

提交每則評論前，請先檢查是否含有有害內容。我們會鼓勵使用者移除不雅用語和其他無用的評論，讓他們的評論能盡可能協助其他使用者做出更好的購物決策。
- 負面：這個包包很糟，我討厭它。
- 負面評價，附有實用意見回饋拉鍊非常僵硬，材質感覺很廉價。我已退回這個包包。
根據評論使用的語言自動產生評分。
判斷評論是負面還是正面。

螢幕截圖：示範含有情緒和星級評分的評論。 — 在這個範例中，評論者給予正面情緒和五星評分。

最終，使用者應對產品評分有最終決定權。

下列程式碼研究室提供用戶端解決方案，可在裝置上和瀏覽器中使用。不需要具備 AI 開發知識、伺服器或 API 金鑰。

必要條件

雖然伺服器端 AI 解決方案 (例如 Gemini API 或 OpenAI API) 可為許多應用程式提供強大的解決方案，但本指南將著重於用戶端網頁 AI。用戶端 AI 推論會在瀏覽器中執行，藉此移除伺服器來回傳輸，進而改善網頁使用者的體驗。

在本程式碼研究室中，我們會使用多種技巧，向您展示用於用戶端 AI 的工具箱內容。

我們使用以下程式庫和模型：

TensforFlow.js：用於毒性分析。TensorFlow.js 是開放原始碼機器學習程式庫，可用於網頁推論和訓練。
transformers.js，用於情緒分析。Transformers.js 是 Hugging Face 的網路 AI 程式庫。
Gemma 2B：星級評等。Gemma 是一系列輕量級開放式模型，採用 Google 建立 Gemini 模型時所用的科研成果和技術。為了在瀏覽器中執行 Gemma，我們會將其與 MediaPipe 的實驗性 LLM 推論 API 搭配使用。

使用者體驗和安全性考量

為了確保最佳使用者體驗和安全性，請考量以下幾點：

允許使用者編輯評分。最終，使用者應對產品評分有最終決定權。
向使用者清楚說明評分和評論是自動產生的。
允許使用者發布歸類為有害的評論，但在伺服器上執行第二次檢查。這可避免系統誤將非有害的評論歸類為有害 (誤判)，導致使用者感到困擾。這也涵蓋惡意使用者設法略過用戶端檢查的情況。
用戶端有害內容檢查功能雖然有助於偵測有害內容，但仍有可能遭到規避。請務必在伺服器端執行檢查。

使用 TensorFlow.js 分析有害內容

您可以快速使用 TensorFlow.js 分析使用者評論的毒性。

安裝並import TensorFlow.js 程式庫和毒性模型。
設定最低預測可信度。預設值為 0.85，在本範例中，我們將其設為 0.9。
以非同步方式載入模型。
以非同步方式分類評論。我們的程式碼會找出任何類別中超過 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 判斷情緒

安裝並匯入 Transformers.js 程式庫。
使用專屬管道設定情緒分析工作。首次使用管道時，系統會下載模型並快取。從那時起，情緒分析的速度應該會大幅提升。

注意： 除非您指定模型，否則 Transformers.js 會使用該特定管道的預設模型。
以非同步方式分類評論。使用自訂閾值設定應用程式可用的置信度等級。

例如：

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 推論 API，在瀏覽器中完全執行大型語言模型 (LLM)。

考量到 LLM 的記憶體和運算需求 (比用戶端模型大上百倍)，這項新功能特別具有轉型意義。這項功能是透過跨網頁堆疊的最佳化功能實現，包括新運算、量化、快取和權重共用。資料來源：「使用 MediaPipe 和 TensorFlow Lite 在裝置端訓練大型語言模型」。

安裝並匯入 MediaPipe LLM 推論 API。
下載模型。我們在這裡使用從 Kaggle 下載的 Gemma 2B。Gemma 2B 是 Google 開放式模型中最小者。
使用 FilesetResolver 將程式碼指向正確的模型檔案。這點很重要，因為生成式 AI 模型可能會為資產提供特定的目錄結構。
使用 MediaPipe 的 LLM 介面載入及設定模型。準備模型以供使用：指定模型位置、偏好的回覆長度，以及偏好的創意程度 (溫度)。
為模型提供提示 (請參閱範例)。
等待模型回應。
剖析評分：從模型回應中擷取星號評分。

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/ML 專業知識。設計提示需要經過多次疊代，但其餘程式碼則是標準的網頁開發作業。

用戶端模型相當準確。如果您執行本文件中的程式碼片段，就會發現惡意內容和情緒分析都會提供準確的結果。在幾個測試參考評論的情況下，Gemma 評分大多與 Gemini 模型評分相符。為了驗證準確性，我們需要進行更多測試。

不過，為 Gemma 2B 設計提示訊息需要花費心力。由於 Gemma 2B 是小型 LLM，因此需要詳細的提示才能產生令人滿意的結果，這點與 Gemini API 所需的提示相比更為詳細。

推論速度可能非常快。如果您執行本文件中的程式碼片段，應該會發現在許多裝置上，推論作業的速度可能比伺服器來回傳輸更快。不過，推論速度可能會有很大的差異。您需要針對目標裝置進行完整的基準測試。我們預期瀏覽器推論會隨著 WebGPU、WebAssembly 和程式庫更新而持續加快。舉例來說，Transformers.js 在第 3 版中新增了 Web GPU 支援，可大幅加快裝置端推論速度。

下載檔案可能會非常大。瀏覽器中的推論速度很快，但載入 AI 模型可能會遇到困難。如要執行瀏覽器內的 AI，通常需要程式庫和模型，這會增加網路應用程式的下載大小。

雖然 TensorFlow 毒性模型 (經典的自然語言處理模型) 只有幾千位元，但生成式 AI 模型 (例如 Transformers.js 的預設情緒分析模型) 則可達到 60 MB。Gemma 等大型語言模型的大小可能高達 1.3 GB。這超過中位數 2.2 MB 的網頁大小，而這已經遠遠超過建議的最佳效能值。用戶端生成式 AI 可在特定情況下運作。

網頁上的生成式 AI 領域發展迅速！我們預期未來會推出更小、更適合網頁的模型。

後續步驟

Chrome 正在嘗試在瀏覽器中執行生成式 AI 的其他方式。您可以申請加入搶先體驗方案來試用。