Sugestie dotyczące opinii o produktach z wykorzystaniem AI po stronie klienta

Maud Nalpas
Maud Nalpas

Data publikacji: 21 października 2024 r.

Sklepy internetowe mogą odnotować wzrost liczby konwersji270% dzięki wyświetlaniu opinii o produktach. Negatywne opinie są również kluczowe, ponieważ budują zaufanie. 82% kupujących online szuka ich przed zakupem.

Zachęcanie klientów do zamieszczania przydatnych opinii o produktach, zwłaszcza negatywnych, może być trudne. W tym artykule dowiesz się, jak używać generatywnej AI, aby pomagać użytkownikom w pisaniu rzetelnych opinii, które ułatwiają innym podejmowanie decyzji o zakupie.

Wersja demonstracyjna i kod

Zapoznaj się z naszym demo opinii o produkcie i sprawdź kod na GitHubie.

Jak to powstało

AI po stronie klienta

Na potrzeby tego demonstracji wdrożyliśmy tę funkcję po stronie klienta z tych powodów:

  • Czas oczekiwania. Chcemy szybko wyświetlać sugestie, gdy tylko użytkownik przestanie pisać. Możemy to zaoferować, unikając wielokrotnego przesyłania danych na serwer i z serwera.
  • Koszt. To jest wersja demonstracyjna, ale jeśli rozważasz wdrożenie podobnej funkcji w wersji produkcyjnej, możesz przeprowadzić eksperyment bezpłatnie po stronie serwera, dopóki nie upewnisz się, że ta funkcja jest przydatna dla Twoich użytkowników.
.

Generatywne AI w MediaPipe

Zdecydowaliśmy się użyć modelu Gemma 2B za pomocą interfejsu MediaPipe LLM Inference API (pakiet MediaPipe GenAI) z tych powodów:

  • Dokładność modelu: Gemma 2B zapewnia doskonały balans między rozmiarem a dokładnością. Gdy został odpowiednio skonfigurowany, uzyskaliśmy zadowalające wyniki w przypadku tego pokazu.
  • Obsługa w różnych przeglądarkach: MediaPipe jest obsługiwany we wszystkich przeglądarkach, które obsługują WebGPU.

Interfejs użytkownika

Stosowanie sprawdzonych metod dotyczących skuteczności

Gemma 2B to mały model LLM, ale nadal zajmuje dużo miejsca. Stosuj sprawdzone metody dotyczące wydajności, które obejmują używanie web workera.

Uczynić funkcję opcjonalną

Chcemy, aby sugestie opinii oparte na AI ułatwiały użytkownikom publikowanie opinii o produktach. W naszym przypadku użytkownik może opublikować opinię, nawet jeśli model nie został załadowany, a tym samym nie wyświetla wskazówek dotyczących ulepszeń.

Rysunek 1. Użytkownicy mogą nadal publikować opinie, nawet jeśli funkcja AI nie jest jeszcze gotowa.

Stany i animacja interfejsu

Interpretacja zajmuje zwykle więcej czasu niż natychmiastowa, dlatego sygnalizujemy użytkownikowi, że model wykonuje interpretację, czyli „myśli”. Używamy animacji, aby uprzyjemnić użytkownikom czas oczekiwania i zapewnić im, że aplikacja działa zgodnie z oczekiwaniami. Poznaj różne stany interfejsu użytkownika, które w naszym pokazie demo zostały zaimplementowane zgodnie z projektami Adama Argyle.

Ilustracja 2. Animacje pokazują, że model jest wczytywany, a potem „myśli” i w końcu kończy pracę.

Inne uwagi

W środowisku produkcyjnym możesz:

  • Udostępnij mechanizm przesyłania opinii. Co zrobić, jeśli sugestie są przeciętne lub nie mają sensu? Wprowadź mechanizm szybkiego przekazywania opinii (np. kciuki w górę i w dół) i korzystaj z heurystyki, aby określić, co użytkownicy uważają za przydatne. Możesz na przykład sprawdzić, ilu użytkowników korzysta z funkcji i czy ją wyłączają.
  • Zezwól na rezygnację z reklam. Co zrobić, jeśli użytkownik woli używać własnych słów bez pomocy AI lub uważa, że funkcja jest irytująca? Zezwalaj użytkownikowi na rezygnację z usługi i powrót do niej.
  • Wyjaśnij, dlaczego ta funkcja istnieje. Krótkie wyjaśnienie może zachęcić użytkowników do korzystania z narzędzia do przesyłania opinii. Możesz na przykład napisać: „Lepsze opinie pomagają innym kupującym zdecydować, co kupić, i pomagają nam tworzyć produkty, które Ci odpowiadają”. Możesz dodać obszerne wyjaśnienie, jak działa dana funkcja i dlaczego ją udostępniasz, na przykład w postaci linku do strony z dodatkowymi informacjami.
  • W stosownych przypadkach informuj o korzystaniu z AI. W przypadku AI po stronie klienta treści użytkownika nie są wysyłane na serwer do przetworzenia, dzięki czemu mogą pozostać prywatne. Jeśli jednak tworzysz alternatywę po stronie serwera lub gromadzisz informacje za pomocą AI, rozważ dodanie informacji o tym do polityki prywatności, warunków korzystania z usługi lub w innych miejscach.

Implementacja

