ব্রাউজারের এআই সক্ষমতার মাধ্যমে ই-কমার্স চেকআউট উন্নত করা

১. ভূমিকা

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

একই সাথে, এআই এজেন্ট ব্যবহারকারীদের ওয়েব অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার একটি নতুন উপায় প্রদান করে, এবং WebMCP ব্যবহার করে আপনার ওয়েব এক্সপেরিয়েন্স এজেন্টকে প্রস্তুত করা টোকেন ব্যবহার কমাতে সাহায্য করতে পারে এবং স্ক্রিনশট ও DOM স্ক্র্যাপিংয়ের প্রয়োজন হয় এমন প্রচলিত অ্যাকচুয়েশনের চেয়ে আরও নির্ভুল ফলাফল দিতে পারে।

এই কোডল্যাবে, আপনি Mont-Royal Plein Air নামক একটি আউটডোর সরঞ্জাম ই-কমার্স সাইটে কাজ করবেন। আপনি শিখবেন কীভাবে বিল্ট-ইন এআই এপিআই (AI API) এবং WebMCP তৈরি ও ইন্টিগ্রেট করতে হয়:

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

আপনি যা শিখবেন

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

পূর্বশর্ত

• একটি ব্যক্তিগত গুগল অ্যাকাউন্ট এবং গুগল ক্লাউড।
• গুগল ক্রোম ভার্সন ১৫০+, অথবা ক্যানারি, ডেভ বা বিটা চ্যানেল, যেখানে #enable-webmcp-testing এবং #devtools-webmcp-support ফ্ল্যাগগুলো সক্রিয় করা আছে।
• এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট এবং টাইপস্ক্রিপ্ট সম্পর্কে জ্ঞান।
• JSON স্কিমা সম্পর্কে পরিচিতি।

২. প্রজেক্ট সেটআপ

গুগল অ্যাকাউন্ট

যদি আপনার আগে থেকে কোনো ব্যক্তিগত গুগল অ্যাকাউন্ট না থাকে, তাহলে আপনাকে অবশ্যই একটি গুগল অ্যাকাউন্ট তৈরি করতে হবে।

গুগল ক্লাউড কনসোলে সাইন ইন করুন

আপনার ব্যক্তিগত গুগল অ্যাকাউন্ট ব্যবহার করে গুগল ক্লাউড কনসোলে সাইন ইন করুন।

বিলিং সক্ষম করুন

পরামর্শ: আপনি যদি গুগল ক্লাউড ক্রেডিট ব্যবহার করে বিলিং সেট আপ করে থাকেন, তাহলে এই ধাপটি এড়িয়ে যেতে পারেন।

একটি ব্যক্তিগত বিলিং অ্যাকাউন্ট তৈরি করতে, ক্লাউড কনসোলে বিলিং চালু করুন ।

একটি প্রকল্প তৈরি করুন (ঐচ্ছিক)

এই ল্যাবের জন্য ব্যবহার করার মতো আপনার যদি কোনো চলমান প্রজেক্ট না থাকে, তাহলে এখানে একটি নতুন প্রজেক্ট তৈরি করুন ।

ওপেন ক্লাউড শেল এডিটর

1. সরাসরি ক্লাউড শেল এডিটর- এ যেতে এই লিঙ্কে ক্লিক করুন।
2. আজ যেকোনো সময়ে আপনাকে অনুমোদন করতে বলা হলে, চালিয়ে যাওয়ার জন্য 'অনুমোদন করুন' (Authorize) বোতামে ক্লিক করুন।
3. যদি স্ক্রিনের নিচে টার্মিনালটি দেখা না যায়, তাহলে এটি খুলুন:
   • দেখুন-এ ক্লিক করুন।
   • টার্মিনালে ক্লিক করুন।

আপনার প্রকল্প সেট করুন

1. টার্মিনালে এই কমান্ডটি ব্যবহার করে আপনার প্রজেক্ট সেট করুন:

   gcloud config set project [PROJECT_ID]
   

   উদাহরণ: gcloud config set project lab-project-id-example

   আপনি যদি আপনার প্রজেক্ট আইডি মনে রাখতে না পারেন, gcloud projects list ব্যবহার করে আপনার সমস্ত প্রজেক্ট আইডি দেখতে পারেন।

   
2. আপনি নিম্নলিখিত বার্তাটি দেখতে পাবেন: Updated property [core/project].

   যদি আপনি একটি WARNING দেখতে পান এবং আপনাকে Do you want to continue (Y/n)? জিজ্ঞাসা করা হয়, তাহলে সম্ভবত আপনি প্রজেক্ট আইডি ভুলভাবে প্রবেশ করিয়েছেন। n চাপুন, Enter চাপুন এবং gcloud config set project কমান্ডটি আবার চালানোর চেষ্টা করুন।

স্থানীয় এবং কর্মক্ষেত্র সেটআপ

1. আপনার টার্মিনালে (অথবা ক্লাউড শেল টার্মিনালে), প্রজেক্ট রিপোজিটরিটি ক্লোন করুন এবং প্রজেক্ট ডিরেক্টরিতে প্রবেশ করুন:

   git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
   cd mont-royal
   

2. ecommerce-ai-enhancements/starter ফোল্ডারে প্রবেশ করুন:

   cd ecommerce-ai-enhancements/starter
   

3. pnpm ব্যবহার করে নির্ভরতাগুলি ইনস্টল করুন:

   pnpm install
   

