WebGPU, WebGL, और बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome के वेब एआई (AI) मॉडल की टेस्टिंग को सुपरचार्ज करें

Jason Mayes

François Beaufort

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

हालांकि, इसमें एक मुश्किल है. आपका TensorFlow.js मॉडल, सीपीयू (WebAssembly) और ज़्यादा ताकतवर जीपीयू (WebGL और WebGPU की मदद से), दोनों पर काम कर सकता है. सवाल यह है कि: किस तरह चुने गए हार्डवेयर का इस्तेमाल करके, ब्राउज़र को लगातार अपने-आप टेस्ट किया जा सकता है?

असल दुनिया के उपयोगकर्ताओं के डिवाइस पर इस्तेमाल करने से पहले, मशीन लर्निंग मॉडल की परफ़ॉर्मेंस की तुलना करने के लिए, यह ज़रूरी है कि मशीन लर्निंग मॉडल की परफ़ॉर्मेंस की तुलना बार-बार की जाए और उसे बेहतर किया जाए.

जीपीयू के साथ एक जैसा टेस्टिंग एनवायरमेंट सेट अप करना, उम्मीद से ज़्यादा मुश्किल हो सकता है. इस ब्लॉग पोस्ट में, हम आपके सामने आई समस्याओं और उनका समाधान करने के तरीकों के बारे में बताएंगे, ताकि आप अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बना सकें.

यह सिर्फ़ वेब एआई डेवलपर के लिए नहीं है! अगर आप वेब गेमिंग या ग्राफ़िक्स पर काम कर रहे हैं, तो यह पोस्ट आपके लिए भी अहम है.

हमारे ऑटोमेशन टूलबॉक्स में क्या-क्या है

हम इसका इस्तेमाल कर रहे हैं:

• एनवायरमेंट: NVIDIA T4 या V100 जीपीयू से कनेक्ट की गई, Linux पर आधारित Google Colab नोटबुक. अगर आप चाहें, तो Google Cloud (GCP) जैसे अन्य क्लाउड प्लैटफ़ॉर्म का इस्तेमाल किया जा सकता है.
• ब्राउज़र: Chrome, WebGPU के साथ काम करता है. यह WebGL का बेहतरीन तरीके से काम करने वाला है. इससे, वेब पर आधुनिक जीपीयू एपीआई को बेहतर बनाने में मदद मिलती है.
• ऑटोमेशन: Puppeteer एक Node.js लाइब्रेरी है. इसकी मदद से, JavaScript की मदद से ब्राउज़र को प्रोग्राम के हिसाब से कंट्रोल किया जा सकता है. Puppeteer की मदद से, हम Chrome को हेडलेस मोड में ऑटोमेट कर सकते हैं, जिसका मतलब है कि ब्राउज़र सर्वर पर, बिना दिखने वाले इंटरफ़ेस के बिना चलता है. हम लेगसी फ़ॉर्म के बजाय, पहले से बेहतर हेडलेस मोड का इस्तेमाल कर रहे हैं.

एनवायरमेंट की पुष्टि करें

यह देखने का सबसे अच्छा तरीका है कि Chrome में हार्डवेयर से तेज़ी लाने की सुविधा चालू है या नहीं, पता बार में chrome://gpu टाइप करें. आपके पास console.log की मदद से, प्रोग्राम बनाकर Puppeteer के साथ इस तरह की परफ़ॉर्मेंस को एक जैसा करने का विकल्प भी है. इसके अलावा, मैन्युअल तौर पर देखने के लिए, पूरी रिपोर्ट को PDF के तौर पर सेव भी किया जा सकता है:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

chrome://gpu खोलें और आपको ये नतीजे दिखेंगे:

यह बहुत अच्छी शुरुआत नहीं है. यह साफ़ तौर पर पता है कि हार्डवेयर की पहचान करने की सुविधा काम नहीं कर रही थी. WebGL, WebGL2, और WebGPU ज़रूरी रूप से बंद हैं या सिर्फ़ सॉफ़्टवेयर हैं. इस समस्या में हम अकेले नहीं हैं. ऐसी स्थिति में, लोगों के बीच इस बारे में कई ऑनलाइन चर्चा चल रही है कि वे इस समस्या का सामना कर रहे हैं. इसमें, Chrome सहायता के आधिकारिक चैनल (1), (2) पर भी चर्चा करना शामिल है.

WebGPU और WebGL के साथ काम करने की सुविधा चालू करना

डिफ़ॉल्ट रूप से, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome डिवाइस जीपीयू को बंद कर देता है. इसे Linux पर चालू करने के लिए, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome लॉन्च करते समय, यहां दिए गए सभी फ़्लैग लागू करें:

