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

Maud Nalpas

Kenji Baheux

Alexandra Klepper

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

根據外部研究，有 82% 的線上購物者會主動尋求負面協助 才會購買商品這些負面評論對 正面評論的可用性 降低退貨率及協助製造商改善產品

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

• 提交每則評論前檢查是否有惡意內容。我們可鼓勵使用者移除令人反感的用語及其他不實用的意見，這樣評論最能幫助其他使用者做出更明智的購物決定。
  • 負面：這袋子非常糟糕，我很討厭。
  • 負面評價：拉鍊非常硬，材質輕盈又便宜。我把這個袋子歸還給你。
• 根據評論使用的語言自動產生評分。
• 判斷評論為負面或正面。

，瞭解如何調查及移除這項存取權。

在這個例子中，評論者的留言給予正面觀感，且給予五顆星的星級評等。

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

以下程式碼研究室會在裝置端在瀏覽器中提供解決方案。無 AI 開發知識、伺服器或 API 金鑰

注意： 雖然裝置端網頁 AI 提供了 無限可能，先瞭解該功能的限制、 尤其是生成式 AI 和大型語言模型 (LLM)這些模型 下載下載大小龐大，而且硬體需求相當嚴苛 可能會影響效能和使用者體驗。確定 瞭解這些限制條件，並評估裝置端是否適合 符合用途的工作模型

必要條件

伺服器端 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 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) 。

這項新功能在記憶體和 處理大型語言模型的需求 傳統的裝置端模型針對裝置端堆疊進行最佳化，可帶來莫大助益 包括新的運算、量化、快取和體重共享 來源：「使用 MediaPipe 和 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 是小型大型語言模型，因此需要提供詳細提示來產生 令人滿意的結果。現在，我們採用 思維鏈提示 和少量樣本提示。

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 的生成式 AI 模型，例如 Transformers.js 的預設 情緒分析模型的大小達 60 MBGemma 等大型語言模型 大小為 1.3 GB超過中位數 2.2 MB 網頁大小，這是 遠遠超過系統建議的理想成效。在裝置上設定 生成式 AI 在特定情境中可行

網路上的生成式 AI 領域正迅速發展！更小 網站最佳化模型 預計會在

後續步驟

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