このページは Cloud Translation API によって翻訳されました。

クライアントサイドのウェブ AI で有益な商品レビューを促進する

Maud Nalpas

Kenji Baheux

Alexandra Klepper

公開日: 2024 年 5 月 16 日

肯定的なレビューと否定的なレビューは、購入者の購入判断に影響を与える可能性があります。

外部調査によると、オンライン買い物客の 82% は、購入前に否定的なレビューを積極的に求めています。こうした否定的なレビューは、返品率の低下や商品の改善に役立つため、ユーザーとビジネスの両方に有益です。

レビューの質を高める方法はいくつかあります。

送信する前に、各レビューに有害な表現がないか確認します。他のユーザーが購入を決める際の判断材料として役立つレビューになるよう、冒とく的な表現や役に立たないコメントを削除するようユーザーに促すことができます。
- 否定的: このバッグは使いづらく、嫌いです。
- 否定的で有用なフィードバックありジッパーが非常に硬く、素材が安っぽく感じます。このバッグを返品しました。
レビューで使用されている言語に基づいて評価を自動生成します。
クチコミが否定的か肯定的かを判断します。

センチメントと星評価が付いたレビューの例のスクリーンショット。 — この例では、レビューアーのコメントにポジティブなセンチメントと 5 つ星の評価が付けられています。

最終的には、商品の評価についてユーザーが最終的な判断を下す必要があります。

次の Codelab では、デバイス上とブラウザ内のクライアントサイドソリューションを紹介します。AI 開発の知識、サーバー、API キーは不要です。

前提条件

ソリューションを使用したサーバーサイド AI（Gemini API や OpenAI API など）は、多くのアプリケーションに堅牢なソリューションを提供しますが、このガイドではクライアントサイドウェブ AI に焦点を当てます。クライアントサイドの AI 推論はブラウザで行われ、サーバーのラウンドトリップをなくすことでウェブユーザーのエクスペリエンスが向上します。

この Codelab では、さまざまな手法を使用して、クライアントサイド AI のツールボックスの内容を説明します。

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

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

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

最適なユーザーエクスペリエンスと安全性を確保するために、いくつかの点にご留意ください。

ユーザーによる評価の編集を許可します。最終的には、ユーザーが商品の評価について最終的な判断を下す必要があります。
評価とレビューが自動化されていることをユーザーに明確に伝えます。
有害と分類されたレビューをユーザーが投稿できるようにしますが、サーバーで 2 回目のチェックを実行します。これにより、有害ではないレビューが誤って有害と分類される（誤検出）という不満を解消できます。また、悪意のあるユーザーがクライアント側のチェックをバイパスした場合も対象となります。
クライアントサイドの有害性チェックは有用ですが、回避される可能性があります。サーバーサイドでもチェックを実行してください。

TensorFlow.js で有害性を分析する

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

TensorFlow.js ライブラリと毒性モデルをインストールしてimportします。
最小予測信頼度を設定します。デフォルトは 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 Inference API を使用すると、大規模言語モデル（LLM）を完全にブラウザで実行できます。

LLM のメモリとコンピューティングの需要を考えると、この新しい機能は特に革新的です。LLM はクライアントサイドモデルの 100 倍以上です。新しいオペレーション、量子化、キャッシュ保存、重み共有など、ウェブスタック全体の最適化により、これが可能になります。出典: 「Large Language Models On-Device with MediaPipe and 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 は、v3 でのウェブ GPU のサポートを追加しており、デバイス上の推論を何倍にも高速化できます。

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

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

ウェブの生成 AI の分野は急速に進化しています。今後、ウェブ向けに最適化された小型モデルが登場することが期待されます。

次のステップ

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