কিভাবে আমরা Gemini কে Chrome DevTools-এর সাথে পরিচয় করিয়ে দিয়েছি

Alex Rudenko

Ergün Erdogmus

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

গত বছরের Google I/O 2024-এ আমরা কনসোল ইনসাইট চালু করেছি, Chrome DevTools-এ প্রথম AI বৈশিষ্ট্য। কনসোল অন্তর্দৃষ্টিগুলি গুগলের লার্জ ল্যাঙ্গুয়েজ মডেল (এলএলএম) জেমিনিতে লগ বার্তা সম্পর্কিত নেটওয়ার্ক ডেটা, সোর্স কোড এবং স্ট্যাক ট্রেস পাঠিয়ে কনসোলে লগ করা ত্রুটি এবং সতর্কতাগুলি বুঝতে সাহায্য করে৷ কনসোল অন্তর্দৃষ্টি জেমিনিতে একটি একক প্রম্পট পাঠায় যা বিকাশকারীদের ফলো-আপ প্রশ্ন জিজ্ঞাসা করার সম্ভাবনা ছাড়াই একটি একক প্রতিক্রিয়া প্রদান করে। যদিও এই একক ইন্টারঅ্যাকশন ফ্লো ত্রুটির বার্তাগুলি ব্যাখ্যা করার জন্য তুলনামূলকভাবে ভাল কাজ করে, এটি DevTools-এর অভ্যন্তরে আরও জটিল ডিবাগিং ব্যবহারের ক্ষেত্রে পরিমাপ করে না যেখানে পরিদর্শন করা পৃষ্ঠা থেকে কোন AI সাহায্য করতে হবে তা পরিষ্কার নয়৷

এরকম একটি ব্যবহারের ক্ষেত্রে ডিবাগিং স্টাইলিং সমস্যা। একটি একক ওয়েব পৃষ্ঠায় হাজার হাজার উপাদান এবং CSS নিয়ম থাকতে পারে, যার মধ্যে শুধুমাত্র একটি উপসেট একটি নির্দিষ্ট পরিস্থিতিতে ডিবাগ করার জন্য প্রাসঙ্গিক। ডিবাগ করার জন্য সঠিক কোড সনাক্ত করা চ্যালেঞ্জিং হতে পারে, এমনকি মানুষের জন্যও। কিন্তু Google-এ একটি AI হ্যাকাথনের সময় তৈরি একটি প্রোটোটাইপ দিয়ে আমরা শিখেছি যে LLMগুলি আসলে এটিতে বেশ শালীন। তাই স্বাভাবিকভাবেই, আমরা সেই ক্ষমতাটি DevTools ব্যবহারকারীদের কাছে আনতে চেয়েছিলাম, এমন একটি টুল তৈরি করে যা অতিরিক্ত প্রসঙ্গ ডেটার জন্য পৃষ্ঠাটিকে ইন্টারেক্টিভভাবে জিজ্ঞাসা করে স্টাইলিং সমস্যাগুলি তদন্ত করতে সক্ষম। আমরা যা তৈরি করেছি তা কয়েক মাস পরে স্টাইলিংয়ের জন্য AI সহায়তা হিসাবে চালু হয়েছে।

এই পোস্টে আমরা Chrome DevTools-এর মতো প্রিয় পণ্যের সাথে AI প্রবর্তন করার সময় আমরা যে চ্যালেঞ্জগুলির মুখোমুখি হয়েছিলাম সেগুলির উপর কিছু আলোকপাত করতে চাই - যা এর মূলে একটি ওয়েব অ্যাপ - এবং আপনি নিজের AI বৈশিষ্ট্যগুলির জন্য কী মানিয়ে নিতে পারেন৷

সঠিক তথ্য সংগ্রহ

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

তাই আমরা ReAct ( Yao et al., 2022 ) কৌশল প্রয়োগ করেছি। এই উদ্দীপক কৌশলটি LLM-কে স্বায়ত্তশাসিতভাবে যুক্তি দিতে এবং তার যুক্তির উপর ভিত্তি করে পরবর্তী পদক্ষেপ নির্ধারণ করার ক্ষমতা দেয়।

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