• --no-sandbox फ़्लैग, Chrome का सिक्योरिटी सैंडबॉक्स बंद कर देता है, जो ब्राउज़र प्रोसेस को सिस्टम के बाकी सिस्टम से आइसोलेट कर देता है. इस सैंडबॉक्स के बिना, Chrome को रूट के बिना नहीं चलाया जा सकता.
• --headless=new फ़्लैग, Chrome को नए और बेहतर हेडलेस मोड की मदद से चलाता है. इसके यूज़र इंटरफ़ेस में कोई यूज़र इंटरफ़ेस (यूआई) नहीं दिखता.
• --use-angle=vulkan फ़्लैग, Chrome को ANGLE के लिए Vulkan बैकएंड का इस्तेमाल करने के लिए कहता है. यह OpenGL ES 2/3 कॉल को Vulkan एपीआई कॉल में बदल देता है.
• --enable-features=Vulkan फ़्लैग, Chrome में कंपोज़िटिंग और रास्टराइज़ेशन के लिए, Vulkan ग्राफ़िक बैकएंड की सुविधा देता है.
• --disable-vulkan-surface फ़्लैग, VK_KHR_surface vulkan इंस्टेंस एक्सटेंशन को बंद कर देता है. स्वैपचेन का इस्तेमाल करने के बजाय, स्क्रीन पर रेंडर होने वाले नतीजे को दिखाने के लिए, Bit blit का इस्तेमाल किया जाता है.
• --enable-unsafe-webgpu फ़्लैग, Linux पर Chrome में प्रयोग के तौर पर उपलब्ध WebGPU API को चालू करता है. साथ ही, अडैप्टर की ब्लॉकलिस्ट को बंद कर देता है.

अब हम उन सभी बदलावों को एक साथ मिला देते हैं जो हमने अब तक किए हैं. पूरी स्क्रिप्ट यहां दी गई है.

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

स्क्रिप्ट फिर से चलाएं. किसी भी WebGPU समस्या का पता नहीं चलता और इसकी वैल्यू, बंद से सिर्फ़ सॉफ़्टवेयर में बदल जाती है.

हालांकि, हार्डवेयर से तेज़ी लाने की सुविधा अब भी उपलब्ध नहीं है. इसलिए, NVIDIA T4 जीपीयू का पता नहीं चला है.

सही जीपीयू ड्राइवर इंस्टॉल करें

हमने Chrome टीम में, कुछ जीपीयू विशेषज्ञों के साथ chrome://gpu के आउटपुट की बारीकी से जांच की. हमें Linux Colab पर इंस्टॉल किए गए डिफ़ॉल्ट ड्राइवर इंस्टेंस में समस्याएं मिली हैं. इनकी वजह से Vulkan में समस्याएं आ रही हैं. इस वजह से Chrome, GL_RENDERER लेवल पर NVIDIA T4 जीपीयू का पता नहीं लगा सका, जैसा कि नीचे दिए गए आउटपुट में दिखाया गया है. इससे, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome में समस्याएं आ सकती हैं.

सही ड्राइवर इंस्टॉल करने से यह समस्या ठीक हो जाती है.

सही ड्राइवर इंस्टॉल करने के लिए, सेटअप के दौरान इन निर्देशों को चलाएं. आखिरी दो लाइनों से, आपको उन आउटपुट को लॉग करने में मदद मिलती है जो NVIDIA के ड्राइवर vulkaninfo के साथ पता लगाते हैं.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

अब स्क्रिप्ट फिर से चलाएं और हमें निम्नलिखित परिणाम मिलेंगे. 🎉

Chrome को चलाते समय, सही ड्राइवर और फ़्लैग का इस्तेमाल करने से, अब हमारे पास WebGPU और WebGL के साथ शानदार और नए हेडलेस मोड का इस्तेमाल करने की सुविधा है.

पर्दे के पीछे: हमारी टीम की जांच

काफ़ी रिसर्च करने के बाद, हमें Google Colab में जिस एनवायरमेंट को लागू करना था, उसके लिए काम करने के तरीके नहीं मिले. हालांकि, कुछ उम्मीदवार वाली पोस्ट थीं जो अन्य प्लैटफ़ॉर्म पर काम कर रही थीं, जो अच्छी बात थी. कुल मिलाकर, Colab NVIDIA T4 एनवायरमेंट में इनकी सफलता को दोहराया नहीं जा सका, क्योंकि हमारे सामने दो मुख्य समस्याएं थीं:

1. फ़्लैग के कुछ कॉम्बिनेशन, जीपीयू का पता लगा सकते हैं, लेकिन असल में जीपीयू का इस्तेमाल नहीं करते.
2. तीसरे पक्षों की ओर से काम करने वाले समाधानों के उदाहरण में, Chrome के हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) वर्शन का इस्तेमाल किया गया था, लेकिन आने वाले समय में इसे नए वर्शन की जगह रोक दिया जाएगा. हमें ऐसे समाधान की ज़रूरत थी जो आने वाले समय में बेहतर ढंग से प्रमाणित हो और हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) वाले नए Chrome के साथ काम करे.

