發布日期: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 設計。
其他注意事項
在實際工作環境中,您可以:
- 提供意見回饋機制如果建議內容不夠好,或不合理,該怎麼辦?實作快速意見回饋機制 (例如按讚和按下非讚),並仰賴經驗法則來判斷使用者認為有用的內容。舉例來說,您可以評估有多少使用者與這項功能互動,以及是否會關閉這項功能。
- 允許選擇退出。如果使用者不想使用 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',
};
輸入和輸出
我們的完整提示是使用少量樣本提示建構而成。包括使用者輸入內容,也就是使用者撰寫的評論草稿。
為了根據使用者輸入內容產生提示,我們會在執行階段呼叫公用函式 generatePrompt
。
一般來說,用戶端 AI 模型和程式庫的實用工具比伺服器端 AI 少。舉例來說,JSON 模式通常無法使用。也就是說,我們需要在提示中提供所需的輸出結構。相較於透過模型設定提供結構定義,這項做法不夠簡潔、可維護且可靠。此外,用戶端模型通常較小,因此輸出內容更容易出現結構性錯誤。
實際上,我們發現 Gemma 2B 比 JSON 或 JavaScript 更能以文字形式提供結構化輸出內容。因此,在本示範中,我們選擇使用文字格式的輸出格式。模型會產生文字,我們會將輸出內容解析為 JavaScript 物件,以便在網頁應用程式中進一步處理。
改善提示
我們使用 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>
明確安排提示內容,有助於模型區分示例清單 (幾張相片) 和實際輸入內容。
指定目標有誤。有時,模型會建議變更產品,而非評論文字。舉例來說,如果評論提到「我討厭這些襪子」,模型可能會建議「考慮更換不同品牌或款式的襪子」,這並非理想的結果。分割提示有助於釐清任務,並改善模型在評論上的重點。