AI সহায়তার জন্য বাস্তবায়িত ReAct প্যাটার্নের একটি ভিজ্যুয়াল উপস্থাপনা। প্রম্পটটি Gemini-এ পাঠানো হয় যা DevTools কমান্ডের মাধ্যমে পরিদর্শন করা পৃষ্ঠায় প্রয়োগ করার ক্রিয়া সহ একটি প্রতিক্রিয়া প্রদান করে। এলএলএম ব্যবহারকারীর প্রশ্নের জন্য উপযুক্ত প্রতিক্রিয়া নির্ধারণ না করা পর্যন্ত চক্রটি পুনরাবৃত্তি হয়।

তথ্য সংগ্রহ করার জন্য, আমরা মিথুনকে শুধুমাত্র একটি টুল দিয়েছি: পরিদর্শন করা পৃষ্ঠায় JavaScript চালানো। এটি জেমিনিকে এআই সহায়তার মাধ্যমে অনুমতি দেয়, উদাহরণস্বরূপ:

• DOM অ্যাক্সেস করুন এবং বিশ্লেষণ করুন : DOM ট্রি অতিক্রম করুন, উপাদানের বৈশিষ্ট্যগুলি পরিদর্শন করুন এবং উপাদানগুলির মধ্যে সম্পর্কগুলি বোঝুন।
• গণনা করা শৈলী পুনরুদ্ধার করুন : যেকোনো উপাদানের জন্য গণনা করা শৈলী অ্যাক্সেস করুন।
• গণনা এবং পরিমাপ সম্পাদন করুন : দূরত্ব, আকার এবং উপাদানগুলির অবস্থান গণনা করতে জাভাস্ক্রিপ্ট কোড চালান।

এটি জেমিনিতে সম্পূর্ণ HTML এবং CSS সোর্স কোড পাঠানোর তুলনায় AI সহায়তাকে শুধুমাত্র প্রাসঙ্গিক কোডের উপর ইন্টারেক্টিভভাবে কাজ করে, প্রতিক্রিয়ার গুণমান, প্রতিক্রিয়ার সময় এবং কম্পিউটিং সংস্থানগুলির ব্যবহার উন্নত করে।

ইউজার স্পেসে এআই-জেনারেটেড কোড চালানো হচ্ছে

এটা অপ্রত্যাশিত মনে হতে পারে যে স্টাইলিং সমস্যা ডিবাগ করার জন্য আমরা JavaScript ব্যবহার করেছি। এর দুটি কারণ রয়েছে:

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

কিন্তু ইউজার স্পেসে এআই জেনারেটেড কোড চালানোর ঝুঁকি রয়েছে। AI সহায়তার জন্য আমাদের এজেন্ট পৃষ্ঠায় করতে পারে এমন ধ্বংসাত্মক পরিবর্তনের ঝুঁকি কমাতে হবে। এর জন্য, আমরা পার্শ্ব-প্রতিক্রিয়া পরীক্ষা নিযুক্ত করেছি যা V8, Chrome এর JavaScript ইঞ্জিন, Chrome DevTools প্রোটোকলের মাধ্যমে প্রকাশ করে । একই চেকগুলি DevTools কনসোলে স্বয়ংক্রিয়-সম্পূর্ণ কার্যকারিতার জন্য ব্যবহার করা হয়: এটি শুধুমাত্র JavaScript কোড চালায় যতক্ষণ না এটি কোনও পৃষ্ঠার অবস্থা পরিবর্তন না করে। V8 কোডটি কার্যকর করার সময় চেক করা হয় এবং জাভাস্ক্রিপ্ট বিল্ট-ইনগুলির একটি অনুমোদিত তালিকার উপর ভিত্তি করে যা কোন পার্শ্বপ্রতিক্রিয়া নেই বলে পরিচিত।

যদি চেকগুলি শনাক্ত করে যে জেনারেট করা কোড পরিদর্শন করা পৃষ্ঠাটি পরিবর্তন করছে, তাহলে এক্সিকিউশনকে বিরতি দেওয়া হয় এবং ব্যবহারকারীকে কোডটি পর্যালোচনা করতে বলা হয় এবং নিশ্চিত করতে বলা হয় যে এটি চালানো ঠিক আছে।