4. স্থানীয় উন্নয়ন সার্ভারটি চালু করুন:

   pnpm dev
   

   Mont-Royal Plein Air স্টোরটি দেখতে আপনার ব্রাউজারে http://localhost:5173 খুলুন।

(ঐচ্ছিক) WebMCP ইন্সপেক্টর এক্সটেনশনটি ইনস্টল করুন।

WebMCP-এর সাথে কাজ করা সহজ করার জন্য, আপনি WebMCP Model Context Tool Inspector ইনস্টল করতে পারেন। ইনস্টল হয়ে গেলে, এটি ব্যবহার করার জন্য আপনার একটি Gemini API key প্রয়োজন হবে।

• এআই স্টুডিওতে যান।
• এই ধাপের শুরুতে আপনার সেট আপ করা প্রজেক্টের সাথে সংযুক্ত একটি নতুন জেমিনি এপিআই কী তৈরি করতে 'Create API Key' বোতামটি ক্লিক করুন।
• WebMCP মডেল কনটেক্সট টুল ইন্সপেক্টরটি খুলুন (এটি সাইড প্যানেলে খোলে) এবং আপডেট জেমিনি এপিআই কী (Update Gemini API Key) বোতামটিতে ক্লিক করুন।
• পপআপে আপনার এপিআই কী পেস্ট করুন এবং সেভ করুন।

এই এক্সটেনশনটিতে একটি বেসিক এজেন্ট রয়েছে যা WebMCP ব্যবহার করতে পারে, ফলে আপনি DevTools-এর মাধ্যমে সরাসরি WebMCP টুলস কল করার পরিবর্তে এর মাধ্যমে আপনার ওয়েবসাইটটি পরীক্ষা করে দেখতে পারেন।

৩. ওয়েবে অন্তর্নির্মিত এআই মডেল

প্রম্পট এপিআই (Prompt API) বলতে কী বোঝায়?

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

• শূন্য ক্লাউড লেটেন্সি : কোনো নেটওয়ার্ক রাউন্ডট্রিপ বা ব্যাকএন্ড সার্ভার কিউইং নেই।
• ডিফল্টরূপে ব্যক্তিগত : প্রম্পট এবং সেগুলিতে প্রেরিত কোনো কনটেক্সট ডিভাইস থেকে বাইরে যায় না।
• বিনা খরচে : টোকেন বিলিং বা ক্লাউড হোস্টিং খরচ ছাড়াই ক্লায়েন্ট হার্ডওয়্যারে ইনফারেন্স চলে।
• অফলাইনে ব্যবহারযোগ্য : সক্রিয় ইন্টারনেট সংযোগ ছাড়াও নির্ভরযোগ্যভাবে কাজ করে।

ক্রোমে, গ্লোবাল LanguageModel ইন্টারফেসের মাধ্যমে Prompt API অ্যাক্সেস করা হয়।

// 1. Set your expected inputs and outputs. This is multimodal, so you can
// include other types here, too
const languages = {
   expectedInputs: [{type: "text", languages: ["en"]}],
   expectedOutputs: [{type: "text", languages: ["en"]}],
}

// 2. Check availability. Always pass in your expected inputs and outputs,
// as some models may only support some inputs and outputs
const availability = await LanguageModel.availability(languages);
// 'available', 'downloading', or 'unavailable'

// 3. Create an isolated session with system prompt and language constraints
const session = await LanguageModel.create({
  ...languages,
  // Optional: add initial context to your session, like a system prompt
  initialPrompts: [
   {
      role: 'system',
      content: 'You are an expert outdoors sales assistant...'
   }
  ]
});

// 4. Define your expected output as JSON Schema
const schema = {
   //...
}

// 5. Prompt the model (supports plain text or structured models)
const result = await session.prompt('Recommend a 3-season tent footprint.', {
  responseConstraint: schema,
});

স্মৃতি ব্যবস্থাপনার সর্বোত্তম অনুশীলন:

• আপনি একটি সেশন clone() তার সম্পূর্ণ কনটেক্সট উইন্ডো স্টেট কপি করতে পারেন এবং সেই ক্লোনগুলো স্বাধীনভাবে ব্যবহার করতে পারেন, যা একটি নতুন সেশন চালু করার সময় কমিয়ে দেয়।
• সেশন ব্যবহার করা শেষ হলে, রিসোর্স মুক্ত করতে এটিকে destroy()

অনুশীলন ১: যাত্রা-ভিত্তিক সুপারিশসমূহ

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

এটি সম্পন্ন করার জন্য, আপনাকে একটি তিন-পর্যায়ের সুপারিশ পাইপলাইন তৈরি করতে হবে:

1. জার্নি প্রোফাইলার : প্রম্পট এপিআই (Prompt API) ব্যবহার করে, আপনি গ্রাহকের কালানুক্রমিক ব্রাউজিং টাইমলাইন বিশ্লেষণ করবেন, যার মাধ্যমে ব্যবহারকারীর প্রকৃত অ্যাডভেঞ্চারের উদ্দেশ্য অনুমান করার চেষ্টা করা হবে।
2. প্রোডাক্ট কোয়েরি : এই ইন্টেন্ট থেকে, আপনি সম্পর্কিত আইটেমগুলো পাওয়ার জন্য একটি ফেক প্রোডাক্ট ব্যাকএন্ডে একটি এপিআই রিকোয়েস্ট পাঠাবেন।
3. পণ্যের সুপারিশ : পণ্যগুলোকে র‍্যাঙ্ক করার জন্য আপনি সেগুলোকে প্রোডাক্ট এপিআই-তে ফেরত পাঠাবেন, যা ব্যবহারকারী যা দেখছেন তার সাথে সবচেয়ে সামঞ্জস্যপূর্ণ পাঁচটি সহযোগী পণ্য ফিরিয়ে দেবে।

