發布日期: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, 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 相比的結構化輸出內容在本次示範中 我們也選擇以文字為基礎的輸出格式模型會產生文字,我們會將輸出內容解析為 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>
明確安排提示內容,有助於模型區分示例清單 (少量短片) 和實際輸入內容。
目標有誤,模型有時會針對產品內容提出變更建議 而不是評論文字舉例來說,如果評論提到「我討厭這些襪子」,模型可能會建議「考慮更換不同品牌或款式的襪子」,這並非理想的結果。分割提示訊息有助於釐清任務,並改善模型在評論上的重點。