এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

WebLLM এর সাথে একটি স্থানীয় এবং অফলাইন-সক্ষম চ্যাটবট তৈরি করুন

প্রকাশিত: 13 জানুয়ারী, 2024

Christian Liebel

এটি এলএলএম এবং চ্যাটবট-এর তিন পর্বের সিরিজের দ্বিতীয়। পূর্ববর্তী নিবন্ধটি ডিভাইসে এবং ব্রাউজারে থাকা এলএলএম-এর সুবিধা এবং অসুবিধাগুলি নিয়ে আলোচনা করেছিল।

এখন যেহেতু আপনি ক্লায়েন্ট-সাইড এআই আরও ভালভাবে বুঝতে পেরেছেন, আপনি একটি করণীয় তালিকা ওয়েব অ্যাপ্লিকেশনে WebLLM যোগ করতে প্রস্তুত। আপনি GitHub সংগ্রহস্থলের web-llm শাখায় কোডটি খুঁজে পেতে পারেন।

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

ডিভাইসে মডেল অনুমান সম্পাদন করতে, WebLLM WebAssembly এবং WebGPU কে একত্রিত করে। WebAssembly সেন্ট্রাল প্রসেসিং ইউনিটে (CPU) দক্ষ গণনা করার অনুমতি দেয়, WebGPU ডেভেলপারদের ডিভাইসের গ্রাফিক্স প্রসেসিং ইউনিট (GPU) তে নিম্ন-স্তরের অ্যাক্সেস দেয়।

Browser Support

Source

WebLLM ইনস্টল করুন

WebLLM একটি npm প্যাকেজ হিসাবে উপলব্ধ। আপনি npm install @mlc-ai/web-llm চালিয়ে আপনার করণীয় তালিকা অ্যাপ্লিকেশনটিতে এই প্যাকেজটি যোগ করতে পারেন।

একটি মডেল নির্বাচন করুন

এরপরে, স্থানীয়ভাবে চালানোর জন্য আপনাকে একটি LLM-এর বিষয়ে সিদ্ধান্ত নিতে হবে। বিভিন্ন মডেল পাওয়া যায়।

সিদ্ধান্ত নিতে, আপনাকে নিম্নলিখিত মূল শর্তাবলী এবং পরিসংখ্যানগুলি জানা উচিত:

টোকেন: পাঠ্যের ক্ষুদ্রতম একক একটি এলএলএম প্রক্রিয়া করতে পারে।
প্রসঙ্গ উইন্ডো: মডেলটি প্রক্রিয়া করতে পারে এমন সর্বাধিক সংখ্যক টোকেন।
পরামিতি বা ওজন: প্রশিক্ষণের সময় শেখা অভ্যন্তরীণ ভেরিয়েবল, বিলিয়নে গণনা করা হয়।
কোয়ান্টাইজেশন: ওজনের প্রতিনিধিত্বকারী বিটের সংখ্যা। আরো বিট মানে উচ্চ নির্ভুলতা, কিন্তু উচ্চ মেমরি ব্যবহার।
ফ্লোটিং-পয়েন্ট নম্বর ফরম্যাট: 32-বিট ফ্লোটিং নম্বরগুলি (পূর্ণ-নির্ভুলতা, F32) ভাল নির্ভুলতা প্রদান করে, যখন 16-বিট ফ্লোটিং নম্বরগুলি (অর্ধ-নির্ভুলতা, F16) উচ্চতর গতি এবং কম মেমরি ব্যবহার করে তবে সামঞ্জস্যপূর্ণ হার্ডওয়্যার প্রয়োজন।

এই মূল পদগুলি মডেল নামের অংশ হতে থাকে। উদাহরণস্বরূপ, Llama-3.2-3B-Instruct-q4f32_1-MLC নিম্নলিখিত তথ্য রয়েছে:

মডেলটি LLaMa 3.2।
মডেলটিতে 3 বিলিয়ন প্যারামিটার রয়েছে।
এটি নির্দেশনা এবং প্রম্পট-স্টাইল সহকারীর (নির্দেশ) জন্য সূক্ষ্ম সুর করা হয়েছে।
এটি 4-বিট (q4) ইউনিফর্ম (_1) কোয়ান্টাইজেশন ব্যবহার করে।
এটিতে পূর্ণ-নির্ভুলতা, 32-বিট ফ্লোটিং-পয়েন্ট নম্বর রয়েছে।
এটি মেশিন লার্নিং কম্পাইলেশন দ্বারা তৈরি একটি বিশেষ সংস্করণ।

