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

Alex Rudenko

Ergün Erdogmus

पब्लिश होने की तारीख: 14 जनवरी, 2025

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

शुरुआत में, एआई की मदद से चरणों के टाइटल और सुझाव जनरेट करने के लिए, हमने खास तौर पर खास जानकारी देने के लिए, छोटे और अलग मॉडल का इस्तेमाल करने पर विचार किया था. हालांकि, हमें पता चला है कि 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 से उपलब्ध है. इसमें स्टाइल, नेटवर्क, सोर्स, और परफ़ॉर्मेंस के लिए एआई की मदद शामिल है. हमें उम्मीद है कि आपको इसे इस्तेमाल करने में उतना ही आनंद आएगा जितना हमें इसे बनाने में आया.

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