Incoraggia l'uso di recensioni prodotto con l'IA web lato client

Maud Nalpas

Kenji Baheux

Alexandra Klepper

Data di pubblicazione: 16 maggio 2024

Le recensioni positive e negative possono influenzare la decisione di acquisto di un acquirente.

Secondo una ricerca esterna, l'82% degli acquirenti online cerca attivamente recensioni negative prima di effettuare un acquisto. Queste recensioni negative sono utili per i clienti e le attività, in quanto la disponibilità di recensioni negative può contribuire a ridurre i tassi di reso e aiutare i produttori a migliorare i loro prodotti.

Ecco alcuni modi per migliorare la qualità delle recensioni:

• Controlla ogni recensione per rilevare contenuti tossici prima che venga inviata. Potremmo incoraggiare gli utenti a rimuovere il linguaggio offensivo e altri commenti non utili, in modo che la loro recensione aiuti al meglio gli altri utenti a prendere una decisione di acquisto migliore.
  • Negativa: questa borsa fa schifo e la odio.
  • Feedback negativo con informazioni utili Le cerniere sono molto rigide e il materiale sembra di scarsa qualità. Ho restituito questa borsa.
• Genera automaticamente una valutazione in base alla lingua utilizzata nella recensione.
• Stabilisci se la recensione è negativa o positiva.

In definitiva, l'ultima parola sulla valutazione del prodotto dovrebbe essere comunicata all'utente.

Il seguente codelab offre soluzioni lato client, on-device e nel browser. Non sono richieste conoscenze di sviluppo dell'IA, server o chiavi API.

Prerequisiti

Sebbene l'AI lato server con soluzioni (come l'API Gemini o l'API OpenAI) offra soluzioni solide per molte applicazioni, in questa guida ci concentriamo sull'AI web lato client. L'inferenza dell'IA lato client avviene nel browser, al fine di migliorare l'esperienza per gli utenti web rimuovendo i viaggi di andata e ritorno del server.

In questo codelab utilizziamo un mix di tecniche per mostrarti cosa hai a disposizione per l'IA lato client.

Utilizziamo le seguenti librerie e modelli:

• TensforFlow.js per l'analisi della tossicità. TensorFlow.js è una libreria di machine learning open source sia per l'inferenza che per l'addestramento sul web.
• transformers.js per l'analisi del sentiment. Transformers.js è una libreria di IA web di Hugging Face.
• Gemma 2B per le valutazioni a stelle. Gemma è una famiglia di modelli aperti leggeri basati sulla ricerca e sulla tecnologia che Google ha utilizzato per creare i modelli Gemini. Per eseguire Gemma nel browser, lo utilizziamo con l'API sperimentale di inferenza LLM di MediaPipe.

Considerazioni sull'esperienza utente e sulla sicurezza

Ecco alcune considerazioni per garantire un'esperienza utente e la sicurezza ottimali:

• Consenti all'utente di modificare la valutazione. In definitiva, l'utente deve avere l'ultima parola sulla valutazione del prodotto.
• Comunica chiaramente all'utente che la valutazione e le recensioni sono automatizzate.
• Consenti agli utenti di pubblicare una recensione classificata come tossica, ma esegui un secondo controllo sul server. In questo modo si evita un'esperienza frustrante in cui una recensione non tossica viene classificata erroneamente come tossica (un falso positivo). Sono coperti anche i casi in cui un utente malintenzionato riesce a bypassare il controllo lato client.
• Un controllo della tossicità lato client è utile, ma può essere aggirato. Assicurati di eseguire anche un controllo lato server.

Analizzare la tossicità con TensorFlow.js

È facile iniziare ad analizzare la tossicità di una recensione dell'utente con TensorFlow.js.

1. Installa e import la libreria TensorFlow.js e il modello di tossicità.
2. Imposta una confidenza minima della previsione. Il valore predefinito è 0, 85 e nel nostro esempio lo abbiamo impostato su 0,9.
3. Carica il modello in modo asincrono.
4. Classifica la recensione in modo asincrono. Il codice identifica le previsioni che superano una soglia di 0,9 per qualsiasi categoria.

Questo modello può classificare la tossicità attraverso attacchi all'identità, insulti, oscenità e altro ancora.

Ad esempio:

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

Determinare il sentiment con Transformers.js

1. Installa e importa la libreria Transformers.js.

