যদিও ওয়েবে বেশিরভাগ 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 গুণ বেশি।
আপনি আপনার ব্রাউজারের বিকাশকারী সরঞ্জামগুলির সাথে যে মডেলগুলি ব্যবহার করার পরিকল্পনা করছেন তার সঠিক ডাউনলোড আকার মূল্যায়ন করতে পারেন৷
মডেলের আকার অপ্টিমাইজ করুন
- মডেলের গুণমান এবং ডাউনলোডের আকার তুলনা করুন । একটি ছোট মডেলের আপনার ব্যবহারের ক্ষেত্রে যথেষ্ট নির্ভুলতা থাকতে পারে, যদিও অনেক ছোট। পর্যাপ্ত নির্ভুলতা বজায় রেখে মডেলের আকার উল্লেখযোগ্যভাবে হ্রাস করার জন্য ফাইন টিউনিং এবং মডেল সঙ্কুচিত করার কৌশল বিদ্যমান।
- সম্ভব হলে বিশেষ মডেল বাছুন । একটি নির্দিষ্ট কাজের জন্য তৈরি করা মডেলগুলি ছোট হতে থাকে। উদাহরণস্বরূপ, আপনি যদি সেন্টিমেন্ট বা বিষাক্ততা বিশ্লেষণের মতো নির্দিষ্ট কাজগুলি করতে চান, তাহলে জেনেরিক এলএলএম-এর পরিবর্তে এই কাজগুলিতে বিশেষায়িত মডেলগুলি ব্যবহার করুন৷
যদিও এই সমস্ত মডেল একই কাজ সম্পাদন করে, বিভিন্ন নির্ভুলতার সাথে, তাদের আকার ব্যাপকভাবে পরিবর্তিত হয়: 3MB থেকে 1.5GB পর্যন্ত।
মডেলটি চালাতে পারে কিনা তা পরীক্ষা করুন
সব ডিভাইস এআই মডেল চালাতে পারে না। এমনকি যে ডিভাইসগুলিতে পর্যাপ্ত হার্ডওয়্যার স্পেস রয়েছে সেগুলিও সংগ্রাম করতে পারে, যদি অন্যান্য ব্যয়বহুল প্রক্রিয়াগুলি চলমান থাকে বা মডেলটি ব্যবহারের সময় শুরু হয়।
একটি সমাধান উপলব্ধ না হওয়া পর্যন্ত, আপনি আজ যা করতে পারেন তা এখানে:
- 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 ব্যবহার করুন।
বড় ডাউনলোড সীমিত করুন
- শুধুমাত্র যা প্রয়োজন তা ডাউনলোড করুন । বিশেষ করে যদি মডেলটি বড় হয়, AI বৈশিষ্ট্যগুলি ব্যবহার করা হবে এমন যুক্তিসঙ্গত নিশ্চিত হওয়ার পরেই এটি ডাউনলোড করুন। উদাহরণস্বরূপ, যদি আপনার কাছে টাইপ-আগে সাজেশন এআই বৈশিষ্ট্য থাকে, তবে ব্যবহারকারী টাইপিং বৈশিষ্ট্যগুলি ব্যবহার করা শুরু করলেই কেবল ডাউনলোড করুন৷
- প্রতিটি ভিজিটে এটি ডাউনলোড করা এড়াতে ক্যাশে API ব্যবহার করে ডিভাইসে মডেলটিকে স্পষ্টভাবে ক্যাশে করুন । শুধুমাত্র অন্তর্নিহিত HTTP ব্রাউজার ক্যাশে নির্ভর করবেন না।
- মডেল ডাউনলোড খণ্ড . fetch-in-chunks একটি বড় ডাউনলোডকে ছোট খণ্ডে বিভক্ত করে।
মডেল ডাউনলোড এবং প্রস্তুতি
ব্যবহারকারীকে ব্লক করবেন না
একটি মসৃণ ব্যবহারকারীর অভিজ্ঞতাকে অগ্রাধিকার দিন: AI মডেল এখনও পুরোপুরি লোড না হলেও মূল বৈশিষ্ট্যগুলিকে কাজ করার অনুমতি দিন৷
অগ্রগতি নির্দেশ করুন
আপনি মডেল ডাউনলোড করার সাথে সাথে, অগ্রগতি সম্পূর্ণ এবং বাকি সময় নির্দেশ করুন।
- যদি মডেল ডাউনলোডগুলি আপনার ক্লায়েন্ট-সাইড এআই লাইব্রেরি দ্বারা পরিচালিত হয়, ব্যবহারকারীর কাছে এটি প্রদর্শন করতে ডাউনলোডের অগ্রগতি স্থিতি ব্যবহার করুন। এই বৈশিষ্ট্যটি উপলব্ধ না হলে, এটির অনুরোধ করার জন্য একটি সমস্যা খোলার কথা বিবেচনা করুন (বা এটিতে অবদান রাখুন!)।
- আপনি যদি আপনার নিজের কোডে মডেল ডাউনলোডগুলি পরিচালনা করেন, আপনি একটি লাইব্রেরি ব্যবহার করে খণ্ডে মডেলটি আনতে পারেন, যেমন fetch-in-chunks , এবং ব্যবহারকারীর কাছে ডাউনলোডের অগ্রগতি প্রদর্শন করুন৷
- আরও পরামর্শের জন্য, অ্যানিমেটেড অগ্রগতি সূচকগুলির জন্য সর্বোত্তম অনুশীলন এবং দীর্ঘ অপেক্ষা এবং বাধাগুলির জন্য ডিজাইনিং দেখুন৷
নেটওয়ার্ক বাধাগুলি সুন্দরভাবে পরিচালনা করুন
মডেল ডাউনলোডগুলি তাদের আকারের উপর নির্ভর করে বিভিন্ন পরিমাণে সময় নিতে পারে৷ ব্যবহারকারী অফলাইনে গেলে কীভাবে নেটওয়ার্ক বাধাগুলি পরিচালনা করবেন তা বিবেচনা করুন৷ যখন সম্ভব, একটি ভাঙা সংযোগ ব্যবহারকারীকে জানান, এবং সংযোগ পুনরুদ্ধার করা হলে ডাউনলোড চালিয়ে যান।
ফ্ল্যাকি কানেক্টিভিটি খণ্ডে ডাউনলোড করার আরেকটি কারণ।
একজন ওয়েব কর্মীকে ব্যয়বহুল কাজগুলি অফলোড করুন
ব্যয়বহুল কাজ, যেমন ডাউনলোডের পর মডেল প্রস্তুতির ধাপগুলি, আপনার মূল থ্রেডকে ব্লক করতে পারে, যার ফলে ব্যবহারকারীর অভিজ্ঞতা বিরক্তিকর হয়। এই কাজগুলিকে একজন ওয়েব ওয়ার্কারের কাছে নিয়ে যাওয়া সাহায্য করে৷
একটি ওয়েব কর্মীর উপর ভিত্তি করে একটি ডেমো এবং সম্পূর্ণ বাস্তবায়ন খুঁজুন:
অনুমানের সময়
মডেলটি ডাউনলোড এবং প্রস্তুত হয়ে গেলে, আপনি অনুমান চালাতে পারেন। অনুমান গণনাগতভাবে ব্যয়বহুল হতে পারে।
একটি ওয়েব কর্মীর অনুমান সরান
যদি WebGL, WebGPU বা WebNN এর মাধ্যমে অনুমান করা হয় তবে এটি GPU এর উপর নির্ভর করে। এর মানে এটি একটি পৃথক প্রক্রিয়ায় ঘটে যা UI ব্লক করে না।
কিন্তু CPU-ভিত্তিক বাস্তবায়নের জন্য (যেমন Wasm, যা WebGPU-এর জন্য একটি ফলব্যাক হতে পারে, যদি WebGPU অসমর্থিত হয়), কোনো ওয়েব ওয়ার্কারের কাছে অনুমান সরানো আপনার পৃষ্ঠাটিকে প্রতিক্রিয়াশীল রাখে—যেমন মডেল প্রস্তুতির সময়।
আপনার বাস্তবায়ন সহজ হতে পারে যদি আপনার সমস্ত AI-সম্পর্কিত কোড (মডেল আনা, মডেল প্রস্তুতি, অনুমান) একই জায়গায় থাকে। সুতরাং, আপনি একটি ওয়েব কর্মী বেছে নিতে পারেন, GPU ব্যবহার হচ্ছে বা না হোক।
ত্রুটিগুলি পরিচালনা করুন
যদিও আপনি পরীক্ষা করেছেন যে মডেলটি ডিভাইসে চালানো উচিত, ব্যবহারকারী অন্য একটি প্রক্রিয়া শুরু করতে পারে যা পরবর্তীতে ব্যাপকভাবে সম্পদ গ্রহণ করে। এটি প্রশমিত করতে:
- অনুমান ত্রুটিগুলি পরিচালনা করুন ।
try/catchব্লকে অনুমান সংযুক্ত করুন এবং সংশ্লিষ্ট রানটাইম ত্রুটিগুলি পরিচালনা করুন। - WebGPU ত্রুটিগুলি পরিচালনা করুন , অপ্রত্যাশিত এবং GPUDevice.lost উভয়ই, যা তখন ঘটে যখন GPU আসলে রিসেট করা হয় কারণ ডিভাইসটি সংগ্রাম করে৷
অনুমানের অবস্থা নির্দেশ করুন
যদি অনুমান তাৎক্ষণিকভাবে মনে হয় তার চেয়ে বেশি সময় নেয়, ব্যবহারকারীকে সংকেত দিন যে মডেলটি ভাবছে। অপেক্ষা সহজ করতে অ্যানিমেশন ব্যবহার করুন এবং ব্যবহারকারীকে নিশ্চিত করুন যে অ্যাপ্লিকেশনটি উদ্দেশ্য অনুযায়ী কাজ করছে।
অনুমান বাতিলযোগ্য করুন
ব্যবহারকারীকে ফ্লাইতে তাদের ক্যোয়ারী পরিমার্জন করার অনুমতি দিন, সিস্টেমের সম্পদ নষ্ট না করে একটি প্রতিক্রিয়া তৈরি করে যা ব্যবহারকারী কখনই দেখতে পাবে না।