Menjelajahi saran ulasan produk dengan AI sisi klien

Maud Nalpas

Dipublikasikan: 21 Oktober 2024

Toko online dapat memperoleh peningkatan konversi sebesar 270% dengan menampilkan ulasan produk. Ulasan negatif juga penting, karena membangun kredibilitas. 82% pembeli online mencarinya sebelum membeli.

Mendorong pelanggan untuk memberikan ulasan produk yang bermanfaat, terutama jika negatif, bisa jadi sulit. Di sini, kita akan mempelajari cara menggunakan AI generatif untuk membantu pengguna menulis ulasan informatif yang membantu keputusan pembelian Anda.

Demo dan kode

Cobalah demo ulasan produk serta menyelidiki kode di GitHub.

Cara kami membuatnya

AI sisi klien

Untuk demo ini, kami menerapkan fitur sisi klien karena alasan berikut:

• Latensi. Kami ingin memberikan saran dengan cepat, segera setelah pengguna berhenti mengetik. Kita dapat menawarkannya dengan menghindari perjalanan bolak-balik server.
• Biaya. Meskipun ini adalah demo, jika Anda mempertimbangkan untuk meluncurkan versi yang serupa utama dalam produksi, sebaiknya lakukan eksperimen dengan biaya sisi server nol hingga Anda dapat memvalidasi apakah fitur tersebut masuk akal bagi pengguna Anda.

AI generatif MediaPipe

Kami telah memilih untuk menggunakan model Gemma 2B melalui MediaPipe LLM Inference API (paket MediaPipe GenAI), karena alasan berikut:

• Akurasi model: Gemma 2B menawarkan keseimbangan ukuran dan akurasi yang baik. Jika diprompt dengan benar, metode ini akan memberikan hasil yang kami anggap memuaskan untuk demo ini.
• Dukungan lintas browser: MediaPipe didukung di semua browser yang mendukung WebGPU.

Pengalaman pengguna

Menerapkan praktik terbaik performa

Meskipun Gemma 2B adalah LLM kecil, ini masih merupakan download yang besar. Menerapkan praktik terbaik performa, yang termasuk menggunakan pekerja web.

Membuat fitur menjadi opsional

Kami ingin saran ulasan berbasis AI meningkatkan alur kerja pengguna untuk memposting ulasan produk. Dalam penerapan kami, pengguna dapat memposting ulasan meskipun model belum dimuat, sehingga tidak menawarkan tips peningkatan.

Status UI dan animasi

Inferensi biasanya memerlukan lebih banyak waktu daripada yang terasa langsung, jadi kami memberi sinyal kepada pengguna bahwa model sedang menjalankan inferensi, atau "berpikir". Kami menggunakan animasi untuk memudahkan waktu tunggu, sekaligus meyakinkan pengguna bahwa aplikasi berfungsi sebagaimana mestinya. Temukan berbagai status UI yang telah kami terapkan dalam demo, seperti yang didesain oleh Adam Argyle.

Pertimbangan lainnya

Dalam lingkungan produksi, Anda dapat:

• Menyediakan mekanisme masukan. Bagaimana jika sarannya biasa-biasa saja, atau tidak masuk akal? Menerapkan mekanisme masukan cepat (seperti memberi jempol ke atas dan tidak suka) dan mengandalkan heuristik untuk menentukan apa yang ditemukan pengguna berguna Misalnya, nilai berapa banyak pengguna Anda yang berinteraksi dengan fitur baru, dan apakah mereka menonaktifkannya.
• Izinkan penonaktifan. Bagaimana jika pengguna lebih suka menggunakan kata-katanya sendiri tanpa bantuan AI, atau merasa fitur tersebut mengganggu? Izinkan pengguna memilih tidak ikut serta dan memilih ikut serta kembali sesuai keinginan.
• Jelaskan alasan fitur ini ada. Penjelasan singkat dapat mendorong pengguna untuk menggunakan alat umpan balik. Misalnya, "Masukan yang lebih baik akan membantu sesama pembeli memutuskan apa yang akan dibeli, dan membantu kami membuat produk yang Anda inginkan". Anda dapat menambahkan penjelasan panjang tentang cara kerja fitur dan alasan Anda menyediakan fitur tersebut, mungkin sebagai link pelajari lebih lanjut.
• Ungkapkan penggunaan AI jika relevan. Dengan AI sisi klien, konten pengguna tidak dikirim ke server untuk diproses, sehingga dapat dijaga kerahasiaannya. Namun, jika Anda membuat penggantian sisi server atau mengumpulkan informasi dengan AI, pertimbangkan untuk menambahkannya ke kebijakan privasi, persyaratan layanan, atau tempat lainnya.

Penerapan