2. Configura l'attività di analisi del sentiment con una pipeline dedicata. Quando una pipeline viene utilizzata per la prima volta, il modello viene scaricato e memorizzato nella cache. Da quel momento in poi, l'analisi del sentiment dovrebbe essere molto più veloce.

3. Classifica la recensione in modo asincrono. Utilizza una soglia personalizzata per impostare il livello di confidenza che consideri utilizzabile per la tua applicazione.

Ad esempio:

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
}

Suggerire una valutazione a stelle con Gemma e MediaPipe

Con l'API LLM Inference, puoi eseguire modelli linguistici di grandi dimensioni (LLM) completamente nel browser.

Questa nuova funzionalità è particolarmente trasformativa considerando le esigenze di memoria e computing degli LLM, che sono oltre cento volte più grandi rispetto ai modelli lato client. Le ottimizzazioni nell'intero stack web lo rendono possibile, tra cui nuove operazioni, quantizzazione, memorizzazione nella cache e condivisione dei pesi. Fonte: "Modelli linguistici di grandi dimensioni on-device con MediaPipe e TensorFlow Lite".

1. Installa e importa l'API di inferenza LLM di MediaPipe.
2. Scarica un modello. Qui utilizziamo Gemma 2B, scaricato da Kaggle. Gemma 2B è il più piccolo dei modelli a peso aperto di Google.
3. Indica al codice i file del modello corretti con FilesetResolver. Questo è importante perché i modelli di IA generativa possono avere una struttura di directory specifica per i loro asset.
4. Carica e configura il modello con l'interfaccia LLM di MediaPipe. Prepara il modello per l'uso: specifica la posizione del modello, la lunghezza preferita delle risposte e il livello di creatività preferito con la temperatura.
5. Fornisci un prompt al modello (vedi un esempio).
6. Attendi la risposta del modello.
7. Analizza la valutazione: estrai la valutazione a stelle dalla risposta del modello.

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

Testo di esempio

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

Concetti principali

Non è richiesta alcuna competenza di AI/ML. La progettazione di un prompt richiede iterazioni, ma il resto del codice è di sviluppo web standard.

I modelli lato client sono abbastanza accurati. Se esegui gli snippet di questo documento, noterai che sia l'analisi della tossicità sia quella del sentiment forniscono risultati accurati. Per la maggior parte, le valutazioni di Gemma corrispondevano alle valutazioni del modello Gemini per alcune recensioni di riferimento testate. Per convalidare questa accuratezza, sono necessari ulteriori test.

Detto questo, la progettazione del prompt per Gemma 2B richiede lavoro. Poiché Gemma 2B è un LLM di piccole dimensioni, per produrre risultati soddisfacenti ha bisogno di un prompt dettagliato, in particolare più dettagliato di quanto richiesto dall'API Gemini.

L'inferenza può essere velocissima. Se esegui gli snippet di questo documento, dovresti notare che l'inferenza può essere rapida, potenzialmente più veloce dei giri di ritorno del server, su una serie di dispositivi. Detto questo, la velocità di inferenza può variare molto. È necessario un attento benchmarking sui dispositivi target. Prevediamo che l'inferenza del browser continuerà ad aumentare di velocità con gli aggiornamenti di WebGPU, WebAssembly e delle librerie. Ad esempio, Transformers.js aggiunge il supporto della GPU web nella versione 3, che può velocizzare notevolmente l'inferenza on-device.

Le dimensioni dei download possono essere molto grandi. L'inferenza nel browser è veloce, ma il caricamento dei modelli IA può essere complicato. Per eseguire l'IA nel browser, in genere è necessaria sia una libreria sia un modello, che aumentano le dimensioni del download della tua app web.

Mentre il modello di tossicità di TensorFlow (un classico modello di elaborazione del linguaggio naturale) è di soli pochi kilobyte, i modelli di IA generativa come il modello di analisi del sentiment predefinito di Transformers.js raggiungono i 60 MB. I modelli linguistici di grandi dimensioni come Gemma possono avere dimensioni fino a 1,3 GB. Questo valore supera la media di 2, 2 MB di dimensioni della pagina web, che è già molto più grande di quanto consigliato per ottenere le migliori prestazioni. L'IA generativa lato client è valida in scenari specifici.

Il campo dell'IA generativa sul web è in rapida evoluzione. In futuro si prevede che emergano modelli più piccoli e ottimizzati per il web.

Passaggi successivi

Chrome sta sperimentando un altro modo per eseguire l'IA generativa nel browser. Puoi registrarti al programma di anteprima in anteprima per testarlo.