A2UI की मदद से, एजेंट को अपने Android ऐप्लिकेशन में यूआई जनरेट करने की अनुमति देना

नमस्ते, इस सेशन में आपका स्वागत है. इसमें हम बात करेंगे कि हमारी नई A2UI लाइब्रेरी का इस्तेमाल करके, Android ऐप्लिकेशन में यूज़र इंटरफ़ेस (यूआई) कैसे जनरेट किया जा सकता है.

मेरा नाम निक बुचर है. मैं Jetpack Compose पर काम करने वाला प्रॉडक्ट मैनेजर हूं.

नमस्ते, मेरा नाम ऐंटन है. मैं Compose टीम में एक इंजीनियर हूं.

मैं इस नए Jetpack Compose A2UI रेंडरर पर काम कर रहा हूं. इसके बारे में आज आपको बताते हुए हमें बहुत खुशी हो रही है.

हां, एआई की सुविधाओं में बढ़ोतरी के साथ, कई ऐप्लिकेशन यह देख रहे हैं कि एआई की मदद से, उपयोगकर्ताओं के लिए नए अनुभव कैसे बनाए जा सकते हैं या उन्हें कैसे बेहतर बनाया जा सकता है.

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

हालांकि, फ़िलहाल एजेंटिक बैक एंड के कई जवाब, टेक्स्ट की दीवारों में फंसे हुए हैं, जैसे कि यह.

यहां एक उदाहरण दिया गया है, जिसमें मैंने एजेंट से यात्रा बुक करने के लिए एक नई सुविधा जनरेट करने के लिए कहा है.

यह रहा प्रॉम्प्ट.

जैसा कि आप देख सकते हैं, इसने काफ़ी अच्छा जवाब दिया है. हालांकि, यह टेक्स्ट की इस वॉल में फंसा हुआ है, जिससे मैं आसानी से इंटरैक्ट नहीं कर सकता. साथ ही, यह मेरे ऐप्लिकेशन के बाकी हिस्सों जैसा नहीं दिखता.

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

यहां एक ऐसे यूज़र इंटरफ़ेस (यूआई) का उदाहरण दिया गया है जिसे स्टैंडर्ड, नेटिव कॉम्पोनेंट का इस्तेमाल करके बनाया गया है.

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

A2UI का मतलब है एजेंट-टू-यूआई. यह एक ओपन प्रोटोकॉल है, जो इन सभी चीज़ों को तय करने के लिए JSON फ़ॉर्मैट है.

A2UI की एक खास बात यह है कि यह डिक्लेरेटिव फ़ॉर्मैट है.

एजेंट, रेंडर करने के लिए यूज़र इंटरफ़ेस (यूआई) का JSON फ़ॉर्मैट दिखाता है.

यह ऐसा कोई कोड नहीं दिखाता जिसे आपके क्लाइंट को लागू करना पड़े. इससे आपको सुरक्षा से जुड़े कुछ जोखिमों का सामना करना पड़ सकता है.

यह सिर्फ़ डिक्लेरेटिव है.

A2UI के बारे में हमें और क्या जानने की ज़रूरत है?

सिर्फ़ दो मुख्य कॉन्सेप्ट: कैटलॉग और प्लैटफ़ॉर्म.

कैटलॉग में टेक्स्ट, बटन, लाइन, और कॉलम जैसे कॉम्पोनेंट होते हैं. एजेंट इनका इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) बना सकता है.

कैटलॉग में ऐसे फ़ंक्शन भी होते हैं जिनका इस्तेमाल करके एजेंट, टेक्स्ट को फ़ॉर्मैट कर सकता है, उपयोगकर्ता के इनपुट की पुष्टि कर सकता है या यूआरएल खोल सकता है.

कैटलॉग एक ऐसा समझौता है जो यह तय करता है कि आपका ऐप्लिकेशन किन कॉम्पोनेंट और फ़ंक्शन के साथ काम करता है. एजेंट सिर्फ़ उनके साथ काम कर सकता है.

इसका मतलब है कि जैसा निक ने बताया, एजेंट आपके ऐप्लिकेशन में कभी भी कोई आर्बिट्रेरी कोड लागू नहीं करता.

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

एक और अहम कॉन्सेप्ट है, प्लैटफ़ॉर्म.

सरफ़ेस, यूज़र इंटरफ़ेस (यूआई) का एक हिस्सा होता है जिसे एजेंट कंट्रोल करता है. जैसे, स्लाइड पर मौजूद ट्रिप प्लैनर का यह उदाहरण.

एजेंट, A2UI प्रोटोकॉल मैसेज का इस्तेमाल करके, JSON में किसी प्लैटफ़ॉर्म के यूज़र इंटरफ़ेस (यूआई) के बारे में बताता है. जैसे, createSurface, updateComponents. साथ ही, आपके कैटलॉग में तय किए गए कॉम्पोनेंट और फ़ंक्शन का इस्तेमाल करता है.

कैटलॉग, A2UI का एक बहुत ही बुनियादी कॉन्सेप्ट है. इसकी वजह यह है कि कैटलॉग यह कंट्रोल करता है कि एजेंट, इंटरफ़ेस बनाने के लिए किन कॉम्पोनेंट का इस्तेमाल कर सकता है.