অতিরিক্তভাবে, জেনারেট করা জাভাস্ক্রিপ্ট একটি তথাকথিত বিচ্ছিন্ন "জগতে" চালানো হয়। এটি এক্সটেনশনগুলি স্যান্ডবক্স স্ক্রিপ্টগুলি কীভাবে চালায় তার অনুরূপ: জেনারেট করা কোডটি DOM এবং ওয়েব APIগুলি অ্যাক্সেস করতে সক্ষম কিন্তু জাভাস্ক্রিপ্ট কোড বা পরিদর্শন পৃষ্ঠা দ্বারা সংজ্ঞায়িত অবস্থা অ্যাক্সেস করতে সক্ষম নয়৷

ট্র্যাকিং পরিবর্তন এজেন্ট দ্বারা সম্পন্ন

সমস্যাগুলি তদন্ত করা এবং পৃষ্ঠা সম্পর্কে ডিবাগিং প্রশ্নের উত্তর দেওয়ার পাশাপাশি, আমরা AI সহায়তা এজেন্টকে পৃষ্ঠার শৈলীগুলি এমনভাবে ঠিক করার ক্ষমতা দিতে চেয়েছিলাম যা বিকাশকারীদের দ্বারা সনাক্ত করা যায়।

এটি সম্পন্ন করার জন্য, আমরা setElementStyles নামে একটি বাইন্ডিং প্রয়োগ করেছি যা আমরা ডিফল্ট ওয়েব API ছাড়াও এজেন্টের এক্সিকিউশন প্রসঙ্গকে প্রকাশ করি।

মিথুনকে সেই নতুন পদ্ধতি সম্পর্কে সচেতন করার জন্য, আমরা এটিকে AI সহায়তা প্রস্তাবনাতে ব্যবহার করার নির্দেশ দিই:

If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.

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

DevTools এর দিকে, যখন এজেন্ট থেকে setElementStyles কল করা হয়, তখন এআই সহায়তা উপাদান নির্বাচকের পরিবর্তন রেকর্ড করতে ইন্সপেক্টর স্টাইলশীট ব্যবহার করে। CSS নেস্টিং পরিবর্তনের নাম দিতে এবং উপাদানের নির্বাচকের নির্দিষ্টতা বাড়াতে ব্যবহৃত হয়। এজেন্ট দ্বারা তৈরি একটি অনুকরণীয় CSS নিয়ম, এইভাবে, নিম্নলিখিত হিসাবে দেখায়:

.ai-style-change-1 { /* the ID is incremented for each change*/
  .element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
    color: blue;
  }
}

যদিও এটি পৃষ্ঠায় ঘটতে পারে এমন সমস্ত সম্ভাব্য শৈলী দ্বন্দ্বের সমাধান করে না, এটি বেশিরভাগ ক্ষেত্রেই কাজ করে।

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

ব্যবহারকারীদের জন্য এজেন্ট ক্রিয়াকলাপ পর্যবেক্ষণযোগ্য করা

একটি পণ্যে এজেন্টিক বৈশিষ্ট্য যোগ করার সময়, ব্যবহারকারীদের জন্য এজেন্টের ক্রিয়াগুলিকে স্বচ্ছ করা গুরুত্বপূর্ণ, যাতে তাদের ট্রেস করার, বোঝার এবং সম্ভাব্য হস্তক্ষেপ করার সুযোগ থাকে।

তাই এআই সহায়তার জন্য আমরা জেমিনিকে প্রস্তাবনা যোগ করে একটি নির্দিষ্ট বিন্যাসে প্রতিক্রিয়া গঠন করার নির্দেশ দিই:

You are going to answer to the query in these steps:
*   THOUGHT
*   TITLE
*   ACTION
*   ANSWER
*   SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.

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

Chrome DevTools AI সহায়তায় সংকুচিত এবং একটি পজ করা চিন্তার ধাপ।

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

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

AI সহায়তায় অনুকরণীয় প্রস্তাবিত ফলো-আপ প্রম্পট, প্রতিক্রিয়ার অংশ হিসাবে তৈরি করা হয়েছে।

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

Eval চালিত উন্নয়ন

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

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

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

