সুপারচার্জ ওয়েব এআই মডেল টেস্টিং: ওয়েবজিপিইউ, ওয়েবজিএল এবং হেডলেস ক্রোম

Jason Mayes

François Beaufort

বড় খবর! আপনি একটি দুর্দান্ত ওয়েব এআই অ্যাপ্লিকেশন তৈরি করেছেন যা সরাসরি ব্যবহারকারীর ডিভাইসে মেশিন লার্নিং মডেল চালায়। এটি ক্লাউডের উপর নির্ভর না করে সম্পূর্ণভাবে ক্লায়েন্ট-সাইড ওয়েব ব্রাউজারে চলে। এই অন-ডিভাইস ডিজাইন ব্যবহারকারীর গোপনীয়তা বাড়ায়, কর্মক্ষমতা বাড়ায় এবং খরচ উল্লেখযোগ্যভাবে কমায়।

যাইহোক, একটি বাধা আছে. আপনার TensorFlow.js মডেল CPUs (WebAssembly) এবং আরও শক্তিশালী GPUs ( WebGL এবং WebGPU এর মাধ্যমে) উভয়েই কাজ করতে পারে। প্রশ্ন হল: কিভাবে আপনি নির্বাচিত হার্ডওয়্যারের সাথে ব্রাউজার টেস্টিংকে ধারাবাহিকভাবে স্বয়ংক্রিয় করতে পারেন?

বাস্তব-বিশ্ব ব্যবহারকারীদের তাদের ডিভাইসে ব্যবহার করার জন্য স্থাপনের আগে, আপনি পুনরাবৃত্তি করার এবং উন্নত করার সাথে সাথে মেশিন লার্নিং মডেলের কর্মক্ষমতা তুলনা করার জন্য ধারাবাহিকতা বজায় রাখা গুরুত্বপূর্ণ।

জিপিইউগুলির সাথে একটি সামঞ্জস্যপূর্ণ পরীক্ষার পরিবেশ সেট আপ করা প্রত্যাশার চেয়ে কঠিন হতে পারে। এই ব্লগ পোস্টে, আমরা যে সমস্যার মুখোমুখি হয়েছি এবং আমরা কীভাবে সেগুলি সমাধান করেছি তা শেয়ার করব, যাতে আপনি আপনার অ্যাপ্লিকেশনটির কার্যকারিতা উন্নত করতে পারেন৷

এটি শুধু ওয়েব এআই ডেভেলপারদের জন্য নয়! আপনি যদি ওয়েব গেমিং বা গ্রাফিক্স নিয়ে কাজ করেন তবে এই পোস্টটি আপনার জন্যও মূল্যবান।

আমাদের অটোমেশন টুলবক্সে কি আছে

আমরা যা ব্যবহার করছি তা এখানে:

• পরিবেশ : একটি NVIDIA T4 বা V100 GPU এর সাথে সংযুক্ত একটি Linux-ভিত্তিক Google Colab নোটবুক । আপনি অন্য ক্লাউড প্ল্যাটফর্ম ব্যবহার করতে পারেন, যেমন Google ক্লাউড (GCP), যদি পছন্দ করেন।
• ব্রাউজার : ক্রোম WebGPU সমর্থন করে, WebGL-এর একটি শক্তিশালী উত্তরসূরি , যা ওয়েবে আধুনিক GPU API-এর অগ্রগতি নিয়ে আসে।
• অটোমেশন : Puppeteer হল একটি Node.js লাইব্রেরি যা আপনাকে JavaScript দিয়ে প্রোগ্রাম্যাটিকভাবে ব্রাউজার নিয়ন্ত্রণ করতে দেয়। Puppeteer-এর সাহায্যে, আমরা হেডলেস মোডে ক্রোমকে স্বয়ংক্রিয় করতে পারি, যার মানে ব্রাউজারটি সার্ভারে দৃশ্যমান ইন্টারফেস ছাড়াই চলে। আমরা উন্নত নতুন হেডলেস মোড ব্যবহার করছি, উত্তরাধিকার ফর্ম নয়৷

টিপ : আমাদের ডকুমেন্টেশনে একটি ধাপে ধাপে নির্দেশিকা পাওয়া যায়, তাই আপনি নিজেই সম্পূর্ণ সেটআপ চেষ্টা করে দেখতে পারেন।

পরিবেশ যাচাই করুন

