हमने Chrome DevTools में Gemini को कैसे जोड़ा

Alex Rudenko

Ergün Erdogmus

पब्लिश किया गया: 14 जनवरी, 2025

पिछले साल के Google I/O 2024 में, हमने कंसोल की इनसाइट सुविधा लॉन्च की थी. यह Chrome DevTools में एआई की पहली सुविधा थी. कंसोल की अहम जानकारी से, कंसोल में लॉग की गई गड़बड़ियों और चेतावनियों को समझने में मदद मिलती है. इसके लिए, Gemini को लॉग मैसेज से जुड़ा नेटवर्क डेटा, सोर्स कोड, और स्टैक ट्रेस भेजा जाता है. Gemini, Google का लार्ज लैंग्वेज मॉडल (एलएलएम) है. Console की अहम जानकारी, Gemini को एक प्रॉम्प्ट भेजती है. इससे डेवलपर को फ़ॉलो-अप सवाल पूछने की ज़रूरत नहीं पड़ती. गड़बड़ी के मैसेज की जानकारी देने के लिए, एक इंटरैक्शन वाला यह फ़्लो काफ़ी अच्छा काम करता है. हालांकि, यह DevTools में, डीबग करने के ज़्यादा जटिल इस्तेमाल के उदाहरणों के लिए काम नहीं करता. इन उदाहरणों में यह साफ़ तौर पर नहीं पता चलता कि जांचे गए पेज का कौनसा डेटा, एआई को मदद करने के लिए ज़रूरी है.

इस्तेमाल के एक उदाहरण के तौर पर, स्टाइल से जुड़ी समस्याओं को डीबग करना है. किसी एक वेब पेज में हज़ारों एलिमेंट और सीएसएस नियम हो सकते हैं. हालांकि, किसी खास स्थिति को डीबग करने के लिए, इनमें से सिर्फ़ कुछ ही एलिमेंट काम के होते हैं. डीबग करने के लिए सही कोड की पहचान करना, इंसानों के लिए भी चुनौती भरा हो सकता है. हालांकि, Google में एआई हैकथॉन के दौरान बनाए गए प्रोटोटाइप से हमें पता चला कि एलएलएम, इस काम में काफ़ी अच्छे हैं. इसलिए, हमने DevTools के उपयोगकर्ताओं के लिए भी यह सुविधा उपलब्ध कराई है. हमने ऐसा टूल बनाया है जो पेज के कॉन्टेक्स्ट से जुड़े ज़्यादा डेटा के लिए इंटरैक्टिव तरीके से क्वेरी करके, स्टाइल से जुड़ी समस्याओं की जांच कर सकता है. हमने जो एआई मॉडल बनाया था उसे कुछ महीनों बाद, स्टाइल बनाने में एआई की मदद के तौर पर लॉन्च किया गया.

इस पोस्ट में, हम उन चुनौतियों के बारे में बताना चाहते हैं जो हमें Chrome DevTools जैसे लोकप्रिय प्रॉडक्ट में एआई की सुविधाएं जोड़ते समय, आ रही थीं. यह एक वेब ऐप्लिकेशन है. साथ ही, हम यह भी बताना चाहते हैं कि एआई की सुविधाओं को अपने हिसाब से कैसे बनाया जा सकता है.

सही डेटा इकट्ठा करना

पहले से तय किए गए प्रॉम्प्ट का जवाब देने के लिए, Console की अहम जानकारी हमेशा एक ही डेटा पॉइंट का इस्तेमाल करती है. उपयोगकर्ता के तय किए गए किसी भी प्रॉम्प्ट के लिए, एआई की मदद से मिलने वाली सुविधा काम की हो, इसके लिए हमें डाइनैमिक तरीके से यह तय करना होगा कि मौजूदा क्वेरी के लिए कौनसा कॉन्टेक्स्ट डेटा अहम है.

इसलिए, हमने ReAct (Yao et al., 2022) के लिए बनाई गई रणनीति के मुताबिक काम करें. सवाल पूछने की इस रणनीति की मदद से, एलएलएम अपने-आप तर्क कर सकते हैं और अपनी तर्क के आधार पर अगली कार्रवाई तय कर सकते हैं.

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

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

जानकारी इकट्ठा करने के लिए, हमने Gemini को सिर्फ़ एक टूल दिया है: जांचे गए पेज पर JavaScript को चलाना. इससे Gemini, एआई की मदद से ये काम कर सकता है:

• डीओएम को ऐक्सेस और उसका विश्लेषण करना: डीओएम ट्री को ट्रैवर्स करें, एलिमेंट के एट्रिब्यूट की जांच करें, और एलिमेंट के बीच के संबंधों को समझें.
• कंप्यूट की गई स्टाइल वापस पाना: किसी भी एलिमेंट के लिए, कंप्यूट की गई स्टाइल ऐक्सेस करें.
• कैलकुलेशन और मेज़रमेंट करना: एलिमेंट की दूरियों, साइज़, और पोज़िशन का हिसाब लगाने के लिए, JavaScript कोड को लागू करें.

इससे एआई (AI) की सहायता, सिर्फ़ काम के कोड पर इंटरैक्टिव तरीके से काम करती है. इससे Gemini को पूरा एचटीएमएल और सीएसएस सोर्स कोड भेजने की तुलना में, जवाब की क्वालिटी, जवाब देने में लगने वाला समय, और कंप्यूटिंग संसाधनों के इस्तेमाल को बेहतर बनाया जा सकता है.

यूज़र स्पेस में एआई से जनरेट किया गया कोड चलाना

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

• वेब एपीआई काफ़ी असरदार होते हैं और डीबग करने के कई उदाहरणों को अपने-आप कवर करते हैं. डीओएम को ट्रैवर्स करने या डीबग करने के लिए, एपीआई कॉल को मैन्युअल तरीके से इस्तेमाल करना डेवलपर के लिए मुश्किल हो सकता है. हालांकि, एलएलएम के लिए, उन्हें कॉल करने वाला कोड जनरेट करना कोई समस्या नहीं है.
• किसी एजेंट के लिए नए एपीआई बनाए जा सकते हैं. हालांकि, अक्सर मौजूदा सार्वजनिक एपीआई का फिर से इस्तेमाल करना बेहतर होता है, क्योंकि एलएलएम को इनकी जानकारी पहले से होती है. किसी नए एपीआई के बारे में एलएलएम को जानकारी देने के लिए, बेहतर बनाने और खास ट्रेनिंग डेटा के लिए बहुत सारे संसाधनों की ज़रूरत होती है.

हालांकि, उपयोगकर्ता के स्पेस में एआई से जनरेट किया गया कोड चलाने से जोखिम हो सकते हैं. एआई की मदद पाने के लिए, हमें पेज में ऐसे बदलाव होने के जोखिम को कम करना था जो नुकसान पहुंचा सकते हैं. इसके लिए, हमने Chrome DevTools प्रोटोकॉल के ज़रिए, साइड इफ़ेक्ट की जांच करने की सुविधा का इस्तेमाल किया है. यह सुविधा, Chrome का JavaScript इंजन V8 उपलब्ध कराता है. DevTools कंसोल में ऑटो-कंप्लीट की सुविधा के लिए, इन जांचों का इस्तेमाल किया जाता है: यह JavaScript कोड तब तक ही चलाता है, जब तक वह किसी पेज की स्थिति में बदलाव नहीं करता. जांच तब की जाती है, जब V8 कोड को लागू करता है. यह जांच, JavaScript के उन बिल्ट-इन की अनुमति वाली सूची पर आधारित होती है जिनका कोई साइड इफ़ेक्ट नहीं होता.

अगर जांच में पता चलता है कि जनरेट किया गया कोड, जांचे गए पेज में बदलाव कर रहा है, तो कोड को चलाने की प्रोसेस रोक दी जाती है. साथ ही, उपयोगकर्ता से कोड की समीक्षा करने और इस बात की पुष्टि करने के लिए कहा जाता है कि कोड को चलाया जा सकता है या नहीं.

इसके अलावा, जनरेट किया गया JavaScript, अलग-थलग "वर्ल्ड" में चलाया जाता है. यह उसी तरह है जिस तरह एक्सटेंशन सैंडबॉक्स स्क्रिप्ट चलाते हैं: जनरेट किया गया कोड, डीओएम और वेब एपीआई को ऐक्सेस कर सकता है, लेकिन जांचे गए पेज से तय किए गए JavaScript कोड या स्टेटस को ऐक्सेस नहीं कर सकता.

एजेंट की तरफ़ से किए गए बदलावों को ट्रैक करना

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

ऐसा करने के लिए, हमने setElementStyles नाम की एक बाइंडिंग लागू की है. हम इसे डिफ़ॉल्ट वेब एपीआई के साथ-साथ, एजेंट के एक्सीक्यूशन कॉन्टेक्स्ट के लिए भी उपलब्ध कराते हैं.

