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

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

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

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

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

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

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

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

• एनवायरमेंट: Linux पर आधारित Google Colab नोटबुक, जो NVIDIA T4 या V100 जीपीयू से कनेक्ट होती है. आपके पास 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 खोलें और आपको ये नतीजे मिलेंगे:

ग्राफ़िक की सुविधा का स्टेटस
OpenGL:	बंद है
Vulkan:	बंद है
WebGL:	सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
WebGL2:	सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
वेबजीपीयू:	बंद है
समस्याओं का पता चला. WebGPU को ब्लॉकलिस्ट या कमांड लाइन के ज़रिए बंद कर दिया गया है.

अच्छी शुरुआत नहीं हुई. यह साफ़ है कि हार्डवेयर की पहचान नहीं हो पा रही है. 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 इंस्टेंस एक्सटेंशन को बंद कर देता है. स्वैपचेन का इस्तेमाल करने के बजाय, स्क्रीन पर मौजूद रेंडर के नतीजे के लिए बिट ब्लिट का इस्तेमाल किया जाता है.
• --enable-unsafe-webgpu फ़्लैग, Linux पर Chrome में प्रयोग के तौर पर WebGPU एपीआई चालू करता है. साथ ही, अडैप्टर की ब्लॉकलिस्ट को बंद करता है.

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

/* 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 समस्या का पता नहीं चला और वैल्यू, बंद से सिर्फ़ सॉफ़्टवेयर में बदल जाती है.

ग्राफ़िक की सुविधा का स्टेटस
OpenGL:	बंद है
Vulkan:	बंद है
WebGL:	सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
WebGL2:	सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
वेबजीपीयू:	सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.

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

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

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

डिफ़ॉल्ट आउटपुट के तौर पर, NVIDIA T4 जीपीयू का पता नहीं चला.

ड्राइवर की जानकारी
GL_RENDERER	ऐंगल (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader Driver-5.0.0)

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

ड्राइवर इंस्टॉल होने के बाद, अपडेट किया गया आउटपुट.

ड्राइवर की जानकारी
GL_RENDERER	ऐंगल (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

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

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

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

अब स्क्रिप्ट को फिर से चलाएं और हमें यह नतीजा मिलता है. 🎉

ग्राफ़िक की सुविधा का स्टेटस
OpenGL:	चालू है
Vulkan:	चालू है
WebGL:	हार्डवेयर की स्पीड बढ़ गई, लेकिन उसकी परफ़ॉर्मेंस कम हो गई.
WebGL2:	हार्डवेयर की स्पीड बढ़ गई, लेकिन उसकी परफ़ॉर्मेंस कम हो गई.
वेबजीपीयू:	हार्डवेयर की स्पीड बढ़ गई, लेकिन उसकी परफ़ॉर्मेंस कम हो गई.

Chrome चलाते समय सही ड्राइवर और फ़्लैग का इस्तेमाल करने से, अब हमारे पास शानदार, नए बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले ब्राउज़र का इस्तेमाल करने वाला WebGPU और WebGL काम करता है.

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

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

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

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

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

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

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

खास जानकारी

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

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

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

नए हेडलेस Chrome और Puppeteer की मिली-जुली क्षमता का इस्तेमाल करके, ऐसे वर्कलोड को स्टैंडर्ड और बार-बार इस्तेमाल किए जा सकने वाले माहौल में टेस्ट किया जा सकता है. इससे यह पक्का किया जा सकेगा कि नतीजे एक जैसे और भरोसेमंद हैं.

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

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

अगर आपको यह जानकारी काम की लगी, तो LinkedIn, X (पहले इसका नाम Twitter था) या ऐसे किसी भी सोशल नेटवर्क का ज़िक्र करें जिसका इस्तेमाल आपने #WebAI हैशटैग का इस्तेमाल करके किया है. आपका कोई भी फ़ीडबैक पाकर हमें खुशी होगी, ताकि हम जान सकें कि भविष्य में इस तरह की और भी चीज़ें लिखी जाएंगी.

आने वाले समय में कोई भी अपडेट पाने के लिए, GitHub संग्रह में स्टार का निशान लगाएं.

स्वीकार हैं

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