Gemini API के लिए Firebase एक्सटेंशन की मदद से, एआई (AI) के साथ काम करने वाले वेब ऐप्लिकेशन बनाएं

1. शुरू करने से पहले

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

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

ज़रूरी शर्तें

• Node.js, Next.js, और TypeScript की जानकारी.

आपको क्या सीखने को मिलेगा

• भाषा को प्रोसेस करने के लिए, Gemini API के साथ Firebase एक्सटेंशन का इस्तेमाल कैसे करें.
• अपनी लैंग्वेज मॉडल के लिए, बेहतर कॉन्टेक्स्ट बनाने के लिए, Firebase के लिए Cloud Functions का इस्तेमाल कैसे करें.
• Firebase एक्सटेंशन से मिले आउटपुट को ऐक्सेस करने के लिए, JavaScript का इस्तेमाल करने का तरीका.

आपको इनकी ज़रूरत होगी

• अपनी पसंद का कोई ब्राउज़र, जैसे कि Google Chrome
• कोड एडिटर और टर्मिनल वाला डेवलपमेंट एनवायरमेंट
• Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए Google खाता

2. वेब ऐप्लिकेशन, Firebase सेवाओं, और एक्सटेंशन की समीक्षा करना

इस सेक्शन में, आपको इस कोडलैब की मदद से बनाए जाने वाले वेब ऐप्लिकेशन की समीक्षा करनी होगी. साथ ही, आपको इस्तेमाल की जाने वाली Firebase सेवाओं और Firebase एक्सटेंशन के बारे में भी जानना होगा.

वेब ऐप्लिकेशन

इस कोडलैब में, आपको Friendly Conf नाम का एक वेब ऐप्लिकेशन बनाना है.

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

Firebase की सेवाएं

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

Firebase एक्सटेंशन

इस कोडलैब में इस्तेमाल की जाने वाली Firebase एक्सटेंशन में ये शामिल हैं:

• Gemini API की मदद से चैटबॉट बनाना
• Gemini API की मदद से मल्टीमॉडल टास्क पूरे करना

एक्सटेंशन इसलिए काम के होते हैं, क्योंकि ये आपके Firebase प्रोजेक्ट में होने वाले इवेंट पर प्रतिक्रिया देते हैं. इस कोडलैब में इस्तेमाल किए गए दोनों एक्सटेंशन, Cloud Firestore में पहले से कॉन्फ़िगर किए गए कलेक्शन में नए दस्तावेज़ बनाने पर काम करते हैं.

3. डेवलपमेंट एनवायरमेंट सेट अप करना

अपने Node.js वर्शन की पुष्टि करना

1. अपने टर्मिनल में, पुष्टि करें कि आपने Node.js का 20.0.0 या उसके बाद का वर्शन इंस्टॉल किया है:

   node -v
   

2. अगर आपके पास Node.js का 20.0.0 या इसके बाद का वर्शन नहीं है, तो एलटीएस का नया वर्शन डाउनलोड करें और उसे इंस्टॉल करें.

कोडलैब के लिए सोर्स कोड पाना

अगर आपके पास GitHub खाता है, तो:

1. github.com/FirebaseExtended/codelab-gemini-api-extensions से हमारे टेंप्लेट का इस्तेमाल करके, नई रिपॉज़िटरी बनाएं
2. आपने अभी-अभी जो कोडलैब की GitHub रिपॉज़िटरी बनाई है उसे क्लोन करें:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

अगर आपने git इंस्टॉल नहीं किया है या आपको नई repo नहीं बनानी है, तो:

GitHub रिपॉज़िटरी को zip फ़ाइल के तौर पर डाउनलोड करें.

फ़ोल्डर स्ट्रक्चर की समीक्षा करना

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

अगर आपको यह पक्का नहीं है कि आपने इस कोडलैब में दिए गए निर्देशों के मुताबिक कोड को सही तरीके से लागू किया है, तो आपको end git ब्रांच में समाधान कोड मिल सकता है.

Firebase CLI इंस्टॉल करना

1. पुष्टि करें कि आपने Firebase CLI इंस्टॉल किया हो और उसका वर्शन 13.6 या इसके बाद का हो:

   firebase --version
   

2. अगर आपने Firebase CLI इंस्टॉल किया है, लेकिन यह 13.6 या इसके बाद का वर्शन नहीं है, तो इसे अपडेट करें:

   npm update -g firebase-tools
   

3. अगर आपने Firebase CLI इंस्टॉल नहीं किया है, तो इसे इंस्टॉल करें:

   npm install -g firebase-tools
   

अगर अनुमति से जुड़ी गड़बड़ियों की वजह से, Firebase CLI को अपडेट या इंस्टॉल नहीं किया जा सकता, तो npm का दस्तावेज़ देखें या इंस्टॉल करने का कोई दूसरा विकल्प इस्तेमाल करें.

Firebase में लॉग इन करना

