Изучите предложения по обзору продуктов с помощью искусственного интеллекта на стороне клиента.

Мод Налпас
Maud Nalpas
X GitHub

Опубликовано: 21 октября 2024 г.

Интернет-магазины могут увеличить конверсию на 270% , отображая обзоры продуктов. Отрицательные отзывы также имеют ключевое значение, поскольку они повышают доверие. 82% онлайн-покупателей ищут их перед покупкой.

Поощрение клиентов оставлять полезные отзывы о продуктах, особенно отрицательные, может оказаться непростой задачей. Здесь мы рассмотрим, как использовать генеративный искусственный интеллект, чтобы помочь пользователям писать информативные обзоры, которые помогут другим принимать решения о покупке.

Демо и код

Поиграйтесь с демо-версией нашего обзора продукта и изучите код на GitHub .

Как мы это построили

Клиентский ИИ

В этой демонстрации мы реализовали эту функцию на стороне клиента по следующим причинам:

  • Задержка . Мы хотим предоставлять предложения быстро, как только пользователь перестанет печатать. Мы можем предложить это, избегая обращений к серверу.
  • Расходы. Хотя это демонстрационная версия, если вы планируете запустить аналогичную функцию в производство, было бы здорово поэкспериментировать с нулевыми затратами на стороне сервера, пока вы не сможете проверить, имеет ли эта функция смысл для ваших пользователей.

Генеративный искусственный интеллект MediaPipe

Мы решили использовать модель Gemma 2B через API вывода MediaPipe LLM ( пакет MediaPipe GenAI ) по следующим причинам:

  • Точность модели : Gemma 2B предлагает отличный баланс размера и точности. При правильном запросе он дал результаты, которые нас устроили для этой демонстрации.
  • Кроссбраузерная поддержка : MediaPipe поддерживается во всех браузерах, поддерживающих WebGPU .

Пользовательский опыт

Применяйте лучшие практики повышения производительности

Хотя Gemma 2B — это небольшой LLM, его все равно очень сложно загрузить. Применяйте передовые методы повышения производительности , включая использование веб-воркера.

Сделайте эту функцию необязательной

Мы хотим, чтобы предложения по отзывам на основе искусственного интеллекта улучшали рабочий процесс пользователя при публикации обзора продукта. В нашей реализации пользователь может опубликовать отзыв, даже если модель не загрузилась и, следовательно, не предлагает советов по улучшению.

Рисунок 1. Пользователи по-прежнему могут публиковать свои отзывы, даже если функция искусственного интеллекта еще не готова.

Состояния пользовательского интерфейса и анимация

Вывод обычно занимает больше времени, чем кажется немедленным , поэтому мы сигнализируем пользователю, что модель выполняет вывод или «думает». Мы используем анимацию, чтобы облегчить ожидание и при этом убедить пользователя, что приложение работает должным образом. Откройте для себя различные состояния пользовательского интерфейса, которые мы реализовали в нашей демонстрации, разработанной Адамом Аргайлом .

Рис. 2. Анимации демонстрируют, что модель загружается, затем «думает» и, наконец, готова.

Другие соображения

В производственной среде вам может потребоваться:

  • Обеспечьте механизм обратной связи. Что, если предложения посредственные или не имеют смысла? Внедрите механизм быстрой обратной связи (например, «палец вверх» и «палец вниз») и полагайтесь на эвристику, чтобы определить, что пользователи считают полезным. Например, оцените, сколько ваших пользователей взаимодействуют с этой функцией и отключают ли они ее.
  • Разрешить отказ. Что, если пользователь предпочитает использовать свои собственные слова без помощи ИИ или находит эту функцию раздражающей? Разрешить пользователю отказаться от участия и снова войти по своему желанию.
  • Объясните, почему существует эта функция. Краткое объяснение может побудить ваших пользователей использовать инструмент обратной связи. Например, «Лучшая обратная связь помогает другим покупателям решить, что купить, и помогает нам создавать продукты, которые вам нужны». Вы можете добавить подробное объяснение того, как работает эта функция и почему вы ее предоставили, возможно, в виде ссылки на дополнительную информацию.
  • Раскройте информацию об использовании ИИ, где это уместно. При использовании искусственного интеллекта на стороне клиента контент пользователя не отправляется на сервер для обработки, поэтому его можно сохранить конфиденциальным. Однако, если вы создаете резервную версию на стороне сервера или иным образом собираете информацию с помощью ИИ, рассмотрите возможность добавления ее в свою политику конфиденциальности, условия обслуживания или другие места.

