ক্লায়েন্ট-সাইড এআই-এর জন্য কর্মক্ষমতা এবং UX উন্নত করুন

Maud Nalpas

গুরুত্বপূর্ণ: এই দস্তাবেজটি Chrome-এর পরীক্ষামূলক অন্তর্নির্মিত AI APIগুলিকে কভার করে না, যা ক্লায়েন্ট-সাইড AI-এর একটি বিশেষ উপশ্রেণী। এই APIগুলির সাথে, মডেলগুলি শুধুমাত্র একবার চাহিদা অনুযায়ী ডাউনলোড করা হয় এবং ব্রাউজারে সংরক্ষণ করা হয় যেকোন ওয়েব অ্যাপ্লিকেশন ব্যবহার করার জন্য৷ 2024 সালের সেপ্টেম্বর পর্যন্ত, এটি শুধুমাত্র প্রারম্ভিক প্রিভিউ প্রোগ্রাম অংশগ্রহণকারীদের জন্য Chrome-এ সমর্থিত।

যদিও ওয়েবে বেশিরভাগ AI বৈশিষ্ট্য সার্ভারের উপর নির্ভর করে, ক্লায়েন্ট-সাইড এআই সরাসরি ব্যবহারকারীর ব্রাউজারে চলে। এটি কম লেটেন্সি, কম সার্ভার-সাইড খরচ, কোন API কী প্রয়োজনীয়তা, ব্যবহারকারীর গোপনীয়তা বৃদ্ধি এবং অফলাইন অ্যাক্সেসের মতো সুবিধাগুলি অফার করে৷ আপনি ক্লায়েন্ট-সাইড AI প্রয়োগ করতে পারেন যা TensorFlow.js , Transformers.js , এবং MediaPipe GenAI এর মতো JavaScript লাইব্রেরিগুলির সাথে ব্রাউজার জুড়ে কাজ করে।

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

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

মডেল ডাউনলোড করার আগে

মাইন্ড লাইব্রেরি এবং মডেল সাইজ

ক্লায়েন্ট-সাইড এআই বাস্তবায়ন করতে আপনার একটি মডেল এবং সাধারণত একটি লাইব্রেরি প্রয়োজন। লাইব্রেরি বাছাই করার সময়, এর আকার মূল্যায়ন করুন যেমন আপনি অন্য কোনো টুলের মতো।

মডেলের আকারও গুরুত্বপূর্ণ। একটি AI মডেলের জন্য কী বড় বলে বিবেচিত হয় তা নির্ভর করে। 5MB একটি কার্যকর নিয়ম হতে পারে: এটি মিডিয়ান ওয়েব পৃষ্ঠার আকারের 75তম শতাংশও । একটি লাক্সার নম্বর 10MB হবে।

এখানে মডেলের আকার সম্পর্কে কিছু গুরুত্বপূর্ণ বিবেচনা রয়েছে:

• অনেক টাস্ক-নির্দিষ্ট AI মডেল সত্যিই ছোট হতে পারে । এশীয় ভাষায় নির্ভুল অক্ষর ভাঙার জন্য BudouX-এর মতো একটি মডেল, শুধুমাত্র 9.4KB GZipped। MediaPipe এর ভাষা সনাক্তকরণ মডেল 315KB।
• এমনকি দৃষ্টি মডেল যুক্তিসঙ্গত আকার হতে পারে . হ্যান্ডপোজ মডেল এবং সমস্ত সম্পর্কিত সম্পদ মোট 13.4MB। যদিও এটি বেশিরভাগ মিনিফাইড ফ্রন্টএন্ড প্যাকেজের তুলনায় অনেক বড়, এটি মিডিয়ান ওয়েব পৃষ্ঠার সাথে তুলনীয়, যা 2.2MB (ডেস্কটপে 2.6MB )।
• Gen AI মডেলগুলি ওয়েব সংস্থানগুলির জন্য প্রস্তাবিত আকারকে অতিক্রম করতে পারে ৷ DistilBERT , যাকে হয় খুব ছোট LLM বা একটি সাধারণ NLP মডেল (মতামত পরিবর্তিত) হিসাবে বিবেচনা করা হয়, এর ওজন 67MB। এমনকি ছোট LLM, যেমন Gemma 2B , 1.3GB তে পৌঁছতে পারে৷ এটি মিডিয়ান ওয়েব পেজের আকারের 100 গুণ বেশি।

দ্রষ্টব্য: বিশেষভাবে এলএলএম-এর জন্য, পড়ুন LLM আকারগুলি পড়ুন ।

