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

মড নলপাস
Maud Nalpas

যদিও ওয়েবে বেশিরভাগ 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 গুণ বেশি।

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

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

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

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

যদিও এই সমস্ত মডেল একই কাজ সম্পাদন করে, বিভিন্ন নির্ভুলতার সাথে, তাদের আকার ব্যাপকভাবে পরিবর্তিত হয়: 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 মডেল এখনও পুরোপুরি লোড না হলেও মূল বৈশিষ্ট্যগুলিকে কাজ করার অনুমতি দিন৷

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

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

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

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

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

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

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

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

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

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

Chrome DevTools-এ পারফরম্যান্স ট্রেস।
শীর্ষ: একজন ওয়েব কর্মীর সাথে। নীচে: কোন ওয়েব কর্মী নেই।

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

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

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

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

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

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

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

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

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

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

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

অনুমানের সময় অ্যানিমেশনের উদাহরণ।
@maudnals এবং @argyleink দ্বারা ডেমো

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

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

,

মড নলপাস
Maud Nalpas

যদিও ওয়েবে বেশিরভাগ 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 গুণ বেশি।

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

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

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

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

যদিও এই সমস্ত মডেল একই কাজ সম্পাদন করে, বিভিন্ন নির্ভুলতার সাথে, তাদের আকার ব্যাপকভাবে পরিবর্তিত হয়: 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 মডেল এখনও পুরোপুরি লোড না হলেও মূল বৈশিষ্ট্যগুলিকে কাজ করার অনুমতি দিন৷

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

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

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

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

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

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

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

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

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

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

Chrome DevTools-এ পারফরম্যান্স ট্রেস।
শীর্ষ: একজন ওয়েব কর্মীর সাথে। নীচে: কোন ওয়েব কর্মী নেই।

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

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

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

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

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

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

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

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

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

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

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

অনুমানের সময় অ্যানিমেশনের উদাহরণ।
@maudnals এবং @argyleink দ্বারা ডেমো

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

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

,

মড নলপাস
Maud Nalpas

যদিও ওয়েবে বেশিরভাগ 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 গুণ বেশি।

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

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

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

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

যদিও এই সমস্ত মডেল একই কাজ সম্পাদন করে, বিভিন্ন নির্ভুলতার সাথে, তাদের আকার ব্যাপকভাবে পরিবর্তিত হয়: 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 মডেল এখনও পুরোপুরি লোড না হলেও মূল বৈশিষ্ট্যগুলিকে কাজ করার অনুমতি দিন৷

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

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

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

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

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

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

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

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

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

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

Chrome DevTools-এ পারফরম্যান্স ট্রেস।
শীর্ষ: একজন ওয়েব কর্মীর সাথে। নীচে: কোন ওয়েব কর্মী নেই।

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

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

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

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

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

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

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

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

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

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

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

অনুমানের সময় অ্যানিমেশনের উদাহরণ।
@maudnals এবং @argyleink দ্বারা ডেমো

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

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

,

মড নলপাস
Maud Nalpas

যদিও ওয়েবে বেশিরভাগ 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 গুণ বেশি।

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

ক্রোম ডিভটুলস নেটওয়ার্ক প্যানেলে মিডিয়াপাইপ ভাষা সনাক্তকরণ মডেলের জন্য ডাউনলোড আকার। ডেমো
ক্রোম ডিভটুলস নেটওয়ার্ক প্যানেলে, জেনার এআই মডেলগুলির জন্য ডাউনলোড আকার: জেমমা 2 বি (ছোট এলএলএম), ডিস্টিলবার্ট (ছোট এনএলপি / খুব ছোট এলএলএম)।

মডেল আকার অনুকূলিত করুন

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

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

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

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

কোনও সমাধান পাওয়া না হওয়া পর্যন্ত আপনি আজ যা করতে পারেন তা এখানে:

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

বড় ডাউনলোডগুলি সংকেত

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

বড় ডাউনলোডগুলি সীমাবদ্ধ করুন

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

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

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

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

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

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

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

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

নেটওয়ার্ক বাধাগুলি নিখুঁতভাবে পরিচালনা করুন

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

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

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

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

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

ক্রোম ডেভটুলগুলিতে পারফরম্যান্স ট্রেস।
শীর্ষ: একটি ওয়েব কর্মী সঙ্গে। নীচে: কোনও ওয়েব কর্মী নেই।

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

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

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

যদি ওয়েবজিএল, ওয়েবজিপিইউ বা ওয়েবএনএন এর মাধ্যমে যদি অনুমান ঘটে তবে এটি জিপিইউর উপর নির্ভর করে। এর অর্থ এটি একটি পৃথক প্রক্রিয়াতে ঘটে যা ইউআইকে অবরুদ্ধ করে না।

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

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

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

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

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

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

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

অনুমানের সময় অ্যানিমেশন উদাহরণ।
@মাউডনালস এবং @ আরগিলিঙ্ক দ্বারা ডেমো

অনুমান বাতিল করা

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