クライアントサイド AI による商品レビューの提案を確認する

Maud Nalpas

公開日: 2024 年 10 月 21 日

オンラインショップは 270% 増加 コンバージョン数の伸び。否定的なレビューも重要です。信頼を築くうえで役立ちます。オンライン ショッピング ユーザーの 82% が購入前にクーポンを探しています。

特にネガティブな場合は、役に立つ商品レビューを投稿するようお客様に促すのは難しい場合があります。ここでは、生成 AI を使用して ユーザーは有益なレビューを書いて、判断するのに役立ちます

デモとコード

Google Cloud の 商品レビュー デモ 調査し、 GitHub にあるコードをご覧ください。

作成方法

クライアントサイド AI

このデモでは、以下の理由からクライアントサイドに機能を実装しました。

• レイテンシ。ユーザーが入力を停止した直後に、すばやく候補を表示したいと考えております。これは、サーバーのラウンドトリップを回避することで実現できます。
• 費用。これはデモですが、同様の機能を本番環境でリリースすることを検討している場合は、この機能がユーザーにとって有用かどうかを検証するまで、サーバーサイドの費用なしでテストすることをおすすめします。

MediaPipe 生成 AI

ここでは Gemma 2B モデルを使って、 MediaPipe LLM Inference API （MediaPipe 生成 AI パッケージ）、 理由は次のとおりです。

• モデルの精度: Gemma 2B はサイズと精度のバランスが優れています。適切なプロンプトを与えると、このデモで満足できる結果が得られました。
• クロスブラウザ サポート: MediaPipe は、WebGPU をサポートするすべてのブラウザでサポートされています。

ユーザー エクスペリエンス

パフォーマンスに関するベスト プラクティスを適用する

Gemma 2B は小規模な LLM ですが、それでもダウンロード サイズが大きくなります。 パフォーマンスのベスト プラクティスを適用する（ウェブワーカーの使用など）。

機能をオプションにする

AI ベースのクチコミ提案により、ユーザーが 評価しています。Google の実装では、モデルが読み込まれていない場合でもユーザーはレビューを投稿できるため、改善のヒントは提供されません。

UI の状態とアニメーション

推論は通常、即時に実行されるものではありません。そのため、モデルが推論を実行中であることをユーザーに知らせます。アニメーションを使用して待機時間を短縮し、アプリケーションが意図したとおりに動作していることをユーザーに示します。Adam Argyle が設計したこのデモで実装したさまざまな UI の状態を確認します。

その他の考慮事項

本番環境では、次のことが必要になります。

• フィードバック メカニズムを提供する。表示された候補があまり役に立たない場合は 意味がありませんか？簡単なフィードバック メカニズム（高評価や低評価など）を実装し、ヒューリスティクスに基づいてユーザーにとって有用なものを判断します。たとえば、この機能を使用しているユーザーの数や、オフにしているかどうかを評価します。
• オプトアウトを許可する。ユーザーが名前を指定せずに自分の言葉を使用したい場合、 AI アシスタントを利用したり、その機能が煩わしいと感じたりしますか？ユーザーがオプトアウトできるようにする 必要に応じて再度有効化します。
• この機能が存在する理由を説明します。簡単な説明を追加すると、ユーザーがフィードバック ツールを使用するよう促すことができます。たとえば、「良いフィードバックは 買い物客が購入する商品を決めて、私たちが欲しい商品を作るお手伝いをします。」リンク先の詳細情報として、この機能の仕組みと提供理由について詳しく説明できます。
• 必要に応じて AI の使用を開示する。クライアントサイドの AI を使用すると、 処理のためにサーバーに送信されないため、機密性を維持できます。ただし、 サーバーサイドのフォールバックの構築や AI による情報収集 プライバシー ポリシーや利用規約などへの追加をご検討ください。

実装

商品レビューの候補生成ツールの実装は、幅広いユースケースで使用できます。今後の参考のために、次の情報を検討してください。 クライアントサイドの AI 機能。

ウェブワーカーでの MediaPipe

MediaPipe LLM 推論では、AI コードは数行で済みます。モデル URL を渡してファイル リゾルバと LLM 推論オブジェクトを作成し、後でその LLM 推論インスタンスを使用してレスポンスを生成します。

ただし、このコードサンプルは少し複雑です。なぜなら、 実装されているため、メイン スクリプトを含むメッセージを カスタムメッセージコードも追加できます詳しくは、このパターンをご覧ください。

// Trigger model preparation *before* the first message arrives
self.postMessage({ code: MESSAGE_CODE.PREPARING_MODEL, payload: null });
try {
  // Create a FilesetResolver instance for GenAI tasks
  const genai = await FilesetResolver.forGenAiTasks(MEDIAPIPE_WASM);
  // Create an LLM Inference instance from the specified model path
  llmInference = await LlmInference.createFromModelPath(genai, MODEL_URL);
  self.postMessage({ code: MESSAGE_CODE.MODEL_READY, payload: null });
} catch (error) {
  self.postMessage({ code: MESSAGE_CODE.MODEL_ERROR, payload: null });
}