আপনি আপনার ব্রাউজারের বিকাশকারী সরঞ্জামগুলির সাথে যে মডেলগুলি ব্যবহার করার পরিকল্পনা করছেন তার সঠিক ডাউনলোড আকার মূল্যায়ন করতে পারেন৷

Chrome DevTools নেটওয়ার্ক প্যানেলে, MediaPipe ভাষা সনাক্তকরণ মডেলের জন্য ডাউনলোডের আকার। ডেমো

Chrome DevTools নেটওয়ার্ক প্যানেলে, Gen AI মডেলগুলির জন্য ডাউনলোডের আকার: Gemma 2B (Small LLM), DistilBERT (Small NLP / Very small LLM)৷

মডেলের আকার অপ্টিমাইজ করুন

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

j0rd1smit দ্বারা ক্লায়েন্ট-সাইড এআই-ভিত্তিক ট্রান্সক্রিপশন ডেমোর জন্য মডেল নির্বাচক।

যদিও এই সমস্ত মডেল একই কাজ সম্পাদন করে, বিভিন্ন নির্ভুলতার সাথে, তাদের আকার ব্যাপকভাবে পরিবর্তিত হয়: 3MB থেকে 1.5GB পর্যন্ত।

মডেলটি চালাতে পারে কিনা তা পরীক্ষা করুন

সব ডিভাইস এআই মডেল চালাতে পারে না। এমনকি যে ডিভাইসগুলিতে পর্যাপ্ত হার্ডওয়্যার স্পেস রয়েছে সেগুলিও সংগ্রাম করতে পারে, যদি অন্যান্য ব্যয়বহুল প্রক্রিয়াগুলি চলমান থাকে বা মডেলটি ব্যবহারের সময় শুরু হয়।

দ্রষ্টব্য: আজ অবধি, আপনার ব্যবহারকারীর ডিভাইসে একটি মডেল চলতে পারে কিনা তা ডাউনলোড করার আগে জানার উপায় নেই৷ MediaPipe Gen AI এবং Transformers.js- এ একটি সমাধান নিয়ে আলোচনা চলছে। যেখানে এই সমাধান নিয়ে আলোচনা করা হয়েছে সেসব বিষয়ে আপনি আপভোট বা মন্তব্য করে সমর্থন দেখাতে পারেন।

একটি সমাধান উপলব্ধ না হওয়া পর্যন্ত, আপনি আজ যা করতে পারেন তা এখানে:

• WebGPU সমর্থন পরীক্ষা করুন । Transformers.js সংস্করণ 3 এবং MediaPipe সহ বেশ কয়েকটি ক্লায়েন্ট-সাইড এআই লাইব্রেরি WebGPU ব্যবহার করে। এই মুহুর্তে, WebGPU সমর্থিত না থাকলে এই লাইব্রেরিগুলির মধ্যে কিছু স্বয়ংক্রিয়ভাবে Wasm-এ ফিরে যায় না। আপনি যদি জানেন যে আপনার ক্লায়েন্ট-সাইড এআই লাইব্রেরির WebGPU-এর প্রয়োজন আছে তা যদি আপনি জানেন যে একটি WebGPU বৈশিষ্ট্য সনাক্তকরণ চেকের মধ্যে আপনার AI-সম্পর্কিত কোডটি সংযুক্ত করে আপনি এটিকে প্রশমিত করতে পারেন।
• কম শক্তিসম্পন্ন ডিভাইসগুলিকে বাতিল করুন । ডিভাইসের ক্ষমতা এবং চাপ অনুমান করতে Navigator.hardwareConcurrency , Navigator.deviceMemory এবং Compute Pressure API ব্যবহার করুন। এই APIগুলি সমস্ত ব্রাউজারে সমর্থিত নয় এবং ইচ্ছাকৃতভাবে আঙ্গুলের ছাপ আটকাতে ভুল , তবে তারা এখনও এমন ডিভাইসগুলিকে বাতিল করতে সাহায্য করতে পারে যা খুব কম শক্তিযুক্ত বলে মনে হয়৷

বড় ডাউনলোডের সংকেত

বড় মডেলের জন্য, ডাউনলোড করার আগে ব্যবহারকারীদের সতর্ক করুন। ডেস্কটপ ব্যবহারকারীরা মোবাইল ব্যবহারকারীদের তুলনায় বড় ডাউনলোডের সাথে ঠিক থাকার সম্ভাবনা বেশি। মোবাইল ডিভাইস শনাক্ত করতে, User-Agent Client Hints API (বা UA-CH অসমর্থিত হলে User-Agent স্ট্রিং) থেকে mobile ব্যবহার করুন।

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

