ক্লায়েন্ট-সাইড এআই সহ পণ্য পর্যালোচনার পরামর্শগুলি অন্বেষণ করুন

Maud Nalpas

প্রকাশিত: অক্টোবর 21, 2024

অনলাইন স্টোরগুলি পণ্য পর্যালোচনা প্রদর্শন করে রূপান্তর 270% বৃদ্ধি দেখতে পারে৷ নেতিবাচক পর্যালোচনাগুলিও গুরুত্বপূর্ণ, কারণ তারা বিশ্বাসযোগ্যতা তৈরি করে। 82% অনলাইন ক্রেতা কেনার আগে তাদের সন্ধান করে।

গ্রাহকদের সহায়ক পণ্য পর্যালোচনা করতে উত্সাহিত করা, বিশেষ করে যখন নেতিবাচক, চতুর হতে পারে। এখানে, আমরা ব্যবহারকারীদের তথ্যমূলক পর্যালোচনা লিখতে সাহায্য করার জন্য কীভাবে জেনারেটিভ এআই ব্যবহার করতে হয় তা অন্বেষণ করব যা অন্যদের ক্রয়ের সিদ্ধান্তে সহায়তা করে।

ডেমো এবং কোড

আমাদের পণ্য পর্যালোচনা ডেমোর সাথে খেলুন এবং GitHub-এ কোডটি তদন্ত করুন।

কিভাবে আমরা এই নির্মাণ

ক্লায়েন্ট-সাইড এআই

এই ডেমোর জন্য, আমরা নিম্নলিখিত কারণগুলির জন্য বৈশিষ্ট্য ক্লায়েন্ট-সাইড প্রয়োগ করেছি:

• বিলম্ব ব্যবহারকারী টাইপ করা বন্ধ করার সাথে সাথে আমরা দ্রুত পরামর্শ দিতে চাই। আমরা সার্ভার রাউন্ড-ট্রিপ এড়িয়ে এটি অফার করতে পারি।
• খরচ যদিও এটি একটি ডেমো, আপনি যদি প্রোডাকশনে একটি অনুরূপ বৈশিষ্ট্য চালু করার কথা ভাবছেন, তবে শূন্য সার্ভার-সাইড খরচে পরীক্ষা করা দুর্দান্ত, যতক্ষণ না আপনি যাচাই করতে পারেন যে বৈশিষ্ট্যটি আপনার ব্যবহারকারীদের জন্য অর্থপূর্ণ কিনা।

মিডিয়াপাইপ জেনারেটিভ এআই

আমরা নিম্নলিখিত কারণগুলির জন্য MediaPipe LLM ইনফারেন্স API ( MediaPipe GenAI প্যাকেজ ) এর মাধ্যমে Gemma 2B মডেলটি ব্যবহার করতে বেছে নিয়েছি:

• মডেল নির্ভুলতা : Gemma 2B আকার এবং নির্ভুলতার একটি দুর্দান্ত ভারসাম্য অফার করে। সঠিকভাবে অনুরোধ করা হলে, এটি ফলাফল দেয় যে আমরা এই ডেমোর জন্য সন্তোষজনক বলে মনে করি।
• ক্রস-ব্রাউজার সমর্থন : WebGPU সমর্থন করে এমন সমস্ত ব্রাউজারে MediaPipe সমর্থিত।

ব্যবহারকারীর অভিজ্ঞতা

কর্মক্ষমতা সেরা অনুশীলন প্রয়োগ করুন

যদিও Gemma 2B একটি ছোট LLM, এটি এখনও একটি বড় ডাউনলোড। পারফরম্যান্সের সর্বোত্তম অনুশীলনগুলি প্রয়োগ করুন , যার মধ্যে একটি ওয়েব কর্মী ব্যবহার করা অন্তর্ভুক্ত।

বৈশিষ্ট্যটিকে ঐচ্ছিক করুন

আমরা একটি পণ্য পর্যালোচনা পোস্ট করার জন্য ব্যবহারকারীর কর্মপ্রবাহ উন্নত করতে AI-ভিত্তিক পর্যালোচনার পরামর্শ চাই। আমাদের বাস্তবায়নে, মডেলটি লোড না হলেও ব্যবহারকারী একটি পর্যালোচনা পোস্ট করতে পারেন, এবং এইভাবে উন্নতির টিপস অফার করছেন না।

UI অবস্থা এবং অ্যানিমেশন

অনুমান সাধারণত তাৎক্ষণিকভাবে যা অনুভব করবে তার চেয়ে বেশি সময় নেয়, তাই আমরা ব্যবহারকারীকে সংকেত দিই যে মডেলটি অনুমান চলছে, বা "চিন্তা করছে।" আমরা অপেক্ষা কমানোর জন্য অ্যানিমেশন ব্যবহার করি, ব্যবহারকারীকে আশ্বস্ত করে যে অ্যাপ্লিকেশনটি উদ্দেশ্য অনুযায়ী কাজ করছে। আমরা আমাদের ডেমোতে প্রয়োগ করেছি বিভিন্ন UI রাজ্যগুলি আবিষ্কার করুন, যেমনটি অ্যাডাম আর্গিল ডিজাইন করেছেন৷

