Moedig nuttige productrecensies aan met web-AI aan de clientzijde

Kenji Baheux
Kenji Baheux
Alexandra Klepper
Alexandra Klepper

Gepubliceerd: 16 mei 2024

Zowel positieve als negatieve recensies kunnen de aankoopbeslissing van een koper beïnvloeden.

Volgens extern onderzoek zoekt 82% van de online shoppers actief naar negatieve recensies voordat ze een aankoop doen. Deze negatieve recensies zijn nuttig voor zowel klanten als bedrijven, omdat ze kunnen helpen het retourpercentage te verlagen en fabrikanten in staat stellen hun producten te verbeteren.

Hieronder vind je een paar manieren waarop je de kwaliteit van de beoordelingen kunt verbeteren:

  • Controleer elke recensie op negatieve inhoud voordat deze wordt ingediend. We kunnen gebruikers aanmoedigen om aanstootgevende taal en andere onbehulpzame opmerkingen te verwijderen, zodat hun recensie andere gebruikers beter helpt bij het nemen van een aankoopbeslissing.
    • Negatief : Deze tas is waardeloos, ik haat hem.
    • Negatieve beoordeling met nuttige feedback: De ritsen zijn erg stroef en het materiaal voelt goedkoop aan. Ik heb deze tas geretourneerd.
  • Genereer automatisch een beoordeling op basis van de taal die in de recensie wordt gebruikt.
  • Bepaal of de recensie negatief of positief is.
Screenshot van een voorbeeldrecensie met sentiment en sterrenwaardering.
In dit voorbeeld krijgt de recensent een positieve beoordeling en vijf sterren.

Uiteindelijk moet de gebruiker het laatste woord hebben bij de beoordeling van het product.

De volgende codelab biedt oplossingen aan de clientzijde, zowel op het apparaat zelf als in de browser. Er is geen kennis van AI-ontwikkeling, servers of API-sleutels vereist.

Voorwaarden

Hoewel server-side AI met oplossingen (zoals de Gemini API of OpenAI API ) robuuste oplossingen biedt voor veel toepassingen, richten we ons in deze handleiding op client-side web-AI. Client-side AI-inferentie vindt plaats in de browser om de gebruikerservaring te verbeteren door serveraanvragen te elimineren.

In deze codelab gebruiken we een mix van technieken om je te laten zien wat je tot je beschikking hebt voor client-side AI.

We maken gebruik van de volgende bibliotheken en modellen:

  • TensorFlow.js voor toxiciteitsanalyse. TensorFlow.js is een open-source machine learning-bibliotheek voor zowel inferentie als training op het web.
  • transformers.js voor sentimentanalyse. Transformers.js is een web-AI-bibliotheek van Hugging Face.
  • Gemma 2B voor sterrenbeoordelingen. Gemma is een familie van lichtgewicht, open modellen, gebouwd op basis van het onderzoek en de technologie die Google gebruikte om de Gemini-modellen te creëren. Om Gemma in de browser te gebruiken, maken we gebruik van MediaPipe's experimentele LLM Inference API .

Gebruikerservaring en veiligheidsoverwegingen

Er zijn een aantal aandachtspunten om een ​​optimale gebruikerservaring en veiligheid te garanderen:

  • Geef de gebruiker de mogelijkheid om de beoordeling te wijzigen. Uiteindelijk moet de gebruiker het laatste woord hebben over de productbeoordeling.
  • Maak het de gebruiker duidelijk dat de beoordelingen en recensies geautomatiseerd zijn.
  • Sta gebruikers toe een recensie te plaatsen die als 'toxisch' is geclassificeerd, maar voer een tweede controle uit op de server. Dit voorkomt een frustrerende ervaring waarbij een niet-toxische recensie ten onrechte als 'toxisch' wordt geclassificeerd (een vals positief). Dit dekt ook gevallen waarin een kwaadwillende gebruiker erin slaagt de controle aan de serverzijde te omzeilen.
  • Een client-side toxiciteitscontrole is nuttig, maar kan worden omzeild. Zorg er daarom voor dat u ook een server-side controle uitvoert.

Analyseer toxiciteit met TensorFlow.js

Met TensorFlow.js kun je snel de toxiciteit van een gebruikersrecensie analyseren.

  1. Installeer en importeer de TensorFlow.js-bibliotheek en het toxiciteitsmodel.
  2. Stel een minimale voorspellingsbetrouwbaarheid in. De standaardwaarde is 0,85, en in ons voorbeeld hebben we deze ingesteld op 0,9.
  3. Laad het model asynchroon.
  4. Classificeer de beoordeling asynchroon. Onze code identificeert voorspellingen die een drempelwaarde van 0,9 overschrijden voor elke categorie.

Dit model kan toxiciteit categoriseren op basis van identiteitsaanvallen, beledigingen, obscene taal en meer.

Bijvoorbeeld:

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
);

