เผยแพร่เมื่อวันที่ 21 ตุลาคม 2024
ร้านค้าออนไลน์ได้รับConversion เพิ่มขึ้น 270% ด้วยการแสดงรีวิวผลิตภัณฑ์ รีวิวเชิงลบก็สำคัญเช่นกันเนื่องจากช่วยสร้างความน่าเชื่อถือ 82% ของผู้เลือกซื้อออนไลน์มองหารีวิวก่อนซื้อ
การกระตุ้นให้ลูกค้าเขียนรีวิวผลิตภัณฑ์ที่เป็นประโยชน์ โดยเฉพาะเมื่อรีวิวเชิงลบนั้นเป็นเรื่องยาก เราจะมาสำรวจวิธีใช้ Generative AI เพื่อช่วยผู้ใช้เขียนรีวิวที่ให้ข้อมูลซึ่งช่วยในการตัดสินใจซื้อของผู้อื่น
การสาธิตและโค้ด
ลองใช้การสาธิตการตรวจสอบผลิตภัณฑ์และดูโค้ดบน GitHub
วิธีการที่เราสร้าง
AI ฝั่งไคลเอ็นต์
ในการสาธิตนี้ เราติดตั้งใช้งานฟีเจอร์ฝั่งไคลเอ็นต์ด้วยเหตุผลต่อไปนี้
- เวลาในการตอบสนอง เราต้องการแสดงคำแนะนำอย่างรวดเร็วทันทีที่ผู้ใช้หยุดพิมพ์ เราให้บริการนี้ได้โดยหลีกเลี่ยงการส่งข้อมูลไปมาระหว่างเซิร์ฟเวอร์
- ต้นทุน แม้ว่าจะเป็นเวอร์ชันเดโม แต่หากคุณกำลังพิจารณาเปิดตัวฟีเจอร์ที่คล้ายกันในเวอร์ชันที่ใช้งานจริง การทดสอบโดยไม่มีค่าใช้จ่ายฝั่งเซิร์ฟเวอร์เป็นตัวเลือกที่ยอดเยี่ยมจนกว่าคุณจะยืนยันได้ว่าฟีเจอร์ดังกล่าวเหมาะกับผู้ใช้หรือไม่
Generative AI ของ MediaPipe
เราเลือกใช้รูปแบบ Gemma 2B ผ่าน MediaPipe LLM Inference API (MediaPipe GenAI package) ด้วยเหตุผลต่อไปนี้
- ความแม่นยำของโมเดล: Gemma 2B มีขนาดและความแม่นยำที่ยอดเยี่ยม เมื่อได้รับพรอมต์อย่างเหมาะสม ฟีเจอร์นี้ให้ผลลัพธ์ที่เราพบว่าน่าพอใจสำหรับการแสดงตัวอย่างนี้
- การรองรับข้ามเบราว์เซอร์: MediaPipe ใช้งานได้ในเบราว์เซอร์ทั้งหมดที่รองรับ WebGPU
ประสบการณ์ของผู้ใช้
ใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ
แม้ว่า Gemma 2B จะเป็น LLM ขนาดเล็ก แต่ก็ยังคงเป็นการดาวน์โหลดขนาดใหญ่ ใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ ซึ่งรวมถึงการใช้ Web Worker
กำหนดให้ฟีเจอร์เป็นแบบไม่บังคับ
เราต้องการให้คำแนะนำรีวิวที่อิงตาม AI ช่วยปรับปรุงเวิร์กโฟลว์ของผู้ใช้ในการโพสต์รีวิวผลิตภัณฑ์ ในการใช้งานของเรา ผู้ใช้สามารถโพสต์รีวิวได้แม้ว่าระบบจะยังไม่ได้โหลดโมเดลและไม่ได้แสดงเคล็ดลับการปรับปรุง
สถานะและภาพเคลื่อนไหวของ UI
โดยทั่วไปแล้ว การทำนายผลจะใช้เวลานานกว่าที่ผู้ใช้จะรู้สึกว่าทันที เราจึงแจ้งให้ผู้ใช้ทราบว่าโมเดลกำลังทำนายผลหรือ "กำลังคิด" เราใช้ภาพเคลื่อนไหวเพื่อลดความน่าเบื่อในการรอ และเพื่อสร้างความมั่นใจให้ผู้ใช้ว่าแอปพลิเคชันทำงานได้ตามที่ต้องการ ดูสถานะ UI ต่างๆ ที่เรานำมาใช้ในเดโม ซึ่งออกแบบโดย Adam Argyle
ข้อควรพิจารณาอื่นๆ
ในสภาพแวดล้อมเวอร์ชันที่ใช้งานจริง คุณอาจต้องดำเนินการต่อไปนี้
- จัดให้มีกลไกแสดงความคิดเห็น จะเกิดอะไรขึ้นหากคําแนะนํานั้นไม่ดีนักหรือไม่สมเหตุสมผล ใช้กลไกการแสดงความคิดเห็นอย่างรวดเร็ว (เช่น การกดชอบและไม่ชอบ) และใช้วิธีการแบบเฮuristic เพื่อพิจารณาว่าผู้ใช้พบว่าสิ่งใดมีประโยชน์ เช่น ประเมินจํานวนผู้ใช้ที่โต้ตอบกับฟีเจอร์ และดูว่าผู้ใช้ปิดฟีเจอร์หรือไม่
- อนุญาตให้เลือกไม่รับ จะเกิดอะไรขึ้นหากผู้ใช้ต้องการใช้คำของตนเองโดยไม่รับความช่วยเหลือจาก AI หรือพบว่าฟีเจอร์นี้น่ารำคาญ อนุญาตให้ผู้ใช้เลือกไม่ใช้และเลือกรับอีกครั้งได้ตามต้องการ
- อธิบายเหตุผลที่ต้องมีฟีเจอร์นี้ คำอธิบายสั้นๆ อาจกระตุ้นให้ผู้ใช้ใช้เครื่องมือแสดงความคิดเห็น เช่น "ความคิดเห็นที่ดีขึ้นจะช่วยให้ผู้เลือกซื้อคนอื่นๆ ตัดสินใจได้ว่าควรซื้ออะไร และช่วยให้เราสร้างผลิตภัณฑ์ที่คุณต้องการได้" คุณอาจเพิ่มคำอธิบายแบบยาวเกี่ยวกับวิธีการทำงานของฟีเจอร์และเหตุผลที่คุณให้บริการฟีเจอร์ดังกล่าว เช่น ใส่ลิงก์ "ดูข้อมูลเพิ่มเติม"
- เปิดเผยการใช้งาน AI ตามความเกี่ยวข้อง เมื่อใช้ AI ฝั่งไคลเอ็นต์ ระบบจะไม่ส่งเนื้อหาของผู้ใช้ไปยังเซิร์ฟเวอร์เพื่อประมวลผล จึงเก็บเนื้อหาดังกล่าวไว้เป็นส่วนตัวได้ อย่างไรก็ตาม หากคุณสร้างทางเลือกฝั่งเซิร์ฟเวอร์หรือรวบรวมข้อมูลด้วย AI ให้พิจารณาเพิ่มข้อมูลดังกล่าวลงในนโยบายความเป็นส่วนตัว ข้อกำหนดในการให้บริการ หรือที่อื่นๆ
การใช้งาน
การใช้งานเครื่องมือแนะนำรีวิวผลิตภัณฑ์ของเราใช้ได้กับ Use Case หลากหลาย โปรดใช้ข้อมูลต่อไปนี้เป็นพื้นฐานสําหรับฟีเจอร์ AI ฝั่งไคลเอ็นต์ในอนาคต
MediaPipe ในเว็บเวิร์กเกอร์
เมื่อใช้การอนุมาน LLM ของ MediaPipe โค้ด AI จะมีเพียงไม่กี่บรรทัดเท่านั้น ได้แก่ สร้างโปรแกรมแก้ไขไฟล์และออบเจ็กต์การอนุมาน LLM ด้วยการส่ง URL ของโมเดล จากนั้นใช้อินสแตนซ์การอนุมาน LLM นั้นเพื่อสร้างการตอบกลับในภายหลัง
แต่ตัวอย่างโค้ดของเราจะครอบคลุมมากกว่า นั่นเป็นเพราะมีการนำไปใช้งานใน Web Worker จึงส่งข้อความที่มีสคริปต์หลักผ่านรหัสข้อความที่กำหนดเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบนี้
เท่านั้น// 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',
};
อินพุตและเอาต์พุต
พรอมต์แบบเต็มสร้างขึ้นด้วยพรอมต์แบบ Few-Shot ซึ่งรวมถึงข้อมูลของผู้ใช้ หรือก็คือฉบับร่างรีวิวที่ผู้ใช้เขียน
หากต้องการสร้างพรอมต์ตามข้อมูลที่ผู้ใช้ป้อน เราจะเรียกใช้ฟังก์ชันยูทิลิตี 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>
การจัดโครงสร้างพรอมต์อย่างชัดเจนจะช่วยให้โมเดลแยกความแตกต่างระหว่างรายการตัวอย่าง (ภาพไม่กี่ภาพ) กับอินพุตจริงได้
เป้าหมายไม่ถูกต้อง ในบางครั้ง โมเดลจะแนะนำการเปลี่ยนแปลงผลิตภัณฑ์แทนข้อความรีวิว เช่น สำหรับรีวิวที่ระบุว่า "ฉันเกลียดถุงเท้าเหล่านี้" โมเดลอาจแนะนำว่า "ลองเปลี่ยนถุงเท้าเป็นแบรนด์หรือสไตล์อื่น" ซึ่งไม่ใช่ผลลัพธ์ที่ต้องการ การแยกพรอมต์ช่วยทำให้งานชัดเจนขึ้นและปรับปรุงการมุ่งเน้นของโมเดลในการตรวจสอบ