অন্যান্য বিবেচনা

একটি উত্পাদন পরিবেশে, আপনি চাইতে পারেন:

• একটি প্রতিক্রিয়া প্রক্রিয়া প্রদান করুন. যদি পরামর্শগুলি মাঝারি হয়, বা অর্থহীন হয়? দ্রুত ফিডব্যাক মেকানিজম (যেমন থাম্বস-আপ এবং থাম্বস-ডাউন) প্রয়োগ করুন এবং ব্যবহারকারীরা কী কাজে লাগে তা নির্ধারণ করতে হিউরিস্টিকসের উপর নির্ভর করুন। উদাহরণস্বরূপ, আপনার কতজন ব্যবহারকারী বৈশিষ্ট্যটির সাথে ইন্টারঅ্যাক্ট করছে এবং তারা এটি বন্ধ করে কিনা তা মূল্যায়ন করুন।
• অপ্ট-আউট করার অনুমতি দিন। ব্যবহারকারী যদি AI সহায়তা ছাড়াই তাদের নিজস্ব শব্দ ব্যবহার করতে পছন্দ করেন বা বৈশিষ্ট্যটিকে বিরক্তিকর মনে করেন তাহলে কী হবে? ব্যবহারকারীকে অপ্ট আউট করার অনুমতি দিন এবং ইচ্ছামত অপ্ট ইন করুন৷
• কেন এই বৈশিষ্ট্য বিদ্যমান ব্যাখ্যা. একটি সংক্ষিপ্ত ব্যাখ্যা আপনার ব্যবহারকারীদের প্রতিক্রিয়া টুল ব্যবহার করতে উত্সাহিত করতে পারে। উদাহরণস্বরূপ, "ভাল প্রতিক্রিয়া সহ ক্রেতাদের কি কিনবেন তা সিদ্ধান্ত নিতে সাহায্য করে এবং আমাদের আপনার পছন্দের পণ্যগুলি তৈরি করতে সহায়তা করে।" আপনি বৈশিষ্ট্যটি কীভাবে কাজ করে এবং কেন আপনি এটি প্রদান করেছেন তার একটি দীর্ঘ ব্যাখ্যা যোগ করতে পারেন, সম্ভবত লিঙ্কড-আউট হিসাবে আরও জানুন।
• যেখানে প্রাসঙ্গিক সেখানে AI ব্যবহার প্রকাশ করুন। ক্লায়েন্ট-সাইড এআই-এর সাথে, ব্যবহারকারীর বিষয়বস্তু প্রক্রিয়াকরণের জন্য সার্ভারে পাঠানো হয় না, এইভাবে ব্যক্তিগত রাখা যেতে পারে। যাইহোক, যদি আপনি একটি সার্ভার-সাইড ফলব্যাক তৈরি করেন বা অন্যথায় AI এর সাথে তথ্য সংগ্রহ করেন, তাহলে এটি আপনার গোপনীয়তা নীতি, পরিষেবার শর্তাবলী বা অন্যান্য স্থানে যোগ করার কথা বিবেচনা করুন।

বাস্তবায়ন

পণ্য পর্যালোচনা পরামর্শদাতার জন্য আমাদের বাস্তবায়ন একটি বড় পরিসরের ব্যবহারের ক্ষেত্রে কাজ করতে পারে। আপনার ভবিষ্যত ক্লায়েন্ট-সাইড এআই বৈশিষ্ট্যগুলির জন্য একটি ভিত্তি হিসাবে নিম্নলিখিত তথ্যগুলি বিবেচনা করুন৷

একটি ওয়েব কর্মী মিডিয়াপাইপ

MediaPipe LLM অনুমানের সাথে, 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',
};

ইনপুট এবং আউটপুট

আমাদের সম্পূর্ণ প্রম্পটটি কয়েক শট প্রম্পটিং সহ নির্মিত হয়েছিল। এতে ব্যবহারকারীর ইনপুট বা অন্য কথায় ব্যবহারকারীর লেখা পর্যালোচনা খসড়া অন্তর্ভুক্ত থাকে।

ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে আমাদের প্রম্পট তৈরি করতে, আমরা রানটাইমে আমাদের ইউটিলিটি ফাংশন generatePrompt কল করি।

