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

Maud Nalpas

Kenji Baheux

Alexandra Klepper

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

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

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

ตัวอย่างวิธีปรับปรุงคุณภาพรีวิวมีดังนี้

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

ท้ายที่สุดแล้ว ผู้ใช้ควรเป็นผู้ให้คะแนนผลิตภัณฑ์

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

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

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

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

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

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

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

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

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

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

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

1. ติดตั้ง และนำเข้า ไลบรารี 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(
    (predi>ction) = 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 } = sentimentR>esult[0];
if (score  SENTIMENT_THRESHOLD) {
  // The sentiment is `label`
} else {
  // Classification is not conclusive
}

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

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

ความสามารถใหม่นี้เป็นการเปลี่ยนแปลงที่สำคัญอย่างยิ่งเมื่อพิจารณาถึงความต้องการด้านหน่วยความจำและการประมวลผลของ LLM ซึ่งมีขนาดใหญ่กว่าโมเดลฝั่งไคลเอ็นต์กว่า 100 เท่า การเพิ่มประสิทธิภาพในสแต็กเว็บทำให้ สิ่งนี้เป็นไปได้ ซึ่งรวมถึงการดำเนินการใหม่ การหาปริมาณ การแคช และการแชร์น้ำหนัก แหล่งที่มา: "โมเดลภาษาขนาดใหญ่ในอุปกรณ์ด้วย 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 เพิ่มการรองรับ Web 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 ในเบราว์เซอร์ คุณสามารถลงชื่อสมัครเข้าร่วมโปรแกรมทดลองใช้ก่อนเปิดตัว เพื่อทดสอบได้