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 influencer la décision d'achat d'un acheteur.

Selon des recherches externes, 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.

En fin de compte, c'est l'utilisateur qui a le dernier mot sur la note attribuée au 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.

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 du serveur.

Dans cet atelier de programmation, nous utilisons un éventail de techniques pour vous montrer ce que vous pouvez faire avec 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 du sentiment 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 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.
• Un contrôle de toxicité côté client est utile, mais il peut être contourné. Assurez-vous également d'exécuter 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 niveau de confiance minimal pour les prédictions. La valeur par défaut est 0,85. Dans notre exemple, nous l'avons définie sur 0,9.
3. Chargez 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 de l'attaque 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. Configurez 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.

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 transformatrice compte tenu des exigences de mémoire et de calcul des LLM, qui sont plus de cent fois plus importantes que les modèles côté client. Les optimisations de la pile Web rendent cela possible, y compris les nouvelles opérations, la quantification, la mise en cache et le partage de poids. 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 la note: extrayez la note du modèle à partir de sa réponse.

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

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.

Cependant, concevoir 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 le GPU Web dans la version 3, ce qui peut accélérer considérablement l'inférence sur l'appareil.

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é TensorFlow (un modèle classique de traitement du langage naturel) ne compte 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 scénarios spécifiques.

Le domaine de l'IA générative sur le Web évolue rapidement. Des modèles plus petits et optimisés pour le Web devraient émerger à 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 Preview anticipé pour le tester.