ক্লায়েন্ট-সাইড এআই মডেল এবং লাইব্রেরি সাধারণত সার্ভার-সাইড এআইয়ের তুলনায় কম ইউটিলিটি নিয়ে আসে। উদাহরণস্বরূপ, JSON মোড প্রায়ই উপলব্ধ নয়। এর মানে আমাদের প্রম্পটের ভিতরে কাঙ্খিত আউটপুট কাঠামো প্রদান করতে হবে। মডেল কনফিগারেশনের মাধ্যমে স্কিমা সরবরাহ করার চেয়ে এটি কম পরিষ্কার, রক্ষণাবেক্ষণযোগ্য এবং নির্ভরযোগ্য। উপরন্তু, ক্লায়েন্ট-সাইড মডেলগুলি ছোট হতে থাকে, যার মানে তারা তাদের আউটপুটে কাঠামোগত ত্রুটির জন্য বেশি প্রবণ।

অনুশীলনে, আমরা লক্ষ্য করেছি যে JSON বা JavaScript-এর তুলনায় Gemma 2B টেক্সট হিসাবে একটি কাঠামোগত আউটপুট প্রদানে একটি ভাল কাজ করে। তাই এই ডেমোর জন্য, আমরা একটি পাঠ্য-ভিত্তিক আউটপুট বিন্যাস বেছে নিয়েছি। মডেলটি টেক্সট তৈরি করে, যা আমরা আমাদের ওয়েব অ্যাপের মধ্যে আরও প্রক্রিয়াকরণের জন্য একটি জাভাস্ক্রিপ্ট অবজেক্টে আউটপুট পার্স করি।

আমাদের প্রম্পট উন্নতি

আমরা আমাদের প্রম্পটে পুনরাবৃত্তি করতে একটি LLM ব্যবহার করেছি।

• কয়েক শট প্রম্পটিং. আমাদের কয়েকটি-শট প্রম্পটের উদাহরণ তৈরি করতে, আমরা জেমিনি চ্যাটের উপর নির্ভর করেছি। জেমিনি চ্যাট সবচেয়ে শক্তিশালী মিথুন মডেল ব্যবহার করে। এটি নিশ্চিত করেছে যে আমরা উচ্চ-মানের উদাহরণ তৈরি করেছি।
• প্রম্পট পলিশিং। একবার প্রম্পটের কাঠামো প্রস্তুত হয়ে গেলে, আমরা প্রম্পটটিকে পরিমার্জিত করতে জেমিনি চ্যাটও ব্যবহার করেছি। এটি আউটপুট গুণমান উন্নত করেছে।

গুণমান বাড়াতে প্রসঙ্গ ব্যবহার করুন

আমাদের প্রম্পটে পণ্যের ধরন অন্তর্ভুক্ত করা মডেলটিকে আরও প্রাসঙ্গিক, উচ্চ-মানের পরামর্শ দিতে সাহায্য করেছে। এই ডেমোতে, পণ্যের ধরনটি স্ট্যাটিক। একটি বাস্তব অ্যাপ্লিকেশনে, ব্যবহারকারী যে পৃষ্ঠাটি পরিদর্শন করছেন তার উপর ভিত্তি করে আপনি আপনার প্রম্পটে পণ্যটিকে গতিশীলভাবে অন্তর্ভুক্ত করতে পারেন।

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

আমাদের প্রম্পটের কয়েকটি-শট বিভাগে উদাহরণগুলির মধ্যে একটি: পণ্যের ধরন ("মোজা") প্রস্তাবিত সংশোধন এবং উদাহরণ পর্যালোচনাতে অন্তর্ভুক্ত করা হয়েছে।

এলএলএম দুর্ঘটনা এবং সংশোধন

Gemma 2B এর জন্য সাধারণত আরও শক্তিশালী, বৃহত্তর সার্ভার-সাইড মডেলের চেয়ে আরও প্রম্পট ইঞ্জিনিয়ারিং প্রয়োজন।

আমরা Gemma 2B এর সাথে কিছু চ্যালেঞ্জের সম্মুখীন হয়েছি। আমরা কীভাবে ফলাফলগুলি উন্নত করেছি তা এখানে:

• খুব সুন্দর। Gemma 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>
  

  স্পষ্টভাবে প্রম্পট গঠন করা মডেলটিকে উদাহরণ তালিকা (কয়েকটি শট) এবং প্রকৃত ইনপুটের মধ্যে পার্থক্য করতে সহায়তা করে।

• ভুল টার্গেট। মাঝে মাঝে, মডেলটি পর্যালোচনা পাঠ্যের পরিবর্তে পণ্যটিতে পরিবর্তনের পরামর্শ দেয়। উদাহরণস্বরূপ, "আমি এই মোজাগুলিকে ঘৃণা করি" বলে একটি পর্যালোচনার জন্য, মডেলটি "একটি ভিন্ন ব্র্যান্ড বা স্টাইল দিয়ে মোজা প্রতিস্থাপন করার কথা বিবেচনা করুন" পরামর্শ দিতে পারে, যা পছন্দসই প্রভাব নয়৷ প্রম্পটটি বিভক্ত করা কাজটিকে স্পষ্ট করতে সাহায্য করেছে এবং পর্যালোচনাতে মডেলের ফোকাসকে উন্নত করেছে।