Esplora i suggerimenti per le recensioni prodotto con l'IA lato client

Maud Nalpas

Data di pubblicazione: 21 ottobre 2024

I negozi online possono registrare un aumento del 270% nelle conversioni mostrando le recensioni dei prodotti. Anche le recensioni negative sono importanti, poiché contribuiscono a creare credibilità. L'82% degli acquirenti online li cerca prima di acquistarli.

Incoraggiare i clienti a lasciare recensioni utili sui prodotti, soprattutto se negative, può essere complicato. Qui esploreremo come utilizzare l'IA generativa per aiutare gli utenti a scrivere recensioni informative che aiutino le decisioni di acquisto di altri.

Demo e codice

Prova la nostra demo di recensione prodotto e esamina il codice su GitHub.

Come abbiamo creato questa funzionalità

IA lato client

Per questa demo, abbiamo implementato la funzionalità lato client per i seguenti motivi:

• Latenza. Vogliamo fornire suggerimenti rapidamente, non appena l'utente smette di digitare. Possiamo offrire questo servizio evitando i viaggi di andata e ritorno del server.
• Costo. Anche se si tratta di una demo, se stai valutando la possibilità di lanciare una funzionalità simile in produzione, è un'ottima idea fare esperimenti senza costi lato server finché non avrai verificato se la funzionalità è utile per i tuoi utenti.

IA generativa di MediaPipe

Abbiamo scelto di utilizzare il modello Gemma 2B tramite l'API MediaPipe LLM Inference (pacchetto MediaPipe GenAI), per i seguenti motivi:

• Precisione del modello: Gemma 2B offre un ottimo equilibrio tra dimensioni e accuratezza. Quando viene richiesto correttamente, ha fornito risultati che abbiamo trovato soddisfacenti per questa demo.
• Supporto multipiattaforma: MediaPipe è supportato in tutti i browser che supportano WebGPU.

Esperienza utente

Applica le best practice per le prestazioni

Sebbene Gemma 2B sia un LLM di piccole dimensioni, il download è comunque di grandi dimensioni. Applica le best practice per il rendimento, che includono l'utilizzo di un web worker.

Rendere la funzionalità facoltativa

Vogliamo che i suggerimenti per le revisioni basate sull'IA migliorino il flusso di lavoro dell'utente per pubblicare una recensione del prodotto. Nella nostra implementazione, l'utente può pubblicare una recensione anche se il modello non è stato caricato e quindi non offre suggerimenti per il miglioramento.

Stati e animazioni dell'interfaccia utente

In genere l'inferenza richiede più tempo di quanto sembrerebbe immediata, quindi segnaliamo all'utente che il modello sta eseguendo l'inferenza, o "pensando". Utilizziamo le animazioni per snellire l'attesa, garantendo al contempo all'utente che l'applicazione funzioni come previsto. Scopri i diversi stati dell'interfaccia utente che abbiamo implementato nella nostra demo, progettata da Adam Argyle.

Altre considerazioni

In un ambiente di produzione, ti consigliamo di:

• Fornisci un meccanismo di feedback. Cosa succede se i suggerimenti sono mediocri o non hanno senso? Implementa un meccanismo di feedback rapido (ad esempio i Mi piace e i Non mi piace) e utilizza le euristiche per determinare ciò che gli utenti trovano utile. Ad esempio, valuta quanti utenti interagiscono con la funzionalità e se la disattivano.
• Consenti la disattivazione. Cosa succede se l'utente preferisce usare le sue parole senza assistenza dell'IA o trova la funzionalità fastidiosa? Consenti all'utente di disattivare e riattivare la funzionalità in base alle sue preferenze.
• Spiega perché esiste questa funzionalità. Una breve spiegazione potrebbe incoraggiare gli utenti a utilizzare lo strumento di feedback. Ad esempio: "Un feedback migliore aiuta altri acquirenti a decidere cosa acquistare e ci aiuta a creare i prodotti che vuoi". Puoi aggiungere una spiegazione dettagliata del funzionamento della funzionalità e del motivo per cui la fornisci, ad esempio sotto forma di link per saperne di più.
• Dichiara l'utilizzo dell'IA, se pertinente. Con l'IA lato client, i contenuti dell'utente non vengono inviati a un server per l'elaborazione, quindi possono essere mantenuti privati. Tuttavia, se crei un piano di riserva lato server o raccogli in altro modo informazioni con l'IA, ti consigliamo di aggiungerlo alle tue norme sulla privacy, ai Termini di servizio o in altri luoghi.

Implementazione

La nostra implementazione del suggerimento di recensioni prodotto potrebbe essere adatta a una vasta gamma di casi d'uso. Prendi in considerazione le seguenti informazioni come base per le tue future funzionalità di IA lato client.

MediaPipe in un web worker

Con l'inferenza LLM di MediaPipe, il codice AI è composto da poche righe: crea un risolutore di file e un oggetto di inferenza LLM passando un URL del modello e utilizza in un secondo momento l'istanza di inferenza LLM per generare una risposta.

Tuttavia, il nostro esempio di codice è un po' più ampio. Questo perché è implementato in un web worker, quindi passa i messaggi con lo script principale tramite codici di messaggio personalizzati. Scopri di più su questo pattern.

// Trigger model preparation *before* the first message arrives
self.postMessage({ code: MESSAGE_CODE.PREPARING_MODEL });
try {
  // Create a FilesetResolver instance for GenAI tasks
  const genai = await FilesetResolver.forGenAiTasks(MEDIAPIPE_WASM);
  // Create an LLM Inference instance from the specified model path
  llmInference = await LlmInference.createFromModelPath(genai, MODEL_URL);
  self.postMessage({ code: MESSAGE_CODE.MODEL_READY });
} catch (error) {
  self.postMessage({ code: MESSAGE_CODE.MODEL_ERROR });
}