Выполнение

Наша реализация предложения обзора продукта может работать в широком диапазоне случаев использования. Используйте следующую информацию как основу для будущих функций искусственного интеллекта на стороне клиента.

MediaPipe в веб-работнике

При использовании вывода LLM MediaPipe код AI состоит всего из нескольких строк: создайте преобразователь файлов и объект вывода LLM, передав ему URL-адрес модели, а затем используйте этот экземпляр вывода LLM для генерации ответа.

Однако наш пример кода немного более обширен. Это потому, что он реализован в веб-воркере и передает сообщения с основным скриптом через специальные коды сообщений. Узнайте больше об этом шаблоне .

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

Ввод и вывод

Рисунок 3. Диаграмма, демонстрирующая обработку приглашения посредством вывода необработанных выходных данных LLM, которые затем анализируются для получения рекомендации для чтения на дисплей.

Наша полная подсказка была построена на основе подсказок, состоящих из нескольких кадров . Он включает в себя вклад пользователя или, другими словами, черновик обзора, написанный пользователем.

Чтобы сгенерировать приглашение на основе пользовательского ввода, мы вызываем во время выполнения нашу служебную generatePrompt .

Клиентские модели и библиотеки ИИ обычно содержат меньше утилит, чем ИИ на стороне сервера. Например, режим JSON часто недоступен. Это означает, что нам нужно предоставить желаемую структуру вывода внутри нашего приглашения. Это менее чисто, удобно и надежно, чем предоставление схемы посредством конфигурации модели. Кроме того, модели на стороне клиента, как правило, меньше по размеру, а это означает, что они более склонны к структурным ошибкам в своих выходных данных.

На практике мы заметили, что Gemma 2B лучше обеспечивает структурированный вывод в виде текста по сравнению с JSON или JavaScript. Поэтому для этой демонстрации мы выбрали текстовый формат вывода. Модель генерирует текст, который затем анализируется в объект JavaScript для дальнейшей обработки в нашем веб-приложении.

Улучшение нашей подсказки

Моя подсказка и ответ в интерфейсе Gemini Chat.
Рисунок 4. Мы попросили Gemini Chat улучшить наше приглашение, и он ответил вместе с объяснением того, какие улучшения были внесены, и предостережением по поводу эффективности.

Мы использовали LLM для повторения нашей подсказки.

  • Подсказка из нескольких кадров. Для создания примеров для наших коротких подсказок мы использовали Gemini Chat . Gemini Chat использует самые мощные модели Gemini. Это гарантировало, что мы создадим высококачественные примеры.
  • Оперативная полировка. Когда структура приглашения была готова, мы также использовали 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 мы столкнулись с некоторыми проблемами. Вот как мы улучшили результаты:

  • Слишком приятно. Джемма 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>

    Четкая структуризация подсказки помогает модели отличать список примеров (несколько кадров) от фактических входных данных.

  • Неправильная цель. Иногда модель предлагала изменения в товаре вместо текста отзыва. Например, в отзыве, в котором говорится: «Я ненавижу эти носки», модель может предложить: «Рассмотрите возможность замены носков на носки другой марки или стиля», что не является желаемым эффектом. Разделение подсказки помогло прояснить задачу и улучшить концентрацию внимания модели на обзоре.