Data publikacji: 21 października 2024 r.
Sklepy internetowe mogą odnotować wzrost liczby konwersji o 270% 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ń.
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.
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
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,
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.