感謝觀看 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, 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',
};

輸入和輸出

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

，瞭解如何調查及移除這項存取權。