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

Maud Nalpas

Kenji Baheux

Alexandra Klepper

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

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

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

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

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

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 ในเบราว์เซอร์ เราจะใช้ร่วมกับ LLM Inference API เวอร์ชันทดลองของ MediaPipe

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

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

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

วิเคราะห์ความเป็นพิษด้วย 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(
    (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-Device with 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 คะแนนสำหรับรีวิวข้อมูลอ้างอิงที่ทดสอบแล้วบางรายการ เพื่อตรวจสอบความถูกต้อง ต้องมีการทดสอบเพิ่มเติม

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

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

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

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

วงการ Generative AI บนเว็บกำลังพัฒนาอย่างรวดเร็ว เล็กลง รูปแบบที่เพิ่มประสิทธิภาพเว็บ คาดว่าจะเกิดขึ้น ในอนาคต

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

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