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

Maud Nalpas
Maud Nalpas
Kenji Baheux
Kenji Baheux

公開日: 2024 年 5 月 16 日

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

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

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

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

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

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

前提条件

ソリューション(Gemini APIOpenAI 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 を使用すると、ユーザー レビューの有害性を簡単に分析できます。

  1. TensorFlow.js ライブラリと毒性モデルをインストールしてimportします。
  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)をブラウザ内で完全に実行できます。

この新機能は、クライアントサイド モデルの 100 倍を超えるメモリとコンピューティングの需要がある 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/ML の専門知識は不要です。プロンプトの設計には反復処理が必要ですが、残りのコードは標準のウェブ開発です。

クライアント サイドのモデルは非常に正確です。このドキュメントのスニペットを実行すると、有害性分析と感情分析の両方で正確な結果が得られます。テストしたいくつかの参照レビューでは、Gemma の評価はほとんど Gemini モデルの評価と一致しました。その精度を検証するには、さらにテストを行う必要があります。

ただし、Gemma 2B のプロンプトを設計するには手間がかかります。Gemma 2B は小規模な LLM であるため、満足のいく結果を得るには詳細なプロンプトが必要です。特に、Gemini API で必要なプロンプトよりも詳細なプロンプトが必要です。

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

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

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

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

次のステップ

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