Encourager les avis utiles sur les produits grâce à l'IA Web côté client

Maud Nalpas

Kenji Baheux

Alexandra Klepper

Publié le 16 mai 2024

Les avis positifs et négatifs peuvent éclairer la décision d'achat de l'acheteur.

Selon une étude externe, 82% des acheteurs en ligne recherchent activement des avis négatifs avant d'effectuer un achat. Ces avis négatifs sont utiles pour les clients et les entreprises, car leur disponibilité peut contribuer à réduire les taux de retour et à aider les fabricants à améliorer leurs produits.

Voici quelques conseils pour améliorer la qualité des avis:

• Vérifiez que chaque avis est exempt de toxicité avant de l'envoyer. Nous pourrions encourager les utilisateurs à supprimer les propos offensants, ainsi que les autres remarques inutiles, afin que leur avis aide les autres utilisateurs à prendre une meilleure décision d'achat.
  • Négatif: Ce sac est nul, je le déteste.
  • Évaluation négative avec commentaires utiles Les fermetures éclair sont très rigides et le tissu semble bon marché. J'ai renvoyé ce sac.
• Générer automatiquement une note en fonction de la langue utilisée dans l'avis
• Déterminez si l'avis est négatif ou positif.

Dans cet exemple, le commentaire de l'auteur est associé à un sentiment positif et à une note de cinq étoiles.

En fin de compte, l'utilisateur doit avoir le dernier mot concernant la note du produit.

L'atelier de programmation suivant propose des solutions côté client, sur l'appareil et dans le navigateur. Aucune connaissance en développement d'IA, serveurs ni clés API requis.

Attention :Bien que l'IA côté client offre des possibilités intéressantes, soyez conscient de ses limites, en particulier avec l'IA générative et les grands modèles de langage (LLM). Ces modèles sont associés à des tailles de téléchargement importantes et à des exigences matérielles exigeantes, ce qui peut avoir un impact sur les performances et l'expérience utilisateur. Assurez-vous de comprendre ces contraintes et d'évaluer si elles conviennent à votre cas d'utilisation.

Prérequis

Bien que les solutions d'IA côté serveur (telles que l'API Gemini ou l'API OpenAI) offrent des solutions robustes pour de nombreuses applications, nous nous concentrons dans ce guide sur l'IA Web côté client. L'inférence d'IA côté client se produit dans le navigateur afin d'améliorer l'expérience des utilisateurs Web en supprimant les aller-retours vers le serveur.

Dans cet atelier de programmation, nous utilisons un éventail de techniques pour vous montrer ce que vous avez à votre disposition pour l'IA côté client.

Nous utilisons les bibliothèques et modèles suivants:

• TensforFlow.js pour l'analyse de la toxicité TensorFlow.js est une bibliothèque de machine learning Open Source pour l'inférence et l'entraînement sur le Web.
• transformers.js pour l'analyse des sentiments Transformers.js est une bibliothèque d'IA Web de Hugging Face.
• Gemma 2B pour les notes. Gemma est une famille de modèles ouverts et légers basés sur la recherche et la technologie que Google a utilisées pour créer les modèles Gemini. Pour exécuter Gemma dans le navigateur, nous l'utilisons avec l'API expérimentale d'inférence LLM de MediaPipe.

Considérations relatives à l'expérience utilisateur et à la sécurité

Voici quelques points à prendre en compte pour garantir une expérience utilisateur et une sécurité optimales:

• Autoriser l'utilisateur à modifier la note. En fin de compte, l'utilisateur doit avoir le dernier mot sur la note du produit.
• Indiquez clairement à l'utilisateur que la note et les avis sont automatisés.
• Autorisez les utilisateurs à publier un avis classé comme toxique, mais exécutez une deuxième vérification sur le serveur. Cela évite une expérience frustrante lorsqu'un avis non toxique est classé par erreur comme toxique (faux positif). Cela couvre également les cas où un utilisateur malveillant parvient à contourner la vérification côté client.
• Une vérification de la toxicité côté client est utile, mais elle peut être contournée. Veillez également à effectuer une vérification côté serveur.

Analyser la toxicité avec TensorFlow.js

Avec TensorFlow.js, vous pouvez rapidement commencer à analyser la toxicité d'un avis utilisateur.

1. Installez et import la bibliothèque TensorFlow.js et le modèle de toxicité.
2. Définissez un indice de confiance minimal pour la prédiction. La valeur par défaut est 0.85, et dans notre exemple, nous l'avons définie sur 0.9.
3. Charger le modèle de manière asynchrone
4. Classez l'avis de manière asynchrone. Notre code identifie les prédictions dépassant un seuil de 0,9 pour n'importe quelle catégorie.

Ce modèle peut catégoriser la toxicité en fonction des attaques d'identité, des insultes, des obscénités, etc.

Exemple :

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

Déterminer le sentiment avec Transformers.js

1. Installez et importez la bibliothèque Transformers.js.