Gemini को उस नए तरीके के बारे में बताने के लिए, हम उसे एआई के साथ मिलने वाली सहायता के शुरुआती हिस्से में इसका इस्तेमाल करने का निर्देश देते हैं:

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

यह एपीआई खास तौर पर एजेंट के लिए डिज़ाइन किया गया है. इसमें पहले बताई गई समस्याएं आ सकती हैं. हालांकि, Gemini इसे बिना किसी बदलाव के भी भरोसेमंद तरीके से इस्तेमाल करता है. ऐसा तब होता है, जब किसी एलिमेंट की स्टाइल बदलनी हो.

DevTools की ओर से, जब एजेंट से setElementStyles को कॉल किया जाता है, तो एआई की मदद, एलिमेंट सिलेक्टर के लिए बदलाव को रिकॉर्ड करने के लिए, इंस्पेक्टर स्टाइलशीट का इस्तेमाल करती है. सीएसएस नेस्टिंग का इस्तेमाल, बदलाव का नाम देने और एलिमेंट के सिलेक्टर को ज़्यादा सटीक बनाने के लिए किया जाता है. एजेंट की ओर से बनाया गया सीएसएस नियम, इस तरह दिखता है:

.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;
  }
}

हालांकि, इससे पेज पर होने वाले स्टाइल के सभी संभावित संघर्षों को हल नहीं किया जा सकता, लेकिन ज़्यादातर मामलों में यह काम करता है.

इनलाइन स्टाइल की तुलना में, इंस्पेक्टर स्टाइलशीट का इस्तेमाल करने का फ़ायदा यह है कि इस तरह एजेंट के किए गए बदलाव, बदलाव पैनल में भी दिखते हैं. इससे यह ट्रैक करना आसान हो जाता है कि एलिमेंट स्टाइल में कौनसे बदलाव किए गए हैं और डेवलपर को सोर्स कोड में कौनसे बदलाव करने हैं. बदलावों के पैनल के साथ इंटिग्रेशन की मदद से, बदलावों को पहले जैसा भी किया जा सकता है. हालांकि, ऐसा तब ही किया जा सकता है, जब बदलाव की ज़रूरत न हो.

उपयोगकर्ताओं के लिए एजेंट की कार्रवाइयों को मॉनिटर करना

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

इसलिए, एआई की मदद पाने के लिए, हम Gemini को जवाबों को एक खास फ़ॉर्मैट में बनाने का निर्देश देते हैं. साथ ही, जवाब में शुरुआती जानकारी भी जोड़ते हैं:

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.

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

Chrome DevTools के एआई असिस्टेंस में, सोचने के लिए दिए गए चरणों को छोटा किया गया और रोका गया.

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

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

एआई की मदद से, जवाब के तौर पर जनरेट किए गए फ़ॉलो-अप प्रॉम्प्ट के उदाहरण.

शुरुआत में, एआई की मदद से चरणों के टाइटल और सुझाव जनरेट करने के लिए, हमने खास तौर पर खास जानकारी देने के लिए, छोटे और अलग मॉडल का इस्तेमाल करने पर विचार किया था. हालांकि, हमें पता चला है कि ReAct पैटर्न, Gemini के "विचारों" और "कार्रवाइयों" के लूप में, Gemini की वजहों को बेहतर तरीके से व्यवस्थित करता है. इसलिए, हमने एक दूसरा मॉडल लॉन्च करने के बजाय, अपने प्रॉम्प्ट में बदलाव किया है. इससे Gemini को न सिर्फ़ अपने मुख्य "विचार" और "कार्रवाइयां" जनरेट करने का निर्देश मिलेगा, बल्कि एक ही ReAct लूप में कम शब्दों वाले टाइटल और काम के सुझाव भी जनरेट करने का निर्देश मिलेगा.

एवल्यूएशन ड्रिवन डेवलपमेंट

स्टाइल बनाने के लिए एआई की मदद देने वाली सुविधा को बनाने के लिए, एआई की परफ़ॉर्मेंस का बारीकी से आकलन किया गया. इसकी परफ़ॉर्मेंस का आकलन करने और सुधार के लिए ज़रूरी चीज़ों की पहचान करने के लिए, हमने असल दुनिया में वेब डीबग करने के उदाहरणों का एक बड़ा कलेक्शन तैयार किया है. इसमें, ओवरफ़्लो की सामान्य समस्याओं, वेब कॉम्पोनेंट, ऐनिमेशन वगैरह के बारे में बताया गया है. इससे, हमें वेब डीबगिंग से जुड़ी समस्याओं को मैप करने और उनसे जुड़ी चुनौतियों को अच्छी तरह से समझने में मदद मिली. हालांकि, यह काम कभी खत्म नहीं होता: वेब प्लैटफ़ॉर्म में नियमित तौर पर नई सुविधाएं जोड़ी जाती हैं. इसलिए, हमें आने वाले समय में उन उदाहरणों को अप-टू-डेट रखना होगा.

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

