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

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

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

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

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

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

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

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

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

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

यह देखने का सबसे अच्छा तरीका है कि Chrome में हार्डवेयर से तेज़ी लाने की सुविधा चालू है या नहीं पता बार में chrome://gpu लिखें. आप प्रोग्राम बनाकर Puppeteer के साथ वैसा ही परफ़ॉर्म करें console.log की मदद से रिपोर्ट को मैन्युअल तरीके से देखने के लिए, पूरी रिपोर्ट को 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: बंद है
वल्कन: बंद है
WebGL: सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
WebGL2: सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
WebGPU: बंद है

समस्याओं का पता चला.
WebGPU को ब्लॉकलिस्ट या कमांड लाइन के ज़रिए बंद कर दिया गया है.

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

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

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

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

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

/* 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: बंद है
वल्कन: बंद है
WebGL: सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
WebGL2: सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.
WebGPU: सिर्फ़ सॉफ़्टवेयर, हार्डवेयर से तेज़ी लाने की सुविधा उपलब्ध नहीं है.

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

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

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

डिफ़ॉल्ट आउटपुट में, NVIDIA T4 जीपीयू का पता नहीं चलता.
ड्राइवर की जानकारी
GL_RENDERER ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver-5.0.0)

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

ड्राइवर इंस्टॉल होने के बाद, अपडेट किया गया आउटपुट.
ड्राइवर की जानकारी
GL_RENDERER ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

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

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

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

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

ग्राफ़िक सुविधा की स्थिति
OpenGL: चालू है
वल्कन: चालू है
WebGL: हार्डवेयर पर तेज़ी से काम किया गया, लेकिन उसकी परफ़ॉर्मेंस कम थी.
WebGL2: हार्डवेयर पर तेज़ी से काम किया गया, लेकिन उसकी परफ़ॉर्मेंस कम थी.
WebGPU: हार्डवेयर से तेज़ी लाने की सुविधा चालू है, लेकिन परफ़ॉर्मेंस में कमी आई है.

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

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

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

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

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

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

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

ट्रेनिंग के एपिसोड धीमी रफ़्तार से आगे बढ़ते हैं.
पहली इमेज: रीयल-टाइम कैप्चर करके दिखाया गया है कि ट्रेनिंग के हर एपिसोड को लागू होने में कितना समय लगा (सेकंड में).

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

एपिसोड की रफ़्तार बढ़ गई है..
दूसरी इमेज: रीयल-टाइम कैप्चर, जिसमें एपिसोड की स्पीड को दिखाया गया है.

खास जानकारी

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

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

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

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले नए Chrome और Puppeteer की बेहतरीन सुविधाओं का इस्तेमाल करके, इस तरह के वर्कलोड को स्टैंडर्ड तरीक़े से टेस्ट किया जा सकता है. ताकि भरोसेमंद और एक जैसा नतीजे मिल सकें.

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

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

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

GitHub रेपो में स्टार जोड़ना ताकि आपको आगे भी अपडेट मिल सकें.

धन्यवाद

Chrome टीम के उन सभी लोगों को बहुत-बहुत धन्यवाद जिन्होंने ड्राइवर को डीबग करने में सहायता की और इस समाधान में हमें मिली WebGPU की खास समस्याओं के लिए, जेसलिन येन और शब्दों की दुनिया से जुड़े कामों में मदद करने के लिए एलेक्ज़ेंडर व्हाइट इस ब्लॉग पोस्ट में. Yuly Novikov, Andrey Kosyakov, और Alex Rudenko को धन्यवाद, जिन्होंने इस समस्या का सही समाधान ढूंढने में मदद की.