Bepaal het sentiment met Transformers.js

  1. Installeer en importeer de Transformers.js-bibliotheek.

  2. Stel de sentimentanalyse- taak in met een speciale pipeline . Wanneer een pipeline voor het eerst wordt gebruikt, wordt het model gedownload en in de cache opgeslagen. Vanaf dat moment zou de sentimentanalyse veel sneller moeten verlopen.

  3. Classificeer de beoordeling asynchroon. Gebruik een aangepaste drempelwaarde om het betrouwbaarheidsniveau in te stellen dat u geschikt acht voor uw toepassing.

Bijvoorbeeld:

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
}

Geef een sterrenbeoordeling aan Gemma en MediaPipe.

Met de LLM Inference API kunt u grote taalmodellen (LLM's) volledig in de browser uitvoeren.

Deze nieuwe mogelijkheid is bijzonder baanbrekend gezien de geheugen- en rekenkrachtvereisten van LLM's, die meer dan honderd keer groter zijn dan die van client-side modellen. Optimalisaties in de gehele webstack maken dit mogelijk, waaronder nieuwe bewerkingen, kwantisering, caching en het delen van gewichten. Bron: "Large Language Models On-Device with MediaPipe and TensorFlow Lite" .

  1. Installeer en importeer de MediaPipe LLM inferentie-API.
  2. Download een model . Hier gebruiken we Gemma 2B , gedownload van Kaggle . Gemma 2B is het kleinste open-weight model van Google.
  3. Gebruik de FilesetResolver om de code naar de juiste modelbestanden te laten verwijzen. Dit is belangrijk omdat generatieve AI-modellen een specifieke mapstructuur voor hun bestanden kunnen hebben.
  4. Laad en configureer het model met de LLM-interface van MediaPipe. Bereid het model voor gebruik voor: geef de locatie van het model op, de gewenste lengte van de antwoorden en het gewenste niveau van creativiteit met betrekking tot de temperatuur.
  5. Geef het model een aanwijzing ( zie een voorbeeld ).
  6. Wacht op de reactie van het model.
  7. Analyseer de beoordeling: Haal de sterrenbeoordeling uit het antwoord van het model.
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);

Voorbeeld prompt

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`;

Afhaalmaaltijden

Er is geen expertise op het gebied van AI/ML vereist . Het ontwerpen van een prompt vereist meerdere iteraties, maar de rest van de code is standaard webontwikkeling.

Client-side modellen zijn redelijk nauwkeurig . Als u de codefragmenten uit dit document uitvoert, zult u zien dat zowel de toxiciteits- als de sentimentanalyse accurate resultaten opleveren. De Gemma-beoordelingen kwamen grotendeels overeen met de beoordelingen van het Gemini-model voor een aantal geteste referentiebeoordelingen. Om die nauwkeurigheid te valideren, is meer onderzoek nodig.

Dat gezegd hebbende, het ontwerpen van de prompt voor Gemma 2B vergt wel wat werk. Omdat Gemma 2B een klein LLM is, heeft het een gedetailleerde prompt nodig om bevredigende resultaten te produceren – aanzienlijk gedetailleerder dan wat vereist is voor de Gemini API.

Inferentie kan razendsnel zijn . Als u de codefragmenten uit dit document uitvoert, zult u zien dat inferentie snel kan verlopen, mogelijk zelfs sneller dan serveraanvragen, op een aantal apparaten. De snelheid van inferentie kan echter sterk variëren. Grondige benchmarks op de doelapparaten zijn nodig. We verwachten dat browserinferentie steeds sneller zal worden met WebGPU, WebAssembly en updates van bibliotheken. Transformers.js voegt bijvoorbeeld WebGPU-ondersteuning toe in versie 3 , wat de inferentie op het apparaat zelf aanzienlijk kan versnellen .

Downloadgroottes kunnen erg groot zijn. Inferentie in de browser is snel, maar het laden van AI-modellen kan een uitdaging vormen. Om AI in de browser uit te voeren, heb je doorgaans zowel een bibliotheek als een model nodig, wat de downloadgrootte van je webapplicatie vergroot.

Hoewel het Tensorflow-toxiciteitsmodel (een klassiek model voor natuurlijke taalverwerking) slechts een paar kilobytes groot is, kunnen generatieve AI-modellen zoals het standaard sentimentanalysemodel van Transformers.js wel 60 MB groot zijn. Grote taalmodellen zoals Gemma kunnen zelfs 1,3 GB groot zijn. Dit overschrijdt de gemiddelde webpagina-grootte van 2,2 MB , die al veel groter is dan aanbevolen voor optimale prestaties. Generatieve AI aan de clientzijde is in specifieke scenario's wel haalbaar.

Het vakgebied van generatieve AI op het web ontwikkelt zich razendsnel! Naar verwachting zullen er in de toekomst kleinere, voor het web geoptimaliseerde modellen verschijnen .

Volgende stappen

Chrome experimenteert met een nieuwe manier om generatieve AI in de browser uit te voeren. Je kunt je aanmelden voor het Early Preview Program om het te testen.