स्टाइल बनाने के लिए एआई की मदद लेना

Sofia Emelianova
Sofia Emelianova

स्टाइलिंग के लिए, एआई असिस्टेंस पैनल का इस्तेमाल करें. इससे, किसी वेबसाइट के पूरे लेआउट और खास एलिमेंट की स्टाइल को समझने में मदद मिलती है. साथ ही, सीएसएस गड़बड़ियों को ठीक करने के लिए, एआई से जनरेट किए गए सुधारों को भी पाया जा सकता है.

"AI की मदद" पैनल खोलना

एआई की मदद पैनल, ड্রॉअर में खुलता है.

एआई असिस्टेंट पैनल, डिफ़ॉल्ट रूप से खुला हो.

एलिमेंट पैनल से

एलिमेंट पैनल से एआई की मदद पाने के लिए, किसी डीओएम नोड की जांच करते समय, नोड पर राइट क्लिक करें और एआई से पूछें विकल्प चुनें.

एलिमेंट का संदर्भ मेन्यू, जिसमें 'एआई से पूछें' को हाइलाइट किया गया है.

इस तरह एआई की मदद खोलने पर, जांचा गया डीओएम एलिमेंट, बातचीत के लिए कॉन्टेक्स्ट एलिमेंट के तौर पर पहले से चुना गया होता है.

इसके अलावा, कर्सर घुमाने पर जिस DOM नोड पर कर्सर रुकता है उससे जुड़े फ़्लोटिंग बटन पर क्लिक करें.

डीओएम नोड से जुड़ा फ़्लोटिंग बटन.

कमांड मेन्यू से

निर्देश मेन्यू से AI की मदद खोलने के लिए, AI टाइप करें. इसके बाद, AI की मदद दिखाएं निर्देश चलाएं. इस निर्देश के बगल में ड্রॉअर बैज होता है.

'एआई से मदद पाने वाला पैनल दिखाएं' को हाइलाइट करके खोला गया कमांड मेन्यू.

"ज़्यादा टूल" मेन्यू में जाकर

इसके अलावा, सबसे ऊपर दाएं कोने में, ज़्यादा विकल्प > ज़्यादा टूल > एआई की मदद को चुनें.

ज़्यादा टूल वाला मेन्यू खुला हुआ है.

बातचीत का कॉन्टेक्स्ट

एआई की मदद से की जाने वाली चैट, हमेशा उस एलिमेंट से जुड़ी होती है जिसकी जांच की जा रही है. यह एलिमेंट, एलिमेंट पैनल के डीओएम ट्री में चुना गया आखिरी एलिमेंट होता है. इस एलिमेंट का रेफ़रंस, पैनल के सबसे नीचे बाएं कोने में दिखता है.

एआई की मदद से मिलने वाला पैनल, जिसमें कॉन्टेक्स्ट एलिमेंट को हाइलाइट किया गया है.

मौजूदा एलिमेंट के बगल में मौजूद एलिमेंट पिकर का इस्तेमाल करके या एलिमेंट पैनल के डीओएम ट्री से चुनकर, संदर्भ बदलें.

फ़िलहाल, जांचे गए एलिमेंट से बातचीत शुरू होती है. हालांकि, एआई की मदद के पास सभी वेब एपीआई का ऐक्सेस होता है, ताकि जांचे गए पेज से ज़्यादा जानकारी इकट्ठा की जा सके. इसमें document.querySelector की मदद से अन्य एलिमेंट से क्वेरी करना या कैलकुलेट की गई स्टाइल का आकलन करना शामिल है.

प्रॉम्प्ट

नई बातचीत शुरू करने पर, स्टाइल के लिए एआई की मदद से उदाहरण के तौर पर प्रॉम्प्ट मिलते हैं. इनसे आपको तुरंत शुरुआत करने में मदद मिलती है.

एआई से मदद पाने वाला पैनल, जिसमें उदाहरण के तौर पर दिए गए प्रॉम्प्ट हाइलाइट किए गए हैं.

पैनल के सबसे नीचे मौजूद प्रॉम्प्ट इनपुट फ़ील्ड को पहले से भरने के लिए, किसी भी प्रॉम्प्ट पर क्लिक करें.

इसके अलावा, इनपुट फ़ील्ड में अपना प्रॉम्प्ट या सवाल टाइप करें.

प्रॉम्प्ट भेजने के लिए, Enter दबाएं या इनपुट फ़ील्ड के दाईं ओर मौजूद ऐरो पर क्लिक करें.

बातचीत का फ़्लो

प्रॉम्प्ट भेजने पर, स्टाइल एजेंट के साथ बातचीत शुरू हो जाती है. आपके प्रॉम्प्ट का सबसे सही जवाब देने के लिए ज़रूरी जानकारी पाने के लिए, एजेंट वेब एपीआई को कॉल करने वाला JavaScript जनरेट और चलाता है. एजेंट की प्रोग्रेस को चरणों में दिखाया जाता है. शुरुआती चरण का स्टेटस Investigating… है.

बातचीत शुरू होने के बाद, एआई सहायता पैनल.

आपके सवाल का जवाब देने के लिए, एजेंट ज़्यादा खास कार्रवाइयां करता है. इससे चरण का लेबल अपडेट होता है.

जब एजेंट को आखिरी जवाब मिल जाता है, तो वह जवाब, जांच के चरणों के नीचे दिखता है. इसमें, फ़ॉलो-अप प्रॉम्प्ट के सुझाव भी शामिल होते हैं.

