클라이언트 측 웹 AI로 유용한 제품 리뷰 유도

Maud Nalpas
Maud Nalpas
Kenji Baheux
Kenji Baheux

게시일: 2024년 5월 16일

긍정적인 리뷰와 부정적인 리뷰는 구매자의 구매 결정에 영향을 줄 수 있습니다.

외부 조사에 따르면 온라인 쇼핑객의 82% 가 구매하기 전에 부정적인 리뷰를 적극적으로 찾습니다. 이러한 부정적인 리뷰는 고객과 비즈니스에 유용합니다. 부정적인 리뷰를 사용할 수 있으면 반품률을 줄이고 제작자가 제품을 개선하는 데 도움이 될 수 있기 때문입니다.

다음은 리뷰 품질을 개선하는 방법입니다.

  • 리뷰가 제출되기 전에 각 리뷰의 유해성을 확인합니다. Google은 사용자가 다른 사용자가 더 나은 구매 결정을 내리는 데 가장 도움이 되는 리뷰를 작성할 수 있도록 불쾌감을 주는 표현과 기타 유용하지 않은 의견을 삭제하도록 권장할 수 있습니다.
    • 부정적: 이 가방은 정말 싫어요.
    • 부정적 의견(유용한 의견 포함) 지퍼가 매우 뻣뻣하고 소재가 싸구려 느낌입니다. 이 가방을 반품했습니다.
  • 리뷰에 사용된 언어를 기반으로 평점을 자동 생성합니다.
  • 리뷰가 긍정적인 리뷰인지 부정적인 리뷰인지 판단합니다.
감정 및 별표 평점이 포함된 리뷰 예시의 스크린샷
이 예시에서 리뷰 작성자의 의견에는 긍정적인 감정과 별 5개 평점이 부여되었습니다.

궁극적으로 제품 평가에 대한 최종 결정권은 사용자에게 있습니다.

다음 Codelab에서는 기기 내 및 브라우저에서 클라이언트 측 솔루션을 제공합니다. AI 개발 지식, 서버 또는 API 키가 필요하지 않습니다.

기본 요건

솔루션이 있는 서버 측 AI (예: Gemini API 또는 OpenAI API)는 여러 애플리케이션에 강력한 솔루션을 제공하지만 이 가이드에서는 클라이언트 측 웹 AI에 중점을 둡니다. 클라이언트 측 AI 추론은 브라우저에서 발생하며 서버 왕복을 삭제하여 웹 사용자의 환경을 개선합니다.

이 Codelab에서는 다양한 기법을 사용하여 클라이언트 측 AI용 도구 상자에 있는 항목을 보여줍니다.

다음 라이브러리와 모델을 사용합니다.

  • TensforFlow.js: 독성 분석 TensorFlow.js는 웹에서 추론과 학습 모두를 위한 오픈소스 머신러닝 라이브러리입니다.
  • 감정 분석을 위한 transformers.js Transformers.js는 Hugging Face의 웹 AI 라이브러리입니다.
  • 별표 평점을 위한 Gemma 2B Gemma는 Google이 Gemini 모델을 만드는 데 사용한 연구와 기술로 빌드된 경량형 개방형 모델 제품군입니다. 브라우저에서 Gemma를 실행하려면 MediaPipe의 실험용 LLM 추론 API와 함께 사용합니다.

UX 및 안전 고려사항

최적의 사용자 환경과 안전을 보장하기 위해 몇 가지 고려사항이 있습니다.

  • 사용자가 평점을 수정할 수 있도록 허용합니다. 궁극적으로 제품 평가에 대한 최종 결정권은 사용자에게 있습니다.
  • 평점과 리뷰가 자동 생성된다는 점을 사용자에게 명확하게 알립니다.
  • 사용자가 유해한 것으로 분류된 리뷰를 게시하도록 허용하지만 서버에서 두 번째 확인을 실행합니다. 이렇게 하면 유해하지 않은 리뷰가 유해한 리뷰로 잘못 분류되는 불편을 방지할 수 있습니다 (거짓양성). 악의적인 사용자가 클라이언트 측 검사를 우회하는 경우도 여기에 해당합니다.
  • 클라이언트 측 독성 검사는 유용하지만 우회될 수 있습니다. 서버 측에서도 검사를 실행해야 합니다.

TensorFlow.js로 유해성 분석

TensorFlow.js를 사용하면 사용자 리뷰의 악성성을 빠르게 분석할 수 있습니다.

  1. TensorFlow.js 라이브러리와 독성 모델을 설치하고 import.
  2. 최소 예측 신뢰도를 설정합니다. 기본값은 0.85이며 이 예에서는 0.9로 설정했습니다.
  3. 모델을 비동기식으로 로드합니다.
  4. 리뷰를 비동기식으로 분류합니다. 코드는 모든 카테고리의 임곗값 0.9를 초과하는 예측을 식별합니다.