ক্রোমে হার্ডওয়্যার ত্বরণ চালু আছে কিনা তা পরীক্ষা করার সর্বোত্তম উপায় হল ঠিকানা বারে 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:	অক্ষম
ভলকান:	অক্ষম
ওয়েবজিএল:	শুধুমাত্র সফ্টওয়্যার, হার্ডওয়্যার ত্বরণ অনুপলব্ধ৷
WebGL2:	শুধুমাত্র সফ্টওয়্যার, হার্ডওয়্যার ত্বরণ অনুপলব্ধ৷
WebGPU:	অক্ষম
সমস্যা সনাক্ত করা হয়েছে. WebGPU ব্লকলিস্ট বা কমান্ড লাইনের মাধ্যমে নিষ্ক্রিয় করা হয়েছে।

দুর্দান্ত শুরু নয়। এটা মোটামুটি স্পষ্ট যে হার্ডওয়্যার সনাক্তকরণ ব্যর্থ হয়েছে। WebGL, WebGL2, এবং WebGPU মূলত অক্ষম বা শুধুমাত্র সফ্টওয়্যার । এই সমস্যায় আমরা একা নই - অফিসিয়াল ক্রোম সাপোর্ট চ্যানেল ( 1 ), ( 2 ) সহ অনুরূপ পরিস্থিতিতে থাকা লোকেদের অনলাইনে অসংখ্য আলোচনা রয়েছে৷

WebGPU এবং WebGL সমর্থন সক্ষম করুন৷

ডিফল্টরূপে, হেডলেস ক্রোম GPU অক্ষম করে । লিনাক্সে এটি সক্ষম করতে, হেডলেস ক্রোম চালু করার সময় নিম্নলিখিত সমস্ত পতাকা প্রয়োগ করুন:

• --no-sandbox পতাকা Chrome এর নিরাপত্তা স্যান্ডবক্সকে নিষ্ক্রিয় করে, যা ব্রাউজার প্রক্রিয়াটিকে বাকি সিস্টেম থেকে বিচ্ছিন্ন করে। এই স্যান্ডবক্স ছাড়া Chrome রুট হিসেবে চালানো সমর্থিত নয়।
• --headless=new পতাকা কোনো দৃশ্যমান UI ছাড়াই নতুন এবং উন্নত হেডলেস মোড সহ Chrome চালায়।
• --use-angle=vulkan ফ্ল্যাগ ক্রোমকে ANGLE এর জন্য Vulkan ব্যাকএন্ড ব্যবহার করতে বলে, যা OpenGL ES 2/3 কলগুলিকে Vulkan API কলে অনুবাদ করে৷
• --enable-features=Vulkan পতাকা ক্রোমে কম্পোজিটিং এবং রাস্টারাইজেশনের জন্য ভলকান গ্রাফিক্স ব্যাকএন্ড সক্ষম করে।
• --disable-vulkan-surface পতাকা VK_KHR_surface ভলকান ইনস্ট্যান্স এক্সটেনশন নিষ্ক্রিয় করে। একটি সোয়াপচেন ব্যবহার করার পরিবর্তে, স্ক্রিনে বর্তমান রেন্ডার ফলাফলের জন্য বিট ব্লিট ব্যবহার করা হয়।
• --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 সমস্যা সনাক্ত করা যায় না এবং মান অক্ষম থেকে শুধুমাত্র সফ্টওয়্যারে পরিবর্তিত হয়।

গ্রাফিক্স বৈশিষ্ট্য অবস্থা
OpenGL:	অক্ষম
ভলকান:	অক্ষম
ওয়েবজিএল:	শুধুমাত্র সফ্টওয়্যার, হার্ডওয়্যার ত্বরণ অনুপলব্ধ৷
WebGL2:	শুধুমাত্র সফ্টওয়্যার, হার্ডওয়্যার ত্বরণ অনুপলব্ধ৷
WebGPU:	শুধুমাত্র সফ্টওয়্যার, হার্ডওয়্যার ত্বরণ অনুপলব্ধ৷

যাইহোক, হার্ডওয়্যার ত্বরণ এখনও অনুপলব্ধ, NVIDIA T4 GPU সনাক্ত করা হয়নি।

সঠিক GPU ড্রাইভার ইনস্টল করুন

আমরা Chrome টিমের কিছু GPU বিশেষজ্ঞের সাথে chrome://gpu এর আউটপুট আরও ঘনিষ্ঠভাবে তদন্ত করেছি৷ আমরা Linux Colab ইন্সট্যান্সে ইনস্টল করা ডিফল্ট ড্রাইভারের সমস্যা খুঁজে পেয়েছি, যার ফলে Vulkan-এ সমস্যা হয়েছে, যার ফলে Chrome নিম্নলিখিত আউটপুটে দেখানো GL_RENDERER স্তরে NVIDIA T4 GPU শনাক্ত করতে পারেনি। এটি হেডলেস ক্রোমে সমস্যা সৃষ্টি করে।