आकलन पर आधारित इस तरीके से यह पक्का किया जाता है कि सभी बदलावों की ध्यान से पुष्टि की जाए. भले ही, वे मौजूदा व्यवहार को बेहतर बनाने या नई सुविधाएं जोड़ने के लिए किए गए हों. इससे, उन बदलावों से होने वाले सुधारों को हासिल करने के साथ-साथ, मौजूदा फ़ंक्शन में होने वाली गिरावट को रोका जा सकता है.

हम अपनी समीक्षा की प्रोसेस को और बेहतर बनाने के लिए, ऑटोमेटेड पुष्टि करने के तरीकों को एक्सप्लोर कर रहे हैं. इनमें ये शामिल हैं:

• समस्याओं को ठीक करने के सही तरीके की पुष्टि करने के लिए किए गए दावे
• Gemini से अनचाहे आउटपुट को रोकने के लिए, कोड पर आधारित जांच
• एलएलएम को जज के तौर पर इस्तेमाल करना. इसके लिए, खास रूब्रिक का इस्तेमाल किया जाता है. इससे, मैन्युअल तरीके से किए जाने वाले आकलन को तेज़ी से और कुछ हद तक ऑटोमेट किया जा सकता है

ऑटोमेटेड पुष्टि की सुविधा से, बड़े पैमाने पर पुष्टि करने में मदद मिलती है. हालांकि, लोगों का सुझाव या राय देना ज़रूरी है. हम एआई से मिलने वाले हर जवाब के नीचे, वोटिंग कंट्रोल की मदद से लोगों के सुझाव, राय या शिकायत इकट्ठा कर रहे हैं. इससे हमें यह जानने में मदद मिलेगी कि उपयोगकर्ता हमारे जवाबों से कितने संतुष्ट हैं. 'शिकायत करें' बटन की मदद से, उपयोगकर्ता उन जवाबों के बारे में ज़्यादा सटीक सुझाव दे सकते हैं जिन पर सवाल उठाया जा सकता है.

सलाह: Chrome DevTools के प्रॉडक्ट मैनेजर, माइकल हैब्लिक की पोस्ट में, एलएलएम की मदद से काम करने वाले ऐप्लिकेशन की जांच करने की अलग-अलग रणनीतियों के बारे में ज़्यादा जानें.

प्रॉम्प्ट इंजेक्शन

एलएलएम की एक समस्या यह है कि इनमें प्रॉम्प्ट इंजेक्शन की संभावना होती है. यह समस्या, एलएलएम के बारे में अच्छी तरह से पता है और इसकी जानकारी दस्तावेज़ में भी दी गई है. प्रॉम्प्ट इंजेक्शन एक ऐसी तकनीक है जिसकी मदद से एलएलएम के सिस्टम के मूल निर्देशों को बदला जा सकता है. इससे, एलएलएम ऐसा कॉन्टेंट जनरेट करता है जो डेवलपर का मकसद नहीं है.

ज़्यादातर मॉडल में, प्रॉम्प्ट इंजेक्शन से जुड़ी समस्याओं को कम करने के लिए पहले से ही सुविधाएं मौजूद होती हैं. Gemini में भी ये सुविधाएं मौजूद हैं. एआई की मदद पाने के लिए, हमने अपने डिक्लेरेशन में यह निर्देश शामिल किया है, ताकि इस तरह की समस्याओं को कम किया जा सके:

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.

यह सुविधा, विषय से हटकर पूछे गए कुछ सवालों के लिए काम करती है. हालांकि, यह पूरी तरह से कारगर नहीं है. हमें एक समस्या का पता चला है. छोटी और अस्पष्ट क्वेरी को विषय से हटकर के तौर पर मार्क किया जा सकता है.

मज़बूत फ़ाउंडेशन बनाना

अपने प्रॉडक्ट में एआई को पहली बार शामिल करते समय, एक बार में एक बड़ा कदम उठाने के बजाय, धीरे-धीरे आगे बढ़ना बेहतर होता है. हमने एआई की मदद पाने के लिए भी इसी तरह से काम किया. स्टाइल एजेंट बनाते समय हमें जो भी जानकारी मिली, उससे हमने DevTools के दूसरे हिस्सों में भी एआई की मदद उपलब्ध कराने के लिए एक बेहतरीन आधार तैयार किया है.