// Trigger inference upon receiving a message from the main script
self.onmessage = function (message) {
  if (!llmInference) {
    // Just in case. This condition shouldn't normally be hit because
    // the inference UI button is disabled until the model is ready
    throw new Error("Can't run inference, the model is not ready yet");
  }
  (async function () {
    // Run inference = Generate an LLM response
    try {
    const response = await llmInference.generateResponse(
      // Create a prompt based on message.data, which is the actual review
      // draft the user has written. generatePrompt is a local utility function.
      generatePrompt(message.data)
    );
    } catch (error) {
      self.postMessage({ code: MESSAGE_CODE.INFERENCE_ERROR, payload: null });
    }
    // Parse and process the output using a local utility function
    const reviewHelperOutput = generateReviewHelperOutput(response);
    // Post a message to the main thread
    self.postMessage({
      code: MESSAGE_CODE.RESPONSE_READY,
      payload: reviewHelperOutput,
    });
  })();
};

export const MESSAGE_CODE ={
  PREPARING_MODEL: 'preparing-model',
  MODEL_READY: 'model-ready',
  GENERATING_RESPONSE: 'generating-response',
  RESPONSE_READY: 'response-ready',
  MODEL_ERROR: 'model-error',
  INFERENCE_ERROR: 'inference-error',
};

入力と出力

フルプロンプトは、少数ショット プロンプトで構築されています。ユーザーの入力、つまりユーザーが作成したレビューの下書きが含まれます 表示されます。

ユーザー入力に基づいてプロンプトを生成するため、ユーティリティ関数 generatePrompt を実行時に呼び出します。

通常、クライアントサイドの AI モデルとライブラリには、サーバーサイドの AI よりもユーティリティが少なくなっています。たとえば JSON モード 多くの場合、利用できません。つまり、望ましい出力をモデルに提供する必要があります。 構成します。これは、モデル構成でスキーマを指定する場合よりも、クリーンさ、メンテナンス性、信頼性が低くなります。また、クライアントサイド モデルはサイズが小さい傾向があるため、出力に構造的なエラーが発生しやすくなります。

実際には、Gemma 2B は JSON や JavaScript と比較して、テキストとして構造化出力を提供するのに優れていることがわかりました。このデモでは、テキストベースの出力形式を選択しました。モデルがテキストを生成し、それを 出力を解析し、Web 内でさらに処理できるように JavaScript オブジェクトに変換する 。

プロンプトの改善

LLM を使用してプロンプトを繰り返し処理しました。

• 少数ショット プロンプト。少数ショット プロンプトの例を生成するために、Gemini Chat を使用しました。Gemini Chat は 生成 AI です。これにより、高品質の例が生成されました。
• プロンプトの調整。プロンプトの構造の準備ができたら、 プロンプトを改良します。これにより、出力の品質が向上しました。

コンテキストに基づいて品質を高める

プロンプトに商品カテゴリを含めることで、モデルの予測結果が より関連性の高い質の高い提案をします。このデモでは、商品タイプは静的です。実際のアプリケーションでは、プロダクトをモジュールに動的に組み込むことができます。 プロンプトが表示されます。

Review: "I love these."
Helpful: No  
Fix: Be more specific, explain why you like these **socks**.
Example: "I love the blend of wool in these socks. Warm and not too heavy."

プロンプトの少数ショット セクションの例の 1 つ: 推奨される修正とサンプル レビューに商品タイプ（「靴下」）が含まれています。

LLM の誤問題と修正

通常、Gemma 2B では、より強力で大規模なサーバーサイド モデルよりもプロンプト エンジニアリングが必要になります。

Gemma 2B でいくつかの問題が発生しました。P-MAX キャンペーンと 結果:

• あまりにも優しい。Gemma 2B はレビューを「役に立たなかった」とマークするのに苦戦していました。一見すると 判断をためらっていますラベルの表現をより中立的なもの（「有用」と「有用でない」ではなく「具体的」と「具体的でない」）にし、例を追加しましたが、結果は改善しませんでした。どのような点が 強さと繰り返しを表します。 思考の連鎖アプローチでも改善が見込めます。

• 手順が不明確。モデルがプロンプトを過剰に解釈することがあります。レビューを評価する代わりに、例のリストが続きました。この問題を解決するため、プロンプトに明確な遷移を追加しました。

  I'll give you example reviews and outputs, and then give you one review
  to analyze. Let's go:
  Examples:
  <... Examples>
  
  Review to analyze:
  <... User input>
  

  プロンプトを明確に構造化すると、モデルがサンプルリスト（少数ショット）と実際の入力を区別しやすくなります。

• ターゲットが間違っています。モデルが、レビュー テキストではなく商品の変更を提案することがあります。たとえば、「この靴下は嫌い」というレビューに対して、モデルは「靴下を別のブランドやスタイルに交換することを検討してください」と提案する可能性がありますが、これは望ましい効果ではありません。プロンプトを分割することで タスクを明確にし、モデルのレビューへの注力を改善しました。