İstemci tarafı yapay zeka ile ürün yorum önerilerini inceleyin

Maud Nalpas

Yayınlanma tarihi: 21 Ekim 2024

Online mağazalar, ürün yorumlarını göstererek dönüşümlerde %270 artış elde edebilir. Güvenilirlik açısından olumsuz yorumlar da önemlidir. İnternetten alışveriş yapan kullanıcıların %82'si, ürün satın almadan önce ürün arıyor.

Müşterileri, özellikle olumsuz yorumlar söz konusu olduğunda faydalı ürün yorumları bırakmaya teşvik etmek zor olabilir. Bu makalede, kullanıcıların diğer kullanıcıların satın alma kararlarına yardımcı olacak bilgilendirici yorumlar yazmasına yardımcı olmak için üretken yapay zekanın nasıl kullanılacağını inceleyeceğiz.

Demo ve kod

Ürün incelemesi demomuzu inceleyin ve GitHub'daki kodu inceleyin.

Bu raporu nasıl oluşturduk?

İstemci tarafı yapay zeka

Bu demoda, özelliği aşağıdaki nedenlerle istemci tarafında uyguladık:

• Gecikme. Kullanıcı yazmayı bırakır bırakmaz önerileri hızlı bir şekilde sunmak istiyoruz. Sunucu gidiş gelişlerini önleyerek bunu sunabiliriz.
• Maliyet. Bu bir demo olsa da benzer bir özelliği üretimde kullanıma sunmayı düşünüyorsanız özelliğin kullanıcılarınız için anlamlı olup olmadığını doğrulayana kadar sunucu tarafı maliyeti olmadan deneme yapmak iyi bir fikirdir.

MediaPipe üretken yapay zeka

Aşağıdaki nedenlerden dolayı MediaPipe LLM Tahmin API (MediaPipe GenAI paketi) üzerinden Gemma 2B modelini kullanmayı tercih ettik:

• Model doğruluğu: Gemma 2B, boyut ve doğruluk arasında mükemmel bir denge sunar. Doğru şekilde istendiğinde, bu demo için tatmin edici bulduğumuz sonuçlar verdi.
• Tarayıcılar arası destek: MediaPipe, WebGPU'yu destekleyen tüm tarayıcılarda desteklenir.

Kullanıcı deneyimi

Performansla ilgili en iyi uygulamalardan yararlanma

Gemma 2B küçük bir LLM olsa da indirme boyutu büyüktür. Web işleyici kullanmayı da içeren performansla ilgili en iyi uygulamaları uygulayın.

Özelliği isteğe bağlı hale getirme

Yapay zeka tabanlı yorum önerilerinin, kullanıcının ürün yorumu yayınlama iş akışını iyileştirmesini istiyoruz. Uygulamamızda, model yüklenmemiş olsa bile kullanıcı yorum yayınlayabilir ve bu nedenle iyileştirme ipuçları sunulmaz.

Kullanıcı arayüzü durumları ve animasyonları

Çıkarım, genellikle anlık olarak hissettirilen bir işlemden daha fazla zaman alır. Bu nedenle, kullanıcıya modelin çıkarım veya "düşünme" çalıştırdığını belirtiriz. Bekleme süresini kısaltmak ve kullanıcıya uygulamanın amaçlandığı gibi çalıştığından emin olmak için animasyonlar kullanırız. Adam Argyle'ın tasarladığı demoda uyguladığımız farklı kullanıcı arayüzü durumlarını keşfedin.

Dikkat edilmesi gereken diğer noktalar

Bir üretim ortamında şunları yapmak isteyebilirsiniz:

• Geri bildirim mekanizması sağlayın. Önerilerin kalitesi düşükse veya anlamlı değilse ne olur? Hızlı bir geri bildirim mekanizması (beğenme ve beğenmeme gibi) uygulayın ve kullanıcıların neleri faydalı bulduğunu belirlemek için buluşsal yöntemlere başvurun. Örneğin, kaç kullanıcınızın bu özellikle etkileşimde bulunduğunu ve özelliği devre dışı bırakıp bırakmadığını değerlendirin.
• Kapsam dışında kalmayı etkinleştirin. Kullanıcı yapay zeka yardımı olmadan kendi kelimelerini kullanmayı tercih ederse veya özelliği rahatsız edici bulursa ne olur? Kullanıcının dilediğinde devre dışı bırakıp etkinleştirmesine izin verin.
• Bu özelliğin neden bulunduğunu açıklayın. Kısa bir açıklama, kullanıcılarınızı geri bildirim aracını kullanmaya teşvik edebilir. Örneğin, "Daha iyi geri bildirimler, diğer alışveriş yapan kullanıcıların ne satın alacağına karar vermesine ve istediğiniz ürünleri üretmemize yardımcı olur." Özelliğin nasıl çalıştığına ve neden sağladığınıza dair uzun bir açıklama ekleyebilirsiniz. Hatta bağlantılı bir açıklama ekleyerek daha fazla bilgi edinebilirsiniz.
• Uygun durumlarda yapay zeka kullanımı hakkında bilgi verin. İstemci tarafı yapay zeka sayesinde kullanıcının içeriği işlenmek üzere bir sunucuya gönderilmez ve bu nedenle gizli tutulabilir. Ancak sunucu tarafında yedek oluşturuyorsanız veya AI ile başka bir şekilde bilgi toplarsanız bu bilgileri gizlilik politikanıza, hizmet şartlarınıza veya başka yerlere ekleyebilirsiniz.

