感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

瀏覽用戶端 AI 提供的產品評論建議

Maud Nalpas

發布日期：2024 年 10 月 21 日

網路商店顯示產品評論後，轉換次數增加了 270% 。負面評論也是關鍵，因為這有助於建立信譽。82% 的線上購物者在購物前會搜尋相關資訊。

鼓勵消費者留下實用的產品評論，特別是在負面時可能有些困難。我們將在這裡探討如何使用生成式 AI，協助使用者撰寫有用的評論，協助其他人做出購買決策。

示範和程式碼

試用產品評論示範，並查看 GitHub 上的程式碼。

我們如何建構這項功能

用戶端 AI

在本示範中，我們在用戶端實作這項功能，原因如下：

延遲時間。我們希望在使用者停止輸入時，盡快提供建議。我們可以避免伺服器來回行程。
費用。雖然這是示範，但如果您考慮在正式版中推出類似的功能，建議您先進行實驗，直到您能夠驗證這項功能是否適合使用者。

MediaPipe 生成式 AI

我們選擇透過 MediaPipe LLM 推論 API (MediaPipe GenAI 套件) 使用 Gemma 2B 模型，原因如下：

模型準確率：Gemma 2B 可以在大小和準確率之間取得絕佳平衡。收到恰當的提示時，就能得到滿意的結果。
跨瀏覽器支援：所有支援 WebGPU 的瀏覽器皆支援 MediaPipe。

使用者體驗

採用效能最佳做法

Gemma 2B 是小型 LLM，但仍是大型檔案的下載量。採用效能最佳做法，包括使用網路工作者。

將功能設為選用

我們希望以 AI 技術為基礎的評論建議，能提升使用者發布產品評論的作業流程。在我們的實作中，即使模型未載入，使用者仍可發布評論，因此無法提供改善提示。

UI 狀態和動畫

推論通常需要比「即時」更長的時間，因此我們會向使用者發出模型正在執行推論或「思考」的信號。我們使用動畫來減輕等待時間，同時向使用者保證應用程式運作正常。探索我們在示範中實作的不同 UI 狀態，這些狀態是由 Adam Argyle 設計。

圖 2：動畫會示範模型的載入過程，然後「思考」，最後完成。

其他注意事項

在實際工作環境中，您可以：

提供意見回饋機制。如果這些建議太少或不夠合理該怎麼辦？實施快速意見回饋機制 (例如按讚和按下非讚)，並仰賴經驗法則來判斷使用者認為有用的內容。舉例來說，您可以評估有多少使用者與這項功能互動，以及是否會關閉這項功能。
允許選擇退出。如果使用者不想使用 AI 協助功能，或覺得這項功能很煩人，該怎麼辦？允許使用者視需要選擇退出及重新啟用。
說明這項功能的用途。簡短的說明可能會鼓勵使用者使用意見回饋工具。例如：「請提供更優質的意見回饋，幫助其他購物者決定要購買的產品，以及協助我們打造您想要的產品。」您可以加入詳細說明，說明這項功能的運作方式和提供這項功能的原因，並附上連結，讓使用者進一步瞭解。
在適當情況下揭露 AI 使用情形。在用戶端 AI 中，使用者的內容不會傳送至伺服器進行處理，因此可保密。不過，如果您建構伺服器端備用機制或以其他方式透過 AI 收集資訊，建議您將這項資訊加入隱私權政策、服務條款或其他地方。

實作

我們導入產品評論建議工具，適用於各種用途。請將下列資訊視為日後用於用戶端 AI 功能的基礎。

網路工作站中的 MediaPipe

使用 MediaPipe LLM 推論時，AI 程式碼只需要幾行程式碼：傳送模型網址來建立檔案解析器和 LLM 推論物件，然後使用該 LLM 推論執行個體生成回應。

不過，我們的程式碼範例會更全面。這是因為它是在網路工作站中實作，因此會透過自訂訊息代碼將訊息傳遞至主要指令碼。進一步瞭解這個模式。

// Trigger model preparation *before* the first message arrives
self.postMessage({ code: MESSAGE_CODE.PREPARING_MODEL });
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 });
} catch (error) {
  self.postMessage({ code: MESSAGE_CODE.MODEL_ERROR });
}

// Trigger inference upon receiving a message from the main script
self.onmessage = async function (message) {
  // Run inference = Generate an LLM response
  let response = null;
  try {
    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 });
    return;
  }
  // 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',
};

輸入和輸出

圖 3：這張圖表說明如何透過推論處理提示，將原始 LLM 輸出內容解析為可讀取的顯示建議。

我們的完整提示是使用少量樣本提示建構而成。包括使用者輸入內容，也就是使用者撰寫的評論草稿。

為了根據使用者輸入內容產生提示，我們會在執行階段呼叫公用函式 generatePrompt。

與伺服器端 AI 相比，用戶端 AI 模型和程式庫通常提供較少的實用工具。舉例來說，JSON 模式通常無法使用。也就是說，我們需要在提示中提供所需的輸出結構。相較於透過模型設定提供結構定義，這種做法較不簡潔、容易維護且可靠。此外，用戶端模型通常較小，因此輸出內容更容易出現結構性錯誤。

實際上，我們發現 Gemma 2B 比 JSON 或 JavaScript 更能以文字形式提供結構化輸出內容。因此，在本示範中，我們選擇使用文字格式的輸出格式。接著，模型會產生文字，將輸出內容剖析為 JavaScript 物件，並在網頁應用程式中進一步處理。

改善提示

Gemini Chat 介面中的提示和回覆。 — 圖 4. 我們要求 Gemini Chat 改善提示，它會提供答案，並說明改善內容和有效性的警告。

我們使用 LLM 反覆改進提示

少量樣本提示。為了產生少量樣本提示的範例，我們使用了 Gemini Chat。Gemini Chat 會使用最強大的 Gemini 模型。進而產出優質樣本。
提示修飾。提示結構備妥後我們也會使用 Gemini Chat 調整提示這有助於改善輸出品質。

運用背景資訊提升品質

在提示中加入產品類型，有助於模型提供更相關、更高品質的建議。在本示範中，產品類型為靜態產品。在實際應用程式中，您可以根據使用者造訪的網頁，以動態方式將產品加入提示中。

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."

提示中「幾張相片」部分的其中一個示例：建議修正內容和示例評論中都包含產品類型 (「襪子」)。

LLM 錯誤和修正方式

相較於功能更強大、規模更大的伺服器端模型，Gemma 2B 通常需要更多提示工程。

我們在 Gemma 2B 上遇到一些挑戰。以下是我們改善結果的方式：

太厲害了。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>
```
明確安排提示內容，有助於模型區分示例清單 (少量短片) 和實際輸入內容。
目標有誤，有時，模型會建議變更產品，而非評論文字。舉例來說，如果評論提到「我討厭這些襪子」，模型可能會建議「考慮更換其他品牌或款式的襪子」，這並非理想的結果。分割提示有助於釐清任務，並改善模型在評論上的重點。