বড় ডাউনলোড সীমিত করুন

• শুধুমাত্র যা প্রয়োজন তা ডাউনলোড করুন । বিশেষ করে যদি মডেলটি বড় হয়, AI বৈশিষ্ট্যগুলি ব্যবহার করা হবে এমন যুক্তিসঙ্গত নিশ্চিত হওয়ার পরেই এটি ডাউনলোড করুন। উদাহরণস্বরূপ, যদি আপনার কাছে টাইপ-আগে সাজেশন এআই বৈশিষ্ট্য থাকে, তবে ব্যবহারকারী টাইপিং বৈশিষ্ট্যগুলি ব্যবহার করা শুরু করলেই কেবল ডাউনলোড করুন৷
• প্রতিটি ভিজিটে এটি ডাউনলোড করা এড়াতে ক্যাশে API ব্যবহার করে ডিভাইসে মডেলটিকে স্পষ্টভাবে ক্যাশে করুন । শুধুমাত্র অন্তর্নিহিত HTTP ব্রাউজার ক্যাশে নির্ভর করবেন না।
• মডেল ডাউনলোড খণ্ড . fetch-in-chunks একটি বড় ডাউনলোডকে ছোট খণ্ডে বিভক্ত করে।

মডেল ডাউনলোড এবং প্রস্তুতি

ব্যবহারকারীকে ব্লক করবেন না

একটি মসৃণ ব্যবহারকারীর অভিজ্ঞতাকে অগ্রাধিকার দিন: AI মডেল এখনও পুরোপুরি লোড না হলেও মূল বৈশিষ্ট্যগুলিকে কাজ করার অনুমতি দিন৷

ক্লায়েন্ট-সাইড এআই বৈশিষ্ট্য এখনও প্রস্তুত না থাকলেও ব্যবহারকারীরা তাদের পর্যালোচনা পোস্ট করতে পারেন। @maudnals দ্বারা ডেমো।

অগ্রগতি নির্দেশ করুন

আপনি মডেল ডাউনলোড করার সাথে সাথে, অগ্রগতি সম্পূর্ণ এবং বাকি সময় নির্দেশ করুন।

• যদি মডেল ডাউনলোডগুলি আপনার ক্লায়েন্ট-সাইড এআই লাইব্রেরি দ্বারা পরিচালিত হয়, ব্যবহারকারীর কাছে এটি প্রদর্শন করতে ডাউনলোডের অগ্রগতি স্থিতি ব্যবহার করুন। এই বৈশিষ্ট্যটি উপলব্ধ না হলে, এটির অনুরোধ করার জন্য একটি সমস্যা খোলার কথা বিবেচনা করুন (বা এটিতে অবদান রাখুন!)।
• আপনি যদি আপনার নিজের কোডে মডেল ডাউনলোডগুলি পরিচালনা করেন, আপনি একটি লাইব্রেরি ব্যবহার করে খণ্ডে মডেলটি আনতে পারেন, যেমন fetch-in-chunks , এবং ব্যবহারকারীর কাছে ডাউনলোডের অগ্রগতি প্রদর্শন করুন৷
  • আরও পরামর্শের জন্য, অ্যানিমেটেড অগ্রগতি সূচকগুলির জন্য সর্বোত্তম অনুশীলন এবং দীর্ঘ অপেক্ষা এবং বাধাগুলির জন্য ডিজাইনিং দেখুন৷

মডেল ডাউনলোড অগ্রগতি প্রদর্শন. আনয়ন-ইন-খণ্ডের সাথে কাস্টম বাস্তবায়ন। @tomayac দ্বারা ডেমো ।

নেটওয়ার্ক বাধাগুলি সুন্দরভাবে পরিচালনা করুন

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

ফ্ল্যাকি কানেক্টিভিটি খণ্ডে ডাউনলোড করার আরেকটি কারণ।

দ্রষ্টব্য: ব্যাকগ্রাউন্ড ফেচ API ডাউনলোডগুলি পরিচালনা করার জন্য একটি পদ্ধতি প্রদান করে যা দীর্ঘ সময় নিতে পারে, এমনকি নেটওয়ার্ক বাধাগুলির সাথেও, কিন্তু এটি শুধুমাত্র Chrome এ সমর্থিত।

একজন ওয়েব কর্মীকে ব্যয়বহুল কাজগুলি অফলোড করুন