টাস্ক ১.১: প্রম্পট এপিআই প্রারম্ভিকীকরণ

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

src/ai/prompt-api.ts ফাইলটিতে যান এবং ২৭–৫৮ লাইনে getPromptSession() পরীক্ষা করুন:

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>

1. একটি ক্যাশ করা বেস সেশন পুনরায় ব্যবহার করুন। ২১ নম্বর লাইনে সিস্টেম প্রম্পট দ্বারা কী করা baseSessions নামে ইতিমধ্যেই একটি ক্যাশ ম্যাপ রয়েছে। নতুন মডেল clone() করার পরিবর্তে বেস মডেল পুনরায় ব্যবহার করলে স্টার্টআপ টাইম কমে যায় এবং প্রতিটি সেশন একে অপরের কাজে হস্তক্ষেপ না করেই কোর সেটআপ উত্তরাধিকারসূত্রে পাওয়া যায়। ক্লোনটি রিটার্ন করুন—কলকারীরা আপনার ক্যাশ করা বেস বাতিল না করেই এটির সাথে অবাধে ইন্টারঅ্যাক্ট করতে পারে, এমনকি এটিকে destroy() পারে।
2. এপিআই-এর ফিচার শনাক্ত করুন। এপিআই-টি বিদ্যমান কিনা তা শনাক্ত করুন, না থাকলে একটি ত্রুটি দেখান।
3. আপনার মোডালিটি এবং ভাষাগুলো ঘোষণা করুন। বিল্ট-ইন মডেলগুলো মাল্টিমোডাল ইনপুট সমর্থন করতে পারে। আপনার কোন মোডগুলো প্রয়োজন এবং আপনি কোন ভাষাগুলো সমর্থন করতে চান, তা আপনাকে ঘোষণা করতে হবে। আপনি LLM-এ যে সমস্ত কন্টেন্ট পাঠান, তার সবই ইংরেজিতে থাকে।
4. কিছু তৈরি করার আগে প্রাপ্যতা যাচাই করে নিন। এপিআই (API) বিদ্যমান থাকলেও, আপনার প্রয়োজনীয়তা পূরণ করে এমন কোনো মডেল নাও থাকতে পারে। সেরকম কোনো মডেল আছে কিনা তা পরীক্ষা করে দেখুন। যদি না থাকে, তাহলে একটি ত্রুটি (error) দেখান। আর যদি এটি এখনও ডাউনলোড না হয়ে থাকে, তাহলে ডাউনলোডের অগ্রগতি সম্পর্কে জানান।
5. সেশনটি তৈরি করুন। একটি নতুন প্রম্পট এপিআই সেশন তৈরি করার জন্য অপশনগুলো সেট আপ করুন, এবং সিস্টেম প্রম্পট (যদি অন্তর্ভুক্ত থাকে) সেট করুন।

কাজ ১.২: জার্নি প্রোফাইলার বাস্তবায়ন করুন

src/ai/journey-profiler.ts ফাইলটিতে যান এবং ৪২ থেকে ১০০ নম্বর লাইনে থাকা টার্গেট ফাংশনটি পরীক্ষা করুন:

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>

1. ব্যবহারের জন্য একটি নতুন প্রম্পট সেশন তৈরি করতে টাস্ক ১-এর ফাংশনটি ব্যবহার করুন।
2. স্ট্রাকচার্ড রিটার্নের জন্য JSON স্কিমা হিসেবে journeyProfileSchema ব্যবহার করে, প্রদত্ত প্রম্পট টেক্সট দিয়ে মডেলটিকে প্রম্পট করুন।
3. প্রম্পট আউটপুট পার্স করুন এবং টার্গেট ক্যাটাগরিগুলো থেকে ডুপ্লিকেট বাদ দিন।
4. হার্ডকোডেড স্ট্রিং রিটার্নগুলোকে আপনার প্রম্পট থেকে প্রাপ্ত প্রকৃত ফলাফল দিয়ে প্রতিস্থাপন করুন।
5. সেশন শেষ হয়ে গেলে মেমরি খালি করার জন্য এটি মুছে ফেলুন।

কীভাবে কনটেক্সট সংগ্রহ একটি প্রম্পটে রূপান্তরিত হয় তা দেখতে src/utils/journey-helpers.ts পড়ুন।

কাজ ১.৩: সিনার্জি রি-র‍্যাঙ্কার বাস্তবায়ন করুন

src/ai/synergy-reranker.ts ফাইলটিতে যান এবং ৩০-৭১ লাইনে থাকা টার্গেট ফাংশনটি পরীক্ষা করুন:

export async function rankComplementaryGear(
  profile: JourneyProfile,
  candidates: readonly Product[],
  currentProduct?: Product | null,
  cartProducts?: readonly Product[],
  limit: number = 5
): Promise<readonly RecommendedItem[]>

1. ব্যবহারের জন্য একটি নতুন প্রম্পট সেশন তৈরি করতে টাস্ক ১-এর ফাংশনটি ব্যবহার করুন।
2. প্রদত্ত প্রম্পট টেক্সট এবং তৈরি করা স্কিমা দিয়ে মডেলটিকে নির্দেশ দিন।
3. প্রম্পট আউটপুটটি পার্স করুন।
4. assembleRecommendations ব্যবহার করে সংকলিত সুপারিশ তালিকাটি ফেরত দিন।
5. সেশন শেষ হয়ে গেলে মেমরি খালি করার জন্য এটি মুছে ফেলুন।