A2UI की खास जानकारी में, बेसिक कैटलॉग के बारे में बताया गया है. यह सामान्य कॉम्पोनेंट का एक सेट है. इसका इस्तेमाल, ज़्यादातर यूज़र इंटरफ़ेस (यूआई) बनाने के लिए किया जा सकता है.

Jetpack Compose A2UI रेंडरर, Material 3 कॉम्पोनेंट का इस्तेमाल करके बुनियादी कैटलॉग को लागू करने की सुविधा देता है.

कैटलॉग के ज़्यादातर कॉम्पोनेंट, तुरंत इस्तेमाल किए जा सकते हैं.

मीडिया के तीन कॉम्पोनेंट हैं: इमेज, वीडियो, और ऑडियो प्लेयर. इनमें आपको अपनी पसंद की लाइब्रेरी प्लग इन करनी होगी.

उदाहरण के लिए, इमेज लोड करने के लिए Coil और वीडियो और ऑडियो प्लेयर के लिए Media3 को चुना जा सकता है.

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

हम कैटलॉग के बारे में बाद में बात करेंगे.

चलिए, देखते हैं कि यह कैसा दिखता है.

इसलिए, कृपया डेमो मशीन पर स्विच करें.

यह हमारा डेमो ऐप्लिकेशन है, जिसका हम इस्तेमाल करेंगे. साथ ही, हम A2UI रेंडरर को सेट अप करेंगे, ताकि आपको पता चल सके कि यह कितना आसान है.

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

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

इसलिए, हम बैक एंड को A2UI प्रोटोकॉल और कॉम्पोनेंट के कैटलॉग के बारे में बताते हैं. इस मामले में, हम यहां इस्तेमाल किए जा रहे बेसिक कैटलॉग के बारे में बताते हैं. इसका इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) बनाया जा सकता है. साथ ही, हम इसे बनाने के कुछ उदाहरण भी देते हैं.

हमारे डेमो ऐप्लिकेशन में चैट सेशन को लागू करने की सुविधा, एजेंट के जवाबों से रॉ JSON A2UI मैसेज निकालने का तरीका पहले से जानती है.

इसलिए, इस मामले में एजेंट ने कुछ टेक्स्ट के साथ जवाब दिया. इसके बाद, A2UI प्रोटोकॉल के मैसेज भेजे: createSurface, updateComponents.

हालांकि, फ़िलहाल हमारा ऐप्लिकेशन सिर्फ़ इस रॉ JSON को दिखाता है और इसे यूज़र इंटरफ़ेस (यूआई) के तौर पर रेंडर नहीं करता.

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

ओह, यह रहा.

हां, तो यह रहा प्लान.

इसलिए, एआई एजेंट हमारे ऐप्लिकेशन में जवाब स्ट्रीम करता है. इसे ChatSession क्लास से रिसीव किया जाता है.

ChatSession, एजेंट के जवाबों से रॉ A2UI JSON मैसेज निकालता है. ऐसा इसलिए, क्योंकि यह स्ट्रीम हो रहा है और उन्हें A2UI मैसेज प्रोसेसर को पास करता है.

मैसेज प्रोसेसर को एक पार्सर के साथ कॉन्फ़िगर किया जाता है. यह पार्सर, रॉ JSON मैसेज को सिमैंटिक रिप्रज़ेंटेशन में बदलता है.

इसके बाद, प्रोसेसर कैटलॉग की परिभाषा के हिसाब से मैसेज की पुष्टि करता है और उन्हें प्लैटफ़ॉर्म के मॉडल के सेट पर मैप करता है.

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

इसके बाद, उन सरफ़ेस मॉडल को नेटिव Compose यूज़र इंटरफ़ेस (यूआई) के तौर पर रेंडर किया जाता है. इसके लिए, हमारी लाइब्रेरी में मौजूद A2UI सरफ़ेस कंपोज़ेबल का इस्तेमाल किया जाता है.

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

कुल मिलाकर, इसके तीन मुख्य हिस्से हैं: कैटलॉग, मैसेज प्रोसेसर, और प्लैटफ़ॉर्म.

चलिए, इसके लिए कोड लिखते हैं.

हां, अगर हम मशीनें बदल सकते हैं, तो चलिए इसे बनाते हैं.

सबसे पहले, डिपेंडेंसी जोड़ें.

यहां देखा जा सकता है कि हमने Material 3 A2UI डिपेंडेंसी को पहले ही शामिल कर लिया है. साथ ही, हमने प्रोजेक्ट को पहले ही सिंक कर लिया है, ताकि हमें Gradle को न देखना पड़े.

यह टॉप-लेवल डिपेंडेंसी है, जो Material 3 के कॉम्पोनेंट का इस्तेमाल करके, बेसिक कैटलॉग को लागू करने का तरीका तय करती है. हालांकि, इसके नीचे अन्य बारीक डिपेंडेंसी भी मौजूद हैं.

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

हालांकि, इससे बाकी चीज़ें भी अपने-आप आ जाएंगी.

ठीक है।

