กระตุ้นให้ผู้ใช้เขียนรีวิวผลิตภัณฑ์ที่เป็นประโยชน์ด้วย AI บนเว็บฝั่งไคลเอ็นต์

Maud Nalpas

Kenji Baheux

Alexandra Klepper

เผยแพร่: 16 พฤษภาคม 2024

รีวิวเชิงบวกและเชิงลบช่วยให้ผู้ซื้อตัดสินใจซื้อได้

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

ต่อไปนี้เป็นวิธีปรับปรุงคุณภาพของรีวิว

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

ท้ายที่สุดแล้ว ผู้ใช้ควรมีสิทธิ์ตัดสินใจขั้นสุดท้ายเกี่ยวกับคะแนนผลิตภัณฑ์

Codelab ต่อไปนี้นำเสนอโซลูชันฝั่งไคลเอ็นต์ ในอุปกรณ์ และในเบราว์เซอร์ ไม่ต้องมีความรู้ด้านการพัฒนา AI, เซิร์ฟเวอร์ หรือคีย์ API

ข้อกำหนดเบื้องต้น

แม้ว่า AI ฝั่งเซิร์ฟเวอร์ที่มีโซลูชัน (เช่น Gemini API หรือ OpenAI API) จะมีโซลูชันที่มีประสิทธิภาพสําหรับแอปพลิเคชันจํานวนมาก แต่เราจะมุ่งเน้นที่ AI บนเว็บฝั่งไคลเอ็นต์ในคู่มือนี้ การอนุมาน AI ฝั่งไคลเอ็นต์จะเกิดขึ้นในเบราว์เซอร์เพื่อปรับปรุงประสบการณ์ของผู้ใช้เว็บด้วยการนําการติดต่อเซิร์ฟเวอร์แบบไปกลับออก

ในโค้ดแล็บนี้ เราจะใช้เทคนิคต่างๆ เพื่อแสดงเครื่องมือที่มีให้สำหรับ AI ฝั่งไคลเอ็นต์

เราใช้ไลบรารีและโมเดลต่อไปนี้

• TensforFlow.js สําหรับการวิเคราะห์ความเป็นพิษ TensorFlow.js เป็นไลบรารีแมชชีนเลิร์นนิงแบบโอเพนซอร์สสําหรับทั้งการอนุมานและการฝึกบนเว็บ
• transformers.js สําหรับการวิเคราะห์ความรู้สึก Transformers.js เป็นไลบรารี AI บนเว็บจาก Hugging Face
• Gemma 2B สำหรับการให้ดาว Gemma เป็นกลุ่มผลิตภัณฑ์โมเดลแบบเปิดที่มีน้ำหนักเบาซึ่งสร้างขึ้นจากงานวิจัยและเทคโนโลยีที่ Google ใช้ในการสร้างโมเดล Gemini หากต้องการเรียกใช้ Gemma ในเบราว์เซอร์ เราจะใช้ร่วมกับ LLM Inference API เวอร์ชันทดลองของ MediaPipe

ข้อควรพิจารณาด้าน UX และความปลอดภัย

ข้อควรพิจารณาบางประการเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานและความปลอดภัยที่ดีที่สุดมีดังนี้

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

วิเคราะห์ความเป็นพิษด้วย TensorFlow.js

คุณเริ่มวิเคราะห์ความเป็นพิษของรีวิวผู้ใช้ด้วย TensorFlow.js ได้อย่างรวดเร็ว

1. ติดตั้งและimport ไลบรารี TensorFlow.js และโมเดลความเป็นพิษ
2. ตั้งค่าความเชื่อมั่นในการคาดการณ์ขั้นต่ำ ค่าเริ่มต้นคือ 0.85 และในตัวอย่างนี้ เราตั้งค่าเป็น 0.9
3. โหลดโมเดลแบบไม่พร้อมกัน
4. จัดประเภทรีวิวแบบไม่พร้อมกัน โค้ดของเราจะระบุการคาดการณ์ที่สูงกว่าเกณฑ์ 0.9 สำหรับหมวดหมู่ใดก็ได้