1. अपने टर्मिनल में, codelab-gemini-api-extensions फ़ोल्डर पर जाएं और Firebase में लॉग इन करें:

   cd codelab-gemini-api-extensions
   firebase login
   

   अगर आपके टर्मिनल पर यह मैसेज दिखता है कि आपने Firebase में पहले से ही लॉग इन किया हुआ है, तो इस कोडलैब के अपना Firebase प्रोजेक्ट सेट अप करें सेक्शन पर जाएं.
2. अपने टर्मिनल में, यह तय करें कि आपको Firebase से डेटा इकट्ठा करना है या नहीं. इसके हिसाब से, Y या N डालें. (इनमें से कोई भी विकल्प इस कोडलैब के लिए काम करता है)
3. अपने ब्राउज़र में, अपना Google खाता चुनें और अनुमति दें पर क्लिक करें.

4. अपना Firebase प्रोजेक्ट सेट अप करना

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

इस सेक्शन में दिए गए सभी चरण, Firebase कंसोल में पूरे किए जाते हैं.

Firebase प्रोजेक्ट बनाना

1. Firebase कंसोल में उसी Google खाते से साइन इन करें जिसका इस्तेमाल आपने पिछले चरण में किया था.
2. नया प्रोजेक्ट बनाने के लिए बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, AI Extensions Codelab.
   
3. जारी रखें पर क्लिक करें.
4. अगर आपसे कहा जाए, तो Firebase की शर्तें पढ़ें और स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
5. (ज़रूरी नहीं) Firebase कंसोल में एआई की मदद पाने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
6. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
7. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

Firebase का प्राइसिंग प्लान अपग्रेड करना

Firebase एक्सटेंशन (और उनकी क्लाउड सेवाएं) के साथ-साथ Firebase के लिए Cloud Storage का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट इस्तेमाल के हिसाब से पैसे चुकाएं (ब्लेज़) प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud बिलिंग खाते से लिंक होना चाहिए.

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

यह भी ध्यान दें कि आपके Firebase प्रोजेक्ट पर बिलिंग की सुविधा चालू होने पर, एक्सटेंशन के ज़रिए Gemini API को किए गए कॉल के लिए आपसे शुल्क लिया जाएगा. भले ही, आपने Google AI या Vertex AI में से किसी भी प्रोवाइडर को चुना हो. Google AI और Vertex AI की कीमत के बारे में ज़्यादा जानें.

अपने प्रोजेक्ट को Blaze प्लान पर अपग्रेड करने के लिए, यह तरीका अपनाएं:

1. Firebase कंसोल में जाकर, अपने प्लान को अपग्रेड करें को चुनें.
2. Blaze प्लान चुनें. किसी क्लाउड बिलिंग खाते को अपने प्रोजेक्ट से लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
   अगर आपको इस अपग्रेड के दौरान कोई क्लाउड बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase कंसोल में अपग्रेड करने की प्रोसेस पर वापस जाना पड़ सकता है.

अपने Firebase प्रोजेक्ट में कोई वेब ऐप्लिकेशन जोड़ना

1. अपने Firebase प्रोजेक्ट में, प्रोजेक्ट की खास जानकारी स्क्रीन पर जाएं. इसके बाद, वेब पर क्लिक करें.
2. ऐप्लिकेशन का प्रचलित नाम टेक्स्ट बॉक्स में, ऐप्लिकेशन का कोई ऐसा नाम डालें जो आसानी से याद रखा जा सके. जैसे, My AI Extensions
3. ऐप्लिकेशन रजिस्टर करें > आगे बढ़ें > आगे बढ़ें > कंसोल पर जाएं पर क्लिक करें.
   वेब ऐप्लिकेशन के फ़्लो में "होस्टिंग" से जुड़े सभी चरणों को छोड़ा जा सकता है. ऐसा इसलिए, क्योंकि इस कोडलैब में बाद में होस्टिंग सेवा को सेट अप करने का विकल्प मिलेगा.

बढ़िया! आपने अब अपने नए Firebase प्रोजेक्ट में एक वेब ऐप्लिकेशन रजिस्टर कर लिया है.

Firebase Authentication सेट अप करना

1. बाईं ओर मौजूद नेविगेशन पैनल का इस्तेमाल करके, पुष्टि पर जाएं.
2. शुरू करें पर क्लिक करें.
3. अन्य प्रोवाइडर कॉलम में, Google > चालू करें पर क्लिक करें.
4. प्रोजेक्ट का सार्वजनिक नाम टेक्स्ट बॉक्स में, कोई काम का नाम डालें. जैसे, My AI Extensions Codelab.
5. प्रोजेक्ट के लिए सहायता ईमेल मेन्यू में जाकर, अपना ईमेल पता चुनें.
6. सेव करें पर क्लिक करें.

Cloud Firestore सेट अप करना