// Trigger inference upon receiving a message from the main script
self.onmessage = async function (message) {
  // Run inference = Generate an LLM response
  let response = null;
  try {
    response = await llmInference.generateResponse(
      // Create a prompt based on message.data, which is the actual review
      // draft the user has written. generatePrompt is a local utility function.
      generatePrompt(message.data),
    );
  } catch (error) {
    self.postMessage({ code: MESSAGE_CODE.INFERENCE_ERROR });
    return;
  }
  // Parse and process the output using a local utility function
  const reviewHelperOutput = generateReviewHelperOutput(response);
  // Post a message to the main thread
  self.postMessage({
    code: MESSAGE_CODE.RESPONSE_READY,
    payload: reviewHelperOutput,
  });
};

export const MESSAGE_CODE ={
  PREPARING_MODEL: 'preparing-model',
  MODEL_READY: 'model-ready',
  GENERATING_RESPONSE: 'generating-response',
  RESPONSE_READY: 'response-ready',
  MODEL_ERROR: 'model-error',
  INFERENCE_ERROR: 'inference-error',
};

Input e output

Il nostro prompt completo è stato creato con il prompt few-shot. Sono inclusi gli input dell'utente, ovvero la bozza della recensione scritta dall'utente.

Per generare il prompt in base all'input dell'utente, chiamiamo al momento dell'esecuzione la nostra funzione di utilità generatePrompt.

I modelli e le librerie di IA lato client in genere includono meno utilità rispetto all'IA lato server. Ad esempio, la modalità JSON spesso non è disponibile. Ciò significa che dobbiamo fornire la struttura di output desiderata all'interno del prompt. Questo è meno pulito, gestibile e affidabile rispetto all'utilizzo di uno schema tramite la configurazione del modello. Inoltre, i modelli lato client tendenzialmente sono più piccoli, il che significa che sono più soggetti a errori strutturali nell'output.

In pratica, abbiamo osservato che Gemma 2B è più efficace nel fornire un output strutturato come testo rispetto a JSON o JavaScript. Per questa demo, abbiamo optato per un formato di output basato su testo. Il modello genera del testo, di cui poi analizziamo l'output in un oggetto JavaScript per l'ulteriore elaborazione all'interno della nostra app web.

Migliorare il prompt

Abbiamo utilizzato un LLM per eseguire l'iterazione sul nostro prompt.

• Prompt few-shot. Per generare gli esempi per i nostri prompt few-shot, abbiamo fatto affidamento su Gemini Chat. Gemini Chat usa i modelli Gemini più potenti. In questo modo abbiamo generato esempi di alta qualità.
• Lucidatura dei prompt. Una volta pronta la struttura del prompt, abbiamo utilizzato anche Gemini Chat per perfezionarlo. In questo modo è stata migliorata la qualità dell'output.

Utilizzare il contesto per migliorare la qualità

L'inclusione del tipo di prodotto nel prompt ha aiutato il modello a fornire suggerimenti più pertinenti e di qualità superiore. In questa demo, il tipo di prodotto è statico. In un'applicazione reale, potresti includere il prodotto dinamicamente nel prompt in base alla pagina visitata dall'utente.

Review: "I love these."
Helpful: No  
Fix: Be more specific, explain why you like these **socks**.
Example: "I love the blend of wool in these socks. Warm and not too heavy."

Uno degli esempi nella sezione few-shots del nostro prompt: il tipo di prodotto ("calze") è incluso nella correzione suggerita e nella recensione di esempio.

Correzioni e errori relativi ai modelli LLM

Gemma 2B in genere richiede una maggiore progettazione dei prompt rispetto a un modello lato server più potente e più grande.

Abbiamo riscontrato alcuni problemi con Gemma 2B. Ecco come abbiamo migliorato i risultati:

• Troppo gentile. Gemma 2B ha avuto difficoltà a contrassegnare le recensioni come "non utili", apparentemente esitante a esprimere un giudizio. Abbiamo cercato di rendere il linguaggio delle etichette più neutro ("specifico" e "non specifico" anziché "utile" e "non utile") e abbiamo aggiunto esempi, ma i risultati non sono migliorati. A migliorare i risultati è stata la insistenza e la ripetizione nel prompt. Anche un approccio di catena di pensiero potrebbe portare a miglioramenti.

• Istruzioni non chiare. A volte il modello interpretava in modo eccessivo il prompt. Invece di valutare la recensione, ha continuato l'elenco di esempi. Per risolvere il problema, abbiamo incluso una transizione chiara nel prompt:

  I'll give you example reviews and outputs, and then give you one review
  to analyze. Let's go:
  Examples:
  <... Examples>
  
  Review to analyze:
  <... User input>
  

  La strutturazione chiara del prompt aiuta il modello a distinguere tra l'elenco di esempi (pochi scatti) e l'input effettivo.

• Target sbagliato. A volte, il modello suggeriva modifiche al prodotto invece che al testo della recensione. Ad esempio, per una recensione che afferma "Odio queste calze", il modello potrebbe suggerire "Valuta la possibilità di sostituire le calze con un altro marchio o stile", che non è l'effetto desiderato. La suddivisione del prompt ha aiutato a chiarire l'attività e a migliorare l'attenzione del modello alla revisione.