আপনার ওয়েবসাইটে এক নতুন ধরনের ভিজিটর এসেছে। কিছু ব্যবহারকারী এখন হাতে নেভিগেট করার পরিবর্তে লক্ষ্য-ভিত্তিক যাত্রার দায়িত্ব এআই এজেন্টদের ওপর অর্পণ করছেন। এই স্বায়ত্তশাসিত সিস্টেমগুলো ব্যবহারকারীর পক্ষ থেকে ইনপুট বুঝতে, পরিকল্পনা করতে এবং কাজ সম্পাদন করতে পারে।
তবে, আমাদের অনেক ওয়েবসাইটই মানুষের জন্য সুন্দরভাবে ডিজাইন করা হয়, যেখানে জটিল হোভার-স্টেট, পরিবর্তনশীল লেআউট এবং সাবলীল গতি থাকে। এজেন্টদের জন্য এই ব্যবস্থাটি কার্যত অকার্যকর।
এজেন্টরা আপনার সাইটটি কীভাবে দেখে
এজেন্টরা আপনার ওয়েবসাইট মনিটরে দেখেন না। তারা আপনার সাইটের একটি মেশিন-পঠনযোগ্য উপস্থাপনার উপর ভিত্তি করে কাজ করেন। এই উপস্থাপনার গুণমানই তাদের কর্মক্ষমতা নির্ধারণ করে।
এজেন্টরা আপনার ওয়েবসাইটটি প্রধানত ৩টি উপায়ে দেখতে পারেন: স্ক্রিনশট, র এইচটিএমএল (raw HTML), এবং অ্যাক্সেসিবিলিটি ট্রি ।
স্ক্রিনশট
এজেন্ট রেন্ডার করা পেজটির একটি স্ন্যাপশট নেয় এবং এলিমেন্টগুলো শনাক্ত করতে একটি ভিশন মডেল ব্যবহার করে। স্ক্রিনশটের উপর ভিত্তি করে, এজেন্ট বুঝতে পারে যে উপরের ডানদিকের সার্চ বারটি একটি গ্লোবাল সার্চ, আর মাঝখানের বক্সটি সম্ভবত একটি ফর্ম ফিল্ড। ভিজ্যুয়াল সংকেত সহায়ক হতে পারে, কারণ এজেন্টরা গুরুত্ব নির্ধারণ করতে রঙ, আকার এবং নৈকট্য ব্যবহার করতে পারে। একটি ছোট "হেল্প" লিঙ্কের চেয়ে একটি বড় ডিলিট বাটনকে সম্ভবত বেশি সতর্কতার সাথে বিবেচনা করা হবে। তবে স্ক্রিনশট বিশ্লেষণ করা ধীর এবং ব্যয়বহুল (ব্যবহৃত টোকেনের দিক থেকে) হতে পারে, তাই যখন কাঠামোর গঠন বিভ্রান্তিকর হয়, তখন এটিকে ব্যাকআপ হিসেবে ব্যবহার করাই শ্রেয়।
এইচটিএমএল
এজেন্টটি DOM বিশ্লেষণ করে এবং HTML পড়ে। এটি বুঝতে পারে এলিমেন্টগুলো কীভাবে একটির ভেতরে আরেকটি সাজানো থাকে, DOM ট্রি-এর যৌক্তিক স্তরবিন্যাস, কাঠামো নির্ধারণকারী ID ও ক্লাসের মতো অ্যাট্রিবিউট এবং সাইটের তথ্যগত মেরুদণ্ড গঠনকারী মূল ডেটা স্ট্রিংগুলো। এটি এজেন্টকে এলিমেন্টগুলোর মধ্যকার সম্পর্ক বুঝতে সাহায্য করে।
যদি কোনো প্রোডাক্ট কন্টেইনারের ভেতরে একটি ' এখনই কিনুন' বাটন থাকে, তাহলে এজেন্ট ধরে নেয় যে বাটনটি সেই নির্দিষ্ট প্রোডাক্টটিরই অন্তর্গত।
অ্যাক্সেসিবিলিটি ট্রি
অ্যাক্সেসিবিলিটি ট্রি হলো একটি ব্রাউজার-নেটিভ এপিআই যা DOM-কে সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলোতে বিভক্ত করে: যেমন ইন্টারেক্টিভ এলিমেন্টগুলোর ভূমিকা, নাম এবং অবস্থা। এটি হলো পেজটির অর্থগত সারাংশ, যা সহায়ক প্রযুক্তি দ্বারা ব্যবহৃত হয়। একটি এআই এজেন্টের জন্য, এটি একটি উচ্চ-মানের মানচিত্র হিসেবে কাজ করে যা CSS-এর দৃশ্যমান "কোলাহল" উপেক্ষা করে শুধুমাত্র উপযোগিতার উপর মনোযোগ দেয়। এই ট্রি-কে ব্যাখ্যা করার মাধ্যমে, একটি এজেন্ট প্রতিটি টগল, স্লাইডার এবং ইনপুট ফিল্ডের কার্যকরী উদ্দেশ্য শিখতে পারে।
WebMCP টুলস
WebMCP হলো ওয়েবসাইট ও এজেন্টের মধ্যকার ব্যবধান দূর করতে এবং এজেন্টদের কাছে সুনির্দিষ্ট উদ্দেশ্য ও কাজ পৌঁছে দেওয়ার জন্য প্রস্তাবিত একটি ওয়েব স্ট্যান্ডার্ড। এটি করা হয় টুলস সংজ্ঞায়িত করার মাধ্যমে, যেগুলো হলো জাভাস্ক্রিপ্ট বা এইচটিএমএল অ্যানোটেশন। এজেন্টরা প্রচলিত অ্যাকচুয়েশনের চেয়ে এই টুলসগুলোকে আরও দ্রুত ও নির্ভুলভাবে ব্যাখ্যা করে।
WebMCP টুলগুলো কাস্টমার সাপোর্ট, ই-কমার্স, ডিসকভারি এবং আরও অনেক কিছুর জন্য ব্যবহার করা যেতে পারে। কিছু কাজ সংবেদনশীল, যেমন কেনাকাটা করা। এক্ষেত্রে আপনি একটি কনফার্মেশন ডায়ালগের মাধ্যমে ব্যবহারকারীর ইন্টারঅ্যাকশনের অনুরোধ জানাতে একটি কমান্ড অন্তর্ভুক্ত করতে পারেন।
WebMCP-এর ব্যবহারসমূহ এবং কার্যকরী টুল তৈরির উপায় জানুন।
সম্মিলিত পদ্ধতি
শুধুমাত্র একটি ইনপুটের উপর নির্ভর করলে একটি অর্থগত শূন্যতা তৈরি হয়। উদাহরণস্বরূপ, DOM-এ একজন এজেন্ট একটি <div> দেখতে পারে, কিন্তু সে হয়তো জানবে না যে আপনি CSS এবং JavaScript ব্যবহার করে এটিকে একটি কার্যকরী বাটন হিসেবে কনফিগার করেছেন। স্ক্রিনশটের ক্ষেত্রে, একজন এজেন্ট হয়তো স্ক্রিনে বাটনটির অবস্থান শনাক্ত করতে পারলেও, বাটনটির উদ্দিষ্ট গন্তব্য বা এটি যে কাজটি করার জন্য ডিজাইন করা হয়েছে, সে সম্পর্কে সে অবগত থাকে না।
তাই, আধুনিক এজেন্টরা একাধিক পদ্ধতিকে একত্রিত করে। তারা ইন্টারেক্টিভ উপাদানগুলোর একটি পরিচ্ছন্ন ও সুসংগঠিত তালিকা পেতে DOM এবং অ্যাক্সেসিবিলিটি ট্রি ব্যবহার করে, এবং তারপর লেআউট, গ্রুপিং ও ভিজ্যুয়াল সংকেতগুলো বোঝার জন্য সেটিকে একটি ভিজ্যুয়াল রেন্ডারিংয়ের সাথে মিলিয়ে দেখে।
আমাদের কাজ হলো এই সব চ্যানেল জুড়ে পরিষ্কার সংকেত সরবরাহ করা।
এজেন্ট-বান্ধব ওয়েবসাইট তৈরি করুন
এজেন্টদের আপনার ওয়েবসাইট ব্যবহারে সাহায্য করার জন্য, একজন মানুষ বা এজেন্টকে যেসব কাজ করতে হয়, তার সবই সাইটের ইন্টারফেসে স্পষ্টভাবে প্রতিফলিত হওয়া উচিত। নিচে কিছু সেরা অনুশীলন দেওয়া হলো:
- অদৃশ্য উপাদান পরিহার করুন । এমন স্বচ্ছ ওভারলে পরিহার করুন যা ইন্টারেক্টিভ উপাদানগুলিকে ঢেকে রাখে। এজেন্টের করা ভিজ্যুয়াল বিশ্লেষণ ঢাকা থাকা নোডগুলিকে বাদ দিয়ে দিতে পারে, এমনকি যদি নোডটিকে স্বচ্ছ বলে মনে হয়।
- সিমান্টিক এইচটিএমএল ব্যবহার করুন । সিমান্টিক এইচটিএমএল দিয়ে কার্যকর এলিমেন্ট ডিজাইন করুন। উদাহরণস্বরূপ, পরিবর্তিত
<div>এবং<span>এলিমেন্টের পরিবর্তে<button>এবং<a>ট্যাগ ব্যবহার করুন। এজেন্টরা পূর্বোক্তগুলোকে ইন্টারেক্টিভ এলিমেন্ট হিসেবে শনাক্ত করে।- আপনি যদি সিমান্টিক এইচটিএমএল ব্যবহার করতে না পারেন, তাহলে এলিমেন্টটিকে সর্বদা উপযুক্ত
roleএবংtabindexপ্রদান করুন। উদাহরণস্বরূপ,<div role="button">। -
<label>ট্যাগগুলোকে ইনপুটের সাথে লিঙ্ক করতে সেগুলোতেforঅ্যাট্রিবিউট যোগ করুন। এটি অ্যাকশন স্ট্রিংয়ের সাথে সরাসরি সংযুক্ত লেবেল টেক্সট নির্দেশ করার মাধ্যমে এআই এজেন্টকে একটি ফিল্ডের উদ্দেশ্য বুঝতে সাহায্য করে।
- আপনি যদি সিমান্টিক এইচটিএমএল ব্যবহার করতে না পারেন, তাহলে এলিমেন্টটিকে সর্বদা উপযুক্ত
- দৃশ্যমান সংকেতের জন্য CSS ব্যবহার করুন । CSS-এ
cursor: pointerসেট করুন, যা কাজটি কার্যকর করার একটি জোরালো সংকেত। - ভিজ্যুয়াল বিশ্লেষণের জন্য ন্যূনতম আকার পূরণ করুন । নিশ্চিত করুন যে কোনো কাজ সম্পন্ন করার জন্য প্রয়োজনীয় ইন্টারেক্টিভ উপাদানগুলো দৃশ্যমান এবং ৮ বর্গ পিক্সেলের চেয়ে বড়, যাতে মডেলের ভিজ্যুয়াল বিশ্লেষণে সেগুলো ফিল্টার হয়ে বাদ না যায়।
- স্থিতিশীল লেআউট নিশ্চিত করুন । আপনার ওয়েবসাইটের লেআউট যদি ক্রমাগত পরিবর্তিত হতে থাকে, যেমন প্রোডাক্ট পেজের ' অ্যাড টু কার্ট' বাটনটি প্রতিটি প্রোডাক্ট ক্যাটাগরির জন্য ভিন্ন ভিন্ন স্থানে থাকলে, স্ক্রিনশট গ্রহণকারী এজেন্টরা বিভ্রান্ত হতে পারেন।
- এপিআই সমর্থনকারী এজেন্টদের জন্য সুনির্দিষ্ট কাজ ও কার্যকলাপ নির্ধারণ করতে WebMCP টুল তৈরি করুন ।
পরবর্তী পদক্ষেপ
একটি সাইটকে 'এজেন্ট-রেডি' করার জন্য আমরা যা কিছু পরামর্শ দিই, তা সাইটটিকে মানুষের জন্যও আরও উন্নত করে তোলে।
ওয়েবসাইটগুলোকে এআই এজেন্ট-বান্ধব করে তোলা হলো সুগঠিত, প্রবেশযোগ্য এবং অর্থপূর্ণ ওয়েবসাইট তৈরির মৌলিক নীতিগুলোর প্রতি পুনরায় অঙ্গীকারবদ্ধ হওয়ার একটি প্রণোদনা।
- আপনার অ্যাক্সেসিবিলিটি ট্রি (A11y Tree) নিরীক্ষা করুন : আপনার সাইটের হায়ারার্কি মেশিন-পঠনযোগ্য এবং স্থিতিশীল কিনা তা নিশ্চিত করতে বিদ্যমান টুল ব্যবহার করুন।
- WebMCP সম্পর্কে পড়ুন , যা ওয়েবসাইটকে এজেন্টের সাথে যোগাযোগ করতে সাহায্য করার জন্য একটি প্রস্তাবিত ওয়েব স্ট্যান্ডার্ড। এর এপিআইগুলো ক্রোমে একটি অরিজিন ট্রায়ালের মাধ্যমে প্রোডাকশনে পরীক্ষা-নিরীক্ষার জন্য উপলব্ধ।