1. Firebase कंसोल के बाईं ओर मौजूद पैनल में, Build को बड़ा करें. इसके बाद, Firestore database को चुनें.
2. डेटाबेस बनाएं पर क्लिक करें.
3. डेटाबेस आईडी को (default) पर सेट रहने दें.
4. अपने डेटाबेस के लिए कोई जगह चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
   किसी असली ऐप्लिकेशन के लिए, आपको ऐसी जगह चुननी चाहिए जो आपके उपयोगकर्ताओं के आस-पास हो.
5. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
   इस कोडलैब में बाद में, अपने डेटा को सुरक्षित रखने के लिए सुरक्षा नियम जोड़े जाएंगे. अपने डेटाबेस के लिए सुरक्षा के नियम जोड़े बिना, सार्वजनिक तौर पर किसी ऐप्लिकेशन को डिस्ट्रिब्यूट या उपलब्ध न करें.
6. बनाएं पर क्लिक करें.

Firebase के लिए Cloud Storage सेट अप करना

1. Firebase कंसोल के बाएं पैनल में, Build को बड़ा करें. इसके बाद, Storage को चुनें.
2. शुरू करें पर क्लिक करें.
3. अपने डिफ़ॉल्ट स्टोरेज बकेट के लिए कोई जगह चुनें.
   US-WEST1, US-CENTRAL1, और US-EAST1 में मौजूद बकेट, Google Cloud Storage के लिए "हमेशा के लिए मुफ़्त" टियर का फ़ायदा ले सकते हैं. अन्य सभी जगहों पर मौजूद बकेट के लिए, Google Cloud Storage की कीमत और इस्तेमाल से जुड़े नियम लागू होते हैं.
4. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
   इस कोडलैब में बाद में, अपने डेटा को सुरक्षित रखने के लिए सुरक्षा नियम जोड़े जाएंगे. अपने स्टोरेज बकेट के लिए सुरक्षा के नियम जोड़े बिना, सार्वजनिक तौर पर किसी ऐप्लिकेशन को डिस्ट्रिब्यूट या उपलब्ध न करें.
5. बनाएं पर क्लिक करें.

इस कोडलैब के अगले सेक्शन में, आपको दो Firebase एक्सटेंशन इंस्टॉल और कॉन्फ़िगर करने होंगे. इनका इस्तेमाल आपको इस कोडलैब में वेब ऐप्लिकेशन के साथ करना होगा.

5. "Build Chatbot with the Gemini API" एक्सटेंशन सेट अप करना

"Build Chatbot with the Gemini API" एक्सटेंशन इंस्टॉल करना

1. "Gemini API की मदद से चैटबॉट बनाएं" एक्सटेंशन" पर जाएं.
2. Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
3. अपना Firebase प्रोजेक्ट चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
4. चालू किए गए एपीआई और बनाए गए संसाधनों की समीक्षा करें सेक्शन में, आपको सुझाई गई किसी भी सेवा के बगल में मौजूद चालू करें पर क्लिक करें. इसके बाद, आगे बढ़ें पर क्लिक करें.
5. आपको सुझाई गई किसी भी अनुमति के लिए, अनुमति दें को चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
6. एक्सटेंशन कॉन्फ़िगर करें:
   1. Gemini API Provider मेन्यू में जाकर, चुनें कि आपको Google AI से Gemini API का इस्तेमाल करना है या Vertex AI से. Firebase का इस्तेमाल करने वाले डेवलपर के लिए, हमारा सुझाव है कि वे Vertex AI का इस्तेमाल करें.
   2. Firestore कलेक्शन का पाथ टेक्स्ट बॉक्स में, users/{uid}/discussion/{discussionId}/messages डालें.
      इस कोडलैब के आने वाले चरणों में, इस कलेक्शन में दस्तावेज़ जोड़ने पर एक्सटेंशन, Gemini API को कॉल करेगा.
   3. Cloud Functions की जगह मेन्यू में, अपनी पसंदीदा जगह चुनें. जैसे, Iowa (us-central1) या वह जगह जिसे आपने पहले Firestore डेटाबेस के लिए चुना था.
   4. अन्य सभी वैल्यू को डिफ़ॉल्ट के तौर पर छोड़ दें.
7. एक्सटेंशन इंस्टॉल करें पर क्लिक करें और एक्सटेंशन के इंस्टॉल होने का इंतज़ार करें.

"Build Chatbot with the Gemini API" एक्सटेंशन आज़माएँ

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

यह एक्सटेंशन तब ट्रिगर होता है, जब users/{uid}/discussion/{discussionId}/messages कलेक्शन में कोई Firestore दस्तावेज़ बनाया जाता है. ऐसा Firebase कंसोल में किया जा सकता है.

