Vorschläge für Rezensionen mit clientseitiger KI ansehen

Maud Nalpas
Maud Nalpas

Veröffentlicht: 21. Oktober 2024

Online-Shops können eine Steigerung um 270% mehr Conversions durch Rezensionen. Negative Rezensionen sind ebenfalls wichtig, da sie Glaubwürdigkeit schaffen. 82 % der Onlinekäufer suchen vor dem Kauf nach Rezensionen.

Ermutigen Sie die Kunden, hilfreiche Rezensionen zu hinterlassen, insbesondere wenn negativ sein, kann schwierig sein. Hier erfahren Sie, wie Sie mithilfe von generativer KI Nutzern dabei helfen können, informative Rezensionen zu verfassen, die anderen bei Kaufentscheidungen helfen.

Demo und Code

Sehen Sie sich unsere Demo für Rezensionen an und sehen Sie sich den Code auf GitHub an.

So haben wir das Tool entwickelt

Clientseitige KI

Für diese Demo haben wir die Funktion aus folgenden Gründen clientseitig implementiert:

  • Latenz. Wir möchten Vorschläge schnell anzeigen, sobald der Nutzer aufhört zu tippen. Das ist möglich, weil wir Server-Roundtrips vermeiden.
  • Kosten. Dies ist zwar eine Demo, aber wenn du überlegst, ein ähnliches in der Produktion verwenden, sollten Sie keine serverseitigen Kosten kosten, können Sie überprüfen, ob die Funktion für Ihre Nutzer sinnvoll ist.

Generative KI von MediaPipe

Wir haben uns für die Gemma 2B über die MediaPipe LLM Inference API (MediaPipe GenAI-Paket) aus folgenden Gründen:

  • Modellgenauigkeit: Gemma 2B bietet ein hervorragendes Gleichgewicht zwischen Größe und Genauigkeit. Bei passenden Prompts hat das System Ergebnisse geliefert, die wir für diese Demo zufriedenstellend fanden.
  • Browserübergreifende Unterstützung: MediaPipe wird in folgenden Sprachen unterstützt: alle Browser, die WebGPU unterstützen.

Nutzererfahrung

Best Practices für die Leistung anwenden

Gemma 2B ist zwar ein kleines LLM, aber trotzdem ein großer Download. Best Practices für die Leistung anwenden, einschließlich der Verwendung eines Web-Workers.

Funktion optional machen

Wir möchten, dass die KI-basierten Rezensionsvorschläge den Workflow der Nutzer beim Posten einer Produktrezension verbessern. In unserer Implementierung kann der Nutzer selbst dann eine Rezension veröffentlichen, wenn der nicht geladen wurde und daher keine Verbesserungstipps bietet.

Abbildung 1. Nutzer können ihre Rezension auch dann posten, wenn die KI Funktion ist noch nicht bereit.

UI-Status und ‑Animationen

Die Inferenz dauert in der Regel länger als sofort. Daher signalisieren wir dem Nutzer, dass das Modell gerade eine Inferenz ausführt, also „nachdenkt“. Wir verwenden Animationen, um die Wartezeit zu verringern, und stellen dem Nutzer gleichzeitig sicher, dass die Anwendung wie vorgesehen funktioniert. Entdecken Sie die verschiedenen UI-Status, die wir in unserer Demo implementiert haben und die von Adam Argyle entworfen wurde.

<ph type="x-smartling-placeholder">
Abbildung 2. Animationen zeigen, dass das Modell geladen wird, dann „Denken“, und schließlich ist es fertig.

Weitere Hinweise

In einer Produktionsumgebung können Sie Folgendes tun:

  • Bieten Sie einen Feedbackmechanismus. Was ist, wenn die Vorschläge mittelmäßig sind, oder keinen Sinn ergeben? Implementieren Sie einen Mechanismus für schnelles Feedback (z. B. „Mag ich“ und „Mag ich nicht“) und nutzen Sie Heuristiken, um zu ermitteln, was Nutzer nützlich finden. Sie können beispielsweise prüfen, wie viele Nutzer mit der Funktion interagieren und ob sie sie deaktivieren.
  • Deaktivieren zulassen: Was ist, wenn Nutzende lieber ihre eigenen Worte verwenden, Oder empfindet man die Funktion als störend? Ermöglichen Sie es dem Nutzer, sich aus der aktivieren können.
  • Erkläre, warum es diese Funktion gibt. Eine kurze Erklärung kann Nutzer dazu anregen, das Feedback-Tool zu verwenden. Beispiel: „Besseres Feedback hilft anderen Käufern bei der Kaufentscheidung und uns dabei, die Produkte zu entwickeln, die Sie sich wünschen.“ Ich eine ausführliche Erklärung zur Funktionsweise der Funktion und zur Verfügung gestellt, vielleicht als verlinkte Seite mit weiteren Informationen.
  • Gib gegebenenfalls die Nutzung von KI an. Mit clientseitiger KI werden die Inhalte werden nicht zur Verarbeitung an einen Server gesendet und können somit vertraulich behandelt werden. Wenn jedoch Sie ein serverseitiges Fallback erstellen oder anderweitig Informationen mit KI erheben, sollten Sie sie in Ihre Datenschutzerklärung, Ihre Nutzungsbedingungen oder an anderer Stelle einfügen.

Implementierung

Unsere Implementierung für den Vorschlag von Rezensionen kann für eine Vielzahl von Anwendungsfällen verwendet werden. Die folgenden Informationen können Sie als Grundlage für Ihre zukünftigen clientseitigen KI-Funktionen verwenden.

MediaPipe in einem Webworker

