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

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

Maud Nalpas

Kenji Baheux

Alexandra Klepper

公開日: 2024 年 5 月 16 日

肯定的なレビューも否定的なレビューも、購入者の購入の意思決定に役立つ可能性があります。

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

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

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

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

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

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

前提条件

ソリューション（Gemini API や OpenAI API など）を備えたサーバーサイド AI は、多くのアプリケーションに堅牢なソリューションを提供しますが、このガイドではクライアントサイドのウェブ 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）をブラウザ内で完全に実行できます。

この新機能は、クライアントサイドモデルの 100 倍を超えるメモリとコンピューティングの需要がある LLM の需要を考えると、特に変革的です。ウェブスタック全体の最適化（新しいオペレーション、量子化、キャッシュ、重み共有など）により、これが可能になります。ソース: 「MediaPipe と 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 を実行する別の方法を試験運用しています。早期プレビュープログラムに登録して、この機能をテストできます。