กระตุ้นให้มีการรีวิวผลิตภัณฑ์ที่เป็นประโยชน์ด้วย AI บนเว็บในอุปกรณ์

Maud Nalpas
Maud Nalpas
X GitHub
Kenji Baheux
Kenji Baheux
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

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

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

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

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

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

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

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

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

ใน Codelab นี้ เราใช้เทคนิคหลายอย่างผสมกันเพื่อแสดงสิ่งที่อยู่ในกล่องเครื่องมือสำหรับ AI บนเว็บในอุปกรณ์

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

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

ข้อควรพิจารณาเกี่ยวกับ UX และความปลอดภัย

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

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

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

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

  1. ติดตั้งและimportไลบรารี TensorFlow.js และโมเดล Toxicity
  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 ซึ่งมากกว่าโมเดลในอุปกรณ์แบบดั้งเดิมถึง 100 เท่า การเพิ่มประสิทธิภาพในสแต็กในอุปกรณ์ทำให้สิ่งนี้เป็นไปได้ รวมถึงการดำเนินการใหม่ๆ การวัดปริมาณ การแคช และการแชร์น้ำหนัก แหล่งที่มา: "Large Language Models On-Devices with MediaPipe and 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

การอนุมานอาจเร็วมาก หากคุณเรียกใช้ข้อมูลโค้ดจากเอกสารนี้ คุณควรสังเกตเห็นว่าการอนุมานนั้นทำได้รวดเร็ว และอาจเร็วกว่าการเดินทางไป-กลับของเซิร์ฟเวอร์บนอุปกรณ์หลายเครื่อง แต่ความเร็วในการอนุมานก็อาจแตกต่างกันอย่างมาก ต้องมีการเปรียบเทียบอุปกรณ์เป้าหมายอย่างละเอียด เราคาดว่าการอนุมานในอุปกรณ์จะทำงานได้เร็วขึ้นเรื่อยๆ ด้วย Web GPU, 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 ในเบราว์เซอร์ คุณสามารถลงชื่อสมัครใช้โปรแกรมทดลองใช้ก่อนเปิดตัวเพื่อทดสอบได้