हमने इमेज की पहचान करने के लिए TensorFlow.js वेब पेज का उदाहरण चलाकर, जीपीयू के इस्तेमाल की पुष्टि की. इसकी मदद से, हमने एक मॉडल को कपड़ों के सैंपल (जैसे कि मशीन लर्निंग की "हैलो वर्ल्ड") की पहचान करने की ट्रेनिंग दी.

एक सामान्य मशीन पर, 50 ट्रेनिंग साइकल (जिन्हें epoch कहा जाता है) हर एक सेकंड से कम समय में चलने चाहिए. हेडलेस Chrome को उसकी डिफ़ॉल्ट स्थिति में कॉल करने पर, हम JavaScript कंसोल आउटपुट को Node.js सर्वर-साइड कमांड लाइन में लॉग करके देख सकते हैं कि ये ट्रेनिंग साइकल कितनी तेज़ी से चल रहे हैं.

उम्मीद के मुताबिक, ट्रेनिंग के हर एपिसोड में उम्मीद से ज़्यादा (कई सेकंड) ज़्यादा समय लगा. इससे पता चलता है कि Chrome, जीपीयू का इस्तेमाल करने के बजाय, JS सीपीयू का इस्तेमाल करने के बजाय सामान्य तरीके से काम कर रहा है:

ड्राइवरों को ठीक करने और हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा देने वाले Chrome) के लिए फ़्लैग के सही कॉम्बिनेशन का इस्तेमाल करने के बाद, TensorFlow.js की ट्रेनिंग के उदाहरण को फिर से चलाने पर, ट्रेनिंग वाले epoch तेज़ी से काम करते हैं.

खास जानकारी

साल 2017 में, वेब एआई (वेब एआई) के बनाए जाने के बाद से, इस क्षेत्र में काफ़ी तेज़ी से बढ़ोतरी हुई है. WebGPU, WebGL, और WebAssembly जैसी ब्राउज़र टेक्नोलॉजी की मदद से, मशीन लर्निंग मॉडल की गणित से जुड़ी कार्रवाइयों को क्लाइंट साइड पर और तेज़ किया जा सकता है.

साल 2023 में TensorFlow.js और MediaPipe Web ने एक अरब से ज़्यादा मॉडल और लाइब्रेरी डाउनलोड की हैं. यह एक ऐतिहासिक उपलब्धि है. इससे पता चलता है कि कैसे वेब डेवलपर और इंजीनियर, अगली-पीढ़ी की टेक्नोलॉजी के वेब ऐप्लिकेशन में एआई का इस्तेमाल करके, कुछ बेहतरीन टूल बना रहे हैं.

इस्तेमाल में सफलता मिलने पर ज़िम्मेदारी भी बढ़ जाती है. प्रोडक्शन सिस्टम में इस्तेमाल के इस स्तर पर, ब्राउज़र पर क्लाइंट-साइड और ब्राउज़र पर आधारित एआई मॉडल की जांच करने की ज़रूरत पड़ती है. साथ ही, इन्हें बढ़ाने लायक, अपने-आप चलने वाले और स्टैंडर्ड हार्डवेयर सेटअप में इस्तेमाल करने की ज़रूरत पड़ती है.

हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा देने वाला) Chrome और Puppeteer की मिली-जुली क्षमता की मदद से, स्टैंडर्ड और बार-बार दिखने वाले एनवायरमेंट में इस तरह के वर्कलोड की पूरे आत्मविश्वास के साथ जांच की जा सकती है. इससे यह पक्का किया जा सकता है कि नतीजे एक जैसे और भरोसेमंद हों.

आखिर में खास जानकारी

हमारे दस्तावेज़ों में एक सिलसिलेवार निर्देश उपलब्ध है, ताकि आप पूरे सेटअप को खुद आज़मा सकें.

अगर आपको यह काम का लगा, तो LinkedIn, X (पहले इसका नाम Twitter था) या जिस सोशल नेटवर्क का इस्तेमाल किया जा रहा है उस पर हैशटैग #WebAI का इस्तेमाल करके, प्रशंसकों को टैग करें. हमें आपके सुझाव, शिकायत या राय जानकर अच्छा लगेगा. इसलिए, हम आने वाले समय में इस तरह के और सुझाव लिखें.

आने वाले समय में अपडेट पाने के लिए, GitHub रेपो पर एक स्टार जोड़ें.

स्वीकार की गई

Chrome टीम के उन सभी लोगों को बहुत-बहुत धन्यवाद जिन्होंने इस समाधान में हमारे ड्राइवर और WebGPU की समस्याओं को डीबग करने में मदद की. इस ब्लॉग पोस्ट में शब्दों को लिखने में मदद करने के लिए जेसलिन येन और अलेक्सांद्रा व्हाइट को विशेष धन्यवाद. युली नोविकोव, आंद्रे कोस्याकोव, और एलेक्स रुडेंको का धन्यवाद जिन्होंने आख़िर में कारगर समाधान बनाने में अहम भूमिका निभाई.