एआई की मदद से मिलने वाले जवाब वाला एआई सहायता पैनल.

बातचीत जारी रखने के लिए, सुझाए गए किसी भी प्रॉम्प्ट पर क्लिक करें. पर क्लिक करें

की जांच के दौरान, एआई की मदद से क्या किया गया, यह समझने के लिए.

एआई असिस्टेंस पैनल, जिसमें बातचीत के बड़े किए गए चरण को दिखाया गया है.

प्रोग्रेस चिप को बड़ा करने पर, आपको वह कोड दिखता है जिसे एजेंट ने चलाया है. साथ ही, आपको उसकी रिटर्न वैल्यू भी दिखती है. आगे इस्तेमाल करने के लिए, चलाए गए कोड को कॉपी करें. जैसे, कंसोल पैनल की मदद से उसे चलाना.

रोकी गई बातचीत

एआई की मदद से, ऐसा कोड जनरेट हो सकता है जिसका असर दूसरे कोड पर पड़े. ऐसा होने पर, कोड लागू होने से पहले बातचीत रोक दी जाती है.

रोकी गई बातचीत के साथ एआई सहायता पैनल.

जब बातचीत रोक दी जाती है, तो एजेंट से मिले कोड की समीक्षा करें. आगे बढ़ने के लिए, पर क्लिक करें और प्रोसेस को रोकने के लिए, रद्द करें पर क्लिक करें.

अपने फ़ाइल फ़ोल्डर में किए गए बदलाव सेव करना

कनेक्ट किए गए फ़ाइल फ़ोल्डर की मदद से, एआई की मदद से सुझाई गई स्टाइल में किए गए बदलावों को अपने कंप्यूटर पर सीएसएस सोर्स फ़ाइलों में सेव किया जा सकता है.

ऐसा करने के लिए:

  1. सबसे पहले, मेटाडेटा फ़ाइल जनरेट करें और Workspace फ़ोल्डर कनेक्ट करें.

    इसके अलावा, मैन्युअल तरीके से फ़ोल्डर जोड़ा जा सकता है.

  2. एलिमेंट पैनल से चैट शुरू करें.

  3. अपनी सीएसएस में बदलाव करने के लिए, एआई की मदद लें.

  4. एआई की मदद से कोड जनरेट किया जा सकता है और कोड को चलाने की प्रोसेस रोकी जा सकती है. कोड की समीक्षा करें और लाइव बदलावों की जांच करने के लिए, जारी रखें पर क्लिक करें.

  5. सेव नहीं किए गए बदलाव सेक्शन को बड़ा करें और वर्कस्पेस में लागू करें पर क्लिक करें.

  6. diff में बदलावों की समीक्षा करें और सभी सेव करें पर क्लिक करें.

इस वर्कफ़्लो के बारे में जानने के लिए, यह लेख पढ़ें:

कोई जवाब नहीं दिया गया

कई वजहों से, हो सकता है कि एआई की सहायता से जवाब न मिले.

एआई असिस्टेंस पैनल, जिसमें बातचीत को अस्वीकार किया गया है.

अगर आपको लगता है कि आपका प्रॉम्प्ट ऐसा है जिस पर AI की मदद से बात की जा सकती है, तो बग की शिकायत करें.

बातचीत का इतिहास

बातचीत शुरू करने के बाद, एआई का हर जवाब, आपके और एआई के बीच हुई पिछली बातचीत पर आधारित होता है.

एआई असिस्टेंस, सेशन के बीच आपकी बातचीत का इतिहास सेव करता है. इससे, DevTools या Chrome को रीलोड करने के बाद भी, अपनी पिछली चैट को ऐक्सेस किया जा सकता है.

बातचीत का इतिहास कंट्रोल करने के लिए, पैनल के सबसे ऊपर बाएं कोने में मौजूद कंट्रोल का इस्तेमाल करें.

एआई असिस्टेंस पैनल, जिसमें इतिहास के कंट्रोल हाइलाइट किए गए हैं.

नया शुरू करें

फ़िलहाल चुने गए बातचीत के संदर्भ के साथ नई बातचीत शुरू करने के लिए, बटन पर क्लिक करें.

जारी रखें

पिछली बातचीत को जारी रखने के लिए, बटन पर क्लिक करें और संदर्भ मेन्यू से उसे चुनें.

मिटाएं

किसी बातचीत को इतिहास से मिटाने के लिए, बटन पर क्लिक करें.

जवाबों को रेटिंग देना और सुझाव/राय देना या शिकायत करना

एआई की मदद की सुविधा को फ़िलहाल आज़माया जा रहा है. इसलिए, हम आपके सुझाव/राय/शिकायत का इंतज़ार कर रहे हैं, ताकि हम जवाब की क्वालिटी और पूरे अनुभव को बेहतर बना सकें.

रेटिंग कंट्रोल के साथ एआई से मदद पाने वाला पैनल, जिसे हाइलाइट किया गया है.

जवाबों पर वोट करना

जवाब के नीचे मौजूद, पसंदीदा और नापसंद बटन का इस्तेमाल करके, जवाब को रेटिंग दें.

जवाबों की शिकायत करना

आपत्तिजनक कॉन्टेंट की शिकायत करने के लिए, वोटिंग बटन के बगल में मौजूद बटन पर क्लिक करें.