DevTools ডিজাইন করা: AI সহায়তায় দক্ষ টোকেন ব্যবহার

Alina Varkki

প্রকাশিত: ৩০ জানুয়ারী, ২০২৬

পারফরম্যান্সের জন্য AI সহায়তা তৈরি করার সময়, প্রাথমিক প্রকৌশল চ্যালেঞ্জ ছিল DevTools-এ রেকর্ড করা পারফরম্যান্স ট্রেসগুলির সাথে জেমিনিকে সুন্দরভাবে কাজ করানো।

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

পারফরম্যান্স ট্রেস হলো বিশাল JSON ফাইল, যা প্রায়শই বেশ কয়েকটি মেগাবাইট ধারণ করে। একটি কাঁচা ট্রেস পাঠানোর ফলে তাৎক্ষণিকভাবে একটি মডেলের প্রসঙ্গ উইন্ডো শেষ হয়ে যাবে এবং আপনার প্রশ্নের জন্য কোনও জায়গা থাকবে না।

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

প্রাথমিক প্রেক্ষাপট অনুযায়ী সাজিয়ে নিন

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

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

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

এআই-কে সরঞ্জাম প্রদান

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

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

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

এজেন্ট অপারেশনের উদাহরণ

আসুন আমরা কীভাবে AI সহায়তা আরও তথ্য পুনরুদ্ধারের জন্য ফাংশন কলিং ব্যবহার করে তার একটি ব্যবহারিক উদাহরণ দেখি। "এই অনুরোধটি কেন ধীর?" এর প্রাথমিক প্রম্পটের পরে, AI সহায়তা নিম্নলিখিত ফাংশনগুলিকে ক্রমবর্ধমানভাবে কল করতে পারে:

1. getEventByKey : ব্যবহারকারীর দ্বারা নির্বাচিত নির্দিষ্ট অনুরোধের বিস্তারিত সময় বিবরণ (TTFB, ডাউনলোড সময়) আনুন।
2. getMainThreadTrackSummary : অনুরোধটি শুরু হওয়ার সময় মূল থ্রেডটি ব্যস্ত (অবরুদ্ধ) ছিল কিনা তা পরীক্ষা করুন।
3. getNetworkTrackSummary : একই সময়ে অন্যান্য রিসোর্সগুলি ব্যান্ডউইথের জন্য প্রতিযোগিতা করছিল কিনা তা বিশ্লেষণ করুন।
4. getInsightDetails : ট্রেস সামারিতে ইতিমধ্যেই এই অনুরোধের সাথে সম্পর্কিত কোনও অন্তর্দৃষ্টি উল্লেখ করা আছে কিনা তা পরীক্ষা করুন।

এই কলগুলির ফলাফল একত্রিত করে, AI সহায়তা তারপর একটি রোগ নির্ণয় প্রদান করতে পারে এবং কার্যকর পদক্ষেপ প্রস্তাব করতে পারে, যেমন getFunctionCode ব্যবহার করে কোড উন্নতির পরামর্শ দেওয়া বা getResourceContent উপর ভিত্তি করে রিসোর্স লোডিং অপ্টিমাইজ করা।

তবে, প্রাসঙ্গিক ডেটা পুনরুদ্ধার করা চ্যালেঞ্জের মাত্র অর্ধেক। ফাংশনগুলি গ্রানুলার ডেটা সরবরাহ করেও, সেই ফাংশনগুলি দ্বারা ফেরত পাঠানো ডেটা বড় আকারের হতে পারে। আরেকটি উদাহরণ নিতে, getDetailedCallTree শত শত নোড সহ একটি ট্রি ফেরত দিতে পারে। স্ট্যান্ডার্ড JSON-এ, এটি কেবল নেস্টিংয়ের জন্য অনেক { এবং } হবে!

অতএব, এমন একটি ফর্ম্যাটের প্রয়োজন যা যথেষ্ট ঘন এবং টোকেন-দক্ষ, কিন্তু তবুও যথেষ্ট কাঠামোগত যাতে একজন LLM বুঝতে এবং রেফারেন্স করতে পারে।

তথ্য সিরিয়ালাইজ করুন

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

{
  "id": 2,
  "name": "animate",
  "selected": true,
  "duration": 150,
  "selfTime": 20,
  "children": [3, 5, 6, 7, 10, 11, 12]
}

