ওয়েবসাইটের সামগ্রিক লেআউট, নির্দিষ্ট উপাদান শৈলী বুঝতে এবং CSS বাগগুলির জন্য AI জেনারেটেড সমাধান পেতে স্টাইলিংয়ের জন্য AI সহায়তা প্যানেল ব্যবহার করুন।
"AI সহায়তা" প্যানেলটি খুলুন।
ড্রয়ারে AI সহায়তা প্যানেলটি খোলে।
এলিমেন্টস প্যানেল থেকে
এলিমেন্টস প্যানেল থেকে AI সহায়তা খুলতে, একটি DOM নোড পরিদর্শন করার সময়, নোডটিতে ডান-ক্লিক করুন এবং Ask AI বিকল্পটি নির্বাচন করুন।
যখন আপনি এভাবে AI সহায়তা খুলবেন, তখন কথোপকথনের জন্য একটি প্রসঙ্গ উপাদান হিসেবে পরীক্ষিত DOM উপাদানটি ইতিমধ্যেই পূর্বেই নির্বাচিত থাকে।
অথবা, একটি ঝুলন্ত DOM নোডের সাথে সংযুক্ত ভাসমান বোতামে ক্লিক করুন।
কমান্ড মেনু থেকে
কমান্ড মেনু থেকে AI সহায়তা খুলতে, AI টাইপ করুন এবং তারপর Show AI সহায়তা কমান্ডটি চালান, যার পাশে Drawer ব্যাজ রয়েছে।
"আরও সরঞ্জাম" মেনু থেকে
অথবা, উপরের ডান কোণে, আরও বিকল্প > আরও সরঞ্জাম > AI সহায়তা নির্বাচন করুন।
কথোপকথনের প্রসঙ্গ
AI সহায়তা সহ চ্যাটগুলি সর্বদা বর্তমানে পরিদর্শন করা উপাদানের সাথে সম্পর্কিত, যা এলিমেন্টস প্যানেল DOM ট্রিতে নির্বাচিত শেষ উপাদান। প্যানেলের নীচে বাম কোণে এই উপাদানটির একটি রেফারেন্স দেখানো হয়েছে।
বর্তমান এলিমেন্টের পাশে থাকা এলিমেন্ট পিকার ব্যবহার করে অথবা এলিমেন্টস প্যানেল DOM ট্রি থেকে নির্বাচন করে প্রসঙ্গ পরিবর্তন করুন।
প্রসঙ্গ নির্বাচন করে, আপনি ভিউপোর্টের একটি স্ক্রিনশট ক্যাপচার করতে পারেন এবং এটি আপনার চ্যাটে জমা দিতে পারেন। চ্যাট ইনপুট ক্ষেত্রের পাশে থাকা স্ক্রিনশট নিন বোতামে ক্লিক করুন।
আপনার প্রম্পটে অতিরিক্ত ভিজ্যুয়াল প্রসঙ্গ প্রদানের জন্য আপনি স্ক্রিনশট ব্যবহার করতে পারেন, উদাহরণস্বরূপ, সমস্ত দৃশ্যমান বোতামের মধ্যে একই ব্যবধান আছে কিনা তা পরীক্ষা করার জন্য।
যদিও বর্তমানে পরিদর্শন করা উপাদানটি কথোপকথনের ভিত্তি, AI সহায়তার সমস্ত ওয়েব API-তে অ্যাক্সেস রয়েছে যাতে পরিদর্শন করা পৃষ্ঠা থেকে আরও তথ্য সংগ্রহ করা যায়। এর মধ্যে রয়েছে document.querySelector ব্যবহার করে অন্যান্য উপাদানগুলির অনুসন্ধান করা বা গণনা করা শৈলী মূল্যায়ন করা।
প্ররোচনা
নতুন কথোপকথন শুরু করার সময়, স্টাইলিংয়ের জন্য AI সহায়তা আপনাকে দ্রুত শুরু করতে সাহায্য করার জন্য উদাহরণ প্রম্পট প্রদান করে।
প্যানেলের নীচে প্রম্পট ইনপুট ক্ষেত্রটি প্রিফিল করতে যেকোনো প্রম্পটে ক্লিক করুন।
বিকল্পভাবে, ইনপুট ক্ষেত্রে আপনার নিজস্ব প্রম্পট বা প্রশ্ন টাইপ করুন।
একটি প্রম্পট পাঠাতে, হয় এন্টার টিপুন অথবা ইনপুট ক্ষেত্রের ডান দিকের তীর চিহ্নে ক্লিক করুন।
কথোপকথন প্রবাহ
একটি প্রম্পট পাঠানোর মাধ্যমে স্টাইলিং এজেন্টের সাথে কথোপকথন শুরু হয়। আপনার প্রম্পটের সর্বোত্তম উত্তর দেওয়ার জন্য প্রয়োজনীয় তথ্য পেতে, এজেন্ট জাভাস্ক্রিপ্ট তৈরি করে এবং কার্যকর করে যা ওয়েব API গুলিকে কল করে। এজেন্টের অগ্রগতি ধাপে ধাপে দেখানো হয়েছে। প্রাথমিক ধাপের অবস্থা হল Investigating…
এজেন্ট আপনার প্রশ্নের সমাধানের জন্য আরও নির্দিষ্ট পদক্ষেপ গ্রহণ করলে স্টেপ লেবেল আপডেট হয়।
এজেন্ট যখন চূড়ান্ত উত্তরে পৌঁছাবে, তখন উত্তরটি তদন্তের ধাপগুলির নীচে প্রদর্শিত হবে, যার মধ্যে ফলো-আপ প্রম্পটের জন্য পরামর্শও থাকবে।
কথোপকথন চালিয়ে যেতে প্রস্তাবিত যেকোনো প্রম্পটে ক্লিক করুন। এ ক্লিক করুন।
পর্দার আড়ালে AI সহায়তা কী করেছে তা আরও ভালোভাবে বোঝার জন্য একটি তদন্তমূলক পদক্ষেপ।
যখন আপনি একটি প্রগতি চিপ প্রসারিত করেন, তখন আপনি এজেন্টের দ্বারা কার্যকর করা কোডটি দেখতে পাবেন, তার রিটার্ন মান সহ। আরও ব্যবহারের জন্য কার্যকর করা কোডটি অনুলিপি করুন, যেমন কনসোল প্যানেল দিয়ে এটি কার্যকর করা।
বিরতি দেওয়া কথোপকথন
এআই সহায়তা পার্শ্ব প্রতিক্রিয়া সহ কোড তৈরি করতে পারে। যখন এটি ঘটে, তখন কোডটি কার্যকর করার আগে কথোপকথনটি বিরতি দেওয়া হয়।
কথোপকথন বিরতি দিলে, এজেন্টের প্রস্তাবিত কোডটি পর্যালোচনা করুন। এগিয়ে যেতে ক্লিক করুন অথবা কার্যকর হওয়া রোধ করতে বাতিল করুন ক্লিক করুন।
আপনার কর্মক্ষেত্রে পরিবর্তনগুলি সংরক্ষণ করুন
একটি সংযুক্ত ওয়ার্কস্পেস ফোল্ডারের সাহায্যে, আপনি AI সহায়তা দ্বারা প্রস্তাবিত স্টাইল পরিবর্তনগুলি আপনার কম্পিউটারের CSS সোর্স ফাইলগুলিতে সংরক্ষণ করতে পারেন।
এটি করার জন্য:
প্রথমে, একটি মেটাডেটা ফাইল তৈরি করুন এবং একটি ওয়ার্কস্পেস ফোল্ডার সংযুক্ত করুন ।
বিকল্পভাবে, আপনি ম্যানুয়ালি একটি ফোল্ডার যোগ করতে পারেন।
এলিমেন্টস প্যানেল থেকে একটি চ্যাট শুরু করুন।
আপনার CSS পরিবর্তন করতে AI সহায়তা নিন।
AI সহায়তা কোড তৈরি করতে পারে এবং কার্যকরকরণ বিরতি দিতে পারে । কোডটি পর্যালোচনা করুন এবং পরিবর্তনগুলি লাইভ পরীক্ষা করতে চালিয়ে যান ক্লিক করুন।
অসংরক্ষিত পরিবর্তন বিভাগটি প্রসারিত করুন এবং কর্মক্ষেত্রে প্রয়োগ করুন ক্লিক করুন।
একটি
diffপরিবর্তনগুলি পর্যালোচনা করুন এবং সব সংরক্ষণ করুন ক্লিক করুন।
এই কর্মপ্রণালীটি শিখতে, দেখুন:
কোন উত্তর দেওয়া হয়নি।
বিভিন্ন কারণে AI সহায়তা উত্তর নাও দিতে পারে।
যদি আপনার মনে হয় আপনার প্রম্পটটি এমন কিছু যা AI সহায়তার সাথে আলোচনা করা উচিত, তাহলে একটি বাগ ফাইল করুন ।
কথোপকথনের ইতিহাস
একবার আপনি কথোপকথন শুরু করলে, পরবর্তী প্রতিটি উত্তর আপনার এবং AI এর মধ্যে পূর্ববর্তী মিথস্ক্রিয়ার উপর ভিত্তি করে তৈরি হবে।
AI সহায়তা সেশনগুলির মধ্যে আপনার কথোপকথনের ইতিহাস সংরক্ষণ করে, যাতে আপনি DevTools বা Chrome পুনরায় লোড করার পরেও আপনার পূর্ববর্তী চ্যাটগুলি অ্যাক্সেস করতে পারেন।
আপনার কথোপকথনের ইতিহাস নিয়ন্ত্রণ করতে প্যানেলের উপরের-বাম কোণে থাকা নিয়ন্ত্রণগুলি ব্যবহার করুন।
নতুন করে শুরু করুন
বর্তমানে নির্বাচিত কথোপকথনের প্রেক্ষাপট ব্যবহার করে একটি নতুন কথোপকথন শুরু করতে, বোতামে ক্লিক করুন।
চালিয়ে যান
অতীতের কথোপকথন চালিয়ে যেতে, বোতামে ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে এটি নির্বাচন করুন।
মুছে ফেলুন
ইতিহাস থেকে কোনও কথোপকথন মুছে ফেলতে, বোতামে ক্লিক করুন।
উত্তরগুলিকে রেট দিন এবং প্রতিক্রিয়া জানান
AI সহায়তা একটি পরীক্ষামূলক বৈশিষ্ট্য। তাই আমরা কীভাবে উত্তরের মান এবং সামগ্রিক অভিজ্ঞতা উন্নত করতে পারি তা জানতে আপনার প্রতিক্রিয়া সক্রিয়ভাবে খুঁজছি।
ভোটের উত্তর
উত্তরের নিচে থাকা থাম্বস আপ এবং থাম্বস ডাউন বোতাম ব্যবহার করে একটি উত্তর রেট করুন।
উত্তরগুলি রিপোর্ট করুন
অনুপযুক্ত বিষয়বস্তু রিপোর্ট করতে, ভোটিং বোতামের পাশে থাকা বোতামে ক্লিক করুন।