透過裝置端網路 AI 鼓勵提供實用的產品評論

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

正面和負面的評論可能有助買家做出購買決定。

根據外部研究，82% 的線上購物者會在購物前先主動瀏覽負評。這類負面評論對顧客和商家來說非常實用，因為負面評論有助於降低退貨率，並協助製造商改善產品。

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

  • 建議先檢查每則評論是否含有有害內容，再提交內容。我們可以鼓勵使用者移除令人反感的用語，以及顯示其他沒有幫助的評論，這樣一來，其他使用者的評論就能更加周到，他們可以做出更明智的購買決定。
    • 負面：這個包包真是太爛了，我討厭。
    • 負面且有用回饋：拉鍊比較硬，教材又便宜。我退還了這個包包
  • 根據評論使用的語言自動產生評分。
  • 判斷評論是負面或正面的。
附上情緒和星級評等的範例評論螢幕截圖。
在這個例子中，評論者的評論給予了正面情緒和五顆星的評價。

最後，應讓使用者在產品評分中看到最終字詞。

下列程式碼研究室會在瀏覽器中提供解決方案。您不需要具備 AI 開發知識、伺服器或 API 金鑰。

必要條件

雖然採用伺服器端 AI 的解決方案 (例如 Gemini API 或 OpenAI API) 可為許多應用程式提供完善解決方案，但在本指南中，我們將重點放在裝置端網路 AI。裝置端網路 AI 是指在瀏覽器中執行 AI 模型，以改善網頁使用者的使用體驗，而無需往返伺服器。

在本程式碼研究室中，我們會運用多種技術向您說明裝置端網路 AI 工具箱有哪些功能。

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

  • TensforFlow.js，進行惡意性分析。TensorFlow.js 是開放原始碼的機器學習程式庫，可用於在網路上進行推論和訓練。
  • transformers.js。Transformers.js 是 Hugging Face 提供的網路 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 在裝置上建立大型語言模型」。

  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/機器學習專業知識。設計提示需要疊代，但程式碼的其餘部分是標準網站開發。

裝置端模型相當準確。如果執行這份文件中的程式碼片段，就會發現惡意程度和情緒分析都提供準確的結果。大致上，Gemma 評分與 Gemini 模型評分的結果相符，並經過了幾則經過測試的參考審查。為驗證準確性，需要進行更多測試。

儘管如此，設計 Gemma 2B 的提示仍需要努力。由於 Gemma 2B 是小型的 LLM，因此需要詳細的提示才能產生令人滿意的結果，特別是比 Gemini API 的使用條件更為詳盡。

推論可能相當快。如果您在執行這份文件中的程式碼片段時，應該會發現在部分裝置上，推論速度很快，且可能比伺服器來回行程更快。因此，推論速度可能相當大不相同。必須使用目標裝置進行基準測試。我們預計藉由 Web GPU、WebAssembly 和程式庫更新，在裝置端進行推論，速度會不斷提升。例如，Transformers.js 新增了第 3 版的網路 GPU 支援，可以加快裝置端的推論速度。

下載大小可非常大。瀏覽器推論速度很快，但載入 AI 模型可能不太容易。如要執行瀏覽器內建 AI，您通常需要有程式庫和模型，能夠新增至網頁應用程式的下載大小。

雖然 Tensorflow 毒物模型 (傳統自然語言處理模型) 僅只有幾 KB，但 Transformers.js 的預設情緒分析模型等生成式 AI 模型達到 60 MB。Gemma 等大型語言模型的大小上限為 1.3 GB該數字超過「中位數」2.2 MB 的網頁大小，這已經比為取得最佳效能而大上許多。裝置端生成式 AI 在特定情況下適用

網路上的生成式 AI 領域正迅速演進！更小型的網路最佳化模型會在日後出現。

後續步驟

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