हमने बताया था कि तीन चीज़ें हैं.

सबसे पहले, एक कैटलॉग तय करना था.

इसलिए, हम अपने ऐप्लिकेशन में एक फ़ैक्ट्री फ़ंक्शन बनाएंगे. इससे हमें बेसिक कैटलॉग के Material 3 वर्शन का इंस्टेंस बनाने में मदद मिलेगी.

इसलिए, हम यहां इस लाइब्रेरी फ़ंक्शन का इस्तेमाल करते हैं, मटीरियल A2UI बेसिक कैटलॉग, जिसे वर्शन भी किया गया है.

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

उदाहरण के लिए, यहां एंटन ने पहले ही Coil के AsyncImage कंपोज़ेबल के आस-पास यह रैपर बना लिया है. इसका इस्तेमाल हम इमेज लोड करने के लिए करेंगे. साथ ही, Wikipedia से इमेज खोजने के लिए, हमारे डेमो के लिए थोड़ा और लॉजिक इस्तेमाल करेंगे.

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

इसी तरह, रेंडरिंग, वीडियो, और ऑडियो के लिए भी हमारे पास मिलते-जुलते तरीके हैं. इनमें हम Media3 लाइब्रेरी का इस्तेमाल करेंगे, ताकि उन्हें ExoPlayer के साथ रेंडर किया जा सके.

इस तरह, हम अपने कॉम्पोनेंट को आसानी से प्लग इन कर सकते हैं.

कैटलॉग के लिए, स्टैंडर्ड फ़ंक्शन का एक सेट होना ज़रूरी है.

इसलिए, ये ऐसे फ़ंक्शन हैं जो क्लाइंट उपलब्ध करा सकता है.

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

इस तरह, हमारा पहला चरण पूरा हो गया है.

हमने एक कैटलॉग बनाया है.

अगले चरण में, हमें मैसेज प्रोसेसर सेट अप करना था.

इसलिए, यह जवाबों वगैरह को पार्स करता है.

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

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

हमें एक और कॉम्पोनेंट बनाना होगा, जो कि पार्सर है. यह ऑब्जेक्ट, JSON मैसेज के वापस आने पर उन्हें पार्स करने के लिए ज़िम्मेदार होता है.

यहां हम ChatSession ऑब्जेक्ट बनाते हैं.

जैसा कि मैंने पहले बताया था, ChatSession पहले से ही एजेंट के जवाबों से रॉ A2UI मैसेज निकालता है.

जब हर नया A2UI मैसेज तैयार हो जाता है, तब यह onA2uiMessage कॉलबैक को कॉल करता है.

इसलिए, हमें बस इतना करना है कि जब भी कोई मैसेज आए, तो उसे प्रोसेसर को भेज दें.

हम processInput फ़ंक्शन को कॉल करते हैं. साथ ही, इसे एक पार्सर और एक मैसेज देते हैं.

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

इसलिए, प्रोसेसर, ऐक्टिव सरफ़ेस मॉडल के मौजूदा सेट को activeSurfaces StateFlow के तौर पर दिखाता है.

ChatSession में कुछ लॉजिक होते हैं. इनकी मदद से, एजेंट के जवाबों के यूज़र इंटरफ़ेस (यूआई) स्टेटस में, रेंडर करने के लिए Surface मॉडल जोड़े जाते हैं.

इसलिए, हम इस activeSurfaces StateFlow को ChatSession में पैरामीटर के तौर पर पास करते हैं.

इसके अलावा, जैसा कि मैंने बताया, processInput फ़ंक्शन, प्रोसेसर के लिए काम को सूची में जोड़ता है.

हालांकि, प्रोसेसिंग शुरू करने के लिए, हमें बैकग्राउंड थ्रेड पर एक कोरूटीन लॉन्च करना होगा.

इसलिए, हम इसके लिए व्यू मॉडल स्कोप का इस्तेमाल करेंगे और डिफ़ॉल्ट डिस्पैचर सेट करेंगे.

इस कोरूटीन में, हमें सिर्फ़ processor.collectMessages को कॉल करना होगा.

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

इसलिए, हमें एक और काम करना होगा. जब उपयोगकर्ता चैट का इतिहास मिटाए, तो हमें मौजूदा सरफ़ेस भी मिटाने होंगे.

इसलिए, हम clearSurfaces को कॉल करते हैं.

ठीक है।

हमने पहले दो चरण पूरे कर लिए हैं.

हमने कैटलॉग बनाया और मैसेज को पार्स करने के लिए प्रोसेसर बनाया.

अगले चरण में, हमें उन जवाबों को अपने यूज़र इंटरफ़ेस (यूआई) में रेंडर करना होगा.

इसलिए, हम उन सरफ़ेस को इकट्ठा कर रहे हैं जिन्हें पार्सर पार्स करता है.

अब हम अपने यूज़र इंटरफ़ेस (यूआई) में, उन्हें इस एजेंट रिस्पॉन्स ऑब्जेक्ट में पास करेंगे और उन पर बार-बार काम करेंगे.