1. Firebase कंसोल में, Firestore पर जाएं. इसके बाद, पहले कॉलम में मौजूद कलेक्शन शुरू करें पर क्लिक करें.
2. कलेक्शन आईडी टेक्स्ट बॉक्स में, users डालें. इसके बाद, आगे बढ़ें पर क्लिक करें.
3. दस्तावेज़ आईडी टेक्स्ट बॉक्स में, अपने-आप आईडी जनरेट होने की सुविधा पर क्लिक करें. इसके बाद, सेव करें पर क्लिक करें.
4. users कलेक्शन में जाकर, कलेक्शन शुरू करें पर क्लिक करें.
5. कलेक्शन आईडी टेक्स्ट बॉक्स में, messages डालें. इसके बाद, आगे बढ़ें पर क्लिक करें.
   1. दस्तावेज़ का आईडी टेक्स्ट बॉक्स में, अपने-आप आईडी जनरेट होने की सुविधा पर क्लिक करें.
   2. फ़ील्ड टेक्स्ट बॉक्स में, prompt डालें
   3. वैल्यू टेक्स्ट बॉक्स में, Tell me 5 random fruits डालें
6. सेव करें पर क्लिक करें और कुछ सेकंड इंतज़ार करें.

इस दस्तावेज़ को जोड़ने पर, एक्सटेंशन ने Gemini API को कॉल किया. आपने अभी जो दस्तावेज़ messages कलेक्शन में जोड़ा है उसमें अब न सिर्फ़ आपका prompt शामिल है, बल्कि आपकी क्वेरी के लिए मॉडल का response भी शामिल है.

messages कलेक्शन में कोई दूसरा दस्तावेज़ जोड़कर, एक्सटेंशन को फिर से ट्रिगर करें:

1. messages कलेक्शन में जाकर, दस्तावेज़ जोड़ें पर क्लिक करें.
2. दस्तावेज़ का आईडी टेक्स्ट बॉक्स में, अपने-आप आईडी जनरेट होने की सुविधा पर क्लिक करें.
3. फ़ील्ड टेक्स्ट बॉक्स में, prompt डालें
4. वैल्यू टेक्स्ट बॉक्स में, And now, vegetables डालें
5. सेव करें पर क्लिक करें और कुछ सेकंड इंतज़ार करें. आपने अभी जो दस्तावेज़ messages कलेक्शन में जोड़ा है उसमें अब आपकी क्वेरी का response शामिल है.
   
   इस जवाब को जनरेट करते समय, अंडरलाइंग Gemini मॉडल ने आपकी पिछली क्वेरी से मिली जानकारी का इस्तेमाल किया.

6. वेब ऐप्लिकेशन सेट अप करना

वेब ऐप्लिकेशन चलाने के लिए, आपको अपने टर्मिनल में कमांड चलाने होंगी. साथ ही, अपने कोड एडिटर में कोड जोड़ना होगा.

Firebase प्रोजेक्ट के लिए, Firebase CLI सेट अप करना

अपने टर्मिनल में, Firebase प्रोजेक्ट का इस्तेमाल करने के लिए CLI को यह निर्देश दें:

firebase use YOUR_PROJECT_ID

Firestore और Cloud Storage के लिए सुरक्षा के नियम डिप्लॉय करना

इस कोडलैब के कोडबेस में, Firestore के सुरक्षा नियमों और Cloud Storage के सुरक्षा नियमों का एक सेट पहले से मौजूद है. इन सुरक्षा नियमों को डिप्लॉय करने के बाद, आपके Firebase प्रोजेक्ट में मौजूद Firebase सेवाओं को गलत इस्तेमाल से बेहतर तरीके से बचाया जा सकता है.

1. सुरक्षा नियमों को डिप्लॉय करने के लिए, अपने टर्मिनल में यह कमांड चलाएं:

   firebase deploy --only firestore:rules,storage
   

2. अगर आपसे यह पूछा जाए कि क्या Cloud Storage को क्रॉस-सर्विस नियमों का इस्तेमाल करने के लिए, आईएएम की भूमिका असाइन करनी है, तो Y या N डालें. (इस कोडलैब के लिए, दोनों में से कोई भी विकल्प काम करेगा)

अपने वेब ऐप्लिकेशन को Firebase प्रोजेक्ट से कनेक्ट करना

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

1. अपना Firebase कॉन्फ़िगरेशन पाएं:
   1. Firebase कंसोल में, अपने Firebase प्रोजेक्ट में मौजूद प्रोजेक्ट सेटिंग पर जाएं.
   2. नीचे की ओर स्क्रोल करके आपके ऐप्लिकेशन सेक्शन पर जाएं. इसके बाद, रजिस्टर किया गया अपना वेब ऐप्लिकेशन चुनें.
   3. एसडीके सेटअप और कॉन्फ़िगरेशन पैनल में, firebaseConfig const के साथ पूरा initializeApp कोड कॉपी करें.