প্রম্পট এবং স্কিমা কীভাবে তৈরি হয় এবং প্রম্পটের ফলাফল থেকে সুপারিশগুলো কীভাবে একত্রিত করা হয়, তা দেখতে src/utils/reranker-helpers.ts এবং src/utils/recommendation-schemas.ts পড়ুন।

সুপারিশ পাইপলাইন যাচাই করুন

1. Chrome খুলে http://localhost:5173/catalog/tent-mont-tremblant-3p -এ যান।
2. নিচে স্ক্রল করে 'For You' সেকশনটিতে যান।
3. লক্ষ্য করুন, কীভাবে ৫টি সহযোগী কার্ড এলোমেলো পণ্যের পরিবর্তে স্মার্ট কিট পেয়ারিং (যেমন গ্রাউন্ড ফুটপ্রিন্ট, স্লিপিং প্যাড এবং হালকা স্টেক) প্রতিফলিত করতে আপডেট হয়।
4. উভয় ইনফারেন্স স্টেপের রিয়েল-টাইম এক্সিকিউশন সময়কাল পরীক্ষা করতে Chrome DevTools Console খুলুন।

(ঐচ্ছিক) কাজ ১.৪: আরও অন্তর্নির্মিত এআই মডেল অন্বেষণ করুন

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

এই ফাইলটিতে যান: src/ai/translator.ts

২৯–৪৫ লাইনে টার্গেট ফাংশন createTranslator পরীক্ষা করুন:

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>

1. ট্রান্সলেটর এপিআই (Translator API)-এর সমর্থন আছে কিনা তা পরীক্ষা করুন এবং নিশ্চিত করুন যে লক্ষ্য ভাষাটি ইংরেজি নয় (বিষয়বস্তু ডিফল্টরূপে ইংরেজিতে থাকে)।
2. ইংরেজি থেকে লক্ষ্য ভাষায় একটি ভাষা জোড়া তৈরি করুন এবং দেখুন সেই জোড়াটি উপলব্ধ আছে কিনা।
3. অনুবাদকের জন্য বিকল্প তৈরি করুন এবং মডেল ডাউনলোডের অগ্রগতি দেখানোর জন্য একটি মনিটর সংযুক্ত করুন।
4. প্রারম্ভিক অনুবাদকটি ফেরত দিন।

এরপর, ৫০-৫৮ লাইনে থাকা টার্গেট ফাংশন translate পরীক্ষা করুন:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>

5. getCachedTranslator এ targetLang পাস করে কোনো অনুবাদক উপলব্ধ আছে কিনা তা পরীক্ষা করুন। যদি না থাকে, তাহলে মূল লেখাটি ফেরত দিন।
6. যদি থাকে, তাহলে পরিচ্ছন্ন লেখাটি অনুবাদ করতে অনুবাদক ব্যবহার করুন।

এই ফাইলটিতে যান: src/ai/translator.ts

২০৪ নং লাইনে টার্গেট ফাংশন render পরিদর্শন করুন:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>

7. ল্যাঙ্গুয়েজ পিকার কম্পোনেন্টটি সক্রিয় করুন

ট্রান্সলেশন ক্যাশে এবং সাবস্ক্রিপশন কীভাবে কাজ করে তা জানতে src/utils/translator-helpers.ts পড়ুন।

৪. এজেন্টের অভিজ্ঞতা উন্নত করতে WebMCP ব্যবহার করা

WebMCP কী?

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

WebMCP এই সমস্যার সমাধানে সাহায্য করে, কারণ এটি ডেভেলপারদের এজেন্টদেরকে সরাসরি টুল সরবরাহ করার সুযোগ দেয়, যার মাধ্যমে এজেন্টরা তাদের বর্তমান পেজের সাথে ইন্টারঅ্যাক্ট করতে পারে। যে এজেন্টগুলো এই টুলগুলো সমর্থন করে, তারা আপনার কোডিং হারনেসের একটি টুলের মতোই সেগুলো ব্যবহার করতে পারে, যেখানে আপনার দ্বারা নির্ধারিত সুস্পষ্ট ও সুগঠিত ইনপুট এবং রিটার্ন ভ্যালু থাকবে।

// Register a tool directly on document.modelContext
document.modelContext.registerTool({
  name: 'get_product_specs',
  title: 'Get Product Specs',
  description: 'Retrieve technical specifications for the active product.',
  inputSchema: {
    type: 'object',
    properties: {
      // ...
    },
  },
  annotations: {
    readOnlyHint: true, // Informs the agent this tool causes no side-effects
  },
  execute: async (input) => {
    return {
      weight: '1.8 kg',
      capacity: '3 persons',
      seasons: '3-season',
    };
  },
});

যখন কোনো এজেন্ট ওয়েবপেজটির সাথে সংযোগ স্থাপন করে, তখন এটি document.modelContext.getTools() কোয়েরি করে। প্রতিটি নিবন্ধিত টুল প্রকাশ করে:

• name : এজেন্টরা টুল চালানোর সময় যে প্রোগ্রাম্যাটিক টুল আইডেন্টিফায়ার ব্যবহার করে (যেমন 'get_product_specs' )।
• title : পরিদর্শক এবং এজেন্ট ইন্টারফেস দ্বারা ব্যবহৃত মানুষের পাঠযোগ্য প্রদর্শন লেবেল (যেমন 'Get Product Specs' )।
• description : এটি একটি সাধারণ টেক্সট বিবরণ যা মডেলকে জানায় টুলটি কী কাজ করে এবং কখন এটিকে কল করতে হবে। এর মাধ্যমেই একটি এজেন্ট নির্ধারণ করে যে টুলটিকে কল করা উচিত কি না, তাই বিবরণটি বিশদভাবে দিন।
• inputSchema : গৃহীত আর্গুমেন্টসমূহ নির্ধারণকারী JSON স্কিমা ।
• annotations : আচরণের ইঙ্গিত, যেমন { readOnlyHint: true } যা শুধুমাত্র পঠনযোগ্য টুলের জন্য ব্যবহৃত হয় এবং কোনো স্টেট সাইড-ইফেক্ট সৃষ্টি করে না।
• execute : টুলটি আহ্বান করা হলে এই অ্যাসিঙ্ক্রোনাস ফাংশনটি সম্পাদিত হয়।

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

কাজ ২.১: সুপারিশ এবং পণ্য সরঞ্জাম

পূর্ববর্তী অনুশীলনে আপনার তৈরি করা সুপারিশগুলো এজেন্টদের গ্রহণ করার জন্য, আপনাকে প্রথমে একটি টুল নিবন্ধন করতে হবে।

এই ফাইলটিতে যান: src/components/product/ForYouSection.ts

৭১–৯৪ লাইনে registerWebMCPTools() পরীক্ষা করুন:

private registerWebMCPTools(): void

1. WebMCP সমর্থিত কিনা তা যাচাই করে দেখুন।
2. যদি তাই হয়, তাহলে টুলটি নিবন্ধন করুন।

• এমন একটি শিরোনাম ও বিবরণ বেছে নিন যা একজন এজেন্টকে টুলটি বেছে নিতে প্রলুব্ধ করে—এক্ষেত্রে প্রম্পট ইঞ্জিনিয়ারিংয়ের কথা ভাবুন।
• এখানে কোনো ইনপুট নেই, তাই শুধু একটি খালি অবজেক্ট JSON স্কিমা অন্তর্ভুক্ত করুন।
• এটি একটি পঠনযোগ্য টুল।
• execute ফাংশনে, recommendationStore ব্যবহার করে বর্তমান সুপারিশের সেটটি নিন, তারপর বর্তমান প্রোডাক্ট আইডি এবং প্রোডাক্ট সুপারিশের সেটটি রিটার্ন করুন।
• একটি অ্যাবোর্ট সিগন্যাল যোগ করুন এবং সেটিকে ক্যাচ করুন, যাতে কোনো এরর না হয়। এটি নিশ্চিত করে যে কম্পোনেন্টটি আনমাউন্ট হওয়ার সময় টুলটি সঠিকভাবে অপসারিত হয়।

এই ফাইলটিতে যান: src/views/ProductView.ts

3. একটি get_current_product টুল রেজিস্টার করার জন্য একই প্রক্রিয়াটি পুনরাবৃত্তি করুন, এবার সুপারিশগুলোর পাশাপাশি সম্পূর্ণ পণ্যটিও ফেরত দিন।

টিপস: টুল রেজিস্ট্রেশনটি কম্পোনেন্ট লেভেলে সম্পন্ন হয়, তাই যখন কম্পোনেন্টগুলোকে একত্রিত করে একটি পেজ তৈরি করা হয়, তখন সেগুলোর টুলগুলোও এর সাথে চলে আসে।

কাজ ২.২: কার্ট ড্রয়ারের সরঞ্জাম

এই ফাইলটিতে যান: src/components/cart/CartDrawer.ts

৮৩–১১৪ লাইনে registerWebMCPTools() পরীক্ষা করুন:

private registerWebMCPTools(): void

1. view_cart টুলটি নিবন্ধন করুন:

• এর inputSchema একটি অবজেক্ট হওয়া উচিত, যাতে openDrawer নামে একটিমাত্র বুলিয়ান অপশন থাকবে।
• এটি শুধুমাত্র পঠনযোগ্য হওয়া উচিত।
• এর execute ফাংশনের অংশ হিসেবে ইনপুটটি পড়ুন, কার্টটি দেখানো হবে নাকি লুকানো হবে সে বিষয়ে সিদ্ধান্ত নিন, recommendationStore রিফ্রেশ করুন, তারপর কার্ট সামারিটি রিটার্ন করুন।

2. manage_cart টুলটি নিবন্ধন করুন:

• এর inputSchema একটি অবজেক্ট হওয়া উচিত, যার মধ্যে items থাকবে, যা হলো অবজেক্টের একটি অ্যারে এবং এই অ্যারেতে productID , add , remove , ও update action এনাম এবং ইন্টিজার quantity ।
• এর execute ফাংশনটির মাধ্যমে আইটেমগুলো this.updateCart এ পাস করা উচিত।

কাজ ২.৩: ভাষা পরিবর্তন করার টুল

বাহ্যিক এজেন্টদের কাছে একটি ল্যাঙ্গুয়েজ টুল উন্মুক্ত করার মাধ্যমে WebMCP-কে আরও এগিয়ে নিয়ে যান।

এই ফাইলটিতে যান: src/components/navigation/LanguagePicker.ts

৬১-৬৩ লাইনে registerWebMCPTools() পরীক্ষা করুন:

private registerWebMCPTools(): void

1. switch_language টুলটি নিবন্ধন করুন:
   • inputSchema একটি language প্রপার্টি থাকা উচিত যা SUPPORTED_LANGUAGE_CODES এর একটি enum হবে।
   • এর execute ফাংশনটি প্রদত্ত ভাষা ব্যবহার করে this.switchLanguage ফাংশনটিকে কল করবে।