इसके बाद, हम इस A2UI सरफ़ेस कंपोज़ेबल का इस्तेमाल करेंगे. फिर, हम इसे हर मॉडल को पास करेंगे, क्योंकि हम उन्हें बार-बार इस्तेमाल करते हैं, ताकि कॉन्टेंट को वहां रेंडर किया जा सके जहां हम उसे भेजना चाहते हैं.

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

इसलिए, हमें इस कॉम्पोनेंट पर बाउंडेड ऊंचाई को ज़्यादा से ज़्यादा ऊंचाई पर सेट करना होगा, ताकि यह पक्का किया जा सके कि यह सही तरीके से रेंडर हो.

इसके साथ ही, हमने एक बेसिक A2UI रेंडरर लागू कर दिया है.

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

इसलिए, हम उसे लाइव कोड करते हैं.

यह कोई जादू नहीं है.

हालांकि, यह असली इमेज का इस्तेमाल करता है.

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

यह एक असली ऐप्लिकेशन है, जिसमें असली मटीरियल कॉम्पोनेंट का इस्तेमाल किया गया है. इसलिए, यह असली कॉम्पोनेंट की तरह ही काम करता है.

यह नेटिव परफ़ॉर्मेंस जैसा है.

यह गहरे रंग वाले मोड के हिसाब से काम करता है.

ये Material कॉम्पोनेंट हैं.

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

जैसा कि निक ने बताया, ये नेटिव Compose कॉम्पोनेंट हैं. इसलिए, इनमें नेटिव सिमैंटिक होते हैं.

इसका मतलब है कि Compose में पहले से मौजूद सभी सुलभता सुविधाएं काम करती हैं.

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

अब, रनटाइम के दौरान नया यूज़र इंटरफ़ेस (यूआई) जनरेट करने के लिए, एजेंट को कॉल किया जा रहा है. इसलिए, इसमें कुछ इंतज़ार का समय लग सकता है.

आपको एजेंट से जवाब मिलने का इंतज़ार करना पड़ सकता है.

लाइब्रेरी, इस इंतज़ार के समय को कम करने के लिए हर संभव कोशिश करती है.

इसलिए, अगर हम इस तरह के कोड का इस्तेमाल करते हैं, तो हम कुछ इंतज़ार इंजेक्ट करेंगे, ताकि आपको थोड़ा और धीरे-धीरे दिखाया जा सके कि क्या होता है और हम उसे कैसे कम करते हैं.

हां, एजेंट को पूरा जवाब स्ट्रीम करने में कुछ समय लग सकता है. इसलिए, हम प्रोग्रेसिव रेंडरिंग का इस्तेमाल करते हैं.

इसलिए, रूट कॉम्पोनेंट के आते ही, हम प्लैटफ़ॉर्म के लिए यूज़र इंटरफ़ेस (यूआई) दिखाना शुरू कर देते हैं.

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

जब चाइल्ड कॉम्पोनेंट आते हैं, तो वे Material 3 के मोशन स्कीम का इस्तेमाल करके ऐनिमेट होते हैं.

ठीक है।

लाइब्रेरी की एक और सुविधा दिखाने के लिए, हम अगले प्रॉम्प्ट पर स्विच कर सकते हैं.

यहां एक और प्रॉम्प्ट दिया गया है. इसमें हम डिनर के लिए टेबल बुक कर रहे हैं.

यहां एजेंट ने इस स्लाइडर कॉम्पोनेंट का इस्तेमाल किया है.

यहां देखा जा सकता है कि एजेंट ने जो यूज़र इंटरफ़ेस (यूआई) बनाया है उसे ड्रैग किया जा सकता है और उसके साथ इंटरैक्ट किया जा सकता है.

ध्यान दें कि यह कॉम्पोनेंट पर मौजूद नंबर को ही नहीं बदल रहा है, बल्कि नीचे मौजूद फ़ॉर्मैट स्ट्रिंग को भी बदल रहा है, जहां इसकी गिनती की जा रही है.

जैसे, क्या यह अपडेट करने के लिए, एजेंट के पास वापस दोतरफ़ा यात्रा नहीं कर रहा है?

यह टू-वे बाइंडिंग है.

इसलिए, स्लाइडर कॉम्पोनेंट इस प्लैटफ़ॉर्म के इन-मेमोरी डेटा मॉडल से जुड़ा होता है.

डेटा मॉडल में एक ही पाथ से जुड़े सभी कॉम्पोनेंट, वैल्यू बदलने पर अपने-आप अपडेट हो जाते हैं.

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

इसलिए, यह सब स्थानीय तौर पर होता है. इसके लिए, एजेंट को कोई दोतरफ़ा यात्रा नहीं करनी पड़ती.

हालांकि, हम एजेंट से डेटा अपडेट करने के लिए भी कह सकते हैं.

इसलिए, चलिए इसे छह लोगों के लिए बनाते हैं.

एजेंट के जवाब देने पर, स्लाइडर पर ध्यान दें.

यह सीधे 6 पर पहुंच गया.

चलिए, देखते हैं कि हमें एजेंट से क्या जवाब मिला.

यूज़र इंटरफ़ेस (यूआई) का पूरा नया ब्यौरा भेजने के बजाय, एजेंट ने सिर्फ़ एक छोटा मैसेज updateDataModel भेजा. इससे स्लाइडर का पाथ अपडेट हो गया.

