สำรวจคำแนะนำรีวิวผลิตภัณฑ์ด้วย AI ฝั่งไคลเอ็นต์

Maud Nalpas

เผยแพร่เมื่อวันที่ 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

ข้อควรพิจารณาอื่นๆ

ในสภาพแวดล้อมเวอร์ชันที่ใช้งานจริง คุณอาจต้องดำเนินการต่อไปนี้

• จัดให้มีกลไกแสดงความคิดเห็น จะทำอย่างไรหากคำแนะนำนั้นธรรมดา หรือไม่สมเหตุสมผล ใช้กลไกการแสดงความคิดเห็นอย่างรวดเร็ว (เช่น การยกนิ้วโป้ง และไม่ชอบ) และใช้วิธีการเรียนรู้เพื่อพิจารณาว่าสิ่งใดมีประโยชน์สำหรับผู้ใช้ เช่น ประเมินจํานวนผู้ใช้ที่โต้ตอบกับฟีเจอร์ และดูว่าผู้ใช้ปิดฟีเจอร์หรือไม่
• อนุญาตให้เลือกไม่ใช้ จะเกิดอะไรขึ้นหากผู้ใช้ต้องการใช้คำของตนเองโดยไม่รับความช่วยเหลือจาก 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>
  

  การจัดโครงสร้างพรอมต์อย่างชัดเจนจะช่วยให้โมเดลแยกความแตกต่างระหว่างรายการตัวอย่าง (ภาพไม่กี่ภาพ) กับอินพุตจริงได้

• เป้าหมายไม่ถูกต้อง ในบางครั้ง โมเดลจะแนะนำการเปลี่ยนแปลงผลิตภัณฑ์แทนข้อความรีวิว ตัวอย่างเช่น สำหรับรีวิวที่ระบุว่า "ฉันเกลียดถุงเท้าเหล่านี้" โมเดลอาจแนะนำว่า "ลองเปลี่ยนถุงเท้าเป็นแบรนด์หรือสไตล์อื่น" ซึ่งไม่ค่อยน่าจะให้ผลลัพธ์ที่ดี การแยกพรอมต์ช่วยทำให้งานชัดเจนขึ้นและปรับปรุงการมุ่งเน้นของโมเดลในการตรวจสอบ