이 모델은 정체성 공격, 모욕, 외설 등에서 악의성을 분류할 수 있습니다.

예를 들면 다음과 같습니다.

import * as toxicity from '@tensorflow-models/toxicity';

// Minimum prediction confidence allowed
const TOXICITY_COMMENT_THRESHOLD = 0.9;

const toxicityModel = await toxicity.load(TOXICITY_COMMENT_THRESHOLD);
const toxicityPredictions = await toxicityModel.classify([review]);
// `predictions` is an array with the raw toxicity probabilities
const isToxic = toxicityPredictions.some(
    (prediction) => prediction.results[0].match
);

Transformers.js로 감정 확인

  1. Transformers.js 라이브러리를 설치하고 가져옵니다.

  2. 전용 파이프라인으로 감정 분석 작업을 설정합니다. 파이프라인을 처음 사용할 때 모델이 다운로드되고 캐시됩니다. 그러면 이후로 감정 분석이 훨씬 더 빨라집니다.

  3. 리뷰를 비동기식으로 분류합니다. 맞춤 기준점을 사용하여 애플리케이션에 사용할 수 있다고 생각하는 신뢰 수준을 설정합니다.

예를 들면 다음과 같습니다.

import { pipeline } from '@xenova/transformers';

const SENTIMENT_THRESHOLD = 0.9;
// Create a pipeline (don't block rendering on this function)
const transformersjsClassifierSentiment = await pipeline(
  'sentiment-analysis'
);

// When the user finishes typing
const sentimentResult = await transformersjsClassifierSentiment(review);
const { label, score } = sentimentResult[0];
if (score > SENTIMENT_THRESHOLD) {
  // The sentiment is `label`
} else {
  // Classification is not conclusive
}

Gemma 및 MediaPipe로 별표 평점 제안

LLM 추론 API를 사용하면 브라우저에서 대규모 언어 모델 (LLM)을 완전히 실행할 수 있습니다.

이 새로운 기능은 클라이언트 측 모델보다 100배 이상 큰 LLM의 메모리 및 컴퓨팅 요구사항을 고려할 때 특히 혁명적입니다. 새로운 작업, 양자화, 캐싱, 가중치 공유 등 웹 스택 전반의 최적화를 통해 이를 실현할 수 있습니다. 출처: 'MediaPipe 및 TensorFlow Lite를 사용한 기기 내 대규모 언어 모델'

  1. MediaPipe LLM 추론 API를 설치 및 가져옵니다.
  2. 모델을 다운로드합니다. 여기서는 Kaggle에서 다운로드한 Gemma 2B를 사용합니다. Gemma 2B는 Google의 개방형 가중치 모델 중 가장 작습니다.
  3. FilesetResolver를 사용하여 코드가 올바른 모델 파일을 가리키도록 합니다. 생성형 AI 모델에 애셋의 특정 디렉터리 구조가 있을 수 있으므로 이 작업은 중요합니다.
  4. MediaPipe의 LLM 인터페이스로 모델을 로드하고 구성합니다. 사용할 모델을 준비합니다. 모델 위치, 선호하는 응답 길이, 선호하는 창의성 수준을 온도로 지정합니다.
  5. 모델에 프롬프트를 제공합니다 (예시 보기).
  6. 모델의 응답을 기다립니다.
  7. 평점 파싱: 모델의 응답에서 별표 평점을 추출합니다.
import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';

const mediaPipeGenAi = await FilesetResolver.forGenAiTasks();
const llmInference = await LlmInference.createFromOptions(mediaPipeGenAi, {
    baseOptions: {
        modelAssetPath: '/gemma-2b-it-gpu-int4.bin',
    },
    maxTokens: 1000,
    topK: 40,
    temperature: 0.5,
    randomSeed: 101,
});

const prompt = 
const output = await llmInference.generateResponse(prompt);

const int = /\d/;
const ratingAsString = output.match(int)[0];
rating = parseInt(ratingAsString);

프롬프트 예시