ব্যয়বহুল কাজ, যেমন ডাউনলোডের পর মডেল প্রস্তুতির ধাপগুলি, আপনার মূল থ্রেডকে ব্লক করতে পারে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা বিরক্তিকর হয়। এই কাজগুলিকে একজন ওয়েব ওয়ার্কারের কাছে নিয়ে যাওয়া সাহায্য করে৷

সতর্কতা: 2024 সালের সেপ্টেম্বর পর্যন্ত, Firefox-এ, WebGPU শুধুমাত্র কর্মীদের জন্য সমর্থিত হয় যখন একটি পতাকা চালু থাকে।

একটি ওয়েব কর্মীর উপর ভিত্তি করে একটি ডেমো এবং সম্পূর্ণ বাস্তবায়ন খুঁজুন:

• script.js
• worker.js

শীর্ষ: একজন ওয়েব কর্মীর সাথে। নীচে: কোন ওয়েব কর্মী নেই।

অনুমানের সময়

মডেলটি ডাউনলোড এবং প্রস্তুত হয়ে গেলে, আপনি অনুমান চালাতে পারেন। অনুমান গণনাগতভাবে ব্যয়বহুল হতে পারে।

মূল টার্ম: অনুমান মূলত মডেল চিন্তার সময়: এটি যখন মডেল একটি প্রদত্ত ইনপুট থেকে আউটপুট তৈরি করে। উদাহরণস্বরূপ, আপনি যদি আপনার মডেলটিকে একটি ব্যবহারকারী-লিখিত পণ্য পর্যালোচনা দেন, তাহলে অনুমানটি ঘটে যখন মডেলটি এমন পাঠ্য তৈরি করে যা ব্যবহারকারীর পর্যালোচনা সম্পূর্ণ করে বা পর্যালোচনার অনুভূতি বিশ্লেষণ করে।

একটি ওয়েব কর্মীর অনুমান সরান

যদি WebGL, WebGPU বা WebNN এর মাধ্যমে অনুমান করা হয় তবে এটি GPU এর উপর নির্ভর করে। এর মানে এটি একটি পৃথক প্রক্রিয়ায় ঘটে যা UI ব্লক করে না।

কিন্তু CPU-ভিত্তিক বাস্তবায়নের জন্য (যেমন Wasm, যা WebGPU-এর জন্য একটি ফলব্যাক হতে পারে, যদি WebGPU অসমর্থিত হয়), কোনো ওয়েব ওয়ার্কারের কাছে অনুমান সরানো আপনার পৃষ্ঠাটিকে প্রতিক্রিয়াশীল রাখে—যেমন মডেল প্রস্তুতির সময়।

আপনার বাস্তবায়ন সহজ হতে পারে যদি আপনার সমস্ত AI-সম্পর্কিত কোড (মডেল আনা, মডেল প্রস্তুতি, অনুমান) একই জায়গায় থাকে। সুতরাং, আপনি একটি ওয়েব কর্মী বেছে নিতে পারেন, GPU ব্যবহার হচ্ছে বা না হোক।

ত্রুটিগুলি পরিচালনা করুন

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

• অনুমান ত্রুটিগুলি পরিচালনা করুন । try / catch ব্লকে অনুমান সংযুক্ত করুন এবং সংশ্লিষ্ট রানটাইম ত্রুটিগুলি পরিচালনা করুন।
• WebGPU ত্রুটিগুলি পরিচালনা করুন , অপ্রত্যাশিত এবং GPUDevice.lost উভয়ই, যা তখন ঘটে যখন GPU আসলে রিসেট করা হয় কারণ ডিভাইসটি সংগ্রাম করে৷

অনুমানের অবস্থা নির্দেশ করুন

যদি অনুমান তাৎক্ষণিকভাবে মনে হয় তার চেয়ে বেশি সময় নেয়, ব্যবহারকারীকে সংকেত দিন যে মডেলটি ভাবছে। অপেক্ষা সহজ করতে অ্যানিমেশন ব্যবহার করুন এবং ব্যবহারকারীকে নিশ্চিত করুন যে অ্যাপ্লিকেশনটি উদ্দেশ্য অনুযায়ী কাজ করছে।

@maudnals এবং @argyleink দ্বারা ডেমো

অনুমান বাতিলযোগ্য করুন

ব্যবহারকারীকে ফ্লাইতে তাদের ক্যোয়ারী পরিমার্জন করার অনুমতি দিন, সিস্টেমের সম্পদ নষ্ট না করে একটি প্রতিক্রিয়া তৈরি করে যা ব্যবহারকারী কখনই দেখতে পাবে না।