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

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

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

इस कोडलैब में, आपको एआई (AI) की मदद से काम करने वाला ऐसा वेब ऐप्लिकेशन बनाने का तरीका पता चलेगा जो 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 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 इंस्टॉल नहीं किया है या आपको नया रिपॉज़िटरी नहीं बनाना है, तो:

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

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

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

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

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. अपने टर्मिनल में, Y या N डालें. इससे यह तय होगा कि Firebase को डेटा इकट्ठा करना है या नहीं. (इस कोडलैब के लिए, दोनों विकल्प काम करते हैं)
3. अपने ब्राउज़र में, अपना Google खाता चुनें और अनुमति दें पर क्लिक करें.

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

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

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

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

1. Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
2. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, AI Extensions Codelab.
   अपने Firebase प्रोजेक्ट के लिए, अपने-आप असाइन किया गया प्रोजेक्ट आईडी याद रखें. इसके अलावा, अपना पसंदीदा प्रोजेक्ट आईडी सेट करने के लिए, बदलाव करें आइकॉन पर क्लिक करें. Firebase CLI में अपने Firebase प्रोजेक्ट की पहचान करने के लिए, आपको बाद में इस आईडी की ज़रूरत पड़ेगी. अगर आपको अपना आईडी याद नहीं है, तो प्रोजेक्ट सेटिंग में जाकर, इसे कभी भी देखा जा सकता है.
3. जारी रखें पर क्लिक करें.
4. अगर आपसे कहा जाए, तो Firebase की शर्तें देखें और उन्हें स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
5. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
6. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, अपने प्रोजेक्ट के प्रोवाइड होने का इंतज़ार करें और फिर जारी रखें पर क्लिक करें.

Firebase के प्लान की कीमत अपग्रेड करना

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

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

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

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

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

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

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

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

Firebase Authentication सेट अप करना

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

Cloud Firestore सेट अप करना

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

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

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

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

5. "Gemini API की मदद से चैटबॉट बनाएं" एक्सटेंशन सेट अप करना

"Gemini API की मदद से चैटबॉट बनाएं" एक्सटेंशन इंस्टॉल करें

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

"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 को सेट अप करना

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

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. SDK टूल का सेटअप और कॉन्फ़िगरेशन पैनल में, firebaseConfig const के साथ पूरा initializeApp कोड कॉपी करें.
2. अपने वेब ऐप्लिकेशन के कोडबेस में Firebase कॉन्फ़िगरेशन जोड़ें:
   1. अपने कोड एडिटर में, src/app/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. नीचे की ओर स्क्रोल करें और 77वीं लाइन या उसके आस-पास मौजूद उस कोड को बदलें जिसमें 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.

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

बोनस: Firebase Local Emulator Suite का इस्तेमाल करके वेब ऐप्लिकेशन चलाना

Firebase Local Emulator Suite की मदद से, वेब ऐप्लिकेशन की ज़्यादातर सुविधाओं को स्थानीय तौर पर टेस्ट किया जा सकता है.

1. अपने टर्मिनल में, पक्का करें कि आप वेब ऐप्लिकेशन के रूट में हों.
2. Firebase Local Emulator Suite को इंस्टॉल करने और चलाने के लिए, यह कमांड चलाएं:

   firebase init emulators
   firebase emulators:start
   

7. "Gemini API की मदद से, कई तरीकों से टास्क करने की सुविधा" एक्सटेंशन सेट अप करना

"Gemini API की मदद से कई मोड में टास्क करने की सुविधा" एक्सटेंशन, Gemini API को कई मोड वाले प्रॉम्प्ट के साथ कॉल करता है. इन प्रॉम्प्ट में टेक्स्ट प्रॉम्प्ट के साथ-साथ, काम करने वाली फ़ाइल का यूआरएल या Cloud Storage का यूआरएल भी शामिल होता है. ध्यान दें कि Google के एआई 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 की सेवा देने वाली कंपनी मेन्यू में, चुनें कि आपको Google AI या Vertex AI के Gemini API का इस्तेमाल करना है या नहीं. 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 प्रोजेक्ट में, स्टोरेज पर जाएं.
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 ऐप्लिकेशन होस्टिंग - अगर आपको अपने GitHub रिपॉज़िटरी में बदलाव करने पर, ऐप्लिकेशन अपने-आप डिप्लॉय होने की सुविधा चाहिए, तो इस विकल्प का इस्तेमाल करें. Firebase की यह नई सेवा, खास तौर पर डाइनैमिक Next.js और Angular ऐप्लिकेशन की ज़रूरतों को पूरा करने के लिए बनाई गई है.

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

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

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 ऐप्लिकेशन होस्टिंग का इस्तेमाल करके डिप्लॉय करना

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

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

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

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

9. नतीजा

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

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

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

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

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

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

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

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

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

अगले चरण

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