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ż 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ń.
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.
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
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,
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.