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

Maud Nalpas
Maud Nalpas
Kenji Baheux
Kenji Baheux
Alexandra Klepper
Alexandra Klepper

發布日期:2024 年 5 月 16 日

正面和負面評論可以幫助買家的購物決定。

根據外部研究,82% 的線上購物者會在購買前主動尋找負面評論。這類負評對消費者和商家而言相當實用,因為負面評論的顯示機會有助於降低退貨率,以及協助製造商改善產品。

以下提供幾個改善評論品質的方法:

  • 提交每則評論前,請先檢查是否含有有害內容。我們會鼓勵使用者移除不雅用語和其他無用的評論,讓他們的評論能盡可能協助其他使用者做出更好的購物決策。
    • 負面:這個包包很糟,我討厭它。
    • 負面評價 拉鍊裡非常硬,材質輕又便宜,我已退回這個包包。
  • 根據評論使用的語言自動產生評分。
  • 判斷評論是負面或正面。
螢幕截圖:示範含有情緒和星級評分的評論。
在這個範例中,評論者給予正面情緒和五星評分。

最後,使用者應顯示產品評分的最終字詞。

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

必要條件

雖然伺服器端 AI 解決方案 (例如 Gemini APIOpenAI 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 分析使用者評論的毒性。

  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 的記憶體和運算需求 (比用戶端模型大上百倍),這項新功能特別具有轉型意義。這項功能是透過跨網頁堆疊的最佳化功能實現,包括新運算、量化、快取和權重共用。來源:「使用 MediaPipe 和 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/ML 專業知識。設計提示需要經過多次疊代,但其餘程式碼則是標準的網頁開發作業。

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

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

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

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

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

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

後續步驟

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