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ż ważne, ponieważ budują wiarygodność. 82% kupujących online szuka ich przed zakupem.

Zachęcanie klientów do pozostawiania pomocnych 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

Wypróbuj nasze demo oceny produktu i sprawdź kod na GitHubie.

Jak to powstało

AI po stronie klienta

Na potrzeby tej prezentacji 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 bez żadnych kosztów po stronie serwera, dopóki nie upewnisz się, że ta funkcja ma sens 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ą. Po odpowiednim odpowiedziach wyniki były zadowalające w tej wersji demonstracyjnej.
  • 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 LLM, ale i tak duży plik do pobrania. 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 interfejsu i animacje

Interpretacja zajmuje zwykle więcej czasu niż natychmiastowa, dlatego sygnalizujemy użytkownikowi, że model wykonuje interpretację, czyli „myśli”. Korzystamy z animacji, aby ułatwić użytkownikom czekanie i zapewnić użytkownikowi, że aplikacja działa zgodnie z oczekiwaniami. Poznaj różne stany interfejsu użytkownika, które w naszym pokazie zaimplementowaliśmy 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 wchodzi w interakcję z tą funkcją i czy ją wyłączają.
  • Zezwól na rezygnację. 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. Dzięki AI po stronie klienta treści użytkownika nie są wysyłane na serwer w celu przetworzenia, więc można zachować prywatność. 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 innych miejsc.

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

Dzięki wnioskowaniu MediaPipe LLM kod AI składa się tylko z kilku wierszy: utwórz resolver plików i obiekt wnioskowania LLM, przekazując do niego adres URL modelu, a następnie użyj tej instancji wnioskowania LLM do wygenerowania 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

Ilustracja 3. Diagram pokazujący przetwarzanie prompta przez inferencję do surowego wyjścia LLM, które jest następnie przetwarzane na rekomendację do wyświetlenia.

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. Poza tym modele po stronie klienta są zwykle mniejsze, co oznacza, że są bardziej podatne na błędy strukturalne w wynikach.

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 tej wersji demonstracyjnej wybraliśmy format tekstowy. Model generuje tekst, który następnie analizujemy do obiektu JavaScript i przetwarzamy w naszej aplikacji internetowej.

ulepszanie prompta,

Mój prompt i odpowiedź w interfejsie Gemini Chat.
Rysunek 4. Poprosiliśmy Gemini Chat o ulepszenie promptu. Ten prompt odpowiada, wyjaśnia, jakie ulepszenia udało się wprowadzić, i ma zastrzeżenia dotyczące ich 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ć. Poprawiło to jakość danych wyjściowych.

Używanie kontekstu do zwiększania jakości

Uwzględnienie typu produktu w prompcie pomogło modelowi uzyskać trafniejsze sugestie o wyższej jakości. W tej wersji demonstracyjnej typ usługi jest statyczny. W prawdziwej aplikacji możesz dynamicznie dołączać 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.

Awarie i poprawki LLM

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

Podczas korzystania z Gemmy 2B napotkaliśmy pewne problemy. 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 („konkretny” i „niekonkretny”, zamiast „pomocny” i „nieprzydatny”) i 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 czasem błędnie zinterpretował prompt. Zamiast oceny opinia została kontynuowana z listy 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. Podzielenie promptu pomogło objaśnić zadanie i skupić model na weryfikacji.