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

Maud Nalpas
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 技術為基礎的評論建議,能提升使用者發布產品評論的作業流程。在我們的實作中,即使模型未載入,使用者仍可發布評論,因此無法提供改善提示。

圖 1. 即使 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>
    

    明確安排提示內容,有助於模型區分示例清單 (幾張相片) 和實際輸入內容。

  • 指定目標有誤。有時,模型會建議變更產品,而非評論文字。舉例來說,如果評論提到「我討厭這些襪子」,模型可能會建議「考慮更換不同品牌或款式的襪子」,這並非理想的結果。分割提示有助於釐清任務,並改善模型在評論上的重點。