ডিফল্ট আউটপুট NVIDIA T4 GPU সনাক্ত করে না।

ড্রাইভার তথ্য
GL_RENDERER	ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader ড্রাইভার-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:	সক্রিয়
ভলকান:	সক্রিয়
ওয়েবজিএল:	হার্ডওয়্যার ত্বরান্বিত কিন্তু কম কর্মক্ষমতা এ.
WebGL2:	হার্ডওয়্যার ত্বরান্বিত কিন্তু কম কর্মক্ষমতা এ.
WebGPU:	হার্ডওয়্যার ত্বরান্বিত কিন্তু কম কর্মক্ষমতা এ.

Chrome চালানোর সময় সঠিক ড্রাইভার এবং ফ্ল্যাগ ব্যবহার করে, আমাদের কাছে এখন চকচকে, নতুন হেডলেস মোড ব্যবহার করে WebGPU এবং WebGL সমর্থন আছে।

পর্দার আড়ালে: আমাদের দলের তদন্ত

অনেক গবেষণার পরে, আমরা Google Colab-এ কার্যকর করার জন্য প্রয়োজনীয় পরিবেশের জন্য কাজের পদ্ধতি খুঁজে পাইনি, যদিও কিছু আশাব্যঞ্জক পোস্ট ছিল যা অন্যান্য পরিবেশে কাজ করেছিল, যা আশাব্যঞ্জক ছিল। শেষ পর্যন্ত, আমরা Colab NVIDIA T4 পরিবেশে তাদের সাফল্যের প্রতিলিপি করতে পারিনি, কারণ আমাদের ২টি মূল সমস্যা ছিল:

1. পতাকার কিছু সংমিশ্রণ GPU সনাক্তকরণের অনুমতি দেয়, কিন্তু আপনাকে আসলে GPU ব্যবহার করার অনুমতি দেয় না।
2. তৃতীয় পক্ষের দ্বারা কার্যকরী সমাধানের উদাহরণগুলি পুরানো Chrome হেডলেস সংস্করণ ব্যবহার করেছে, যা কিছু সময়ে নতুন সংস্করণের পক্ষে অবমূল্যায়িত হবে। আমাদের এমন একটি সমাধান দরকার যা নতুন হেডলেস ক্রোমের সাথে কাজ করে যাতে ভবিষ্যতে আরও ভাল প্রমাণিত হয়।

আমরা ইমেজ শনাক্তকরণের জন্য একটি উদাহরণ TensorFlow.js ওয়েব পৃষ্ঠা চালিয়ে GPU-এর কম ব্যবহার নিশ্চিত করেছি, যার মাধ্যমে আমরা পোশাকের নমুনাগুলি চিনতে একটি মডেলকে প্রশিক্ষণ দিয়েছি (যেমন মেশিন লার্নিংয়ের "হ্যালো ওয়ার্ল্ড" এর মতো)।

একটি নিয়মিত মেশিনে, 50টি প্রশিক্ষণ চক্র (এপোচ নামে পরিচিত) প্রতিটি 1 সেকেন্ডের কম সময়ে চালানো উচিত। হেডলেস ক্রোমকে তার ডিফল্ট অবস্থায় কল করলে, আমরা জাভাস্ক্রিপ্ট কনসোল আউটপুটটি Node.js সার্ভার-সাইড কমান্ড লাইনে লগ করতে পারি যাতে এই প্রশিক্ষণ চক্রগুলি আসলে কতটা দ্রুত নিচ্ছে।

প্রত্যাশিত হিসাবে, প্রতিটি প্রশিক্ষণ যুগ প্রত্যাশিত (কয়েক সেকেন্ড) থেকে অনেক বেশি সময় নিয়েছিল, যা সুপারিশ করে যে ক্রোম GPU ব্যবহার করার পরিবর্তে সাধারণ পুরানো JS CPU এক্সিকিউশনে ফিরে এসেছে:

চিত্র 1 : রিয়েল-টাইম ক্যাপচার দেখায় যে প্রতিটি প্রশিক্ষণ যুগ কার্যকর হতে কত সময় নেয় (সেকেন্ড)।