2. अपने वेब ऐप्लिकेशन के कोडबेस में Firebase कॉन्फ़िगरेशन जोड़ें:
   1. अपने कोड एडिटर में, src/lib/firebase/firebase.config.js फ़ाइल खोलें.
   2. फ़ाइल में मौजूद सभी कॉन्टेंट को चुनें और उसे कॉपी किए गए कोड से बदलें.
   3. फ़ाइल सेव करें.

अपने ब्राउज़र में वेब ऐप्लिकेशन की झलक देखना

1. अपने टर्मिनल में, डिपेंडेंसी इंस्टॉल करें. इसके बाद, वेब ऐप्लिकेशन चलाएं:

   npm install
   npm run dev
   

2. वेब ऐप्लिकेशन देखने के लिए, अपने ब्राउज़र में जाकर, स्थानीय तौर पर होस्ट किए गए होस्टिंग यूआरएल पर जाएं. उदाहरण के लिए, ज़्यादातर मामलों में यूआरएल http://localhost:3000/ या इससे मिलता-जुलता होता है.

वेब ऐप्लिकेशन के चैटबॉट का इस्तेमाल करना

1. अपने ब्राउज़र में, उस टैब पर वापस जाएं जिसमें Friendly Conf वेब ऐप्लिकेशन, लोकल तौर पर चल रहा है.
2. Google से साइन इन करें पर क्लिक करें. अगर ज़रूरी हो, तो अपना Google खाता चुनें.
3. साइन इन करने के बाद, आपको एक खाली चैट विंडो दिखेगी.
4. कोई ग्रीटिंग टाइप करें (जैसे, hi). इसके बाद, भेजें पर क्लिक करें.
5. चैटबॉट से जवाब मिलने के लिए कुछ सेकंड इंतज़ार करें.

ऐप्लिकेशन में मौजूद चैटबॉट, सामान्य जवाब देता है.

ऐप्लिकेशन के लिए चैटबॉट को खास बनाना

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

1. अपने ब्राउज़र में वेब ऐप्लिकेशन पर, बातचीत मिटाने के लिए लाल रंग के "x" बटन पर क्लिक करें. यह बटन, चैट के इतिहास में मौजूद मैसेज के बगल में होता है.
2. अपने कोड एडिटर में, src/app/page.tsx फ़ाइल खोलें.
3. नीचे की ओर स्क्रोल करें और लाइन 93 पर या उसके आस-पास मौजूद prompt: userMsg कोड को इससे बदलें:
   prompt: preparePrompt(userMsg, messages),
4. फ़ाइल सेव करें.
5. अपने ब्राउज़र में चल रहे वेब ऐप्लिकेशन पर वापस जाएं.
6. फिर से, कोई ग्रीटिंग टाइप करें (जैसे, hi). इसके बाद, भेजें पर क्लिक करें.
7. चैटबॉट से जवाब मिलने के लिए कुछ सेकंड इंतज़ार करें.

चैटबॉट, src/app/lib/context.md में दिए गए कॉन्टेक्स्ट के हिसाब से जवाब देता है. आपने कोई खास अनुरोध नहीं किया है. इसके बावजूद, Gemini का मॉडल इस संदर्भ के साथ-साथ मौजूदा तारीख/समय के आधार पर, आपकी दिलचस्पी के हिसाब से सुझाव जनरेट करता है. अब फ़ॉलो-अप सवाल पूछे जा सकते हैं और किसी विषय के बारे में ज़्यादा जानकारी पाई जा सकती है.

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

1. अपने कोड एडिटर में, src/app/page.tsx फ़ाइल खोलें.
2. नीचे की ओर स्क्रोल करें और लाइन 56 पर या उसके आस-पास मौजूद ...doc.data(), कोड को इससे बदलें:
   ...prepareMessage(doc.data()),
3. फ़ाइल सेव करें.
4. अपने ब्राउज़र में चल रहे वेब ऐप्लिकेशन पर वापस जाएं.
5. पेज को फिर से लोड करें.

चैटबॉट से बातचीत करने के लिए, पिछले कॉन्टेक्स्ट का इस्तेमाल करने की सुविधा भी आज़माई जा सकती है:

1. कोई मैसेज टाइप करें टेक्स्ट बॉक्स में, कोई सवाल पूछें. जैसे: Any other interesting talks about AI?चैटबॉट आपको जवाब देगा.
2. कोई मैसेज टाइप करें टेक्स्ट बॉक्स में, पिछले सवाल से जुड़ा कोई फ़ॉलो-अप सवाल पूछें: Give me a few more details about the last one.

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

7. "Gemini API की मदद से मल्टीमॉडल टास्क पूरे करना" एक्सटेंशन सेट अप करना