โมเดลนี้สามารถจัดหมวดหมู่เนื้อหาที่เป็นพิษได้ ไม่ว่าจะเป็นการโจมตีด้วยข้อมูลส่วนบุคคล การดูหมิ่น คําหยาบคาย และอื่นๆ

เช่น

import * as toxicity from '@tensorflow-models/toxicity';

// Minimum prediction confidence allowed
const TOXICITY_COMMENT_THRESHOLD = 0.9;

const toxicityModel = await toxicity.load(TOXICITY_COMMENT_THRESHOLD);
const toxicityPredictions = await toxicityModel.classify([review]);
// `predictions` is an array with the raw toxicity probabilities
const isToxic = toxicityPredictions.some(
    (prediction) => prediction.results[0].match
);

ระบุความรู้สึกด้วย Transformers.js

1. ติดตั้งและนําเข้าไลบรารี Transformers.js

2. ตั้งค่างานการวิเคราะห์ความรู้สึกด้วยไปป์ไลน์เฉพาะ เมื่อใช้ไปป์ไลน์เป็นครั้งแรก ระบบจะดาวน์โหลดและแคชโมเดล จากนั้นการวิเคราะห์ความรู้สึกจะเร็วขึ้นมาก

   เว้นแต่คุณจะระบุโมเดล

3. จัดประเภทรีวิวแบบไม่พร้อมกัน ใช้เกณฑ์ที่กำหนดเองเพื่อกำหนดระดับความเชื่อมั่นที่คุณคิดว่าใช้ได้กับแอปพลิเคชัน

เช่น

import { pipeline } from '@xenova/transformers';

const SENTIMENT_THRESHOLD = 0.9;
// Create a pipeline (don't block rendering on this function)
const transformersjsClassifierSentiment = await pipeline(
  'sentiment-analysis'
);

// When the user finishes typing
const sentimentResult = await transformersjsClassifierSentiment(review);
const { label, score } = sentimentResult[0];
if (score > SENTIMENT_THRESHOLD) {
  // The sentiment is `label`
} else {
  // Classification is not conclusive
}

แนะนำการให้ดาวด้วย Gemma และ MediaPipe

LLM Inference API ช่วยให้คุณเรียกใช้โมเดลภาษาขนาดใหญ่ (LLM) ได้อย่างสมบูรณ์ในเบราว์เซอร์

ความสามารถใหม่นี้ช่วยทําการเปลี่ยนแปลงได้อย่างมากเมื่อพิจารณาถึงความต้องการหน่วยความจําและการประมวลผลของ LLM ซึ่งมากกว่าโมเดลฝั่งไคลเอ็นต์หลายร้อยเท่า การเพิ่มประสิทธิภาพในเว็บสแต็กทําให้การดำเนินการนี้เป็นไปได้ ซึ่งรวมถึงการดำเนินการแบบใหม่ การแปลงค่าเป็นจำนวนเต็ม การแคช และการแชร์น้ำหนัก แหล่งที่มา: "โมเดลภาษาขนาดใหญ่ในอุปกรณ์ด้วย MediaPipe และ TensorFlow Lite"