Nasze rozwiązanie dotyczące sugerowania opinii o produktach może być przydatne w wielu przypadkach użycia. Poniższe informacje mogą posłużyć jako podstawa do przyszłych funkcji AI po stronie klienta.

MediaPipe w web workerze

W przypadku MediaPipe LLM inference kod AI składa się tylko z kilku linii: tworzysz resolver plików i obiekt LLM inference, przekazując mu adres URL modelu, a następnie używasz instancji LLM inference do generowania odpowiedzi.

Nasz przykładowy kod jest jednak nieco bardziej rozbudowany. Dzieje się tak, ponieważ jest ona implementowana w procesie web worker, więc przekazuje wiadomości z głównego skryptu za pomocą kodów wiadomości niestandardowych. Dowiedz się więcej o tym wzorze.

// 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',
};

Dane wejściowe i wyjściowe

Rysunek 3. Diagram pokazujący przetwarzanie prompta przez inferencję do surowego wyjścia LLM, które jest następnie analizowane w celu wyświetlenia rekomendacji.

Nasz prompt pełny został utworzony za pomocą promptów „few-shot”. Obejmuje ona dane wprowadzone przez użytkownika, czyli wersję roboczą opinii napisanej przez użytkownika.

Aby wygenerować prompt na podstawie danych wejściowych użytkownika, wywołujemy w czasie wykonywania funkcję pomocniczą generatePrompt.

Modele i biblioteki AI po stronie klienta zwykle mają mniej narzędzi niż AI po stronie serwera. Na przykład tryb JSON często jest niedostępny. Oznacza to, że w promptzie musimy podać żądaną strukturę danych wyjściowych. Ta metoda jest mniej przejrzysta, mniej niezawodna i trudniejsza do utrzymania niż podanie schematu w ramach konfiguracji modelu. Dodatkowo modele po stronie klienta są zazwyczaj mniejsze, co oznacza, że są bardziej podatne na błędy strukturalne w wyjściu.

W praktyce zauważyliśmy, że Gemma 2B lepiej radzi sobie z wygenerowaniem danych wyjściowych w postaci tekstu uporządkowanego niż w przypadku formatu JSON czy JavaScript. W tym przypadku wybraliśmy format wyjściowy oparty na tekście. Model generuje tekst, który następnie przetwarzamy na obiekt JavaScript do dalszego przetwarzania w naszej aplikacji internetowej.

ulepszanie prompta,

Mój prompt i odpowiedź w interfejsie Gemini Chat.
Rysunek 4. Poprosimy Gemini Chat o ulepszanie promptu. W odpowiedzi znajdziesz wyjaśnienie, jakie zmiany zostały wprowadzone, oraz ostrzeżenie dotyczące skuteczności.

Do iteracji promptu użyliśmy LLM.

  • Prompty „few-shot”. Aby wygenerować przykłady promptów typu few-shot, użyliśmy Gemini Chat. Gemini Chat korzysta z najbardziej zaawansowanych modeli Gemini. Dzięki temu udało nam się wygenerować przykłady o wysokiej jakości.
  • Uzupełnianie promptów. Gdy struktura promptu była gotowa, użyliśmy Gemini Chat, aby go dopracować. Dzięki temu poprawiła się jakość wyjściowa.

Używanie kontekstu do zwiększania jakości

Uwzględnienie typu produktu w promptach pomogło modelowi generować trafniejsze sugestie o wyższej jakości. W tym pokazie typ produktu jest statyczny. W prawdziwej aplikacji możesz dynamicznie dodawać produkt do promptu na podstawie strony, którą przegląda użytkownik.

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."

Jeden z przykładów w sekcji „Kilka ujęć” w naszym prompt: typ produktu („skarpety”) jest uwzględniony w proponowanym rozwiązaniu i w przykładowej opinii.

Problemy z modelami LLM i ich poprawki

Gemma 2B zwykle wymaga więcej pracy nad promptami niż potężniejszy, większy model po stronie serwera.

Wystąpiły pewne problemy z Gemma 2B. Oto, jak udało nam się poprawić wyniki:

  • Za miły. Gemma 2B miała problemy z oznaczeniem opinii jako „nieprzydatne”, ponieważ nie była pewna, jaką ocenę wystawić. Staraliśmy się, aby język etykiet był bardziej neutralny (zamiast „przydatne” i „nieprzydatne” używaliśmy „konkretne” i „nieprecyzyjne”) oraz dodaliśmy przykłady, ale nie poprawiło to wyników. Wyniki poprawiło naleganie i powtarzanie w promptach. Podejście oparte na ciągu myśli również może przynieść poprawę.
  • Niejasne instrukcje. Model czasami nadmiernie interpretował prompt. Zamiast ocenić opinię, kontynuowano listę przykładów. Aby to naprawić, dodaliśmy w prośbie wyraźne przejście:

    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>
    

    Jasne ustrukturyzowanie promptu pomaga modelowi odróżnić listę przykładów (kilka ujęć) od rzeczywistego wejścia.

  • Nieprawidłowy cel. Czasami model sugerował zmiany w produkcie, a nie w tekście recenzji. Na przykład w przypadku opinii „Nienawidzę tych skarpetek” model może zasugerować „Rozważ wymianę skarpetek na inną markę lub inny styl”, co nie jest pożądanym efektem. Podział promptu pomógł sprecyzować zadanie i zwiększył skupienie modelu na ocenie.

.