ড্রাইভারগুলি ঠিক করার পরে এবং হেডলেস ক্রোমের জন্য পতাকার সঠিক সংমিশ্রণ ব্যবহার করার পরে, TensorFlow.js প্রশিক্ষণের উদাহরণ পুনরায় চালানোর ফলে অনেক দ্রুত প্রশিক্ষণ যুগ আসে৷

চিত্র 2 : রিয়েল-টাইম ক্যাপচার যুগের গতি বাড়াচ্ছে।

সারসংক্ষেপ

2017 সালে তৈরি হওয়ার পর থেকে ওয়েব AI দ্রুতগতিতে বৃদ্ধি পেয়েছে। WebGPU, WebGL এবং WebAssembly এর মতো ব্রাউজার প্রযুক্তির সাহায্যে, একটি মেশিন লার্নিং মডেলের গাণিতিক ক্রিয়াকলাপগুলি ক্লায়েন্টের পক্ষে আরও ত্বরান্বিত করা যেতে পারে।

2023 সাল পর্যন্ত TensorFlow.js এবং MediaPipe ওয়েব মডেল এবং লাইব্রেরির 1 বিলিয়ন ডাউনলোড অতিক্রম করেছে—একটি ঐতিহাসিক মাইলফলক এবং কীভাবে ওয়েব ডেভেলপার এবং ইঞ্জিনিয়াররা তাদের পরবর্তী প্রজন্মের ওয়েব অ্যাপে AI গ্রহণ করার জন্য কিছু সত্যিকারের অবিশ্বাস্য সমাধান করতে চলেছেন তার একটি চিহ্ন।

ব্যবহারে মহান সাফল্যের সাথে মহান দায়িত্ব আসে। প্রোডাকশন সিস্টেমে ব্যবহারের এই স্তরে, ক্লায়েন্ট-সাইড, ব্রাউজার-ভিত্তিক এআই মডেলগুলিকে সত্যিকারের ব্রাউজার পরিবেশে পরীক্ষা করার প্রয়োজন দেখা দেয়, পাশাপাশি মাপযোগ্য, স্বয়ংক্রিয় এবং একটি পরিচিত প্রমিত হার্ডওয়্যার সেটআপের মধ্যে।

যখন আমরা বলি "সত্য ব্রাউজার এনভায়রনমেন্ট," আমরা বলতে চাচ্ছি যে এটি একটি সফ্টওয়্যার অনুকরণের বিপরীতে হার্ডওয়্যার সমর্থন সহ একটি বাস্তব ক্রোম ব্রাউজার৷

নতুন হেডলেস ক্রোম এবং পাপেটিয়ারের সম্মিলিত শক্তিকে কাজে লাগানোর মাধ্যমে, আপনি সুসংগত এবং নির্ভরযোগ্য ফলাফল নিশ্চিত করে একটি মানসম্মত এবং প্রতিলিপিযোগ্য পরিবেশে এই ধরনের কাজের চাপকে আত্মবিশ্বাসের সাথে পরীক্ষা করতে পারেন।

শেষ করি

আমাদের ডকুমেন্টেশনে একটি ধাপে ধাপে নির্দেশিকা পাওয়া যায়, তাই আপনি নিজেই সম্পূর্ণ সেটআপ চেষ্টা করে দেখতে পারেন।

আপনি যদি এটি দরকারী বলে মনে করেন, তাহলে LinkedIn , X (আগের টুইটার) বা আপনি #WebAI হ্যাশট্যাগ ব্যবহার করে যেকোন সামাজিক নেটওয়ার্ক ব্যবহার করুন। আপনার কোন প্রতিক্রিয়া শুনতে ভাল হবে তাই আমরা ভবিষ্যতে এই ধরনের আরও জিনিস লিখতে জানি।

ভবিষ্যতের যেকোনো আপডেট পেতে Github রেপোতে একটি তারকা যোগ করুন ।

স্বীকৃতি

ক্রোম টিমের প্রত্যেককে অনেক ধন্যবাদ যারা ড্রাইভার এবং ওয়েবজিপিইউ সমস্যাগুলিকে ডিবাগ করতে সাহায্য করেছেন যা আমরা এই সমাধানে সম্মুখীন হয়েছি, বিশেষ ধন্যবাদ জেসেলিন ইয়েন এবং আলেকজান্দ্রা হোয়াইটকে এই ব্লগ পোস্টে সাহায্য করার জন্য। ইউলি নোভিকভ, আন্দ্রে কোস্যাকভ এবং অ্যালেক্স রুডেনকোকে ধন্যবাদ যারা চূড়ান্ত, কার্যকরী সমাধান তৈরিতে সহায়ক ছিলেন।