स्लाइडर उस पाथ से जुड़ा है, इसलिए वह अपनी जगह पर अपडेट हो गया.

इसलिए, हर प्लैटफ़ॉर्म का डेटा मॉडल, Compose स्नैपशॉट स्टेट पर बनाया जाता है. साथ ही, पाथ से जुड़ी हर कॉम्पोनेंट प्रॉपर्टी, एक डिराइव्ड स्टेट होती है.

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

ठीक है।

मान लीजिए कि हमें कार्रवाई करनी है और रिज़र्व बटन दबाना है, तो यहां क्या होगा, एंटन?

फ़िलहाल, कुछ नहीं होता.

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

चलिए, इसे ठीक करते हैं.

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

इसलिए, हम प्रोसेसर से मिलने वाले outboundEvents फ़्लो का इस्तेमाल करते हैं और इस पर डेटा इकट्ठा करते हैं.

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

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

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

यहां बैकएंड पर, कुछ फ़ंक्शन को चालू करने का फ़ैसला भी लिया जा सकता है.

चलिए, देखते हैं कि हम एजेंट को क्या भेजते हैं.

इसलिए, यह A2UI ऐक्शन मैसेज है.

इसमें एक कॉन्टेक्स्ट होता है. इस कॉन्टेक्स्ट में प्रॉपर्टी का एक सेट होता है. एजेंट ने इस कार्रवाई के दौरान, इस सेट को भेजने के लिए कहा था.

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

ठीक है. अब तक एजेंट ने हमारी काफ़ी मदद की है. हालांकि, हम यहां एआई के बारे में बात कर रहे हैं और एआई से गलतियां हो सकती हैं.

तो चलिए देखते हैं कि अगर एजेंट कोई गलत जवाब देता है या यूज़र इंटरफ़ेस (यूआई) में कोई गलती करता है, तो क्या होता है.

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

देखते हैं कि क्या होता है.

हाँ।

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

अब यह समस्या ठीक हो गई है.

तो यह एजेंट का सेल्फ़-करेक्शन लूप है.

यूज़र इंटरफ़ेस (यूआई) पर हर कॉम्पोनेंट के दिखने से पहले, हम कैटलॉग स्कीमा के हिसाब से मैसेज की पुष्टि करते हैं.

अगर कॉम्पोनेंट, स्कीमा से मैच नहीं करता है, तो उसे गड़बड़ी के तौर पर मार्क किया जाता है.

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

पर्दे के पीछे, रेंडरर एजेंट को गड़बड़ी का मैसेज भेजता है, ताकि एजेंट को पता चल सके कि क्या गड़बड़ी हुई है.

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

इसके बाद, एजेंट को जवाब देने का मौका मिला. उसने फ़ॉलो-अप जवाब भेजा, जिससे मौजूदा यूआई अपडेट हो गया और यूआई अपनी जगह पर ठीक हो गया.

हाँ।

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

इस तरह, गड़बड़ी को उपयोगकर्ता से पूरी तरह से छिपाया जा सकता है.

कैटलॉग और कस्टम कॉम्पोनेंट की बात करें, तो अब तक हम सिर्फ़ बेसिक कैटलॉग का इस्तेमाल कर रहे थे, क्योंकि यह पहले से मौजूद होता है. हालांकि, इसे अपनी ज़रूरत के हिसाब से पसंद के मुताबिक बनाया जा सकता है.

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

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

उदाहरण के लिए, अगर हमें अपना प्लग इन करना है, तो हमारे ऐप्लिकेशन में हमारा अपना डिज़ाइन सिस्टम और उसका अपना बटन है, तो हम उसे आसानी से प्लग इन कर सकते हैं.

इसलिए, कैटलॉग का इंस्टेंस बनाते समय, हम इस पैरामीटर को बदल देते हैं. साथ ही, हम इस कॉम्पोनेंट की परिभाषा बनाएंगे.

इसलिए, अगर हम इसे लागू करने के लिए एक नई क्लास बनाते हैं, तो आपको यहां एक इंटरफ़ेस दिखेगा. यह A2UI बेसिक कैटलॉग का टाइप बटन है.

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

हाँ।

हम बेसिक कैटलॉग में मौजूद कॉम्पोनेंट को बदल रहे हैं. इसलिए, हमें इस A2UI बेसिक कैटलॉग बटन इंटरफ़ेस को लागू करना होगा.

इसलिए, इस इंटरफ़ेस में कॉम्पोनेंट के बारे में पहले से ही कुछ जानकारी मौजूद होती है. जैसे, नाम, ब्यौरा, और प्रॉपर्टी स्कीमा.

इसलिए, अपना वर्शन लागू करने के लिए, हमें सिर्फ़ इस कंपोज़ेबल फ़ंक्शन को लागू करना होगा.

इसमें कुछ पैरामीटर होते हैं.

इसलिए, ये पैरामीटर ऐसी वैल्यू होती हैं जो एजेंट से पुष्टि होने के बाद मिलती हैं.

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