const prompt = `Analyze a product review, and then based on your analysis give me the
corresponding rating (integer). The rating should be an integer between 1 and 5.
1 is the worst rating, and 5 is the best rating. A strongly dissatisfied review
that only mentions issues should have a rating of 1 (worst). A strongly
satisfied review that only mentions positives and upsides should have a rating
of 5 (best). Be opinionated. Use the full range of possible ratings (1 to 5). \n\n
  \n\n
  Here are some examples of reviews and their corresponding analyses and ratings:
  \n\n
  Review: 'Stylish and functional. Not sure how it'll handle rugged outdoor use,
  but it's perfect for urban exploring.'
  Analysis: The reviewer appreciates the product's style and basic
  functionality. They express some uncertainty about its ruggedness but overall
  find it suitable for their intended use, resulting in a positive, but not
  top-tier rating.
  Rating (integer): 4
  \n\n
  Review: 'It's a solid backpack at a decent price. Does the job, but nothing
  particularly amazing about it.'
  Analysis: This reflects an average opinion. The backpack is functional and
  fulfills its essential purpose. However, the reviewer finds it unremarkable
  and lacking any standout features deserving of higher praise.
  Rating (integer): 3
  \n\n
  Review: 'The waist belt broke on my first trip! Customer service was
  unresponsive too. Would not recommend.'
  Analysis: A serious product defect and poor customer service experience
  naturally warrants the lowest possible rating. The reviewer is extremely
  unsatisfied with both the product and the company.
  Rating (integer): 1
  \n\n
  Review: 'Love how many pockets and compartments it has. Keeps everything
  organized on long trips. Durable too!'
  Analysis: The enthusiastic review highlights specific features the user loves
  (organization and durability), indicating great satisfaction with the product.
  This justifies the highest rating.
  Rating (integer): 5
  \n\n
  Review: 'The straps are a bit flimsy, and they started digging into my
  shoulders under heavy loads.'
  Analysis: While not a totally negative review, a significant comfort issue
  leads the reviewer to rate the product poorly. The straps are a key component
  of a backpack, and their failure to perform well under load is a major flaw.
  Rating (integer): 1
  \n\n
  Now, here is the review you need to assess:
  \n
  Review: "${review}" \n`;

요약

AI/ML 전문 지식이 필요하지 않습니다. 프롬프트를 설계하려면 반복이 필요하지만 나머지 코드는 표준 웹 개발입니다.

클라이언트 측 모델은 상당히 정확합니다. 이 문서의 스니펫을 실행하면 유해성 분석과 감정 분석 모두 정확한 결과를 제공하는 것을 확인할 수 있습니다. Gemma 평점은 대부분 테스트된 몇 가지 참조 리뷰의 Gemini 모델 평점과 일치했습니다. 정확성을 검증하려면 더 많은 테스트가 필요합니다.

하지만 Gemma 2B의 프롬프트를 디자인하는 데는 노력이 필요합니다. Gemma 2B는 소규모 LLM이므로 만족스러운 결과를 얻으려면 Gemini API에 필요한 것보다 훨씬 더 상세한 프롬프트가 필요합니다.

추론이 매우 빠를 수 있습니다. 이 문서의 스니펫을 실행하면 여러 기기에서 서버 왕복보다 빠르게 추론이 실행될 수 있습니다. 하지만 추론 속도는 크게 달라질 수 있습니다. 대상 기기에서 철저한 벤치마킹이 필요합니다. WebGPU, WebAssembly, 라이브러리 업데이트를 통해 브라우저 추론이 계속 빨라질 것으로 예상됩니다. 예를 들어 Transformers.js는 v3에서 웹 GPU 지원을 추가하여 기기 내 추론 속도를 여러 배 높일 수 있습니다.

다운로드 크기가 매우 클 수 있습니다. 브라우저에서의 추론은 빠르지만 AI 모델을 로드하는 것은 어려울 수 있습니다. 브라우저 내 AI를 실행하려면 일반적으로 라이브러리와 모델이 모두 필요하며, 이는 웹 앱의 다운로드 크기를 늘립니다.

TensorFlow 독성 모델 (기존 자연어 처리 모델)은 몇 KB에 불과하지만 Transformers.js의 기본 감정 분석 모델과 같은 생성형 AI 모델은 60MB에 달합니다. Gemma와 같은 대규모 언어 모델은 최대 1.3GB까지 클 수 있습니다. 이는 2.2MB 웹페이지 크기중앙값을 초과하며, 이는 이미 최적의 성능을 위해 권장되는 크기보다 훨씬 큽니다. 클라이언트 측 생성형 AI는 특정 시나리오에서 실행 가능합니다.

웹의 생성형 AI 분야는 빠르게 발전하고 있습니다. 향후 웹에 최적화된 더 작은 모델이 출시될 것으로 예상됩니다.

다음 단계

Chrome에서는 브라우저에서 생성형 AI를 실행하는 다른 방법을 실험하고 있습니다. 사전 미리보기 프로그램에 가입하여 테스트할 수 있습니다.