Mit der MediaPipe-LLM-Inferenz besteht der KI-Code aus nur wenigen Zeilen: Sie erstellen einen Datei-Resolver und ein LLM-Inferenzobjekt, indem Sie ihm eine Modell-URL übergeben. Später verwenden Sie dann diese LLM-Inferenzinstanz, um eine Antwort zu generieren.

Unser Codebeispiel ist jedoch etwas umfangreicher. Das liegt daran, die in einem Web Worker implementiert sind, sodass Nachrichten mit dem Hauptskript über benutzerdefinierten Nachrichtencodes. Weitere Informationen zu diesem Muster

// 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',
};

Eingabe und Ausgabe

Abbildung 3: Ein Diagramm, das die Verarbeitung des Prompts durch Inferenz einer LLM-Rohausgabe veranschaulicht, die dann zu einer Read-to-Display-Empfehlung geparst wird.

Unser vollständiger Prompt wurde mit Prompting mit wenigen Aufnahmen: Sie enthält die Eingaben der Nutzenden, also den Rezensionsentwurf, den sie erhalten hat. geschrieben.

Um unseren Prompt basierend auf der Nutzereingabe zu generieren, rufen wir zur Laufzeit unser Dienstprogramm auf Funktion generatePrompt.

Clientseitige KI-Modelle und ‑Bibliotheken bieten in der Regel weniger Funktionen als serverseitige KI. Beispiel: JSON-Modus häufig nicht verfügbar. Das bedeutet, dass wir die gewünschte Ausgabestruktur in unserem Prompt angeben müssen. Dies ist weniger sauber, wartungsfähig und zuverlässig als Bereitstellen eines Schemas über die Modellkonfiguration. Außerdem sind clientseitige Modelle in der Regel kleiner, was bedeutet, dass sie anfälliger für strukturelle Fehler in der Ausgabe sind.

In der Praxis haben wir festgestellt, dass Gemma 2B besser darin ist, eine strukturierte Ausgabe als Text im Vergleich zu JSON oder JavaScript. In dieser Demo haben wir uns für ein textbasiertes Ausgabeformat entschieden. Das Modell generiert Text, den wir dann in ein JavaScript-Objekt parsen, um ihn in unserer Webanwendung weiterzuverarbeiten.

Verbesserung des Prompts

Mein Prompt und die Antwort in der Gemini Chat-Oberfläche.
Abbildung 4: Wir haben Gemini Chat gebeten, unseren Prompt zu verbessern. Die Antwort enthält eine Erklärung der vorgenommenen Verbesserungen und einen Hinweis zur Effektivität.

Wir haben einen LLM verwendet, um unseren Prompt zu iterieren.

  • Prompting mit wenigen Schritten Um die Beispiele für unsere kurzen Prompts zu generieren, Gemini Chat genutzt. Für Gemini Chat werden die leistungsstärksten Gemini-Modelle verwendet. So konnten wir qualitativ hochwertige Beispiele erstellen.
  • Prompt-Optimierung. Sobald die Struktur des Prompts fertig war, haben wir ihn auch mit Gemini Chat optimiert. Dadurch wurde die Ausgabequalität verbessert.

Kontext verwenden, um die Qualität zu verbessern

Durch die Aufnahme des Produkttyps in den Prompt konnte das Modell relevantere und hochwertigere Vorschläge liefern. In dieser Demo ist der Produkttyp statisch. In einer echten Anwendung könnten Sie das Produkt dynamisch in Ihre je nach Seite, die der Nutzer gerade besucht.

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."

Ein Beispiel aus dem Few-Shot-Abschnitt unseres Prompts: Der Produkttyp („Socken“) ist in der vorgeschlagenen Korrektur und in der Beispielrezension enthalten.

LLM-Fehler und -Behebungen

Gemma 2B benötigt Prompt Engineering größeren serverseitigen Modellen.

Bei Gemma 2B sind einige Herausforderungen aufgetreten. So haben wir die Ergebnisse verbessert:

  • Zu nett. Gemma 2B hatte Schwierigkeiten, Rezensionen als „nicht hilfreich“ zu kennzeichnen, da sie anscheinend zögerte, eine Bewertung abzugeben. Wir haben versucht, die Sprache der Labels neutraler zu gestalten („spezifisch“ und „unspezifisch“ anstelle von „hilfreich“ und „nicht hilfreich“) und Beispiele hinzuzufügen. Die Ergebnisse haben sich dadurch jedoch nicht verbessert. Was die Ergebnisse verbesserte, war die Beharrlichkeit und Wiederholung im Prompt. Eine Kette of Thought zu Verbesserungen führen würde.
  • Anleitung unklar. Das Modell hat den Prompt manchmal überinterpretiert. Anstatt die Rezension zu bewerten, wurde die Beispielliste fortgesetzt. Um dieses Problem zu beheben, haben wir einen klaren Übergang in die Aufforderung eingefügt:

    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>
    

    Eine klare Strukturierung des Prompts hilft dem Modell, zwischen den Beispielliste (wenige Aufnahmen) und der tatsächlichen Eingabe.

  • Falsches Ziel. Gelegentlich schlug das Modell Änderungen am Produkt vor. statt auf den Text der Rezension. Bei einer Rezension mit dem Satz „Ich hasse diese Socken“ könnte das Modell beispielsweise vorschlagen: „Ersetzen Sie die Socken durch eine andere Marke oder einen anderen Stil.“ Das ist nicht der gewünschte Effekt. Das Aufteilen des Prompts hat geholfen die Aufgabe zu klären und den Fokus des Modells auf die Überprüfung zu verbessern.