इसमें एक वैरिएंट भी होता है, जो बटन के टाइप, कार्रवाई की परिभाषा, और कुछ अन्य पैरामीटर के बारे में बताता है.

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

चलिए, इस कंपोज़ेबल को लागू करते हैं.

ठीक है, तो इस कंपोज़ेबल फ़ंक्शन में, हम यहां अपना कस्टम 'पसंद करें' बटन टाइप दिखाएंगे.

जैसा कि आप देख सकते हैं, हम उन पैरामीटर का इस्तेमाल कर सकते हैं जो A2UI ने दिए थे और जिनकी पुष्टि की थी.

उदाहरण के लिए, onClick फ़ंक्शन में, हम उस कार्रवाई को डिस्पैच कर सकते हैं.

हम इस लाइब्रेरी टाइप DispatchAction का इस्तेमाल कर सकते हैं और इसे A2UI से तय की गई कार्रवाई पास कर सकते हैं.

इसलिए, हम अपने बटन का इस्तेमाल कर रहे हैं. हालांकि, हमें अब भी चाइल्ड कॉन्टेंट, लेबल या एजेंट ने जो भी इस्तेमाल करने का फ़ैसला किया है उसे रेंडर करना है.

इसके लिए, हम observeA2uiComponentState फ़ंक्शन का इस्तेमाल करते हैं और इसे childId पास करते हैं, ताकि रेंडर किए जाने वाले चाइल्ड कॉन्टेंट का हैंडल मिल सके.

इसके बाद, हम इस A2uiComponent composable function का इस्तेमाल करेंगे और इसे रेंडर करने के लिए, चाइल्ड कॉम्पोनेंट की स्थिति पास करेंगे.

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

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

यह बहुत ही बारीक है. उम्मीद है कि आपको यह दिख रहा होगा.

यहां भी, हम पसंद के मुताबिक बनाए गए बटन का इस्तेमाल कर रहे हैं.

बहुत बढ़िया, तो इस तरह से लाइब्रेरी के कुछ टाइप को बदला जा सकता है. हालांकि, अगर आपको लाइब्रेरी को अपने कस्टम टाइप के साथ बढ़ाना है, तो क्या करना होगा?

हम कैटलॉग में ही जोड़कर, ऐसा आसानी से कर सकते हैं.

इसलिए, एंटन यहां एक नई क्लास बनाएंगे, ताकि स्टार रेटिंग कॉम्पोनेंट को लागू किया जा सके.

इसलिए, हम अपने ऐप्लिकेशन में कुछ ऐसा जोड़ेंगे जिससे हम इस काल्पनिक यात्रा के दौरान रेस्टोरेंट को रेटिंग दे सकें.

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

इसलिए, पहले दो फ़ील्ड नाम और ब्यौरे के हैं.

इससे पता चलता है कि हमारा कॉम्पोनेंट क्या है और यह क्या करता है.

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

इसलिए, आपको एआई को पूरी जानकारी देनी होगी और बताना होगा कि आपको पता है कि यह क्या करता है.

अगली प्रॉपर्टी जिसे हमें ओवरराइड करना है, वह यह प्रॉपर्टी है. यह प्रॉपर्टी बताती है कि यह कॉम्पोनेंट किस डेटा के साथ काम करता है.

इसलिए, हम स्टार रेटिंग बार बना रहे हैं, ताकि आप किसी रेस्टोरेंट को रेटिंग दे सकें. इसके लिए, हमें दो प्रॉपर्टी की ज़रूरत होगी.

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

यहां देखा जा सकता है कि एंटन ने वैल्यू के लिए, डाइनैमिक नंबर-टाइप प्रॉपर्टी का इस्तेमाल किया है.

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

इसमें भी एक तरह का ब्यौरा होता है, जो एजेंट को बताता है कि यह वैल्यू किस लिए है.

इसके बाद, हमारे पास स्टैटिक-टाइप प्रॉपर्टी है. इसलिए, हम नंबर टाइप की इस A2UI प्रॉपर्टी का इस्तेमाल करके, यह तय कर रहे हैं कि यह कॉम्पोनेंट ज़्यादा से ज़्यादा कितने स्टार दिखा सकता है.

इन दोनों प्रॉपर्टी को तय करने के बाद, हमें बस उन्हें रिटर्न करना होगा.

इसलिए, इस प्रॉपर्टी को ओवरराइड करके, हम एक सूची बनाएंगे और उसे दिखाएंगे.

इस तरह, एजेंट को बताया जाता है कि यह कॉम्पोनेंट किस बारे में है.

हाँ।

जैसा कि निक ने बताया, इन प्रॉपर्टी की परिभाषाओं को कैटलॉग स्कीमा के हिस्से के तौर पर भेजा जाता है. इससे एजेंट को यह पता चलता है कि इस कॉम्पोनेंट का इस्तेमाल कैसे करना है.

हालांकि, इस प्रॉपर्टी की परिभाषाओं का इस्तेमाल, रनटाइम के दौरान टाइप की गई वैल्यू निकालने के लिए भी किया जाता है.

इसलिए, एकमात्र भरोसेमंद सोर्स मौजूद होता है.

चलिए, देखते हैं कि इसे लागू करने के लिए हमें क्या करना होगा.