একটি পারফরম্যান্স ট্রেসে হাজার হাজার থাকতে পারে, যেমনটি নিচের স্ক্রিনশটে দেখানো হয়েছে। প্রতিটি ছোট রঙিন বাক্স এই অবজেক্ট স্ট্রাকচার ব্যবহার করে উপস্থাপন করা হয়েছে।

এই ফর্ম্যাটটি DevTools-এ প্রোগ্রাম্যাটিকভাবে কাজ করার জন্য ভালো, কিন্তু নিম্নলিখিত কারণে LLM-দের জন্য এটি অপচয়জনক:

1. রিডান্ড্যান্ট কী: কল ট্রিতে প্রতিটি নোডের জন্য "duration" , "selfTime" , এবং "children" এর মতো স্ট্রিংগুলি পুনরাবৃত্তি করা হয়। সুতরাং, একটি মডেলে 500 টি নোড পাঠানো একটি ট্রি সেই প্রতিটি কীগুলির জন্য 500 বার টোকেন ব্যবহার করবে।
2. শব্দসমষ্টির তালিকা: প্রতিটি শিশু আইডি children মাধ্যমে পৃথকভাবে তালিকাভুক্ত করার জন্য প্রচুর সংখ্যক টোকেন খরচ হয়, বিশেষ করে এমন কাজের জন্য যা অনেক ডাউনস্ট্রিম ইভেন্টের সূত্রপাত করে।

পারফরম্যান্সের জন্য এআই সহায়তায় ব্যবহৃত সমস্ত ডেটার জন্য একটি টোকেন-দক্ষ ফর্ম্যাট বাস্তবায়ন ছিল ধাপে ধাপে সম্পন্ন একটি প্রক্রিয়া।

প্রথম পুনরাবৃত্তি

যখন আমরা পারফরম্যান্সের জন্য AI সহায়তার উপর কাজ শুরু করি, তখন আমরা শিপিং গতির জন্য অপ্টিমাইজেশন করি। টোকেন অপ্টিমাইজেশনের জন্য আমাদের পদ্ধতিটি মৌলিক ছিল এবং আমরা মূল JSON কে ব্রেস এবং কমা থেকে বাদ দিয়েছিলাম, যার ফলে নিম্নলিখিত ফর্ম্যাটটি তৈরি হয়েছিল:

allUrls = [...]

Node: 1 - update
Selected: false
Duration: 200
Self Time: 50
Children:
   2 - animate

Node: 2 - animate
Selected: true
Duration: 150
Self Time: 20
URL: 0
Children:
   3 - calculatePosition
   5 - applyStyles
   6 - applyStyles
   7 - calculateLayout
   10 - applyStyles
   11 - applyStyles
   12 - applyStyles

Node: 3 - calculatePosition
Selected: false
Duration: 15
Self Time: 2
URL: 0
Children:
   4 - getBoundingClientRect

...

কিন্তু এই প্রথম সংস্করণটি raw JSON এর তুলনায় সামান্য উন্নতি ছিল। এটি এখনও স্পষ্টভাবে নোড শিশুদের আইডি এবং নাম সহ তালিকাভুক্ত করেছে, এবং প্রতিটি লাইনের সামনে বর্ণনামূলক, পুনরাবৃত্তিমূলক কী ( Node: Selected: Duration: …) যুক্ত করেছে।

চাইল্ড নোড তালিকা অপ্টিমাইজ করুন

আরও অপ্টিমাইজ করার পরবর্তী পদক্ষেপ হিসেবে, আমরা নোড শিশুদের নামগুলি সরিয়ে দিয়েছি ( calculatePosition , applyStyles , … আগের উদাহরণে)। যেহেতু AI সহায়তা ফাংশন কলিংয়ের মাধ্যমে সমস্ত নোডে অ্যাক্সেস করতে পারে এবং এই তথ্যটি ইতিমধ্যেই নোড হেডে ( Node: 3 - calculatePosition ) রয়েছে, তাই এই তথ্যটি পুনরাবৃত্তি করার প্রয়োজন নেই। এর ফলে আমরা Children পূর্ণসংখ্যার একটি সহজ তালিকায় সঙ্কুচিত করতে পেরেছি:

Node: 2 - animate
Selected: true
Duration: 150
Self Time: 20
URL: 0
Children: 3, 5, 6, 7, 10, 11, 12

..

