オンデバイスのウェブ AI で有益な商品レビューを促進

Maud Nalpas

Kenji Baheux

Alexandra Klepper

肯定的なレビューと否定的なレビューは、購入者の購入判断の判断材料になることがあります。

外部調査によると、オンライン買い物客の 82% は、購入前に否定的なレビューを積極的に求めています。このような否定的なレビューは、顧客と企業にとって有用です。否定的なレビューを利用できることで、返品率が低下し、メーカーは商品を改善しやすくなります。

レビューの品質を向上させる方法をいくつかご紹介します。

• 送信前に各レビューに有害性がないか確認してください。不快な言葉やその他の役に立たないコメントを削除するようユーザーに促し、レビューが他のユーザーにより適切な購入判断を下すうえで最も役立つようにすることができます。
  • ネガティブ: このバッグはまずまずで、私はイヤだ。
  • ネガティブで有用なフィードバック: ジッパーが非常に硬く、素材が安く感じられる。このバッグを返品しました。
• レビューで使用されている言語に基づいて評価を自動生成します。
• レビューが否定的か肯定的かを判断します。

最終的には、ユーザーが商品評価に関する最終決定を行います。

次の Codelab では、オンデバイスのブラウザでソリューションを提供します。AI 開発に関する知識、サーバー、API キーは必要ありません。

前提条件

ソリューションを備えたサーバーサイド AI（Gemini API や OpenAI API など）は多くのアプリケーションに堅牢なソリューションを提供しますが、このガイドではオンデバイス ウェブ AI に焦点を当てます。オンデバイス ウェブ AI は、AI モデルをブラウザ内で実行するもので、サーバーの往復なしでウェブユーザーのエクスペリエンスを改善します。

この Codelab では、さまざまな手法を組み合わせて、オンデバイス ウェブ AI のツールボックスの内容を紹介します。

次のライブラリとモデルを使用します。

• TensforFlow.js（有害性分析用）TensorFlow.js は、ウェブでの推論とトレーニングの両方に対応したオープンソースの機械学習ライブラリです。
• transformers.js: 感情分析Transformers.js は、Hugging Face のウェブ AI ライブラリです。
• Gemma 2B: 星評価。Gemma は、Google が Gemini モデルの作成に使用した研究とテクノロジーを基に構築された、軽量のオープンモデルのファミリーです。ブラウザで Gemma を実行するために、MediaPipe の試験運用版の LLM Inference API とともに Gemma を使用します。

UX と安全性に関する考慮事項

最適なユーザー エクスペリエンスと安全性を確保するためには、次の点を考慮する必要があります。

• ユーザーが評価を編集できるようにします。最終的には、ユーザーが商品評価の最後の言葉を知る必要があります。
• 評価とレビューは自動処理されていることをユーザーに明確に伝えます。
• ユーザーに有害と分類されたレビューの投稿を許可しますが、サーバーで 2 回目のチェックを行います。これにより、有害でないレビューが誤って有害（偽陽性）に分類され、ユーザーの不満を回避できます。これには、悪意のあるユーザーがクライアントサイド チェックをバイパスするケースも含まれます。
• クライアントサイドの有害性チェックは有用だが、回避できる。サーバー側でもチェックを実行してください。

TensorFlow.js を使用して有害性を分析する

TensorFlow.js を使用すると、ユーザー レビューの有害性の分析を簡単に開始できます。

1. TensorFlow.js ライブラリと有害性モデルをインストールしてimportします。
2. 予測信頼度の最小を設定します。デフォルト値は 0.85 で この例では 0.9 に設定されています
3. モデルを非同期で読み込みます。
4. レビューを非同期で分類します。Google のコードでは、すべてのカテゴリでしきい値の 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 のメモリとコンピューティングの需要を考えると、この新しい機能は従来のオンデバイス モデルの 100 倍以上もの容量を必要とすることを考えると特に革新的なものです。新しい演算、量子化、キャッシュ保存、重み共有など、オンデバイス スタック全体の最適化により、これが可能になります。出典: 「Large Language Models On-Device with MediaPipe and 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 で必要なものよりも詳細なプロンプトが必要です。

推論は高速になる可能性があります。このドキュメントのスニペットを実行すると、多くのデバイスにおいて、推論がサーバーのラウンド トリップよりも速く、潜在的には速くなることがわかります。とはいえ、推論の速度は大きく異なる場合があります。対象デバイスで徹底したベンチマークが必要です。Web GPU、WebAssembly、ライブラリの更新により、オンデバイスの推論はますます高速化していくと予想されます。たとえば、Transformers.js では、v3 で Web GPU のサポートが追加され、デバイス上の推論を何倍にも高速化できます。

ダウンロード サイズは非常に大きくなる場合があります。ブラウザでの推論は高速ですが AI モデルの読み込みは簡単ではありませんブラウザ内 AI を実行するには、通常、ライブラリとモデルの両方が必要です。これにより、ウェブアプリのダウンロード サイズが増加します。

TensorFlow の有害性モデル（従来の自然言語処理モデル）はわずか数 KB ですが、Transformers.js のデフォルトの感情分析モデルなどの生成 AI モデルは 60 MB に達します。Gemma などの大規模言語モデルの容量は最大 1.3 GB です。これは中央値の 2.2 MB ウェブページ サイズを超えています。これは、最適なパフォーマンスのための推奨サイズよりもはるかに大きくなっています。オンデバイス生成 AI は、特定のシナリオで機能します。

ウェブの生成 AI の分野は急速に進化しています。今後、より小さなウェブ用に最適化されたモデルが登場する見込みです。

次のステップ

Chrome は、ブラウザで生成 AI を実行する別の方法をテストしています。早期プレビュー プログラムに登録してテストできます。