इसलिए, सबसे पहले, मान लें कि हमें max प्रॉपर्टी को ऐक्सेस करना है. max प्रॉपर्टी एक स्टैटिक प्रॉपर्टी है. इसका मतलब है कि एजेंट, प्रॉपर्टी ऑब्जेक्ट में इसकी वैल्यू को इनलाइन भेजता है.

इसलिए, इसे ऐक्सेस करने के लिए, हमें इसे प्रॉपर्टी ऑब्जेक्ट से हासिल करना होगा. इसके लिए, हमें सही-मैक्स प्रॉपर्टी ऑब्जेक्ट को कुंजी के तौर पर रेफ़रंस देना होगा.

इस प्रॉपर्टी को संख्या के तौर पर तय किया गया है. इसलिए, हमें इसे int में बदलना होगा और डिफ़ॉल्ट के तौर पर सेट करना होगा.

इसके बाद, वैल्यू प्रॉपर्टी आती है.

वैल्यू प्रॉपर्टी एक डाइनैमिक प्रॉपर्टी है. इसका मतलब है कि यह डेटा मॉडल में किसी चीज़ का रेफ़रंस दे रही है.

इसलिए, इसे ऐक्सेस करने के लिए, हमें properties.bind API का इस्तेमाल करना होगा. साथ ही, प्रॉपर्टी ऑब्जेक्ट को पैरामीटर के तौर पर पास करना होगा.

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

इसलिए, जब भी डेटा मॉडल अपडेट किया जाएगा, तब यह कॉम्पोनेंट अपने-आप फिर से कॉम्पोज़ हो जाएगा.

इसलिए, हमने भी इसे int में बदला और कुछ डिफ़ॉल्ट सेट किया.

हमें एक और काम करना होगा. वह है, टू-वे बाइंडिंग सेट अप करना, ताकि हम रेटिंग बदल सकें.

इसके लिए, हम bindUpdater API का इस्तेमाल करते हैं.

हम प्रॉपर्टी को तय करने वाला वही प्रॉपर्टी ऑब्जेक्ट पास करते हैं. इसके नतीजे के तौर पर, हमें bindUpdater एक lambda फ़ंक्शन दिखाता है. इसकी मदद से, हम डेटा मॉडल में इस प्रॉपर्टी की वैल्यू में बदलाव कर सकते हैं.

अब हम स्टार रेटिंग कॉम्पोनेंट को एमिट करने के लिए तैयार हैं.

ठीक है।

अब जब हमने अपना कस्टम कॉम्पोनेंट तय कर लिया है, तो हमें उसे उस कैटलॉग में जोड़ना होगा जिसका हम इस्तेमाल कर रहे हैं.

इसलिए, पहले हम बेसिक कैटलॉग का इस्तेमाल करते थे.

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

इसलिए, कैटलॉग को तीन चीज़ों से मिलकर बना हुआ माना जाता है.

इसमें एक आईडी, कॉम्पोनेंट का एक सेट, और फ़ंक्शन का एक सेट होता है.

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

इसके बाद, कॉम्पोनेंट के लिए, हम बेसिक कैटलॉग से सभी कॉम्पोनेंट लेंगे. इसके बाद, हम ऐड ऑपरेटर का इस्तेमाल करके, उस कस्टम कॉम्पोनेंट को जोड़ेंगे जिसे हमने अभी-अभी बनाया है.

फ़ंक्शन के लिए, हम बेसिक कैटलॉग में मौजूद फ़ंक्शन का इस्तेमाल करेंगे.

इस तरह, हमने अपने नए कस्टम कॉम्पोनेंट टाइप को जोड़ने के लिए, बेसिक कैटलॉग को थोड़ा और बेहतर बनाया है.

देखा, कस्टम कैटलॉग बनाना कितना आसान है.

इसलिए, एजेंट को कैटलॉग इस्तेमाल करने का तरीका, सिस्टम से जुड़े उन निर्देशों से पता चलता है जो हम उसे भेजते हैं.

हमने कस्टम कैटलॉग बना लिया है. अब सिस्टम के निर्देशों को भी अपडेट कर लेते हैं.

इसलिए, हम कैटलॉग ऑब्जेक्ट को अपने उस फ़ंक्शन को पास करेंगे जो सिस्टम के निर्देशों को बनाता है.

तो, यह रहा.

इसलिए, अब तक हम बेसिक कैटलॉग के लिए स्कीमा की स्टैटिक डेफ़िनिशन भेज रहे थे, क्योंकि हम इस स्टैंडर्ड कैटलॉग का इस्तेमाल कर रहे थे.

अब हमारे पास एक कस्टम कैटलॉग है. इसलिए, हम toJsonSchemaString फ़ंक्शन का इस्तेमाल करके, स्कीमा को डाइनैमिक तरीके से जनरेट कर सकते हैं.

इससे इस कैटलॉग का पूरा JSON फ़ॉर्मैट बन जाएगा. इसमें स्टार-रेटिंग कॉम्पोनेंट भी शामिल होगा, जिसे हमने अभी जोड़ा है.