1. ติดตั้งและนําเข้า MediaPipe LLM inference API
2. ดาวน์โหลดโมเดล ในที่นี้ เราจะใช้ Gemma 2B ที่ดาวน์โหลดจาก Kaggle Gemma 2B เป็นโมเดลแบบเปิดที่เล็กที่สุดของ Google
3. ชี้โค้ดไปยังไฟล์โมเดลที่ถูกต้องด้วย FilesetResolver ซึ่งสำคัญเนื่องจากโมเดล Generative AI อาจมีโครงสร้างไดเรกทอรีที่เฉพาะเจาะจงสำหรับชิ้นงาน
4. โหลดและกําหนดค่าโมเดลด้วยอินเทอร์เฟซ LLM ของ MediaPipe เตรียมโมเดลให้พร้อมใช้งาน: ระบุตำแหน่งโมเดล ความยาวของคำตอบที่ต้องการ และระดับความคิดสร้างสรรค์ที่ต้องการด้วยอุณหภูมิ
5. ระบุพรอมต์ให้โมเดล (ดูตัวอย่าง)
6. รอการตอบกลับจากโมเดล
7. แยกวิเคราะห์คะแนน: ดึงข้อมูลคะแนนดาวจากคำตอบของโมเดล

import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';

const mediaPipeGenAi = await FilesetResolver.forGenAiTasks();
const llmInference = await LlmInference.createFromOptions(mediaPipeGenAi, {
    baseOptions: {
        modelAssetPath: '/gemma-2b-it-gpu-int4.bin',
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.5,
    randomSeed: 101,
});

const prompt = …
const output = await llmInference.generateResponse(prompt);

const int = /\d/;
const ratingAsString = output.match(int)[0];
rating = parseInt(ratingAsString);

ตัวอย่างพรอมต์

const prompt = `Analyze a product review, and then based on your analysis give me the
corresponding rating (integer). The rating should be an integer between 1 and 5.
1 is the worst rating, and 5 is the best rating. A strongly dissatisfied review
that only mentions issues should have a rating of 1 (worst). A strongly
satisfied review that only mentions positives and upsides should have a rating
of 5 (best). Be opinionated. Use the full range of possible ratings (1 to 5). \n\n
  \n\n
  Here are some examples of reviews and their corresponding analyses and ratings:
  \n\n
  Review: 'Stylish and functional. Not sure how it'll handle rugged outdoor use,
  but it's perfect for urban exploring.'
  Analysis: The reviewer appreciates the product's style and basic
  functionality. They express some uncertainty about its ruggedness but overall
  find it suitable for their intended use, resulting in a positive, but not
  top-tier rating.
  Rating (integer): 4
  \n\n
  Review: 'It's a solid backpack at a decent price. Does the job, but nothing
  particularly amazing about it.'
  Analysis: This reflects an average opinion. The backpack is functional and
  fulfills its essential purpose. However, the reviewer finds it unremarkable
  and lacking any standout features deserving of higher praise.
  Rating (integer): 3
  \n\n
  Review: 'The waist belt broke on my first trip! Customer service was
  unresponsive too. Would not recommend.'
  Analysis: A serious product defect and poor customer service experience
  naturally warrants the lowest possible rating. The reviewer is extremely
  unsatisfied with both the product and the company.
  Rating (integer): 1
  \n\n
  Review: 'Love how many pockets and compartments it has. Keeps everything
  organized on long trips. Durable too!'
  Analysis: The enthusiastic review highlights specific features the user loves
  (organization and durability), indicating great satisfaction with the product.
  This justifies the highest rating.
  Rating (integer): 5
  \n\n
  Review: 'The straps are a bit flimsy, and they started digging into my
  shoulders under heavy loads.'
  Analysis: While not a totally negative review, a significant comfort issue
  leads the reviewer to rate the product poorly. The straps are a key component
  of a backpack, and their failure to perform well under load is a major flaw.
  Rating (integer): 1
  \n\n
  Now, here is the review you need to assess:
  \n
  Review: "${review}" \n`;

สรุปประเด็นสำคัญ

ไม่จําเป็นต้องมีความเชี่ยวชาญด้าน AI/ML การออกแบบพรอมต์ต้องอาศัยการทําซ้ำ แต่โค้ดที่เหลือเป็นการพัฒนาเว็บมาตรฐาน

โมเดลฝั่งไคลเอ็นต์มีความแม่นยำพอสมควร หากเรียกใช้ข้อมูลโค้ดจากเอกสารนี้ คุณจะเห็นได้ว่าทั้งการวิเคราะห์ความเป็นพิษและความรู้สึกให้ผลลัพธ์ที่ถูกต้อง คะแนนของ Gemma ส่วนใหญ่ตรงกับคะแนนของโมเดล Gemini สำหรับรีวิวอ้างอิง 2-3 รายการที่ทดสอบ ต้องมีการทดสอบเพิ่มเติมเพื่อตรวจสอบความถูกต้อง

อย่างไรก็ตาม การออกแบบพรอมต์สำหรับ Gemma 2B นั้นต้องอาศัยความพยายาม เนื่องจาก Gemma 2B เป็น LLM ขนาดเล็ก จึงต้องใช้พรอมต์แบบละเอียดเพื่อให้ได้ผลลัพธ์ที่น่าพอใจ ซึ่งจะละเอียดกว่าที่ต้องใช้กับ Gemini API

การอนุมานจะรวดเร็วทันใจ หากคุณเรียกใช้ข้อมูลโค้ดจากเอกสารนี้ คุณควรสังเกตว่าการอนุมานจะรวดเร็วมาก ซึ่งอาจเร็วกว่าการติดต่อกับเซิร์ฟเวอร์ในอุปกรณ์จํานวนหนึ่ง อย่างไรก็ตาม ความเร็วในการอนุมานอาจแตกต่างกันไปอย่างมาก ต้องมีการเปรียบเทียบประสิทธิภาพอย่างละเอียดในอุปกรณ์เป้าหมาย เราคาดว่าการอนุมานของเบราว์เซอร์จะเร็วขึ้นเรื่อยๆ ด้วยการอัปเดต WebGPU, WebAssembly และไลบรารี เช่น Transformers.js เพิ่มการรองรับ GPU บนเว็บใน v3 ซึ่งสามารถเร่งความเร็วในการอนุมานในอุปกรณ์หลายเท่า

ขนาดไฟล์ที่ดาวน์โหลดอาจใหญ่มาก การอนุมานในเบราว์เซอร์นั้นรวดเร็ว แต่การโหลดโมเดล AI อาจเป็นเรื่องท้าทาย หากต้องการใช้ AI ในเบราว์เซอร์ โดยทั่วไปคุณจะต้องมีทั้งไลบรารีและโมเดล ซึ่งจะเพิ่มขนาดการดาวน์โหลดของเว็บแอป

แม้ว่าโมเดลความเป็นพิษของ Tensorflow (โมเดลการประมวลผลภาษาธรรมชาติแบบคลาสสิก) จะมีขนาดเพียงไม่กี่กิโลไบต์ แต่โมเดล Generative AI เช่น โมเดลการวิเคราะห์ความรู้สึกเริ่มต้นของ Transformers.js จะมีขนาดถึง 60 MB โมเดลภาษาขนาดใหญ่อย่าง Gemma อาจมีขนาดใหญ่ถึง 1.3 GB ซึ่งมากกว่าค่ามัธยฐาน ขนาดหน้าเว็บ 2.2 MB ซึ่งก็ใหญ่กว่าที่แนะนำไว้เพื่อประสิทธิภาพที่ดีที่สุดอยู่แล้ว Generative AI ฝั่งไคลเอ็นต์ใช้ได้ในบางกรณี

วงการ Generative AI บนเว็บกำลังพัฒนาไปอย่างรวดเร็ว คาดว่าในอนาคตจะมีโมเดลที่เล็กลงและปรับให้เหมาะกับเว็บปรากฏขึ้น

ขั้นตอนถัดไป

Chrome กำลังทดสอบวิธีอื่นในการใช้งาน Generative AI ในเบราว์เซอร์ คุณสามารถลงชื่อสมัครเข้าร่วมโปรแกรมทดลองใช้ก่อนเปิดตัวเพื่อทดสอบ