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 orang lain.

Demo dan kode

Coba demo ulasan produk kami dan pelajari kode di GitHub.

Cara kami membuatnya

AI sisi klien

Istilah Penting: Meskipun sebagian besar fitur AI di web mengandalkan server, AI sisi klien berjalan langsung di browser pengguna. Hal ini menawarkan manfaat seperti latensi rendah, pengurangan biaya sisi server, tidak ada persyaratan kunci API, peningkatan privasi pengguna, dan akses offline. Anda dapat menerapkan AI sisi klien yang berfungsi di seluruh browser dengan library JavaScript seperti TensorFlow.js, Transformers.js, dan MediaPipe GenAI.

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 fitur serupa dalam produksi, sebaiknya lakukan eksperimen tanpa biaya sisi server hingga Anda dapat memvalidasi apakah fitur tersebut sesuai untuk pengguna.

Perhatian: Penggunaan AI sisi klien untuk memvalidasi ide fitur sebelum bermigrasi ke implementasi AI sisi server memiliki beberapa persyaratan. Saat bermigrasi, Anda akan mengalihkan model dari LLM yang cukup kecil untuk didownload dan digunakan di sisi klien, ke LLM sisi server yang jauh lebih besar. Anda mungkin perlu mendesain ulang perintah, karena model yang berbeda dapat merespons perintah yang sama secara berbeda. Rekayasa perintah Anda mungkin menjadi kurang presisi jika menggunakan model yang lebih canggih. Baca selengkapnya di Prompt Engineering praktis untuk LLM yang lebih kecil.

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 diminta dengan benar, demo ini akan memberikan hasil yang menurut kami memuaskan.
• 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. Terapkan praktik terbaik performa, yang mencakup penggunaan 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.

Gambar 1. Pengguna masih dapat memposting ulasan, meskipun fitur AI belum siap.

Status UI dan animasi

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

Gambar 2. Animasi menunjukkan bahwa model sedang dimuat, lalu "berpikir", dan akhirnya selesai.

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 jempol ke atas dan tidak suka) dan mengandalkan heuristik untuk menentukan hal-hal yang menurut pengguna bermanfaat. Misalnya, nilai jumlah pengguna yang berinteraksi dengan fitur, 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 Anda untuk menggunakan alat masukan. 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.
• Mengungkapkan penggunaan AI jika relevan. Dengan AI sisi klien, konten pengguna tidak dikirim ke server untuk diproses dan tetap bersifat pribadi. Namun, jika Anda membuat penggantian sisi server atau mengumpulkan informasi dengan AI, pertimbangkan untuk menambahkannya ke kebijakan privasi, persyaratan layanan, atau tempat lainnya.

Penerapan

Implementasi kami untuk penasihat ulasan produk dapat digunakan untuk berbagai kasus penggunaan. Pertimbangkan informasi berikut sebagai dasar untuk fitur AI sisi klien Anda di masa mendatang.

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. Hal ini karena kode tersebut diimplementasikan di web worker, sehingga meneruskan pesan dengan skrip utama melalui kode pesan kustom. Pelajari pola ini lebih lanjut.

Catatan: Inferensi MediaPipe bergantung pada GPU, sehingga tidak memengaruhi thread utama. Namun, langkah-langkah persiapan model dapat memperlambat thread utama, jadi sebaiknya pindahkan ke pekerja web. Untuk memudahkan, kami memindahkan semua kode AI ke dalam pekerja web.

Perhatian: Di Firefox, WebGPU hanya tersedia di pekerja web di balik preferensi dom.webgpu.workers.enabled.

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

Input dan output

Gambar 3. Diagram yang menunjukkan pemrosesan perintah melalui inferensi ke output LLM mentah, yang kemudian diuraikan ke rekomendasi baca-untuk-tampilkan.

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

Untuk membuat perintah berdasarkan input pengguna, kita memanggil fungsi utilitas generatePrompt saat runtime.

Model dan library AI sisi klien biasanya memiliki lebih sedikit utilitas daripada AI sisi server. Misalnya, mode JSON sering kali tidak tersedia. Artinya, kita harus menyediakan struktur output yang diinginkan di dalam prompt. 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 lebih baik dalam memberikan output terstruktur sebagai teks dibandingkan dengan JSON atau JavaScript. Jadi, untuk demo ini, kami memilih format output berbasis teks. Model menghasilkan teks, yang kemudian kita urai outputnya menjadi objek JavaScript untuk pemrosesan lebih lanjut dalam aplikasi web.

Meningkatkan kualitas perintah kami

Gambar 4. Kami meminta Gemini Chat untuk meningkatkan perintah kami, dan Gemini Chat menjawabnya bersama dengan penjelasan tentang peningkatan yang dilakukan dan peringatan tentang efektivitas.

Kita menggunakan LLM untuk melakukan iterasi pada perintah.

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

Menggunakan konteks untuk meningkatkan kualitas

Menyertakan jenis produk ke dalam perintah kami membantu model memberikan saran yang lebih relevan dan berkualitas lebih tinggi. Dalam demo ini, jenis produk bersifat 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 rekayasa perintah yang lebih canggih daripada model sisi server yang lebih besar dan canggih.

Kami mengalami beberapa tantangan dengan Gemma 2B. Berikut cara kami meningkatkan hasilnya:

• 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 "berguna" dan "tidak berguna") dan menambahkan contoh, tetapi hal ini tidak meningkatkan hasil. Yang meningkatkan hasil adalah desakan dan pengulangan dalam perintah. Pendekatan chain of thought juga akan menghasilkan peningkatan.

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

  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>
  

  Menyusun perintah dengan jelas akan membantu model membedakan antara daftar contoh (beberapa gambar) 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.

Sukses: Sudahkah Anda menerapkan AI sisi klien untuk fitur produk Anda? Apakah Anda mencari cara lain untuk menunjukkan pengaruh AI generatif terhadap situs dan aplikasi web Anda? Tweet ke kami @ChromiumDev, ajukan permintaan konten, atau siapkan jam buka khusus dengan Tim AI Web.dev.