स्टाइल एजेंट पर काम करते समय, हमने ज़्यादातर बड़ी समस्याओं को हल कर लिया था. इसलिए, कुछ ही महीनों बाद हमने नेटवर्क, परफ़ॉर्मेंस, और सोर्स के लिए एआई की मदद उपलब्ध कराई. साथ ही, हम इन समस्याओं पर फ़ोकस कर पाए.

नेटवर्क अनुरोधों के साथ काम करते समय सुरक्षा से जुड़े असर

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

• अनुरोध हेडर: ब्राउज़र से सर्वर को भेजे गए हेडर का सबसेट.
• रिस्पॉन्स हेडर: सर्वर से मिले हेडर का सबसेट.
• रिस्पॉन्स स्टेटस: एचटीटीपी स्टेटस कोड, जो सर्वर के रिस्पॉन्स के बारे में बताता है (उदाहरण के लिए, 200, 404).
• समय: अनुरोध के अलग-अलग चरणों के लिए, समय की पूरी जानकारी. जैसे, कनेक्शन सेटअप और डेटा ट्रांसफ़र.
• अनुरोध शुरू करने वाली चेन: उन कार्रवाइयों और स्क्रिप्ट का क्रम जिन्होंने अनुरोध शुरू किया.

हेडर, अनुरोध के तरीके को पूरी तरह से समझने के लिए ज़रूरी होते हैं. हालांकि, इनमें सुरक्षा से जुड़ा जोखिम होता है: इनमें एपीआई कुंजियां, सेशन टोकन या सादे पासवर्ड जैसे क्रेडेंशियल हो सकते हैं. ऐसी संवेदनशील जानकारी को सुरक्षित रखने के लिए, हम Gemini पर सभी हेडर ट्रांसफ़र नहीं करते. इसके बजाय, हम अनुमति वाले हेडर की सूची बनाकर रखते हैं. अनुमति वाली सूची में शामिल नहीं होने वाले हेडर की वैल्यू को <redacted> से बदल दिया जाता है. इस तरीके से यह पक्का किया जाता है कि Gemini को उपयोगकर्ता के डेटा को सुरक्षित रखते हुए, ज़रूरी कॉन्टेक्स्ट मिलता रहे.

अलग-अलग डेटा फ़ॉर्मैट के हिसाब से काम करना

सोर्स के लिए एआई की मदद से, डेवलपर सोर्स पैनल में किसी सोर्स फ़ाइल के बारे में सवाल पूछ सकते हैं. उदाहरण के लिए, "यह फ़ाइल किस काम की है?".

फ़ाइल के बारे में डेटा, जिसमें फ़ाइल का नाम, फ़ाइल का कॉन्टेंट, और यह जानकारी शामिल है कि इसे सोर्स-मैप किया गया है या नहीं, यह सब एक ही प्रॉम्प्ट में भेजा जाता है. यह तरीका इसलिए भी कारगर है, क्योंकि इसमें सिर्फ़ सादा टेक्स्ट होता है. हालांकि, बड़ी टेक्स्ट फ़ाइलों या बाइनरी फ़ाइलों को एलएलएम के लिए चुनौती माना जाता है. हमने बाइनरी फ़ाइलों के लिए, प्रॉम्प्ट में यह बताने का फ़ैसला लिया है कि कॉन्टेंट बाइनरी है और कोई असल कॉन्टेंट नहीं भेजा गया है. बड़ी टेक्स्ट फ़ाइलों के लिए, हम फ़ाइल की शुरुआत से लिए गए कॉन्टेंट का सिर्फ़ एक छोटा हिस्सा भेजते हैं.

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

परफ़ॉर्मेंस प्रोफ़ाइल से ऐसा प्रज़ेंटेशन बनाने के लिए, हमने एक खास सिलासराइज़र बनाया है. इसे AiCallTree कहा जाता है. यह किसी टास्क के लिए कॉल ट्री को इस तरह से फ़ॉर्मैट करता है कि एलएलएम उसे प्रोसेस कर सके. आने वाले समय में, हम ReAct की रणनीति को भी यहां एक्सप्लोर करेंगे. इससे, Gemini को पहले से भेजे जाने वाले डेटा की संख्या कम हो जाएगी.

आने वाले समय में एआई से मिलने वाली मदद

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

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