2. Configurer la tâche d'analyse des sentiments avec un pipeline dédié Lorsqu'un pipeline est utilisé pour la première fois, le modèle est téléchargé et mis en cache. À partir de là, l'analyse du sentiment devrait être beaucoup plus rapide.

   Remarque :À moins que vous ne spécifiiez un modèle, Transformers.js utilisera le modèle par défaut pour ce pipeline spécifique.

3. Classez l'avis de manière asynchrone. Utilisez un seuil personnalisé pour définir le niveau de confiance que vous jugez utilisable pour votre application.

Exemple :

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
}

suggérer une note avec Gemma et MediaPipe ;

Avec l'API d'inférence LLM, vous pouvez exécuter des grands modèles de langage (LLM) entièrement dans le navigateur.

Cette nouvelle fonctionnalité est particulièrement révolutionnaire, compte tenu des besoins en mémoire et en calcul des LLM, qui sont plus de cent fois plus importants que les modèles côté client. Des optimisations sur l'ensemble de la pile Web rendent cela possible, y compris de nouvelles opérations, la quantification, la mise en cache et le partage des pondérations. Source: "Large Language Models On-Device with MediaPipe and TensorFlow Lite".

1. Installez et importez l'API d'inférence LLM MediaPipe.
2. Téléchargez un modèle. Ici, nous utilisons Gemma 2B, téléchargé depuis Kaggle. Gemma 2B est le plus petit des modèles à pondération ouverte de Google.
3. Faites pointer le code vers les fichiers de modèle appropriés avec FilesetResolver. Cela est important, car les modèles d'IA générative peuvent avoir une structure de répertoire spécifique pour leurs composants.
4. Chargez et configurez le modèle avec l'interface LLM de MediaPipe. Préparez le modèle à l'utilisation: spécifiez son emplacement, la longueur de réponse souhaitée et le niveau de créativité souhaité avec la température.
5. Envoyez une requête au modèle (voir un exemple).
6. Attendez la réponse du modèle.
7. Analyser pour la note: extrayez la note à partir de la réponse du modèle.

Remarque :La variante Gemma que nous utilisons est réglée pour les instructions (voir "it" dans le nom du modèle). Cela signifie que vous pouvez interagir avec le modèle en lui donnant des instructions, comme avec les interfaces de chat telles que Gemini ou ChatGPT.

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

Exemple de requête

Remarque :Étant donné que Gemma 2B est un petit LLM, il a besoin d'une invite détaillée pour produire des résultats satisfaisants. Nous utilisons ici des techniques telles que les invites de la chaîne de pensée et les invites de quelques mots.

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

Points à retenir

Aucune expertise en IA/ML n'est requise. La conception d'une requête nécessite des itérations, mais le reste du code est un développement Web standard.

Les modèles côté client sont assez précis. Si vous exécutez les extraits de ce document, vous constaterez que l'analyse de la toxicité et de l'opinion donnent des résultats précis. Dans la plupart des cas, les notes Gemma correspondaient aux notes du modèle Gemini pour quelques avis de référence testés. Pour valider cette précision, d'autres tests sont nécessaires.

Toutefois, la conception de l'invite pour Gemma 2B demande du travail. Étant donné que Gemma 2B est un petit LLM, il a besoin d'une invite détaillée pour produire des résultats satisfaisants, notamment plus détaillés que ce qui est requis avec l'API Gemini.

Les inférences peuvent être ultra-rapides. Si vous exécutez les extraits de code de ce document, vous devriez constater que l'inférence peut être rapide, potentiellement plus rapide que les aller-retours du serveur, sur un certain nombre d'appareils. Cela dit, la vitesse d'inférence peut varier considérablement. Un benchmark approfondi sur les appareils cibles est nécessaire. Nous nous attendons à ce que l'inférence du navigateur continue de s'accélérer avec WebGPU, WebAssembly et les mises à jour de la bibliothèque. Par exemple, Transformers.js ajoute la compatibilité avec les GPU Web dans la version 3, ce qui permet d'accélérer l'inférence sur l'appareil plusieurs fois.

La taille des téléchargements peut être très importante. L'inférence dans le navigateur est rapide, mais le chargement de modèles d'IA peut s'avérer difficile. Pour effectuer de l'IA dans le navigateur, vous avez généralement besoin à la fois d'une bibliothèque et d'un modèle, ce qui augmente la taille de téléchargement de votre application Web.

Alors que le modèle de toxicité de TensorFlow (un modèle classique de traitement du langage naturel) ne représente que quelques kilo-octets, les modèles d'IA générative tels que le modèle d'analyse des sentiments par défaut de Transformers.js atteignent 60 Mo. Les grands modèles de langage comme Gemma peuvent atteindre 1,3 Go. Cette valeur dépasse la taille médiane de 2, 2 Mo, qui est déjà bien supérieure à la taille recommandée pour des performances optimales. L'IA générative côté client est viable dans des cas spécifiques.

Le domaine de l'IA générative sur le Web évolue rapidement. De plus petits modèles optimisés pour le Web devient apparaître à l'avenir.

Étapes suivantes

Chrome teste une autre façon d'exécuter l'IA générative dans le navigateur. Vous pouvez vous inscrire au programme en accès anticipé pour le tester.