কাজ ২.৪: নেভিগেশন টুলগুলো সংরক্ষণ করুন

স্বায়ত্তশাসিত এজেন্টদের স্টোরে নেভিগেট করতে, পণ্যের পৃষ্ঠায় যেতে, বিভাগ ব্রাউজ করতে বা অনুসন্ধান শুরু করতে সক্ষম করুন।

এই ফাইলটিতে যান: src/components/navigation/SiteHeader.ts

১৫৫–১৭১ লাইনে registerWebMCPTools() পরীক্ষা করুন:

private registerWebMCPTools(): void

1. WebMCP সমর্থিত কিনা তা যাচাই করে দেখুন।
2. search সরঞ্জামটি নিবন্ধন করুন:
   • ইনপুট স্কিমাতে একটি query স্ট্রিং প্রয়োজন হয়।
   • execute ফাংশনে, this.search(input?.query) কল করুন।
3. go_to_catalog টুলটি নিবন্ধন করুন:
   • ইনপুট স্কিমা ঐচ্ছিকভাবে activity ( ACTIVITIES এর এনাম) এবং category ( PRODUCT_CATEGORIES এর এনাম) গ্রহণ করে।
   • execute মধ্যে, this.goToCatalog(input?.activity, input?.category) কল করুন।
4. get_categories_and_activities টুলটি নিবন্ধন করুন:
   • এটি একটি পঠনযোগ্য টুল, যার কোনো ইনপুট প্যারামিটার নেই।
   • execute এর মধ্যে, this.getCategoriesAndActivities() কল করুন।
5. go_to_product টুলটি নিবন্ধন করুন:
   • ইনপুট স্কিমার জন্য একটি productId স্ট্রিং প্রয়োজন।
   • execute ফাংশনে, this.goToProduct(input?.productId) কল করুন।

WebMCP ইন্সপেক্টর দিয়ে যাচাই করুন

1. ক্রোমে http://localhost:5173/catalog/tent-mont-tremblant-3p রিলোড করুন এবং একটি প্রোডাক্ট পেজে যান।
2. Chrome DevTools > অ্যাপ্লিকেশন > WebMCP খুলুন।
3. আপনার WebMCP টুলগুলো দেখা উচিত: get_recommendations , get_current_product , view_cart , manage_cart , switch_language , search , go_to_catalog , get_categories_and_activities , এবং go_to_product ।
4. তাদের বিবরণ ও প্যারামিটারগুলো দেখতে যেকোনো একটিতে ক্লিক করুন।
5. প্যারামিটারসহ একটি বেছে নিন, কয়েকটি নির্বাচন করুন এবং এটির কার্যকারিতা দেখতে রান টুল-এ ক্লিক করুন।
6. (ঐচ্ছিক) আপনি যদি WebMCP Model Context Tool Inspector ইনস্টল এবং সেট আপ করে থাকেন, তবে এটি খুলুন—এটি ক্রোমের সাইড প্যানেলে খোলে। এজেন্ট কীভাবে সাড়া দেয় তা দেখতে, চ্যাট ইন্টারফেস ব্যবহার করে তাকে এমন একটি পদক্ষেপ নিতে বলুন যা আপনার মতে আপনার কোনো একটি টুলকে কল করবে।

৫. (ঐচ্ছিক) একজন অন-সাইট এজেন্ট তৈরি করা

পৃষ্ঠার মধ্যে WebMCP টুল কল করা

WebMCP টুলগুলো শুধু বাহ্যিক ব্রাউজার এক্সটেনশন বা থার্ড-পার্টি বটের জন্যই নয়— আপনার নিজের অ্যাপ্লিকেশনও সরাসরি এগুলোকে কল করতে পারে । document.modelContext.getTools() কোয়েরি করার মাধ্যমে, আপনার ক্লায়েন্ট-সাইড কোড ডায়নামিকভাবে টুলগুলো খুঁজে বের করতে এবং এক্সিকিউট করতে পারে।

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

সর্বোত্তম অনুশীলন: যদিও আপনার তৈরি করা এজেন্টটি সার্চ বারের বিকল্প হিসেবে কাজ করে, সাইট অনুসন্ধানের জন্য আপনার কোনো এলএলএম (LLM) ব্যবহার করা উচিত নয় —এর জন্য আরও অনেক বেশি কার্যকর, নির্ভুল এবং সুপ্রতিষ্ঠিত প্যাটার্ন ও অ্যালগরিদম রয়েছে। এর উদ্দেশ্য শুধুমাত্র আপনার নিজের সাইটের ওয়েবএমসিপি (WebMCP) টুলগুলোকে অনির্দিষ্টভাবে কল করার পদ্ধতি প্রদর্শন করা।

জাভাস্ক্রিপ্ট থেকে একটি WebMCP টুল খুঁজে বের করতে এবং চালু করতে:

// getTools() returns a Promise — it must be awaited.
const tools = await document.modelContext.getTools();
const tool = tools.find(t => t.name === 'list_items');

const json = await document.modelContext.executeTool(tool, args);
const result = JSON.parse(json); // executeTool resolves with a DOMString

কাজ ৩.১: সাইডবার ফেসেট টুলস

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

src/components/facets/ এর প্রতিটি ফেসেট কম্পোনেন্ট তার ক্লাসে একটি হেল্পার মেথড এবং src/utils/filter-schemas.ts এ একটি এক্সপোর্টেড ইনপুট স্কিমা ইতিমধ্যেই প্রদান করে থাকে:

1. src/components/facets/ActivityFacet.ts :
   • activityFilterSchema ব্যবহার করে activity_filter নিবন্ধন করুন।
   • execute মধ্যে, this.filterActivity(input?.activity, input?.selected) কল করুন।
2. src/components/facets/CategoryFacet.ts এ:
   • categoryFilterSchema ব্যবহার করে category_filter নিবন্ধন করুন।
   • execute ফাংশনে, this.filterCategory(input?.category, input?.selected) কল করুন।
3. src/components/facets/ConditionFacet.ts এ:
   • conditionFilterSchema ব্যবহার করে condition_filter নিবন্ধন করুন।
   • execute ফাংশনে, this.filterCondition(input?.condition, input?.selected) কল করুন।
4. src/components/facets/PriceFacet.ts এ:
   • priceFilterSchema ব্যবহার করে price_filter নিবন্ধন করুন।
   • execute ফাংশনে, this.filterPrice(input?.priceRange || input?.bracket, input?.selected) কল করুন।
5. src/components/facets/WeightFacet.ts এ:
   • weightFilterSchema ব্যবহার করে weight_filter নিবন্ধন করুন।
   • execute ফাংশনে, this.filterWeight(input?.weightRange || input?.bracket, input?.selected) কল করুন।
6. src/components/facets/RatingFacet.ts এ:
   • ratingFilterSchema ব্যবহার করে rating_filter নিবন্ধন করুন।
   • execute ফাংশনে, this.filterRating(input?.minRating || input?.rating, input?.selected) কল করুন।
7. src/components/facets/SearchFacet.ts এ:
   • keywordFilterSchema ব্যবহার করে keyword_filter নিবন্ধন করুন।
   • execute ফাংশনে, this.updateKeyword(input?.keyword) কল করুন।

ধাপ ২-এ শেখা অনুযায়ী WebMCP সাপোর্ট আছে কিনা তা পরীক্ষা করতে এবং .catch(() => {}) এর সাথে { signal: this.signal } পাস করতে মনে রাখবেন।

কাজ ৩.২: ক্যাটালগ দেখার সরঞ্জাম

এখন document.modelContext এ ক্যাটালগ-স্তরের তালিকা, ফিল্টার রিসেট এবং সিমান্টিক সার্চ টুলগুলো নিবন্ধন করুন।

এই ফাইলটিতে যান: src/views/CatalogView.ts

১২৫–১৪০ লাইনে registerWebMCPTools() পরীক্ষা করুন:

private registerWebMCPTools(): void

1. WebMCP সমর্থিত কিনা তা যাচাই করে দেখুন।
2. list_items টুলটি নিবন্ধন করুন:
   • এটি কোনো ইনপুট প্যারামিটার গ্রহণ করে না এবং এটি শুধুমাত্র পাঠযোগ্য।
   • এর execute ফাংশনটি this.getItemsSummary() কে কল করবে।
3. reset_filters টুলটি নিবন্ধন করুন:
   • এটির কোনো ইনপুট প্যারামিটার প্রয়োজন হয় না।
   • এর execute ফাংশনটি this.resetFilters() কে কল করবে।
4. semantic_catalog_filter টুলটি নিবন্ধন করুন:
   • semanticCatalogFilterSchema ব্যবহার করুন।
   • এর execute ফাংশনটি interpretAndApplySemanticFilter(input.query) কে কল করবে।

কাজ ৩.৩: সিমান্টিক ফিল্টার এজেন্টকে সমন্বিত করা

এখন সবকিছু সংযুক্ত করার সময়। এই কাজটি সার্চকে একটি সিম্যান্টিক পাইপলাইনে রূপান্তরিত করে যা semantic_catalog_filter টুলটিকে শক্তি জোগায়:

এই ফাইলটিতে যান: src/ai/catalog-semantic-filter.ts

৮৪-৮৮ লাইনে prewarmSemanticFilterSession() পরীক্ষা করুন:

export async function prewarmSemanticFilterSession(): Promise<void>

1. warmSession আগে থেকেই বিদ্যমান আছে কিনা তা পরীক্ষা করুন; যদি থাকে, তবে নির্ধারিত সময়ের আগেই ফিরে যান।
2. getPromptSession() ব্যবহার করে SEMANTIC_FILTER_SYSTEM_PROMPT দিয়ে একটি Prompt API সেশন প্রি-ওয়ার্ম করুন এবং এটিকে warmSession এ সংরক্ষণ করুন। এটিকে একটি try/catch ব্লকের মধ্যে রাখুন, যাতে প্রি-ওয়ার্মিং ব্যর্থ হলেও সার্চ তৈরি করার প্রক্রিয়াটি স্বাভাবিকভাবে সম্পন্ন হতে পারে।

৯৩–১৩৪ লাইনে inferSearchFacets() পরীক্ষা করুন :

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>

3. যদি warmSession উপলব্ধ থাকে, তবে সেখান থেকে প্রি-ওয়ার্মড সেশনটি গ্রহণ করুন (এবং warmSession null এ রিসেট করুন), অথবা getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT) ব্যবহার করে একটি নতুন সেশন তৈরি করুন।
4. promptText দিয়ে মডেলটিকে প্রম্পট করুন এবং responseConstraint হিসেবে semanticFilterSchema ব্যবহার করুন।
5. ফেরত আসা JSON-টি পার্স করুন, পার্স করা ফলাফলটি cacheKey ব্যবহার করে পারসিস্টেন্ট ক্যাশে সংরক্ষণ করুন এবং একটি finally ব্লকে সেশনটি ধ্বংস করে দিন।