Uygulama

Ürün yorumu öneren aracımız, çok çeşitli kullanım alanları için işe yarayabilir. Gelecekte sunacağınız istemci tarafı yapay zeka özellikleri için aşağıdaki bilgileri temel alabilirsiniz.

Web işçisinde MediaPipe

MediaPipe LLM çıkarımıyla yapay zeka kodu yalnızca birkaç satırdan oluşur: Bir dosya çözümleyici ve LLM çıkarım nesnesi oluşturun, ardından bir model URL'si ileterek bu LLM çıkarım örneğini kullanarak yanıt oluşturun.

Ancak kod örneğimiz biraz daha kapsamlı. Bunun nedeni, bir web işçisinde uygulanmış olmasıdır. Bu nedenle, ana komut dosyasıyla iletileri özel mesaj kodları üzerinden iletir. Bu kalıp hakkında daha fazla bilgi edinin.

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

Giriş ve çıkış

Tam istemimiz birkaç çekim isteği ile oluşturulmuştur. Kullanıcının girişini veya başka bir deyişle, yazdığı yorum taslağını içerir.

İstemimizi kullanıcı girişine göre oluşturmak için çalışma zamanında generatePrompt yardımcı program işlevimizi çağırıyoruz.

İstemci tarafı yapay zeka modelleri ve kitaplıkları genellikle sunucu tarafı yapay zekaya kıyasla daha az yardımcı programa sahiptir. Örneğin, JSON modu genellikle kullanılamaz. Bu nedenle, istemimize istenen çıkış yapısını sağlamamız gerekir. Bu yöntem, model yapılandırması aracılığıyla şema sağlamaya kıyasla daha az temiz, sürdürülebilir ve güvenilirdir. Ayrıca istemci tarafı modeller daha küçük olma eğilimindedir. Bu da çıktılarında yapısal hatalara daha yatkın oldukları anlamına gelir.

Uygulamada, Gemma 2B'nin JSON veya JavaScript'e kıyasla metin olarak yapılandırılmış bir çıkış sağlama konusunda daha iyi performans gösterdiğini gözlemledik. Bu nedenle, bu demo için metne dayalı bir çıkış biçimi tercih ettik. Model, metin oluşturur. Ardından, web uygulamamızda daha fazla işleme tabi tutulması için çıkışı bir JavaScript nesnesine ayrıştırırız.

İstemimizi iyileştirme

İstemimizi iterasyonla işlemek için bir LLM kullandık.

• Çok görevli istem. Birkaç çekimlik istemlerimize örnek oluşturmak için Gemini Sohbet'i kullandık. Gemini Chat, en güçlü Gemini modellerini kullanır. Bu sayede yüksek kaliteli örnekler oluşturduk.
• İstemleri düzeltme. İstem hazır olduğunda, istemi hassaslaştırmak için Gemini Chat'i de kullandık. Bu sayede çıkış kalitesi iyileştirildi.

Kaliteyi artırmak için bağlamı kullanma

Ürün türünü istemimize dahil etmek, modelin daha alakalı ve daha yüksek kaliteli öneriler sunmasına yardımcı oldu. Bu demoda ürün türü statiktir. Gerçek bir uygulamada, ürünü kullanıcının ziyaret ettiği sayfaya göre isteminize dinamik olarak dahil edebilirsiniz.

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

İstemimizin birkaç çekim bölümündeki örneklerden biri: Önerilen düzeltme ve örnek yoruma ürün türü ("çoraplar") dahil edilmiştir.

LLM ile ilgili hatalar ve düzeltmeler

Gemma 2B, genellikle daha güçlü ve daha büyük sunucu tarafı modellerden daha fazla mühendislik çalışması gerektirir.

Gemma 2B ile ilgili bazı zorluklarla karşılaştık. Sonuçları şu şekilde iyileştirdik:

• Çok iyi. Gemma 2B, yorumları "yararlı değil" olarak işaretlemekte zorlandı ve yorumları değerlendirmekte tereddüt etti. Etiket dilini daha nötr ("faydalı" ve "faydalı değil" yerine "belirli" ve "spesifik değil") yapmaya çalıştık ve örnekler ekledik, ancak bu, sonuçları iyileştirmedi. Sonuçları iyileştiren şey, ısrarcı ve istemin tekrarıydı. Düşünce zinciri yaklaşımı da muhtemelen iyileştirmeler sağlayacaktır.

• Talimatlar net değil. Model bazen istemi fazla yorumladı. İnceleme yerine örnek listeye devam etti. Bu sorunu düzeltmek için istemde net bir geçiş ekledik:

  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>
  

  İstem net bir şekilde yapılandırıldığında model, örnek liste (az sayıda çekim) ile gerçek giriş arasında ayrım yapabilir.

• Yanlış hedef. Model bazen yorum metni yerine üründe değişiklik yapılmasını öneriyordu. Örneğin, "Bu çoraplardan nefret ediyorum" ifadesini içeren bir yorum için model, "Çorapları farklı bir marka veya modelle değiştirmeyi düşünebilirsiniz" önerisinde bulunabilir. Bu, istenen sonuç değildir. İstem bölünerek görevin netleştirilmesi sağlandı ve modelin incelemeye odaklanmasını iyileştirildi.