वेब पर एआई की ज़्यादातर सुविधाएं, सर्वर पर काम करती हैं. वहीं, क्लाइंट-साइड एआई सीधे तौर पर उपयोगकर्ता के ब्राउज़र में काम करता है. इससे कई फ़ायदे मिलते हैं. जैसे, कम इंतज़ार का समय, सर्वर साइड की लागत में कमी, एपीआई पासकोड की ज़रूरत नहीं पड़ना, उपयोगकर्ता की निजता को बेहतर बनाना, और ऑफ़लाइन ऐक्सेस. आपके पास क्लाइंट-साइड एआई को लागू करने का विकल्प है. यह सुविधा TensorFlow.js, Transformers.js, और MediaPipe GenAI जैसी JavaScript लाइब्रेरी के साथ काम करती है.
क्लाइंट-साइड एआई में, परफ़ॉर्मेंस से जुड़ी चुनौतियां भी पेश की जाती हैं: उपयोगकर्ताओं को ज़्यादा फ़ाइलें डाउनलोड करनी होंगी और उनके ब्राउज़र को ज़्यादा मेहनत करनी होगी. यह ठीक से काम करे, इसके लिए सोच-विचार करें:
- आपके इस्तेमाल का उदाहरण. क्या आपकी सुविधा के लिए क्लाइंट-साइड एआई सही विकल्प है? क्या आपकी सुविधा, उपयोगकर्ता की किसी अहम प्रोसेस में शामिल है? अगर हां, तो क्या आपके पास फ़ॉलबैक है?
- मॉडल डाउनलोड करने और इस्तेमाल करने के सबसे सही तरीके. ज़्यादा जानने के लिए पढ़ते रहें.
मॉडल डाउनलोड करने से पहले
माइंड लाइब्रेरी और मॉडल का साइज़
क्लाइंट-साइड एआई लागू करने के लिए, आपको एक मॉडल और आम तौर पर एक लाइब्रेरी की ज़रूरत होगी. लाइब्रेरी चुनते समय, किसी दूसरे टूल की तरह ही इसके साइज़ का आकलन करें.
मॉडल का साइज़ भी मायने रखता है. किसी एआई मॉडल के लिए किस तरह की गतिविधि को बड़ा माना जाता है, यह कई चीज़ों पर निर्भर करता है. 5 एमबी एक अच्छा नियम हो सकता है: यह वेब पेज के औसत साइज़ का 75वां प्रतिशत भी है. लैसर नंबर 10 एमबी होगा.
मॉडल साइज़ के बारे में यहां कुछ ज़रूरी बातें बताई गई हैं:
- टास्क के हिसाब से बनाए गए कई एआई मॉडल बहुत छोटे हो सकते हैं. BudouX जैसा मॉडल, एशियन भाषाओं में किरदारों को सटीक तरीके से पहचानने में मदद करता है. यह सिर्फ़ 9.4 केबी GZipped में है. MediaPipe का भाषा पहचानने वाला मॉडल 315 केबी का है.
- यहां तक कि विज़न मॉडल भी सही साइज़ में हो. Handpose मॉडल और उससे जुड़े सभी संसाधनों का कुल साइज़ 13.4 एमबी है. यह साइज़, ज़्यादातर छोटे किए गए फ़्रंटएंड पैकेज से काफ़ी ज़्यादा है. हालांकि, यह औसत वेब पेज के साइज़ के बराबर है. औसत वेब पेज का साइज़ 2.2 एमबी (डेस्कटॉप पर 2.6 एमबी) होता है.
- जेन एआई मॉडल, वेब रिसॉर्स के लिए सुझाए गए साइज़ से ज़्यादा हो सकते हैं. DistilBERT का साइज़ 67 एमबी है. इसे बहुत छोटा एलएलएम या आसान एनएलपी मॉडल माना जाता है. हालांकि, इस बारे में अलग-अलग लोगों की अलग-अलग राय है. Gemma 2B जैसे छोटे एलएलएम का साइज़ भी 1.3 जीबी तक हो सकता है. यह साइज़, मीडियन वेब पेज के साइज़ से 100 गुना ज़्यादा है.
अपने ब्राउज़र के डेवलपर टूल की मदद से, उन मॉडल के डाउनलोड साइज़ का सटीक आकलन किया जा सकता है जिनका इस्तेमाल करना है.
मॉडल का साइज़ ऑप्टिमाइज़ करना
- मॉडल की क्वालिटी और डाउनलोड के साइज़ की तुलना करना. हालांकि, एक छोटा मॉडल, आपके इस्तेमाल के उदाहरण के हिसाब से ज़रूरत के मुताबिक काम करता है, लेकिन यह काफ़ी छोटा होता है. मॉडल के साइज़ को कम करने के लिए, मॉडल को छोटा करने की तकनीकें और बेहतर बनाने की सुविधाएं उपलब्ध हैं. इनकी मदद से, मॉडल को सटीक बनाए रखते हुए, उसके साइज़ को काफ़ी कम किया जा सकता है.
- जब भी हो सके, खास मॉडल चुनें. किसी खास टास्क के लिए बनाए गए मॉडल, आम तौर पर छोटे होते हैं. उदाहरण के लिए, अगर आपको भावनाओं या बुरे बर्ताव का विश्लेषण करना है, तो सामान्य एलएलएम के बजाय, इन कामों में इस्तेमाल होने वाले खास मॉडल का इस्तेमाल करें.
ये सभी मॉडल एक ही तरह के काम करते हैं, लेकिन इनके साइज़ अलग-अलग होते हैं. हालांकि, इन सभी मॉडल का साइज़ अलग-अलग होता है: 3 एमबी से लेकर 1.5 जीबी तक.
देखें कि मॉडल चल सकता है या नहीं
सभी डिवाइसों पर एआई मॉडल नहीं चल सकते. मॉडल के इस्तेमाल के दौरान, अगर कोई दूसरी महंगी प्रोसेस चल रही है या शुरू की गई है, तो हो सकता है कि जिन डिवाइसों में ज़रूरी हार्डवेयर स्पेसिफ़िकेशन हैं वे भी काम न कर पाएं.
जब तक कोई समाधान उपलब्ध नहीं होता, तब तक आपके पास ये विकल्प हैं:
- देखें कि WebGPU काम करता है या नहीं. कई क्लाइंट-साइड एआई लाइब्रेरी, WebGPU का इस्तेमाल करती हैं. इनमें Transformers.js का वर्शन 3 और MediaPipe शामिल हैं. फ़िलहाल, अगर WebGPU काम नहीं करता है, तो इनमें से कुछ लाइब्रेरी अपने-आप Wasm पर स्विच नहीं होतीं. अगर आपको पता है कि आपकी क्लाइंट-साइड एआई लाइब्रेरी को WebGPU की ज़रूरत है, तो एआई से जुड़े कोड को WebGPU की सुविधा का पता लगाने वाली जांच में शामिल करके, इस समस्या को कम किया जा सकता है.
- कम क्षमता वाले डिवाइसों को हटा दें. डिवाइस की क्षमताओं और दबाव का अनुमान लगाने के लिए, Navigator.hardwareConcurrency, Navigator.deviceMemory और Compute Pressure API का इस्तेमाल करें. ये एपीआई सभी ब्राउज़र पर काम नहीं करते हैं. इन्हें फ़िंगरप्रिंट की सुविधा को रोकने के लिए, जान-बूझकर सही किया गया है. हालांकि, इनकी मदद से ऐसे डिवाइसों को हटाया जा सकता है जो बहुत कम काम करते हैं.
बड़ी फ़ाइलों के डाउनलोड के सिग्नल
बड़े मॉडल के लिए, डाउनलोड करने से पहले उपयोगकर्ताओं को चेतावनी दें. मोबाइल उपयोगकर्ताओं की तुलना में, डेस्कटॉप उपयोगकर्ताओं के बड़े डाउनलोड करने की संभावना ज़्यादा होती है. मोबाइल डिवाइसों का पता लगाने के लिए, User-Agent Client Hints API से mobile का इस्तेमाल करें. अगर UA-CH काम नहीं करता है, तो User-Agent स्ट्रिंग का इस्तेमाल करें.
बड़ी संख्या में डाउनलोड कम करें
- सिर्फ़ ज़रूरी चीज़ें डाउनलोड करें. अगर मॉडल का साइज़ बड़ा है, तो उसे सिर्फ़ तब डाउनलोड करें, जब आपको यह पक्का हो कि एआई की सुविधाओं का इस्तेमाल किया जाएगा. उदाहरण के लिए, अगर आपके पास टाइप करने के लिए एआई का सुझाव देने वाली सुविधा है, तो इसे सिर्फ़ तब डाउनलोड करें, जब उपयोगकर्ता, टाइपिंग की सुविधाओं का इस्तेमाल करना शुरू करे.
- Cache API का इस्तेमाल करके, डिवाइस पर मॉडल को साफ़ तौर पर कैश मेमोरी में सेव करें, ताकि हर बार उसे डाउनलोड करने से बचा जा सके. सिर्फ़ एचटीटीपी ब्राउज़र कैश मेमोरी पर भरोसा न करें.
- मॉडल डाउनलोड को कई हिस्सों में बांटना. fetch-in-chunks, बड़े डाउनलोड को छोटे हिस्सों में बांटता है.
मॉडल डाउनलोड और तैयार करने की प्रोसेस
उपयोगकर्ता को ब्लॉक न करें
उपयोगकर्ता अनुभव को बेहतर बनाने पर ध्यान दें: एआई मॉडल के पूरी तरह लोड न होने पर भी, मुख्य सुविधाओं को काम करने दें.
प्रोग्रेस दिखाना
मॉडल डाउनलोड करते समय, डाउनलोड की प्रोग्रेस और बचे हुए समय की जानकारी दें.
- अगर मॉडल डाउनलोड करने की प्रोसेस को आपकी क्लाइंट-साइड एआई लाइब्रेरी मैनेज करती है, तो उपयोगकर्ता को डाउनलोड की प्रोग्रेस की स्थिति दिखाने के लिए, डाउनलोड की प्रोग्रेस की स्थिति का इस्तेमाल करें. अगर यह सुविधा उपलब्ध नहीं है, तो इसका अनुरोध करने के लिए कोई समस्या खोलें या इस सुविधा को उपलब्ध कराने में योगदान दें!
- अपने कोड में मॉडल के डाउनलोड मैनेज करने पर, लाइब्रेरी का इस्तेमाल करके इस मॉडल को अलग-अलग हिस्सों में फ़ेच किया जा सकता है. जैसे, fetch-in-chunks और उपयोगकर्ता को डाउनलोड की प्रोग्रेस दिखाना.
- ज़्यादा सलाह के लिए, ऐनिमेट किए गए प्रोग्रेस इंंडिकेटर के सबसे सही तरीके और लंबे इंतज़ार और रुकावटों के लिए डिज़ाइन करना देखें.
नेटवर्क से जुड़ी रुकावटों को आसानी से मैनेज करना
मॉडल के साइज़ के हिसाब से, उन्हें डाउनलोड होने में अलग-अलग समय लग सकता है. सोचें कि अगर उपयोगकर्ता ऑफ़लाइन हो जाता है, तो नेटवर्क में आने वाली रुकावटों को कैसे मैनेज किया जाए. जब भी संभव हो, उपयोगकर्ता को कनेक्शन के बंद होने की सूचना दें. साथ ही, कनेक्शन वापस आने पर डाउनलोड जारी रखें.
खराब इंटरनेट कनेक्शन की वजह से भी, वीडियो को अलग-अलग हिस्सों में डाउनलोड किया जा सकता है.
वेब वर्कर पर ज़्यादा समय लेने वाले टास्क भेजना
ज़्यादा समय लेने वाले टास्क, जैसे कि डाउनलोड करने के बाद मॉडल तैयार करने के चरण, आपकी मुख्य थ्रेड को ब्लॉक कर सकते हैं. इससे उपयोगकर्ता को खराब अनुभव मिलता है. इन टास्क को वेब वर्कर्स पर ले जाने से मदद मिलती है.
वेब वर्कर के आधार पर डेमो और पूरी तरह से लागू करने का तरीका जानें:
अनुमान लगाने के दौरान
मॉडल डाउनलोड और तैयार होने के बाद, अनुमान लगाने की सुविधा चालू की जा सकती है. अनुमान लगाने के लिए, कंप्यूटर पर काफ़ी काम करना पड़ सकता है.
अनुमान लगाने की प्रोसेस को वेब वर्कर्स पर ले जाना
अगर अनुमान WebGL, WebGPU या WebNN की मदद से लगाया जाता है, तो यह जीपीयू पर निर्भर करता है. इसका मतलब है कि यह एक अलग प्रोसेस में होता है, जो यूज़र इंटरफ़ेस (यूआई) को ब्लॉक नहीं करता.
हालांकि, सीपीयू पर आधारित तरीके लागू करने के लिए (जैसे कि Wasm), WebGPU के लिए फ़ॉलबैक हो सकता है, अगर WebGPU काम नहीं करता है), तो वेब वर्कर पर अनुमान लागू करने से आपके पेज को रिस्पॉन्सिव बनाया जाता है.
एआई से जुड़ा सारा कोड (मॉडल फ़ेच करना, मॉडल तैयार करना, अनुमान लगाना) एक ही जगह पर होने पर, एआई को लागू करना आसान हो सकता है. इसलिए, आपके पास किसी वेब कर्मचारी को चुनने का विकल्प होता है, चाहे जीपीयू का इस्तेमाल किया जा रहा हो या नहीं.
गड़बड़ियां ठीक करना
भले ही, आपने यह जांच कर ली हो कि मॉडल डिवाइस पर चलेगा, लेकिन उपयोगकर्ता कोई ऐसी प्रोसेस शुरू कर सकता है जो बाद में ज़्यादा संसाधनों का इस्तेमाल करती है. इसे कम करने के लिए:
- अनुमान से जुड़ी गड़बड़ियां मैनेज करना. अनुमान लगाने की प्रोसेस को
try/catchब्लॉक में शामिल करें और उससे जुड़ी रनटाइम गड़बड़ियों को मैनेज करें. - WebGPU से जुड़ी गड़बड़ियों को मैनेज करें. इनमें अनचाही और GPUDevice.lost, दोनों तरह की गड़बड़ियां शामिल हैं. ये गड़बड़ियां तब होती हैं, जब डिवाइस में समस्या होने की वजह से GPU रीसेट हो जाता है.
अनुमान की स्थिति दिखाना
अगर अनुमान लगाने में ज़्यादा समय लगता है, तो उपयोगकर्ता को बताएं कि मॉडल सोच रहा है. इंतज़ार को आसान बनाने के लिए ऐनिमेशन का इस्तेमाल करें और उपयोगकर्ता को यह पक्का करें कि ऐप्लिकेशन उम्मीद के मुताबिक काम कर रहा है.
अनुमान को रद्द करने की सुविधा जोड़ना
उपयोगकर्ता को अपनी क्वेरी को तुरंत बेहतर बनाने की अनुमति दें. इससे सिस्टम को ऐसे जवाब जनरेट करने के लिए संसाधनों को बर्बाद नहीं करना पड़ता जो उपयोगकर्ता को कभी नहीं दिखेगा.