Penerapan kami untuk pemberi saran ulasan produk dapat digunakan untuk berbagai cakupan kasus penggunaan. Pertimbangkan informasi berikut sebagai dasar untuk masa depan Anda fitur AI sisi klien.

MediaPipe di pekerja web

Dengan inferensi LLM MediaPipe, kode AI hanya terdiri dari beberapa baris: buat resolver file dan objek inferensi LLM dengan meneruskan URL model, lalu gunakan instance inferensi LLM tersebut untuk menghasilkan respons.

Namun, contoh kode kami sedikit lebih luas. Itu karena ini adalah diimplementasikan dalam pekerja web, sehingga model ini meneruskan pesan dengan skrip utama melalui kode pesan kustom. Pelajari lebih lanjut pola ini.

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

Input dan output

Perintah lengkap kami dibuat dengan perintah singkat. Bagian ini mencakup input pengguna, atau dengan kata lain draf ulasan yang telah ditulis pengguna.

Untuk menghasilkan prompt berdasarkan input pengguna, kita memanggil utilitas kita saat runtime fungsi generatePrompt.

Model dan library AI sisi klien biasanya memiliki lebih sedikit utilitas dibandingkan AI sisi server. Misalnya, Mode JSON seringkali tidak tersedia. Artinya, kita perlu memberikan struktur output yang diinginkan di dalam perintah. Hal ini kurang rapi, dapat dikelola, dan andal dibandingkan dengan menyediakan skema melalui konfigurasi model. Selain itu, model sisi klien cenderung lebih kecil, yang berarti lebih rentan terhadap error struktural dalam output-nya.

Dalam praktiknya, kami mengamati bahwa Gemma 2B bekerja lebih baik dalam menyediakan output terstruktur sebagai teks dibandingkan dengan JSON atau JavaScript. Jadi untuk demo ini, kami memilih untuk menggunakan format {i>output<i} berbasis teks. Model menghasilkan teks, yang kemudian kita urai output-nya menjadi objek JavaScript untuk pemrosesan lebih lanjut dalam aplikasi web.

Meningkatkan perintah kami

Kita menggunakan LLM untuk melakukan iterasi pada perintah kita.

• Few-shot prompting. Untuk membuat contoh untuk prompt few-shot kita, mengandalkan Gemini Chat. Gemini Chat menggunakan model Gemini yang canggih. Hal ini memastikan bahwa kami menghasilkan contoh berkualitas tinggi.
• Pengoptimalan. Setelah struktur perintah siap, kami juga menggunakan Gemini Chat untuk meningkatkan kualitas perintah. Hal ini meningkatkan kualitas output.

Menggunakan konteks untuk meningkatkan kualitas

Menyertakan tipe produk ke dalam {i>prompt<i} kita membantu model memberikan yang relevan dan berkualitas lebih tinggi. Dalam demo ini, jenis produknya statis. Dalam aplikasi yang sebenarnya, Anda dapat menyertakan produk secara dinamis ke dalam perintah, berdasarkan halaman yang dikunjungi pengguna.

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

Salah satu contoh di bagian beberapa gambar dari perintah kami: jenis produk ("kaus kaki") disertakan dalam perbaikan yang disarankan, dan dalam contoh ulasan.

Masalah dan perbaikan LLM

Gemma 2B biasanya memerlukan lebih banyak rekayasa perintah daripada model sisi server yang lebih besar dan lebih canggih.

Kami menghadapi beberapa tantangan dengan Gemma 2B. Berikut adalah cara kami meningkatkan hasil:

• Terlalu bagus. Gemma 2B kesulitan menandai ulasan sebagai "tidak membantu", tampaknya ragu untuk menilai. Kami mencoba membuat bahasa label lebih netral ("spesifik" dan "tidak spesifik", bukan "membantu" dan "tidak membantu") dan menambahkan contoh, namun ini tidak meningkatkan hasil. Apa yang dapat meningkatkan hasil adalah penekanan dan pengulangan dalam prompt. Pendekatan chain of thought juga akan menghasilkan peningkatan.

• Petunjuk tidak jelas. Model terkadang menafsirkan perintah secara berlebihan. Alih-alih menilai ulasan, ia melanjutkan daftar contoh. Untuk memperbaikinya, kami menyertakan transisi yang jelas dalam perintah berikut:

  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>
  

  Menstrukturkan prompt dengan jelas akan membantu model membedakan antara daftar contoh (beberapa foto) dan input sebenarnya.

• Target salah. Terkadang, model menyarankan perubahan pada produk, bukan teks ulasan. Misalnya, untuk ulasan yang menyatakan "Saya tidak suka kaus kaki ini", model dapat menyarankan "Pertimbangkan untuk mengganti kaus kaki dengan merek atau gaya yang berbeda", yang bukan efek yang diinginkan. Memisahkan perintah membantu memperjelas tugas, dan meningkatkan fokus model pada peninjauan.