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

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

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

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

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

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

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

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

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

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome ब्राउज़र, डिफ़ॉल्ट रूप से जीपीयू को बंद करता है. इसे Linux पर चालू करने के लिए, हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) लॉन्च करते समय, यहां दिए गए सभी फ़्लैग लागू करें 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://gpu के आउटपुट की बारीकी से जांच की Chrome टीम पर. हमें Linux Colab की वजह से, Vulkan के साथ समस्याएं होती हैं. इसकी वजह से Chrome, GL_RENDERER लेवल पर NVIDIA T4 जीपीयू का ऐक्सेस, जैसा कि नीचे दिए गए आउटपुट में दिखाया गया है. यह बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome से समस्याएं हो सकती हैं.

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

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

ड्राइवर इंस्टॉल होने के बाद, अपडेट किया गया आउटपुट.
ड्राइवर की जानकारी
GL_RENDERER ANGLE (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: चालू है
वल्कन: चालू है
WebGL: हार्डवेयर पर तेज़ी से काम किया गया, लेकिन उसकी परफ़ॉर्मेंस कम थी.
WebGL2: हार्डवेयर पर तेज़ी से काम किया गया, लेकिन उसकी परफ़ॉर्मेंस कम थी.
WebGPU: हार्डवेयर पर तेज़ी से काम किया गया, लेकिन उसकी परफ़ॉर्मेंस कम थी.

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

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

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

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

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

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

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

ट्रेनिंग के समय के हिसाब से, समय के साथ-साथ कुछ और समय लगता है.
पहली इमेज: रीयल-टाइम कैप्चर करके दिखाया गया है कि ट्रेनिंग के हर एपिसोड को लागू होने में कितना समय लगा (सेकंड में).

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

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

खास जानकारी

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

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

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

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

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

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

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

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

स्वीकार की गई

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