আপনার ব্যবহারের ক্ষেত্রে কোনটি উপযুক্ত তা নির্ধারণ করতে আপনাকে বিভিন্ন মডেল পরীক্ষা করতে হতে পারে।

3 বিলিয়ন প্যারামিটার এবং প্রতি প্যারামিটারে 4 বিট সহ একটি মডেল ইতিমধ্যেই এই লেখার সময় 1.4 GB এর মতো বড় ফাইলের আকার থাকতে পারে, যা অ্যাপ্লিকেশনটিকে প্রথম ব্যবহারের আগে ব্যবহারকারীর ডিভাইসে ডাউনলোড করতে হবে। 3B মডেলের সাথে কাজ করা সম্ভব, কিন্তু যখন এটি অনুবাদ ক্ষমতা বা তুচ্ছ জ্ঞানের ক্ষেত্রে আসে, 7B মডেলগুলি আরও ভাল ফলাফল প্রদান করে। 3.3 গিগাবাইট এবং তার উপরে, যদিও তারা উল্লেখযোগ্যভাবে বড়।

WebLLM ইঞ্জিন তৈরি করতে এবং আপনার করণীয় তালিকা চ্যাটবটের জন্য মডেল ডাউনলোড শুরু করতে, আপনার অ্যাপ্লিকেশনে নিম্নলিখিত কোড যোগ করুন:

import {CreateMLCEngine} from '@mlc-ai/web-llm';
const engine = await CreateMLCEngine('Llama-3.2-3B-Instruct-q4f32_1-MLC', {
  initProgressCallback: ({progress}) =>  console.log(progress);
});

CreateMLCEngine পদ্ধতিটি মডেল স্ট্রিং এবং একটি ঐচ্ছিক কনফিগারেশন অবজেক্ট নেয়। initProgressCallback পদ্ধতি ব্যবহার করে, ব্যবহারকারীরা অপেক্ষা করার সময় আপনি মডেলের ডাউনলোডের অগ্রগতি সম্পর্কে জিজ্ঞাসা করতে পারেন।

ক্যাশে API: আপনার LLM কে অফলাইনে চালান

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

একবার ডাউনলোড হয়ে গেলে, WebLLM ক্যাশে API থেকে মডেল ফাইলগুলিকে নেটওয়ার্কের মাধ্যমে অনুরোধ করার পরিবর্তে পড়ে, WebLLM সম্পূর্ণরূপে অফলাইন-সক্ষম করে।

সমস্ত ওয়েবসাইট স্টোরেজের মতো, ক্যাশে মূল প্রতি বিচ্ছিন্ন। এর মানে হল দুটি উৎস, example.com এবং example.net , একই স্টোরেজ ভাগ করতে পারে না। ওই দুটি ওয়েবসাইট একই মডেল ব্যবহার করতে চাইলে তাদের আলাদাভাবে মডেলটি ডাউনলোড করতে হবে।

আপনি অ্যাপ্লিকেশন > স্টোরেজ- এ নেভিগেট করে এবং ক্যাশে স্টোরেজ খোলার মাধ্যমে DevTools ব্যবহার করে ক্যাশে পরীক্ষা করতে পারেন।

কথোপকথন সেট আপ করুন

মডেলটিকে প্রাথমিক প্রম্পটের একটি সেট দিয়ে শুরু করা যেতে পারে। সাধারণত, তিনটি বার্তা ভূমিকা আছে:

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

ব্যবহারকারী এবং সহকারী প্রম্পটগুলি এলএলএম-কে কীভাবে আচরণ করা বা প্রতিক্রিয়া জানানো উচিত সে সম্পর্কে প্রাকৃতিক ভাষার উদাহরণ প্রদান করে N-শট প্রম্পটিংয়ের জন্য ব্যবহার করা যেতে পারে।

করণীয় তালিকা অ্যাপের জন্য কথোপকথন সেট আপ করার জন্য এখানে একটি ন্যূনতম উদাহরণ রয়েছে:

const messages = [
  { role: "system",
    content: `You are a helpful assistant. You will answer questions related to
    the user's to-do list. Decline all other requests not related to the user's
    todos. This is the to-do list in JSON: ${JSON.stringify(todos)}`
  },
  {role: "user", content: "How many open todos do I have?"}
];

আপনার প্রথম প্রশ্নের উত্তর দিন

