क्लाइंट-साइड एआई की मदद से, प्रॉडक्ट की समीक्षा के सुझाव पाना

Maud Nalpas

पब्लिश करने की तारीख: 21 अक्टूबर, 2024

प्रॉडक्ट की समीक्षाएं दिखाकर, ऑनलाइन स्टोर को कन्वर्ज़न में 270% की बढ़ोतरी दिख सकती है. नेगेटिव समीक्षाएं भी अहम होती हैं, क्योंकि इनसे आपके कारोबार की विश्वसनीयता बढ़ती है. ऑनलाइन खरीदारी करने वाले 82% खरीदार, खरीदारी करने से पहले इनकी खोज करते हैं.

खरीदारों को प्रॉडक्ट की मददगार समीक्षाएं देने के लिए बढ़ावा देना, खास तौर पर तब मुश्किल हो सकता है, जब वे इस बारे में गलत जानकारी दें. यहां हम जनरेटिव एआई का इस्तेमाल करने का तरीका बताएंगे, ताकि उपयोगकर्ता ऐसी जानकारीपूर्ण समीक्षाएं लिख सकें जिनसे दूसरों को खरीदारी का फ़ैसला लेने में मदद मिल सके.

डेमो और कोड

प्रॉडक्ट की समीक्षा वाले डेमो को आज़माएं और GitHub पर कोड देखें.

हमने इसे कैसे बनाया

क्लाइंट-साइड एआई

इस डेमो के लिए, हमने क्लाइंट-साइड पर इस सुविधा को लागू किया है. ऐसा इन वजहों से किया गया है:

• इंतज़ार का समय. जैसे ही उपयोगकर्ता टाइप करना बंद कर देगा, हम तुरंत सुझाव देना चाहते हैं. हम सर्वर राउंड-ट्रिप से बचकर, यह सुविधा दे सकते हैं.
• कीमत. यह एक डेमो है. अगर आपको प्रोडक्शन में मिलती-जुलती कोई सुविधा लॉन्च करनी है, तो सर्वर साइड की लागत के बिना प्रयोग करना बेहतर होगा. ऐसा तब तक करें, जब तक यह पुष्टि न हो जाए कि यह सुविधा आपके उपयोगकर्ताओं के लिए सही है या नहीं.

MediaPipe का जनरेटिव एआई

हमने इन वजहों से, MediaPipe LLM Inference API (MediaPipe GenAI पैकेज) के ज़रिए Gemma 2B मॉडल का इस्तेमाल करने का फ़ैसला लिया है:

• मॉडल की सटीक जानकारी: Gemma 2B, साइज़ और सटीक जानकारी के बीच बेहतर संतुलन देता है. सही तरीके से पूछे जाने पर, हमें इस डेमो के लिए ऐसे नतीजे मिले जो हमें संतुष्ट कर रहे थे.
• क्रॉस-ब्राउज़र सपोर्ट: MediaPipe, WebGPU के साथ काम करने वाले सभी ब्राउज़र पर काम करता है.

उपयोगकर्ता अनुभव

परफ़ॉर्मेंस के सबसे सही तरीके लागू करें

Gemma 2B एक छोटा एलएलएम है, लेकिन इसे डाउनलोड करने में ज़्यादा समय लगता है. परफ़ॉर्मेंस के सबसे सही तरीके लागू करें, जिनमें वेब वर्कर का इस्तेमाल करना शामिल है.

इस सुविधा को वैकल्पिक बनाना

हमें प्रॉडक्ट की समीक्षा पोस्ट करने के लिए, एआई पर आधारित समीक्षा के सुझाव चाहिए, ताकि उपयोगकर्ता का वर्कफ़्लो बेहतर हो सके. हमने इस सुविधा को इस तरह से लागू किया है कि उपयोगकर्ता तब भी समीक्षा पोस्ट कर सकता है, जब मॉडल लोड न हुआ हो और इसलिए, उसे सुधार के सुझाव न मिल रहे हों.

यूज़र इंटरफ़ेस के स्टेटस और ऐनिमेशन

आम तौर पर, अनुमान लगाने में तुरंत लगने वाले समय से ज़्यादा समय लगता है. इसलिए, हम उपयोगकर्ता को यह संकेत देते हैं कि मॉडल किसी अनुमान पर काम कर रहा है या "सोच रहा है." हम एनिमेशन का इस्तेमाल करके, उपयोगकर्ताओं को यह भरोसा दिलाते हैं कि ऐप्लिकेशन सही तरीके से काम कर रहा है. इससे, उन्हें इंतज़ार करने में आसानी होती है. यूज़र इंटरफ़ेस (यूआई) की उन अलग-अलग स्थितियों के बारे में जानें जिन्हें हमने अपने डेमो में लागू किया है. इसे Adam Argyle ने डिज़ाइन किया है.

दूसरी ज़रूरी बातें

प्रोडक्शन एनवायरमेंट में, आपको ये काम करने की ज़रूरत पड़ सकती है:

• सुझाव/राय देने या शिकायत करने की सुविधा उपलब्ध कराएं. अगर सुझाव खराब हों या उनका कोई मतलब न हो, तो क्या करें? तुरंत सुझाव या राय देने का तरीका (जैसे कि पसंद या नापसंद) लागू करें और अनुभव के आधार पर यह तय करें कि उपयोगकर्ताओं को क्या काम का लगा. उदाहरण के लिए, यह आकलन करें कि आपके कितने उपयोगकर्ता इस सुविधा के साथ इंटरैक्ट कर रहे हैं और क्या वे इसे बंद करते हैं.
• ऑप्ट-आउट करने की अनुमति दें. अगर उपयोगकर्ता एआई की मदद के बिना अपने शब्दों का इस्तेमाल करना चाहता है या उसे यह सुविधा पसंद नहीं आती है, तो क्या होगा? उपयोगकर्ता को ऑप्ट-आउट करने और फिर से ऑप्ट-इन करने की अनुमति दें.
• बताएं कि यह सुविधा क्यों मौजूद है. कम शब्दों में जानकारी देने से, आपके उपयोगकर्ताओं को फ़ीडबैक टूल का इस्तेमाल करने के लिए बढ़ावा मिल सकता है. उदाहरण के लिए, "सुझाव/राय/शिकायत से, खरीदारों को यह तय करने में मदद मिलती है कि उन्हें क्या खरीदना है. साथ ही, इससे हमें आपके हिसाब से प्रॉडक्ट बनाने में मदद मिलती है." इस सुविधा के काम करने के तरीके और इसे उपलब्ध कराने की वजह के बारे में, आपको पूरी जानकारी भी देनी पड़ सकती है. ऐसा इसलिए हो सकता है, क्योंकि इसका इस्तेमाल लिंक के बारे में ज़्यादा जानकारी पाने के लिए किया जाता है.
• जहां ज़रूरी हो वहां एआई के इस्तेमाल के बारे में बताएं. क्लाइंट-साइड एआई की मदद से, उपयोगकर्ता के कॉन्टेंट को प्रोसेस करने के लिए सर्वर पर नहीं भेजा जाता. इसलिए, उसे निजी रखा जा सकता है. हालांकि, अगर आपने एआई की मदद से जानकारी इकट्ठा करने के लिए, सर्वर-साइड फ़ॉलबैक बनाया है या किसी अन्य तरीके का इस्तेमाल किया है, तो इसे अपनी निजता नीति, सेवा की शर्तों या अन्य जगहों पर जोड़ें.

लागू करना

प्रॉडक्ट की समीक्षा के सुझाव देने वाली सुविधा को लागू करने का हमारा तरीका, इस्तेमाल के कई उदाहरणों के लिए काम कर सकता है. आने वाले समय में क्लाइंट-साइड एआई की सुविधाओं के लिए, इस जानकारी को आधार के तौर पर इस्तेमाल करें.

वेब वर्कर्स में MediaPipe

MediaPipe एलएलएम इंफ़रेंस की मदद से, एआई कोड सिर्फ़ कुछ लाइनों में लिखा जा सकता है: मॉडल का यूआरएल डालकर, फ़ाइल रिज़ॉल्वर और एलएलएम इंफ़रेंस ऑब्जेक्ट बनाएं. इसके बाद, जवाब जनरेट करने के लिए, एलएलएम इंफ़रेंस इंस्टेंस का इस्तेमाल करें.

हालांकि, हमारा कोड सैंपल थोड़ा ज़्यादा बेहतर है. ऐसा इसलिए है, क्योंकि इसे वेब वर्कर्स में लागू किया गया है. इसलिए, यह मुख्य स्क्रिप्ट के साथ मैसेज को पसंद के मुताबिक मैसेज कोड के ज़रिए पास करता है. इस पैटर्न के बारे में ज़्यादा जानें.

// 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, टेक्स्ट के तौर पर स्ट्रक्चर्ड आउटपुट देने में बेहतर परफ़ॉर्म करता है. इसलिए, इस डेमो के लिए, हमने टेक्स्ट पर आधारित आउटपुट फ़ॉर्मैट चुना है. मॉडल टेक्स्ट जनरेट करता है. इसके बाद, हम अपने वेब ऐप्लिकेशन में आगे की प्रोसेसिंग के लिए, आउटपुट को JavaScript ऑब्जेक्ट में पार्स करते हैं.

प्रॉम्प्ट को बेहतर बनाना

हमने अपने प्रॉम्प्ट पर बार-बार काम करने के लिए, एलएलएम का इस्तेमाल किया.

• उदाहरण के साथ डाले गए प्रॉम्प्ट. फ़ew-शॉट प्रॉम्प्ट के लिए उदाहरण जनरेट करने के लिए, हमने 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."

हमारे प्रॉम्प्ट के कुछ शॉट वाले सेक्शन में मौजूद एक उदाहरण: सुझाई गई समस्या को ठीक करने के तरीके और उदाहरण की समीक्षा में, प्रॉडक्ट टाइप ("जूते") शामिल है.

एलएलएम से जुड़ी गड़बड़ियां और उन्हें ठीक करना

आम तौर पर, 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>
  

  प्रॉम्प्ट को साफ़ तौर पर स्ट्रक्चर करने से, मॉडल को उदाहरण की सूची (कुछ शॉट) और असल इनपुट के बीच अंतर करने में मदद मिलती है.

• गलत टारगेट. कभी-कभी, मॉडल ने समीक्षा के टेक्स्ट के बजाय प्रॉडक्ट में बदलाव करने का सुझाव दिया. उदाहरण के लिए, "मुझे ये जूते पसंद नहीं हैं" वाली समीक्षा के लिए, मॉडल यह सुझाव दे सकता है कि "जूतों को किसी दूसरे ब्रैंड या स्टाइल से बदलें". हालांकि, यह सुझाव सही नहीं है. प्रॉम्प्ट को अलग-अलग हिस्सों में बांटने से, टास्क के बारे में साफ़ तौर पर जानकारी मिली और मॉडल ने समीक्षा पर फ़ोकस किया.