게시일: 2024년 10월 21일
온라인 상점은 270% 증가 제품 리뷰를 표시하여 전환수 증가 부정적인 리뷰도 신뢰성을 구축하는 데 중요한 역할을 합니다. 82% 구매 전에 해당 제품을 먼저 찾는 온라인 쇼핑객의 비율
특히 다음과 같은 경우에 유용한 제품 리뷰를 남기도록 고객을 유도합니다. 다소 까다로울 수 있습니다. 여기서는 생성형 AI를 사용하여 사용자는 다른 사람에게 도움이 되는 유익한 리뷰를 작성 도움이 될 수 있습니다
데모 및 코드
Google 제품 리뷰 데모 이 문제를 조사하여 GitHub에서 확인할 수 있습니다.
구축 방법
클라이언트 측 AI
이 데모에서는 다음과 같은 이유로 클라이언트 측에서 기능을 구현했습니다.
- 지연 시간. 사용자가 입력을 중지하는 즉시 추천 단어를 빠르게 제공하고자 합니다. 서버 왕복을 방지하면 이를 제공할 수 있습니다.
- 비용. 데모 버전이지만 이와 유사한 기능을 빌드하려면 애플리케이션이 실행될 때까지 서버 측 비용 없이 실험하는 것이 이 기능이 사용자에게 적합한지 확인할 수 있습니다
MediaPipe 생성형 AI
다음과 같은 이유로 MediaPipe LLM 추론 API(MediaPipe GenAI 패키지)를 통해 Gemma 2B 모델을 사용하기로 했습니다.
- 모델 정확성: Gemma 2B는 크기와 정확성 간에 균형이 잘 잡혀 있습니다. 날짜 이 데모는 만족스러운 결과를 얻었습니다.
- 교차 브라우저 지원: MediaPipe는 WebGPU를 지원하는 모든 브라우저에서 지원됩니다.
사용자 환경
성능 권장사항 적용
Gemma 2B는 소규모 LLM이지만 다운로드 크기가 큽니다. 성능 권장사항을 적용합니다. 웹 작업자 사용을 포함합니다
기능을 선택사항으로 설정
AI 기반 리뷰 제안을 통해 사용자가 제품 리뷰를 게시하는 워크플로를 개선하고자 합니다. Google 구현에서는 모델이 로드되지 않아 개선 팁을 제공하지 않습니다.
UI 상태 및 애니메이션
추론은 일반적으로 즉각적으로 느껴지는 것보다 시간이 더 걸리므로 모델이 추론을 실행하고 있거나 '생각 중'이라는 신호를 사용자에게 보냅니다. 애니메이션을 사용하여 대기를 용이하게 하는 동시에 사용자에게 애플리케이션이 정상적으로 작동하는지 확인합니다. Adam Argyle이 디자인한 데모에서 구현한 다양한 UI 상태를 살펴보세요.
기타 고려사항
프로덕션 환경에서는 다음을 수행할 수 있습니다.
- 의견 메커니즘을 제공합니다. 제안이 평범하다면 어떻게 해야 할까요? 말이 안 되는 것 같나요? 빠른 의견 메커니즘(예: 좋아요 및 싫어요)을 구현하고 휴리스틱을 사용하여 사용자가 유용하다고 생각하는 항목을 결정합니다. 예를 들어, 광고주의 비즈니스와 상호작용하는 사용자 수를 사용자가 기능을 사용 중지할지 여부를 제어할 수 있습니다.
- 선택 해제 허용. 사용자가 단어 없이 자신이 직접 입력한 단어를 사용하고 싶다면 어떻게 해야 할까요? AI 지원을 받거나 기능이 성가신가요? 사용자가 원하는 경우 선택 해제하고 다시 선택할 수 있도록 허용합니다.
- 이 기능이 존재하는 이유를 설명합니다. 간단한 설명을 통해 피드백 도구를 사용할 것을 권장합니다. 예: "의견이 좋으면 동료가 쇼핑객이 구매할 제품을 결정해 주므로 Google에서 판매자가 원하는 제품을 만드는 데 도움이 됩니다." 기능의 작동 방식과 제공 이유에 관한 자세한 설명을 추가할 수 있습니다(예: 링크를 통해 자세히 알아보기).
- 해당하는 경우 AI 사용 사실 공개 클라이언트 측 AI를 사용하면 는 처리를 위해 서버로 전송되지 않으므로 비공개로 유지할 수 있습니다. 하지만 서버 측 대체 솔루션을 빌드하거나 다른 방식으로 AI로 정보를 수집하는 경우 개인정보처리방침, 서비스 약관 또는 기타 위치에 이를 추가하는 것이 좋습니다.
구현
제품 리뷰 제안자는 광범위하게 구현할 수 있습니다. 다양한 사용 사례를 모니터링할 수 있습니다 향후의 기준으로 다음 정보를 고려하세요. 클라이언트 측 AI 기능을 살펴보겠습니다
웹 작업자의 MediaPipe
MediaPipe LLM 추론을 사용하면 AI 코드가 몇 줄이면 됩니다. 모델 URL을 전달하여 파일 리졸버와 LLM 추론 객체를 만든 후 나중에 이 LLM 추론 인스턴스를 사용하여 응답을 생성합니다.
하지만 Google의 코드 샘플은 조금 더 확장되어 있습니다. 이는 웹 워커에 구현되어 있으므로 맞춤 메시지 코드를 통해 메인 스크립트와 함께 메시지를 전달하기 때문입니다. 이 패턴에 대해 자세히 알아보세요.
// 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',
};
입력 및 출력
전체 프롬프트 인코더-디코더 아키텍처를 퓨샷 프롬프팅입니다. 여기에는 사용자의 입력, 즉 사용자가 작성한 리뷰 초안이 포함됩니다.
사용자 입력을 기반으로 프롬프트를 생성하려면 런타임 시 유틸리티 함수 generatePrompt를 호출합니다.
클라이언트 측 AI 모델 및 라이브러리에는 일반적으로 서버 측 AI보다 유틸리티가 적습니다. 예를 들어 JSON 모드 종종 사용할 수 없는 경우도 있습니다. 즉, 원하는 출력 데이터를 살펴보겠습니다. 이는 모델 구성을 통해 스키마를 제공하는 것보다 깔끔하고 유지 관리가 쉽지 않으며 안정적이지 않습니다. 또한 클라이언트 측 모델에서는 대체로 크기가 작기 때문에 데이터 레이크에서 구조적 오류가 출력됩니다.
실제로 Gemma 2B는 JSON이나 JavaScript에 비해 구조화된 출력을 텍스트로 제공하는 데 더 효과적입니다. 따라서 이 데모에서는 텍스트 기반 출력 형식을 선택했습니다. 모델이 텍스트를 생성한 다음 웹 내에서 추가 처리를 위해 출력을 JavaScript 객체로 파싱합니다. 있습니다.
프롬프트 개선
LLM을 사용하여 프롬프트를 반복했습니다.
- 퓨샷 프롬프팅. 퓨샷 프롬프트의 예시를 생성하기 위해 Gemini Chat을 사용했습니다. Gemini Chat은 살펴보겠습니다 이를 통해 고품질 예시를 생성할 수 있었습니다.
- 프롬프트 수정. 프롬프트 구조가 준비되면 Gemini Chat을 사용하여 프롬프트를 다듬어 보세요. 이렇게 하여 출력 품질이 개선되었습니다.
맥락을 사용하여 품질 향상
제품 유형을 프롬프트에 포함하면 모델이 더 관련성 높고 품질이 우수한 추천을 제공할 수 있었습니다. 이 데모에서 제품 유형은 정적입니다. 실제 애플리케이션에서는 제품을 프롬프트가 표시됩니다.
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."
프롬프트의 몇 장의 섹션에 있는 예시 중 하나입니다. 제품 유형('양말')이 추천 해결 방법과 리뷰 예시로 포함되어 있습니다.
LLM 문제 및 수정사항
Gemma 2B에는 일반적으로 더 강력하고 더 큰 서버 측 모델보다 더 많은 프롬프트 엔지니어링이 필요합니다.
Gemma 2B에 몇 가지 문제가 발생했습니다. 결과가 개선된 방법은 다음과 같습니다.
- 너무 좋네요 Gemma 2B는 리뷰를 '유용하지 않음'으로 표시하는 데 어려움을 겪었고 판단하기 주저하는 듯 보였습니다. 라벨 언어를 더 중립적으로 만들고('유용함'과 '유용하지 않음' 대신 '구체적'과 '구체적이지 않음') 예시를 추가했지만 결과가 개선되지 않았습니다. 실적을 개선한 것은 반복을 강조하지 않아도 됩니다 생각의 사슬 이 접근 방식도 개선될 가능성이 높습니다.
안내가 명확하지 않습니다. 모델이 프롬프트를 과도하게 해석하는 경우가 있었습니다. 리뷰를 평가하는 대신 예시 목록을 계속했습니다. 이 문제를 해결하기 위해 프롬프트에 명확한 전환을 포함했습니다.
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>프롬프트를 명확하게 구성하면 모델이 예시 목록(몇 장의 샷)과 실제 입력을 구분하는 데 도움이 됩니다.
목표가 잘못되었습니다. 경우에 따라 모델이 리뷰 텍스트 대신 제품 변경을 제안하기도 했습니다. 예를 들어 '싫어요'라는 문구가 포함된 리뷰 이 모델은 '양말을 다른 양말로 교체해 보세요'라고 제안할 수 있습니다 '브랜드 또는 스타일'로 분류되어 원하는 효과를 얻지 못할 수 있습니다. 프롬프트를 분할하니 도움이 됨 작업을 명확히 하고 검토에 대한 모델이 중점을 두는 부분을 개선해 줍니다.