"Gemini API की मदद से मल्टीमॉडल टास्क पूरे करना" एक्सटेंशन, Gemini API को मल्टीमॉडल प्रॉम्प्ट के साथ कॉल करता है. इनमें टेक्स्ट प्रॉम्प्ट के साथ-साथ, काम करने वाली फ़ाइल का यूआरएल या Cloud Storage का यूआरएल शामिल होता है. ध्यान दें कि Google AI Gemini API भी Cloud Storage के यूआरएल का इस्तेमाल, फ़ाइल के यूआरएल के बुनियादी ढांचे के तौर पर करता है. एक्सटेंशन, हैंडल बार वैरिएबल का भी इस्तेमाल करता है. इससे Cloud Firestore दस्तावेज़ से वैल्यू बदलकर, टेक्स्ट प्रॉम्प्ट को पसंद के मुताबिक बनाया जा सकता है.

अपने ऐप्लिकेशन में, जब भी Cloud Storage बकेट में कोई इमेज अपलोड की जाती है, तब एक यूआरएल जनरेट किया जा सकता है. साथ ही, उस यूआरएल को नए Cloud Firestore दस्तावेज़ में जोड़ा जा सकता है. इससे एक्सटेंशन, मल्टीमॉडल प्रॉम्प्ट बना सकता है और Gemini API को कॉल कर सकता है. इस कोडलैब के सोर्स कोड में, हमने इमेज अपलोड करने और Firestore दस्तावेज़ में यूआरएल लिखने के लिए पहले से ही कोड दिया है.

"Gemini API की मदद से मल्टीमॉडल टास्क पूरे करना" एक्सटेंशन इंस्टॉल करें

1. "Gemini API की मदद से मल्टीमॉडल टास्क" एक्सटेंशन" पर जाएं.
2. Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
3. अपना Firebase प्रोजेक्ट चुनें.
4. आगे बढ़ें > आगे बढ़ें > आगे बढ़ें पर क्लिक करें. ऐसा तब तक करें, जब तक आप एक्सटेंशन कॉन्फ़िगर करें सेक्शन पर न पहुंच जाएं.
   1. Gemini API Provider मेन्यू में जाकर, चुनें कि आपको Google AI से Gemini API का इस्तेमाल करना है या Vertex AI से. Firebase का इस्तेमाल करने वाले डेवलपर के लिए, हमारा सुझाव है कि वे Vertex AI का इस्तेमाल करें.
   2. Firestore कलेक्शन का पाथ टेक्स्ट बॉक्स में, यह डालें: gallery
   3. प्रॉम्प्ट टेक्स्ट बॉक्स में, Please describe the provided image; if there is no image, say "no image" डालें
   4. इमेज फ़ील्ड टेक्स्ट बॉक्स में, यह डालें: image
   5. Cloud Functions की जगह मेन्यू में, अपनी पसंदीदा जगह चुनें. जैसे, Iowa (us-central1) या वह जगह जिसे आपने पहले Firestore डेटाबेस के लिए चुना था.
   6. अन्य सभी वैल्यू को डिफ़ॉल्ट के तौर पर छोड़ दें.
5. एक्सटेंशन इंस्टॉल करें पर क्लिक करें और एक्सटेंशन के इंस्टॉल होने का इंतज़ार करें.

"Gemini API की मदद से मल्टीमॉडल टास्क" एक्सटेंशन आज़माएँ

इस कोडलैब का मकसद, वेब ऐप्लिकेशन के ज़रिए "Gemini API की मदद से मल्टीमॉडल टास्क पूरे करना" एक्सटेंशन के साथ इंटरैक्ट करना है. हालांकि, Firebase कंसोल में इस एक्सटेंशन को आज़माकर, यह जानना फ़ायदेमंद होता है कि यह कैसे काम करता है.

यह एक्सटेंशन तब ट्रिगर होता है, जब users/{uid}/gallery कलेक्शन में कोई Firestore दस्तावेज़ बनाया जाता है. ऐसा Firebase कंसोल में किया जा सकता है. इसके बाद, एक्सटेंशन Cloud Firestore दस्तावेज़ में मौजूद Cloud Storage इमेज के यूआरएल को लेता है. साथ ही, इसे Gemini API को किए गए कॉल में मल्टीमॉडल प्रॉम्प्ट के तौर पर पास करता है.

सबसे पहले, Cloud Storage बकेट में कोई इमेज अपलोड करें:

1. अपने Firebase प्रोजेक्ट में Storage पर जाएं.
2. फ़ोल्डर बनाएं पर क्लिक करें.
3. फ़ोल्डर का नाम टेक्स्ट बॉक्स में, gallery डालें
4. फ़ोल्डर जोड़ें पर क्लिक करें.
5. gallery फ़ोल्डर में, फ़ाइल अपलोड करें पर क्लिक करें.
6. अपलोड करने के लिए, कोई JPEG इमेज फ़ाइल चुनें.

इसके बाद, इमेज के Cloud Storage यूआरएल को Firestore दस्तावेज़ में जोड़ें. यह एक्सटेंशन के लिए ट्रिगर होता है:

1. अपने Firebase प्रोजेक्ट में Firestore पर जाएं
2. पहले कॉलम में, कलेक्शन शुरू करें पर क्लिक करें.
3. कलेक्शन आईडी टेक्स्ट बॉक्स में, gallery डालें. इसके बाद, आगे बढ़ें पर क्लिक करें.
4. कलेक्शन में कोई दस्तावेज़ जोड़ने के लिए:
   1. दस्तावेज़ का आईडी टेक्स्ट बॉक्स में, अपने-आप आईडी जनरेट होने की सुविधा पर क्लिक करें.
   2. फ़ील्ड टेक्स्ट बॉक्स में, image डालें. वैल्यू बॉक्स में, अभी अपलोड की गई इमेज के स्टोरेज की जगह का यूआरआई डालें.
5. फ़ील्ड जोड़ें पर क्लिक करें.
6. फ़ील्ड टेक्स्ट बॉक्स में, published डालें. टाइप बॉक्स में, बूलियन चुनें. वैल्यू बॉक्स में, true चुनें.
7. सेव करें पर क्लिक करें और कुछ सेकंड इंतज़ार करें.

gallery कलेक्शन में अब एक ऐसा दस्तावेज़ शामिल है जिसमें आपकी क्वेरी का जवाब है.

वेब ऐप्लिकेशन की इमेज गैलरी का इस्तेमाल करना

1. अपने ब्राउज़र में, उस टैब पर वापस जाएं जिसमें Friendly Conf वेब ऐप्लिकेशन, लोकल तौर पर चल रहा है.
2. गैलरी नेविगेशन टैब पर क्लिक करें.
3. आपको अपलोड की गई इमेज और एआई से जनरेट किए गए ब्यौरों की गैलरी दिखेगी. इसमें वह इमेज होनी चाहिए जिसे आपने पहले अपने स्टोरेज बकेट में मौजूद gallery फ़ोल्डर में अपलोड किया था.
4. "अपलोड करें" बटन पर क्लिक करें और कोई दूसरी JPEG इमेज चुनें.
5. गैलरी में इमेज दिखने में कुछ सेकंड लग सकते हैं. कुछ समय बाद, नई अपलोड की गई इमेज के लिए, एआई से जनरेट की गई जानकारी भी दिखेगी.

अगर आपको यह जानना है कि इस सुविधा को लागू करने के लिए कोड कैसे लिखा गया था, तो वेब ऐप्लिकेशन के कोडबेस में src/app/gallery/page.tsx देखें.

8. बोनस: अपना ऐप्लिकेशन डिप्लॉय करना

Firebase, वेब ऐप्लिकेशन को डिप्लॉय करने के कई तरीके उपलब्ध कराता है. इस कोडलैब के लिए, इनमें से कोई एक विकल्प चुनें:

• पहला विकल्प: Firebase होस्टिंग - अगर आपको अपनी GitHub रिपो नहीं बनानी है और आपके पास सिर्फ़ सोर्स कोड है, जो आपकी मशीन पर स्थानीय तौर पर सेव है, तो इस विकल्प का इस्तेमाल करें.
• दूसरा विकल्प: Firebase App Hosting - अगर आपको अपनी GitHub repo में किए गए बदलावों को कभी भी अपने-आप डिप्लॉय करना है, तो इस विकल्प का इस्तेमाल करें. Firebase की इस नई सेवा को खास तौर पर, डाइनैमिक Next.js और Angular ऐप्लिकेशन की ज़रूरतों को पूरा करने के लिए बनाया गया है.

पहला विकल्प: Firebase होस्टिंग का इस्तेमाल करके डिप्लॉय करना

अगर आपको अपनी GitHub repo नहीं बनानी है और आपके पास सिर्फ़ सोर्स कोड है, जो आपकी मशीन पर सेव है, तो इस विकल्प का इस्तेमाल करें.

1. अपने टर्मिनल में, इन कमांड को चलाकर Firebase होस्टिंग को शुरू करें:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. प्रॉम्प्ट: Detected an existing Next.js codebase in your current directory, should we use this? के लिए, Y दबाएं.
3. In which region would you like to host server-side content, if applicable? प्रॉम्प्ट के लिए, जगह की डिफ़ॉल्ट जानकारी या वह जगह चुनें जिसका इस्तेमाल आपने इस कोडलैब में पहले किया था. इसके बाद, Enter (macOS पर return) दबाएं.
4. प्रॉम्प्ट: Set up automatic builds and deploys with GitHub? के लिए, N दबाएं.
5. इस कमांड को चलाकर, अपने वेब ऐप्लिकेशन को होस्टिंग पर डिप्लॉय करें:

   firebase deploy --only hosting
   

सब हो गया! अगर आपको अपने ऐप्लिकेशन को अपडेट करना है और उस नए वर्शन को डिप्लॉय करना है, तो बस firebase deploy --only hosting को फिर से चलाएं. Firebase होस्टिंग आपके ऐप्लिकेशन को फिर से बनाएगा और डिप्लॉय करेगा.