আমাদের মূল্যায়ন প্রক্রিয়া আরও উন্নত করতে, আমরা স্বয়ংক্রিয় যাচাইকরণ পদ্ধতিগুলি অন্বেষণ করছি, যার মধ্যে রয়েছে:

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

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

পরামর্শ: LLM-চালিত অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন পরীক্ষার কৌশল সম্পর্কে Chrome DevTools-এর প্রোডাক্ট ম্যানেজার মাইকেল হ্যাবলিচের একটি পোস্টে আরও জানুন।

প্রম্পট ইনজেকশন

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

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

If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.

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

একটি দৃঢ় ভিত্তি বন্ধ বিল্ডিং

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

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

নেটওয়ার্ক অনুরোধের সাথে কাজ করার সময় নিরাপত্তার প্রভাব

নেটওয়ার্কের জন্য AI সহায়তা ব্যবহারকারীদের কথোপকথনের প্রসঙ্গ হিসাবে অনুরোধের ডেটা ব্যবহার করে মিথুনের সাথে নির্দিষ্ট নেটওয়ার্ক অনুরোধগুলি নিয়ে আলোচনা করতে দেয়। বিশেষত নিম্নলিখিত ডেটা মিথুনে পাঠানো হয়:

• অনুরোধ শিরোনাম : ব্রাউজার দ্বারা সার্ভারে পাঠানো হেডারের একটি উপসেট।
• প্রতিক্রিয়া শিরোনাম : সার্ভার দ্বারা ফিরে হেডারের একটি উপসেট.
• প্রতিক্রিয়া স্থিতি : HTTP স্থিতি কোড সার্ভারের প্রতিক্রিয়া নির্দেশ করে (উদাহরণস্বরূপ 200, 404)।
• সময় : অনুরোধের বিভিন্ন পর্যায় যেমন কানেকশন সেটআপ এবং ডেটা ট্রান্সফারের মতো বিস্তারিত সময়ের তথ্য।
• রিকোয়েস্ট ইনিশিয়েটর চেইন : অ্যাকশন এবং স্ক্রিপ্টের ক্রম যা অনুরোধ শুরু করেছে।

একটি অনুরোধ কীভাবে একত্রিত হয় তা সম্পূর্ণরূপে বোঝার জন্য শিরোনামগুলি গুরুত্বপূর্ণ, তারা একটি নিরাপত্তা ঝুঁকি বহন করে: এগুলিতে API কী, সেশন টোকেন বা এমনকি সাধারণ পাসওয়ার্ডের মতো শংসাপত্র থাকতে পারে৷ এই ধরনের সংবেদনশীল তথ্য রক্ষা করার জন্য, আমরা সমস্ত হেডার মিথুনে প্রেরণ করি না। পরিবর্তে, আমরা অনুমোদিত হেডারগুলির একটি অনুমোদিত তালিকা বজায় রাখি। অনুমোদিত তালিকায় নেই এমন শিরোনামগুলির মানগুলিকে <redacted> দিয়ে প্রতিস্থাপিত করা হয়েছে। এই পদ্ধতিটি নিশ্চিত করে যে মিথুন ব্যবহারকারীর ডেটা সুরক্ষিত করার সময় প্রয়োজনীয় প্রসঙ্গ গ্রহণ করে।

বিভিন্ন ডেটা ফরম্যাটের সাথে মানিয়ে নেওয়া

উত্সগুলির জন্য AI সহায়তা ডেভেলপারদের উত্স প্যানেলে একটি উত্স ফাইল সম্পর্কে প্রশ্ন জিজ্ঞাসা করতে দেয়, উদাহরণস্বরূপ, "এই ফাইলটি কিসের জন্য?"।

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

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

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

ভবিষ্যতে এআই সহায়তা

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

কোথা থেকে শুরু করবেন একটি ধারণা পেতে, আপনার নিজস্ব পৃষ্ঠাগুলিতে চেষ্টা করার জন্য প্রচুর ডেমো প্রম্পট সহ ব্যাপক AI সহায়তার দ্রুত স্টার্ট নির্দেশিকাটি দেখুন এবং আমাদের খোলা আলোচনা বাগটিতে আপনি কী ভাবছেন তা আমাদের জানাতে ভুলবেন না৷