যদিও এটি আগের তুলনায় উল্লেখযোগ্য উন্নতি, তবুও অপ্টিমাইজ করার আরও জায়গা ছিল। পূর্ববর্তী উদাহরণটি দেখলে, আপনি লক্ষ্য করতে পারেন যে Children প্রায় ক্রমানুসারে তৈরি, যেখানে কেবল 4 , 8 , এবং 9 অনুপস্থিত।

কারণ হল, আমাদের প্রথম প্রচেষ্টায় আমরা পারফরম্যান্স ট্রেস থেকে ট্রি ডেটা সিরিয়ালাইজ করার জন্য একটি ডেপথ-ফার্স্ট সার্চ (DFS) অ্যালগরিদম ব্যবহার করেছি। এর ফলে ভাইবোন নোডের জন্য নন-সিক্যুয়েন্সিয়াল আইডি তৈরি হয়েছিল, যার ফলে আমাদের প্রতিটি আইডি আলাদাভাবে তালিকাভুক্ত করতে হয়েছিল।

আমরা বুঝতে পেরেছি যে যদি আমরা ব্রেডথ-ফার্স্ট সার্চ (BFS) ব্যবহার করে ট্রিটি পুনরায় ইনডেক্স করি, তাহলে আমরা ক্রমিক আইডি পাব, যার ফলে আরেকটি অপ্টিমাইজেশন সম্ভব হবে। পৃথক আইডি তালিকাভুক্ত করার পরিবর্তে, আমরা এখন একক কম্প্যাক্ট রেঞ্জ সহ শত শত শিশুকেও প্রতিনিধিত্ব করতে পারি, যেমন মূল উদাহরণের জন্য 3-9 ।

অপ্টিমাইজড Children তালিকা সহ চূড়ান্ত নোড নোটেশনটি এরকম দেখাচ্ছে:

allUrls = [...]

Node: 2 - animate
Selected: true
Duration: 150
Self Time: 20
URL: 0
Children: 3-9

কী-এর সংখ্যা কমিয়ে দিন

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

allUrls = [...]

2;animate;150;20;0;3-10

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

...
Each call frame is presented in the following format:

'id;name;duration;selfTime;urlIndex;childRange;[S]'

Key definitions:

*   id: A unique numerical identifier for the call frame.
*   name: A concise string describing the call frame (e.g., 'Evaluate Script', 'render', 'fetchData').
*   duration: The total execution time of the call frame, including its children.
*   selfTime: The time spent directly within the call frame, excluding its children's execution.
*   urlIndex: Index referencing the "All URLs" list. Empty if no specific script URL is associated.
*   childRange: Specifies the direct children of this node using their IDs. If empty ('' or 'S' at the end), the node has no children. If a single number (e.g., '4'), the node has one child with that ID. If in the format 'firstId-lastId' (e.g., '4-5'), it indicates a consecutive range of child IDs from 'firstId' to 'lastId', inclusive.
*   S: **Optional marker.** The letter 'S' appears at the end of the line **only** for the single call frame selected by the user.

....

যদিও এই ফর্ম্যাটের বর্ণনার জন্য একটি টোকেন খরচ প্রযোজ্য, এটি পুরো কথোপকথনের জন্য একবার পরিশোধ করা একটি স্ট্যাটিক খরচ। পূর্ববর্তী অপ্টিমাইজেশনের মাধ্যমে অর্জিত সঞ্চয়ের চেয়ে খরচ বেশি।

উপসংহার

AI দিয়ে তৈরি করার সময় টোকেনের ব্যবহার অপ্টিমাইজ করা একটি গুরুত্বপূর্ণ বিবেচ্য বিষয়। raw JSON থেকে একটি বিশেষায়িত কাস্টম ফর্ম্যাটে স্থানান্তরিত করে, Breadth-First Search দিয়ে ট্রিগুলিকে পুনরায় সূচীকরণ করে এবং চাহিদা অনুযায়ী ডেটা আনার জন্য টুল কল ব্যবহার করে, আমরা Chrome DevTools-এ AI সহায়তার টোকেনের পরিমাণ উল্লেখযোগ্যভাবে হ্রাস করেছি।

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

আমরা আশা করি এই কৌশলগুলি আপনাকে AI ডিজাইন করার সময় আপনার নিজস্ব ডেটা স্ট্রাকচারগুলি আবার দেখার জন্য অনুপ্রাণিত করবে। ওয়েব অ্যাপ্লিকেশনগুলিতে AI দিয়ে শুরু করতে, web.dev-এ Learn AI অন্বেষণ করুন।