दूसरा विकल्प: Firebase App Hosting का इस्तेमाल करके डिप्लॉय करना

अगर आपको GitHub रिपो में बदलाव करने पर, उन्हें अपने-आप डिप्लॉय करना है, तो इस विकल्प का इस्तेमाल करें.

1. GitHub पर अपने बदलावों को कमिट करें.
2. Firebase कंसोल में, अपने Firebase प्रोजेक्ट में App Hosting पर जाएं.
3. शुरू करें > GitHub से कनेक्ट करें पर क्लिक करें.
4. अपना GitHub खाता और रिपॉज़िटरी चुनें. आगे बढ़ें पर क्लिक करें.
5. डिप्लॉयमेंट सेटिंग > रूट डायरेक्ट्री में, अपने सोर्स कोड वाले फ़ोल्डर का नाम डालें. ऐसा तब करें, जब आपका package.json आपकी रिपॉज़िटरी की रूट डायरेक्ट्री में न हो.
6. लाइव ब्रांच के लिए, अपनी GitHub रिपॉज़िटरी की main ब्रांच चुनें. आगे बढ़ें पर क्लिक करें.
7. अपने बैकएंड के लिए कोई आईडी डालें. उदाहरण के लिए, chatbot.
8. पूरा करें और डिप्लॉय करें पर क्लिक करें.

आपके नए डिप्लॉयमेंट को तैयार होने में कुछ मिनट लगेंगे. Firebase कंसोल के ऐप्लिकेशन होस्टिंग सेक्शन में जाकर, डिप्लॉयमेंट की स्थिति देखी जा सकती है.

इसके बाद, जब भी GitHub repo में कोई बदलाव किया जाएगा, Firebase ऐप्लिकेशन होस्टिंग आपके ऐप्लिकेशन को अपने-आप बनाएगी और डिप्लॉय करेगी.

9. नतीजा

बधाई हो! आपने इस कोडलैब में बहुत कुछ सीखा!

एक्सटेंशन इंस्टॉल करना और उन्हें कॉन्फ़िगर करना

आपने Firebase कंसोल का इस्तेमाल करके, जनरेटिव एआई का इस्तेमाल करने वाले कई Firebase एक्सटेंशन कॉन्फ़िगर और इंस्टॉल किए. Firebase एक्सटेंशन का इस्तेमाल करना आसान है. ऐसा इसलिए, क्योंकि आपको Google Cloud सेवाओं के साथ पुष्टि करने या Firestore और Google Cloud सेवाओं और एपीआई के साथ सुनने और इंटरैक्ट करने के लिए, बैकएंड Cloud Functions लॉजिक को हैंडल करने के लिए, बहुत सारे बॉयलरप्लेट कोड के बारे में जानने और उसे लिखने की ज़रूरत नहीं होती.

Firebase कंसोल का इस्तेमाल करके एक्सटेंशन आज़माना

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

एआई की मदद से काम करने वाला वेब ऐप्लिकेशन बनाना

आपने एआई की मदद से काम करने वाला एक वेब ऐप्लिकेशन बनाया है. यह Gemini मॉडल की कुछ ही सुविधाओं को ऐक्सेस करने के लिए, Firebase एक्सटेंशन का इस्तेमाल करता है.

वेब ऐप्लिकेशन में, "Chatbot with Gemini API" एक्सटेंशन का इस्तेमाल किया जाता है. इससे उपयोगकर्ता को इंटरैक्टिव चैट इंटरफ़ेस मिलता है. इसमें बातचीत के दौरान, ऐप्लिकेशन के हिसाब से और पहले की बातचीत का कॉन्टेक्स्ट शामिल होता है. इसमें हर मैसेज को Firestore दस्तावेज़ में सेव किया जाता है. यह दस्तावेज़, किसी खास उपयोगकर्ता के लिए स्कोप किया जाता है.

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

अगले चरण

• Google AI Studio या Vertex AI Studio में प्रॉम्प्ट आज़माएं और बड़ी कॉन्टेक्स्ट विंडो का फ़ायदा पाएं.
• एआई की मदद से, खोज के नतीजों को बेहतर बनाने वाली जनरेटिव एआई (आरएजी) खोज के बारे में जानें.
• अपने हिसाब से चलने वाले कोडलैब को आज़माएं. इसमें, Genkit (जो कि एआई फ़्रेमवर्क सेवा है) का इस्तेमाल करके, मौजूदा Firebase ऐप्लिकेशन में चैटबॉट जोड़ने का तरीका बताया गया है.
• Firestore में मिलती-जुलती खोज की सुविधाओं और Cloud SQL for PostgreSQL के बारे में जानें.
• फ़ंक्शन कॉलिंग की सुविधा का इस्तेमाल करके, अपने चैटबॉट को मौजूदा ऐप्लिकेशन में कॉल करने का तरीका सिखाएं.