सिस्टम के निर्देशों में, एजेंट के लिए जवाबों के कुछ उदाहरण भी शामिल होते हैं.

इसलिए, हम यहां कैटलॉग आईडी भी बदलते हैं, ताकि उदाहरणों में सही कैटलॉग का रेफ़रंस दिया जा सके.

ठीक है।

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

इसलिए, अगर हम इसे फिर से डिप्लॉय करें और इनमें से कोई एक प्रॉम्प्ट आज़माएं, तो हमें रेटिंग यूआई मिल सकता है.

इसके बाद, एजेंट जवाब देता है.

यहां देखा जा सकता है कि स्टार कॉम्पोनेंट, एक नया कॉम्पोनेंट है. एजेंट ने इसे पहले कभी नहीं देखा था. हमने इसे अभी-अभी लागू किया है.

यह बेसिक कैटलॉग का हिस्सा नहीं है. हमने इसे अभी-अभी बनाया है.

जब मैं स्टार पर क्लिक करता हूं, तब bindUpdater लैम्ब्डा को कॉल किया जाता है और डेटा मॉडल में वैल्यू अपडेट की जाती है.

रेटिंग सबमिट करने के बाद, हम कार्रवाई देख सकते हैं. कार्रवाई के कॉन्टेक्स्ट में, वे वैल्यू शामिल होंगी जो हमने अभी सेट की हैं.

ठीक है, अब हम स्लाइड पर वापस चलते हैं.

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

हमें उम्मीद है कि आपको यह समझ आ गया होगा कि इंटिग्रेशन करना कितना आसान है.

इसके लिए, आपको ये तीन मुख्य कॉम्पोनेंट बनाने होंगे: कॉम्पोनेंट का कैटलॉग बनाना होगा, पार्स करने का कुछ लॉजिक लागू करना होगा, और फिर उसे अपने यूज़र इंटरफ़ेस (यूआई) में रेंडर करना होगा.

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

उम्मीद है कि आज हमने आपको जल्दी से यह दिखा दिया कि इसे पसंद के मुताबिक बनाना आपके लिए कितना आसान है.

हमने दिखाया कि अगर Material का इस्तेमाल किया जा रहा है, तो बेसिक कैटलॉग पहले से ही आपकी मटीरियल थीमिंग के हिसाब से काम करता है. हालांकि, कैटलॉग में कॉम्पोनेंट को बढ़ाना या बदलना बहुत आसान है.

हालांकि, मुझे लगता है कि अगर खुद का कैटलॉग बनाया जाए, तो इससे ज़्यादा फ़ायदा मिलता है.

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

अगर आपको इसे पूरी तरह से आज़ादी देनी है, तो इसे टेक्स्ट लेबल और बटन जैसे बहुत ही बुनियादी कॉम्पोनेंट दें और कहें, "यूज़र इंटरफ़ेस बनाओ."

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

इसलिए, आपके पास यह कंट्रोल होता है कि एजेंट क्या कर सकता है और आपके उपयोगकर्ताओं को क्या दिखा सकता है.

इसलिए, यह नई A2UI रेंडरर लाइब्रेरी और Jetpack लाइब्रेरी है, जिसे हमने अभी-अभी लॉन्च किया है.

implementation("androidx.compose.material3:material3-a2ui:1.0.0-alpha02")

फ़िलहाल, यह ऐल्फ़ा वर्शन में है. ऐल्फ़ा 02 को हाल ही में रिलीज़ किया गया है.

इसलिए, इन लिंक पर जाकर देखें.

हमारे पास developer.android.com पर दस्तावेज़ के साथ-साथ कुछ सैंपल भी हैं.

हमारे पास बेसिक कैटलॉग दिखाने वाला एक बेसिक सैंपल है. साथ ही, ज़्यादा जानकारी वाला एक सैंपल भी है. इसके अलावा, JetPacker का यह सैंपल के तौर पर मिला ऐप्लिकेशन भी है जिसे हमने अभी-अभी बनाया है. इसे आज होने वाले ADS के अहम बातों में फिर से दिखाया जाएगा. इसमें यह दिखाया जाएगा कि उपयोगकर्ता को दिखने वाले कॉन्टेंट को कंट्रोल करने के लिए, ज़्यादा जानकारी वाले कॉम्पोनेंट कैसे बनाए जा सकते हैं.

जैसा कि मैंने बताया, फ़िलहाल हम ऐल्फ़ा वर्शन में हैं. इसलिए, इसे आज़माने और हमें अपने सुझाव/राय देने और सुविधाओं के अनुरोध करने का यह सबसे अच्छा समय है. साथ ही, हमें यह बताएं कि आपको इसका इस्तेमाल कैसे करना है या अगर यह X या Y कर सकता है, तो मुझे इसका इस्तेमाल करना पसंद आएगा.

इसलिए, कृपया लाइब्रेरी को एक्सप्लोर करें और हमें सुझाव/राय दें या शिकायत करें.

हमने यही किया.

हमें यह देखने का बेसब्री से इंतज़ार है कि आप और आपके एजेंट, Gemini की मदद से क्या-क्या बनाते हैं.

बहुत-बहुत धन्यवाद.

धन्यवाद.