১৩৯–২৭০ লাইনে applyFacetsViaWebMCP() পরীক্ষা করুন:

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>

6. await document.modelContext.getTools() ব্যবহার করে document.modelContext এ নিবন্ধিত টুলগুলি খুঁজুন।
7. নতুন করে শুরু করতে await executeFacet('reset_filters', {}) কল করে ফিল্টারগুলি রিসেট করুন।
8. await Promise.all(facetTasks) ব্যবহার করে সক্রিয় ফেসেটগুলো একযোগে প্রয়োগ করুন।

২৭২–৩১৬ লাইনে interpretAndApplySemanticFilter() পরীক্ষা করুন:

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>

9. inferSearchFacets(searchTerm, cachedJourney) কল করে সার্চের দিকগুলো অনুমান করুন।
10. applyFacetsViaWebMCP(searchTerm, parsed) ব্যবহার করে ক্যাটালগে অনুমানকৃত ফেসেটগুলো প্রয়োগ করুন।

ইন-পেজ এজেন্ট যাচাই করুন

1. http://localhost:5173/catalog এ যান।
2. উপরের সার্চ বারে লিখুন: "lightweight 3 season tent for wet hikes"
3. দেখুন কীভাবে প্রম্পট এপিআই অনুরোধটি পার্স করে, activity_filter (হাইকিং), category_filter (টেন্ট) এবং condition_filter (ওয়েট) চালু করে, এবং কোনো ম্যানুয়াল চেকবক্স ক্লিক ছাড়াই সঙ্গে সঙ্গে ক্যাটালগ থেকে উপযুক্ত সরঞ্জামগুলো খুঁজে বের করে।

৬. আপনি যা শিখেছেন

অভিনন্দন। আপনি একটি ই-কমার্স অ্যাপ্লিকেশনকে সম্পূর্ণরূপে অন-ডিভাইস এআই এবং স্ট্যান্ডার্ড ওয়েব প্ল্যাটফর্ম এপিআই দ্বারা চালিত একটি বুদ্ধিমান ও এজেন্ট-কেন্দ্রিক অভিজ্ঞতায় রূপান্তরিত করেছেন।

আপনি যা তৈরি করেছেন:

• অন-ডিভাইস প্রম্পট এপিআই : LanguageModel ব্যবহার করে ব্যবহারকারীর ব্রাউজিং টাইমলাইন সংশ্লেষণ করে রিয়েল-টাইম JourneyProfile ) কনটেক্সট তৈরি করা হয়েছে, এবং স্ট্রাকচার্ড JSON স্কিমা ( responseConstraint ) ব্যবহার করে একটি rankComplementaryGear ) সিনার্জি ইঞ্জিন তৈরি করা হয়েছে।
• WebMCP কম্পোনেন্ট টুলস : document.modelContext এর মাধ্যমে UI কম্পোনেন্টগুলো জুড়ে নিবন্ধিত মডিউলার, এনক্যাপসুলেটেড টুলস ( get_recommendations , get_current_product , view_cart , manage_cart )।
• এজেন্ট-ফরোয়ার্ড আর্কিটেকচার : ক্রোম ওয়েবএমসিপি ইন্সপেক্টর এক্সটেনশন ব্যবহার করে টুলটির কার্যকারিতা পরীক্ষা ও যাচাই করা হয়েছে।
• অন-সাইট ইন-পেজ এজেন্ট : সাইট হেডার সার্চ বার থেকে বহুমুখী স্বাভাবিক ভাষার ক্যাটালগ সার্চ পরিচালনার জন্য সরাসরি ব্রাউজারে ক্লায়েন্ট-সাইড টুলস পরিচালনা করে।
• বিশেষায়িত অন-ডিভাইস এআই মডেল : Translator ব্যবহার করে ডাইনামিক অন-ডিভাইস ট্রান্সলেশন অন্বেষণ করা হয়েছে।

মূল বিষয়বস্তু:

1. শূন্য-বিলম্ব ও উচ্চ গোপনীয়তা : জেমিনি ন্যানোর মতো অন-ডিভাইস মডেলগুলো ক্লাউড এপিআই কী, নেটওয়ার্ক বিলম্ব এবং ডেটা পাচারের উদ্বেগ দূর করে।
2. কাঠামোগত আউটপুট অপরিহার্য : responseConstraint এর সাথে JSON স্কিমা ব্যবহার করলে সৃজনশীল টেক্সট জেনারেশন নির্ভরযোগ্য ও টাইপ-সেফ অ্যাপ্লিকেশন লজিকে পরিণত হয়।
3. WebMCP এআই এজেন্টদের জন্য ওয়েবকে প্রস্তুত করে : সরাসরি DOM-এ টুল নিবন্ধন করার মাধ্যমে এটি অভ্যন্তরীণ সহায়ক বৈশিষ্ট্য এবং বাহ্যিক স্বায়ত্তশাসিত ব্রাউজার এজেন্ট উভয়কেই যাচাইকৃত ও সুনির্দিষ্ট কার্যকলাপের ক্ষমতা প্রদান করে।
4. মডেলকে প্রস্তাব করতে দিন, সম্পাদন করতে নয় : মডেলকে আপনার নিবন্ধিত টুলগুলোর একটি enum সীমাবদ্ধ রাখা এবং ফলাফলটি নিজে থেকে প্রেরণ করা এজেন্টের আচরণকে নিরীক্ষণযোগ্য রাখে এবং এটিকে নতুন কোনো কাজ উদ্ভাবন করা থেকে বিরত রাখে।