চ্যাট সমাপ্তির ক্ষমতা আগে তৈরি করা WebLLM ইঞ্জিনে একটি সম্পত্তি হিসাবে উন্মুক্ত করা হয়েছে ( engine.chat.completions )। মডেলটি ডাউনলোড হওয়ার পরে, আপনি এই সম্পত্তিতে create() পদ্ধতিতে কল করে মডেল অনুমান চালাতে পারেন। আপনার ব্যবহারের ক্ষেত্রে, আপনি প্রতিক্রিয়াগুলি স্ট্রিম করতে চান যাতে ব্যবহারকারী এটি তৈরি হওয়ার সময় পড়া শুরু করতে পারে, অনুভূত অপেক্ষার সময় হ্রাস করে:

const chunks = await engine.chat.completions.create({  messages,  stream: true, });

এই পদ্ধতিটি একটি AsyncGenerator প্রদান করে, লুকানো AsyncIterator ক্লাসের একটি সাবক্লাস। খণ্ডগুলি আসার জন্য অপেক্ষা করার জন্য একটি for await...of লুপ ব্যবহার করুন। যাইহোক, প্রতিক্রিয়াটিতে শুধুমাত্র নতুন টোকেন রয়েছে ( delta ), তাই আপনাকে অবশ্যই সম্পূর্ণ উত্তরটি নিজেই একত্র করতে হবে।

let reply = '';

for await (const chunk of chunks) {
  reply += chunk.choices[0]?.delta.content ?? '';
  console.log(reply);
}

দেখা যাচ্ছে যে ওয়েবকে সর্বদা স্ট্রিমিং প্রতিক্রিয়াগুলির সাথে মোকাবিলা করতে হয়েছিল। আপনি এই স্ট্রিমিং প্রতিক্রিয়াগুলির সাথে কাজ করতে এবং দক্ষতার সাথে আপনার এইচটিএমএল আপডেট করতে DOMI বাস্তবায়নের মতো API ব্যবহার করতে পারেন৷

ফলাফলগুলি সম্পূর্ণরূপে স্ট্রিং-ভিত্তিক। আপনি যদি সেগুলিকে JSON বা অন্য ফাইল ফর্ম্যাট হিসাবে ব্যাখ্যা করতে চান তবে আপনাকে প্রথমে সেগুলিকে পার্স করতে হবে৷

সতর্কতা: ব্যবহারকারীর ইনপুটের মতো এলএলএম প্রতিক্রিয়াগুলি ব্যবহার করুন। বিবেচনা করুন যে এলএলএম বিকৃত বা দূষিত মান তৈরি করতে পারে, হয় হ্যালুসিনেশনের কারণে বা প্রম্পট ইনজেকশন আক্রমণের কারণে। জেনারেট করা এইচটিএমএল সরাসরি ডকুমেন্টে যোগ করবেন না এবং এলএলএম থেকে স্বয়ংক্রিয়ভাবে ফিরে আসা জাভাস্ক্রিপ্ট কোডটি eval() করার চেষ্টা করবেন না। পরিবর্তে, মডেল আউটপুট স্যানিটাইজ করুন, উদাহরণস্বরূপ, লাইব্রেরিগুলি যেমন DOMpurify বা আপনার কাঠামোর অন্তর্নির্মিত পদ্ধতিগুলি ব্যবহার করে৷

WebLLM এর অবশ্য কিছু বিধিনিষেধ রয়েছে: প্রথমবার ব্যবহারের আগে অ্যাপ্লিকেশনটিকে একটি বিশাল মডেল ডাউনলোড করতে হবে, যা মূল জুড়ে শেয়ার করা যাবে না, তাই অন্য ওয়েব অ্যাপকে আবার একই মডেল ডাউনলোড করতে হতে পারে। যদিও WebGPU কাছাকাছি-নেটিভ ইনফারেন্স পারফরম্যান্স অর্জন করে, এটি সম্পূর্ণ নেটিভ গতিতে পৌঁছায় না।

ডেমো

এই ত্রুটিগুলি প্রম্পট API দ্বারা সমাধান করা হয়, Google দ্বারা প্রস্তাবিত একটি অনুসন্ধানমূলক API যা ক্লায়েন্ট-সাইডও চালায়, কিন্তু Chrome এ ডাউনলোড করা একটি কেন্দ্রীয় মডেল ব্যবহার করে। এর মানে হল একাধিক অ্যাপ্লিকেশন একই মডেল সম্পূর্ণ এক্সিকিউশন গতিতে ব্যবহার করতে পারে।

পরবর্তী নিবন্ধে প্রম্পট API ব্যবহার করে চ্যাটবট ক্ষমতা যুক্ত করার বিষয়ে আরও পড়ুন।