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

Maud Nalpas
Maud Nalpas

Data di pubblicazione: 21 ottobre 2024

I negozi online possono vedere Aumento del 270% in conversioni mostrando recensioni prodotto. 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 scrivere recensioni utili sui prodotti, soprattutto quando negativo, può essere difficile. Qui esploreremo come usare l'IA generativa per aiutare gli utenti scrivono recensioni informative che aiutano gli altri decisioni d'acquisto.

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. Desideriamo fornire suggerimenti rapidamente, non appena l'utente smette di digitare. Possiamo farlo evitando i round trip del server.
  • Cost. 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 Gemma 2B modello tramite API MediaPipe LLM Inference (pacchetto MediaPipe GenAI), per i seguenti motivi:

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

Esperienza utente

Applicare le best practice per il rendimento

Sebbene Gemma 2B sia un piccolo LLM, è comunque un download di grandi dimensioni. Applicare le best practice sul rendimento, includono l'uso di un web worker.

Rendere la funzionalità facoltativa

Vogliamo che i suggerimenti di revisione basati sull'IA migliorino il flusso di lavoro dell'utente per pubblicare un la recensione di un 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.

Figura 1. Gli utenti possono comunque pubblicare la recensione, anche quando l'IA non è ancora pronta.

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 animazioni per facilitare l'attesa e garantire all'utente che l'applicazione funziona come previsto. Scopri i diversi stati dell'interfaccia utente che abbiamo implementato nella nostra demo, progettata da Adam Argyle.

Figura 2. Le animazioni dimostrano che il modello viene caricato, e poi "pensare" e alla fine.

Altre considerazioni

In un ambiente di produzione, è consigliabile:

  • Fornisci un meccanismo di feedback. E se i suggerimenti fossero mediocri, o senza 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.
  • Consentire la disattivazione. Cosa succede se l'utente preferisce usare parole proprie senza l'assistenza dell'IA o trova fastidiosa la funzionalità? Consenti all'utente di disattivare e riattivare la funzionalità in base alle sue preferenze.
  • Spiega perché esiste questa funzionalità. Una breve spiegazione può incoraggiare la tua agli utenti di utilizzare lo strumento di feedback. Ad esempio: "Un feedback migliore aiuta i colleghi gli acquirenti decidono cosa acquistare e ci aiutano a creare i prodotti che desideri." Tu potresti aggiungere una lunga spiegazione di come funziona questa funzionalità e del motivo per cui hai l'ha fornito, magari sotto forma di link per ulteriori informazioni.
  • Dichiarare l'utilizzo dell'IA, ove pertinente. Con l'IA lato client, i contenuti non viene inviato a un server per l'elaborazione, quindi può essere mantenuto privato. 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 per il suggeritore di recensioni prodotto potrebbe funzionare per un ampio ventaglio dei casi d'uso. Considera le seguenti informazioni come base per le future funzionalità di IA lato client.

MediaPipe in un worker web

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, payload: null });
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, payload: null });
} catch (error) {
  self.postMessage({ code: MESSAGE_CODE.MODEL_ERROR, payload: null });
}

// Trigger inference upon receiving a message from the main script
self.onmessage = function (message) {
  if (!llmInference) {
    // Just in case. This condition shouldn't normally be hit because
    // the inference UI button is disabled until the model is ready
    throw new Error("Can't run inference, the model is not ready yet");
  }
  (async function () {
    // Run inference = Generate an LLM response
    try {
    const 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, payload: null });
    }
    // 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

Figura 3. Un diagramma che mostra l'elaborazione del prompt tramite l'inferenza a un output LLM non elaborato, che viene poi analizzato in un consiglio pronto per la visualizzazione.

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 in fase di runtime la nostra utilità funzione generatePrompt.

I modelli e le librerie di IA lato client in genere includono meno utilità rispetto all'IA lato server. Ad esempio: Modalità JSON spesso non è disponibile. Ciò significa che dobbiamo fornire la struttura di output desiderata all'interno del prompt. Questo approccio è meno pulito, gestibile e affidabile rispetto alla fornitura 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 offre una un output strutturato sotto forma di testo rispetto a JSON o JavaScript. In 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.

Miglioramento del prompt

Il mio prompt e la risposta nell'interfaccia di Gemini Chat.
Figura 4. Abbiamo chiesto a Gemini Chat di migliorare il nostro prompt e ci ha risposto insieme a una spiegazione dei miglioramenti apportati e un'avvertenza sull'efficacia.

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 utilizzato Gemini Chat. Gemini Chat utilizza i più potenti modelli Gemini. In questo modo abbiamo generato esempi di alta qualità.
  • Miglioramento dei prompt. Quando la struttura del prompt era pronta, abbiamo utilizzato anche Gemini Chat per perfezionare il prompt. La qualità dell'output è stata migliorata.

Utilizza il contesto per aumentare 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") è inclusa nella correzione suggerita e nella revisione di esempio.

Correzioni e errori relativi ai modelli LLM

Gemma 2B in genere richiede più prompt engineering rispetto a un 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. Ciò che ha contribuito a migliorare i risultati è stato insistenza e ripetizione nel prompt. Una catena di pensiero potrebbe anche produrre miglioramenti.
  • Istruzioni non chiare. A volte il modello interpretava in modo eccessivo il prompt. Invece di valutare la revisione, ha continuato con 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 anziché il 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 rendere più chiara l'attività e migliorare l'attenzione del modello alla revisione.

di Gemini Advanced.