Firebase Genkit की मदद से, अपने डेटा का इस्तेमाल करके जनरेटिव एआई की सुविधाएं तैयार करें

1. वेब कंटेनर इंस्टॉल करने से पहले

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

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

  • Firestore, Node.js, और TypeScript के बारे में जानकारी.

आपको यह जानकारी मिलेगी

  • वेक्टर समानता खोजने की सुविधा का इस्तेमाल करके, Firestore के साथ ऐप्लिकेशन बनाने के नए तरीके जानें.
  • Genkit का इस्तेमाल करके जनरेटिव एआई को जानें और उसे "हर दिन" ऐप्लिकेशन डेवलपमेंट के लिए व्यावहारिक बनाएं.
  • इंटिग्रेशन और डिप्लॉयमेंट के लिए, अपना समाधान तैयार करें.

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

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

2. इस्तेमाल किए गए वेब ऐप्लिकेशन और क्लाउड सेवाओं की समीक्षा करें

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

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

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

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

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

D54f2043af908fb.png

इस्तेमाल की गई सेवाएं

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

सेवा

इस्तेमाल करने की वजह

Firebase Genkit

Genkit का इस्तेमाल करके, जनरेटिव एआई को Node.js / Next.js ऐप्लिकेशन में जोड़ा जाता है.

Cloud Firestore

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

Google Cloud का Vertex AI

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

Firebase ऐप्लिकेशन होस्टिंग

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

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

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

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

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

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

  1. github.com/FirebaseExtended/codelab-ai-genkit-rag65ef006167d600ab.png से हमारे टेंप्लेट का इस्तेमाल करके, डेटा स्टोर करने की नई जगह बनाएं
  2. अभी-अभी बनाए गए कोडलैब के GitHub रिपॉज़िटरी का क्लोन बनाएं:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
    

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

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

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

अपने कंप्यूटर पर, क्लोन किया गया डेटा स्टोर करने की जगह ढूंढें और फ़ोल्डर के स्ट्रक्चर की समीक्षा करें:

फ़ोल्डर

जानकारी

genkit-functions

बैकएंड Genkit कोड

load-firestore-data

अपने Firestore कलेक्शन को तुरंत पहले से भरने के लिए हेल्पर कमांड लाइन टूल

*बाकी सब कुछ

Next.js वेब ऐप्लिकेशन कोड

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

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

Firebase सीएलआई इंस्टॉल करें

  1. पुष्टि करें कि आपने Firebase सीएलआई इंस्टॉल किया हुआ है और वह 13.6 या उसके बाद का वर्शन है:
    firebase --version
    
  2. अगर आपने Firebase सीएलआई इंस्टॉल किया है, लेकिन वह 13.6 या उसके बाद का वर्शन नहीं है, तो उसे अपडेट करें:
    npm update -g firebase-tools
    
  3. अगर आपने Firebase सीएलआई इंस्टॉल नहीं किया है, तो इसे इंस्टॉल करें:
    npm install -g firebase-tools
    

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

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

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

Google Cloud का gcloud सीएलआई इंस्टॉल करें

  1. gcloud सीएलआई इंस्टॉल करें.
  2. अपने टर्मिनल में, Google Cloud में लॉग इन करें:
    gcloud auth login
    

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

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

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

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

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

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

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

Firebase प्रोजेक्ट में बनाया गया वेब ऐप्लिकेशन

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

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

Firebase Genkit और Vertex AI (और उनकी मौजूदा क्लाउड सेवाएं) का इस्तेमाल करने के लिए, आपको बिलिंग की सुविधा चालू करने के लिए, अपना Firebase प्रोजेक्ट अपग्रेड करना होगा.

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

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

  1. अपने Firebase प्रोजेक्ट में, Firebase बिलिंग प्लान पर जाएं.
  2. Firebase के बिलिंग प्लान के डायलॉग बॉक्स में, Blaze प्लान चुनें और उसे खरीदें.

Cloud Firestore को चालू करें

  1. बाएं नेविगेशन पैनल का इस्तेमाल करके, फ़ायर स्टोर पर जाएं.
  2. डेटाबेस बनाएं > टेस्ट मोड में शुरू करें > आगे बढ़ें पर क्लिक करें.
  3. अपनी पसंदीदा Cloud Firestore जगह चुनें (या इसे डिफ़ॉल्ट के तौर पर छोड़ दें).
  4. चालू करें पर क्लिक करें.

Vertex AI की सुविधा चालू करें

  1. अपने टर्मिनल में, gcloud सीएलआई को अपने Firebase प्रोजेक्ट से जोड़ें:
    gcloud config set project YOUR_PROJECT_ID
    
  2. Vertex AI की सेवा चालू करें:
    gcloud services enable aiplatform.googleapis.com
    

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

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

अपने Firebase प्रोजेक्ट के साथ चलाने के लिए, Firebase सीएलआई सेट अप करें

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

firebase use YOUR_PROJECT_ID

Firestore डेटा लोड करें

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

  1. अपने Firestore इंस्टेंस में डेटा इंपोर्ट करने के लिए, अपने टर्मिनल में इस निर्देश को चलाएं:
    cd load-firestore-data
    npm ci
    node index.js YOUR_PROJECT_ID
    cd ..
    
  2. Firebase कंसोल में, अपने Firebase प्रोजेक्ट में Firestore पर जाएं. आपको इंपोर्ट किया गया स्कीमा दिखना चाहिए.

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

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

  1. अपना Firebase कॉन्फ़िगरेशन पाएं:
    1. Firebase कंसोल में, अपने Firebase प्रोजेक्ट की प्रोजेक्ट सेटिंग पर जाएं.
    2. नीचे आपके ऐप्लिकेशन सेक्शन तक स्क्रोल करें और अपना रजिस्टर किया गया वेब ऐप्लिकेशन चुनें.
    3. SDK टूल का सेटअप और कॉन्फ़िगरेशन पैनल में, सिर्फ़ const firebaseConfig = {...} फ़्रैगमेंट कॉपी करें.
  2. अपने वेब ऐप्लिकेशन के कोड बेस में अपना Firebase कॉन्फ़िगरेशन जोड़ें:
    1. अपने कोड एडिटर में, genkit-functions/src/lib/genkit.config.ts फ़ाइल खोलें.
    2. सही सेक्शन को कॉपी किए गए कोड से बदलें.
    3. फ़ाइल सेव करें.

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

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

पेज लोड होना चाहिए:

a0df8e5ca6f08260.png

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

मेरी पसंदीदा यात्रा ढूंढें पर क्लिक करें. आप देख सकते हैं कि यह फ़िलहाल कुछ तय डेस्टिनेशन के लिए हार्ड कोड किया गया कुछ डेटा दिखाता है:

19748ca14b354e7f.png

बेझिझक एक्सप्लोर करें. जब आप जारी रखने के लिए तैयार हों, तो (ऊपर दाएँ कोने में) ddf696577e4dc21f.png होम बटन पर क्लिक करें.

6. Firebase Genkit का इस्तेमाल करना शुरू करें

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

इसके लिए, आपको जनरेटिव मॉडल (Gemini) की सेवा देने वाले के तौर पर Google Cloud के Vertex AI के साथ Firebase Genkit का इस्तेमाल करना होगा. साथ ही, आप ट्रेस और फ़्लो स्टेट स्टोर (Firestore का इस्तेमाल करके) के तौर पर Firebase का इस्तेमाल करेंगे. Firebase ऐप्लिकेशन होस्टिंग की मदद से, Genkit कोड को डिप्लॉय करने के लिए, Firebase का इस्तेमाल भी किया जा सकता है.

Genkit में "डेवलपर के लिए यूज़र इंटरफ़ेस (यूआई)" मौजूद है. इससे टूल के साथ काम करना आसान होता है और यह टूल के साथ काम करता है.

  1. इस निर्देश को नई टर्मिनल विंडो में चलाकर, Genkit डेवलपर यूज़र इंटरफ़ेस (यूआई) को चालू करें:
    cd genkit-functions
    npx genkit start
    
  2. अपने ब्राउज़र में, स्थानीय तौर पर होस्ट किए गए Genkit के यूआरएल पर जाएं. ज़्यादातर मामलों में, यह http://localhost:4000/ होता है.

Gemini के मॉडल को इंटिग्रेट करना

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

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

डॉटप्रॉम्प्ट का इस्तेमाल करने के लिए, 'हैलो-वर्ल्ड' से शुरुआत करें:

  1. अपने कोड एडिटर में, genkit-functions/prompts/1-hello-world.prompt फ़ाइल खोलें.
    आपको दिखेगा कि, इनपुट और आउटपुट स्कीमा मौजूद है.
  2. Firebase Genkit यूज़र इंटरफ़ेस (यूआई) में dotprompt/1-hello-world खोलें.
  3. किसी भी ऐसी भाषा या कोड का इस्तेमाल करें जिसके बारे में आपको पता है या उसे खाली स्ट्रिंग के तौर पर रहने दें.
  4. Run पर क्लिक करें.83cc143583009c49.png
  5. अलग-अलग वैल्यू डालकर देखें. बड़े लैंग्वेज मॉडल, इस तरह की सामान्य क्वेरी में छोटे किए गए प्रॉम्प्ट, गलत स्पेलिंग या अधूरे प्रॉम्प्ट को अच्छी तरह से समझ सकते हैं.

JSON स्कीमा तय करना

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

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

  1. अपने कोड एडिटर में, genkit-functions/prompts/2-simple-itinerary.prompt फ़ाइल खोलें.
    आपको दिखेगा कि, इनपुट और आउटपुट स्कीमा मौजूद है.
  2. Firebase Genkit यूज़र इंटरफ़ेस (यूआई) में dotprompt/2-simple-itinerary खोलें.
  3. जगह और दिलचस्पी वाले इनपुट फ़ील्ड भरें:
    {
        "place": "paris",
        "interests": [
            "diner"
        ]
    }
    
  4. Run पर क्लिक करें.20d18033b29f29e2.png

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

मल्टीमोडल इनपुट

क्या होगा अगर आपको यह ऐप्लिकेशन उपयोगकर्ताओं से मिली प्रेरणा वाली इमेज के आधार पर, छुट्टियों के लिए अपनी पसंद के हिसाब से और सही जगहों की जानकारी देने के लिए सेट करना है? ऐसा करने के लिए Genkit और एक मल्टीमॉडल जनरेटिव मॉडल का इस्तेमाल किया जा सकता है!

  1. अपने कोड एडिटर में, genkit-functions/prompts/imgDescription.prompt फ़ाइल खोलें.
    {{media url=this}} हैंडलबार सिंटैक्स पर ध्यान दें.
  2. Firebase Genkit यूज़र इंटरफ़ेस (यूआई) में dotprompt/imgDescription खोलें.
  3. imageUrls इनपुट फ़ील्ड में Wikipedia से थंबनेल इमेज का इस्तेमाल करें:
    {
        "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ]
    }
    
  4. Run पर क्लिक करें.730a6a757d7951ed.png

7. डेटा वापस पाने की प्रोसेस लागू करें

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

जब आपको बिना स्ट्रक्चर वाली क्वेरी का जवाब देना हो और काम का कॉन्टेंट ढूंढना हो, तो जनरेट किए गए एम्बेड पर वेक्टर से मिलती-जुलती खोज की सुविधा सबसे असरदार तकनीक है.

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

Firestore में वेक्टर समानता खोजने की सुविधा

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

आपको knownFor फ़ील्ड के डेटा का इस्तेमाल करके हर जगह के लिए एम्बेडिंग नाम का एक वेक्टर फ़ील्ड बनाना होगा:

  1. अपने टर्मिनल में, नया ऐल्फ़ा कॉम्पोनेंट इंस्टॉल करने के लिए नीचे दिया गया कमांड चलाएं. आपके पास 2024.05.03 या इसके बाद वाला वर्शन होना चाहिए:
    gcloud components install alpha
    
  2. इंडेक्स बनाएं:
    gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
    
  3. Firebase Genkit यूज़र इंटरफ़ेस (यूआई) में placesRetriever खोलें और फिर उसे चलाएं.
    नतीजा एक स्कैफ़ोल्ड किया गया ऑब्जेक्ट है, जिसमें TODO टेक्स्ट है. आपको अगले चरणों में रिट्रीवर लागू करना होगा.
  4. अपने कोड एडिटर में, genkit-functions/src/lib/placesRetriever.ts फ़ाइल खोलें.
  5. नीचे की ओर स्क्रोल करें और placesRetriever प्लेसहोल्डर को इनसे बदल दें:
    export const placesRetriever = defineFirestoreRetriever({
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: textEmbeddingGecko,
      distanceMeasure: 'COSINE',
    });
    

अब, एक टेस्ट खोज करें:

  1. Firebase Genkit यूज़र इंटरफ़ेस (यूआई) में placesRetriever खोलें.
  2. यह क्वेरी दें:
    {
        "content": [
            {
                "text": "new orleans"
            }
        ]
    }
    
  3. वैकल्पिक रूप से, कुछ विकल्प बदलें, जैसे कि सीमा.
  4. Run पर क्लिक करें.a0725b52f0b6e03a.png

विकल्पों में where क्लॉज़ जोड़कर, मिलते-जुलते डेटा को अतिरिक्त फ़िल्टर किया जा सकता है.

8. रिकवर करने वाली ऑगमेंटेड जनरेशन (आरएजी)

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

आपके पास एक ऐसा प्रॉम्प्ट भी होता है जो डेटाबेस (Firestore) में मौजूद काम के डेस्टिनेशन दिखाता है.

अब समय आ गया है कि आप इन्हें अपने पहली रिकग्निशन जनरेशन (आरएजी) फ़्लो में एक साथ ले आएं:

  1. अपने कोड एडिटर में, genkit-functions/prompts/itineraryGen.prompt फ़ाइल खोलें.
  2. देखें कि ज़्यादा इनपुट स्वीकार करने के लिए, आपकी यात्रा की योजना में बदलाव कैसे हुआ. इसमें रिट्रीवर की ओर से लौटाया गया activities भी शामिल है.
  3. अपने कोड एडिटर में, genkit-functions/src/lib/itineraryFlow.ts फ़ाइल खोलें. इस फ़ाइल में Firebase Genkit की एक सुविधा मौजूद है, जिसे flows कहा जाता है.
    • फ़्लो कुछ अन्य विशेषताओं वाले फ़ंक्शन होते हैं: ये अच्छी तरह टाइप किए जा सकने वाले, स्ट्रीम किए जा सकने वाले, लोकल और रिमोट तरीके से कॉल किए जा सकते हैं. साथ ही, इनकी पूरी तरह से निगरानी की जा सकती है. Genkit, फ़्लो (रनिंग, डीबगिंग वगैरह) के साथ काम करने के लिए, सीएलआई और डेवलपर यूज़र इंटरफ़ेस (यूआई) टूल उपलब्ध कराता है.
    • डीबग करने में मदद के लिए, लंबे फ़्लो को कई कदम में बांटा जाना चाहिए.
  4. TODO: 2 को लाइन 70 के आस-पास ढूंढें. इस उदाहरण में, किसी मौजूदा फ़्लो में कोई चरण जोड़ने का तरीका बताया गया है. यहां imgDescription प्रॉम्प्ट जनरेट करने वाले कॉल के नतीजे से, खाली imgDescription को बदला जाएगा.
  5. Firebase Genkit यूज़र इंटरफ़ेस (यूआई) में itineraryFlow खोलें.
  6. जोड़े गए नए चरण के साथ itineraryFlow को सही तरीके से चलाने की जांच करने के लिए, यहां दिए गए इनपुट का इस्तेमाल करें:
    {
        "imageUrls": [ "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" ]
    }
    
  7. Run पर क्लिक करें.c512ec77e0251b7c.png
  8. अगर आपको कोई गड़बड़ी या अनचाहा व्यवहार दिखता है, तो ज़्यादा जानकारी के लिए, जांच करें टैब देखें. ट्रेस स्टोर पर, इस टैब का इस्तेमाल करके एक्ज़ीक्यूशन का इतिहास देखा जा सकता है.1ba6565e2e0decb.png

आपके वेब ऐप्लिकेशन के लिए RAG

Next.js इंटिग्रेशन का उदाहरण देखने के लिए, Dream Your छुट्टीके वेब ऐप्लिकेशन पेज (http://localhost:3000/gemini) और उसका सोर्स कोड (src/app/gemini/page.tsx) देखें.

1e626124e09e04e9.png b059decb53c249a1.png e31f6acf87a98cb2.png 19c0c9459d5e1601.png

9. अपना ऐप्लिकेशन डिप्लॉय करें

अब बस एक और चरण पूरा करें – अपने वेब ऐप्लिकेशन को डिप्लॉय करें!

इसके लिए, Firebase ऐप्लिकेशन होस्टिंग का इस्तेमाल किया जा सकता है. यह फ़्रेमवर्क को ध्यान में रखकर बनाई गई वेब होस्टिंग सेवा है. इसकी मदद से, बिना सर्वर वाले बैकएंड में Next.js और Angular ऐप्लिकेशन डिप्लॉय किए जा सकते हैं. इनका इस्तेमाल, कमिटमेंट, पुश, और हो गया है.

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

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

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

10. नतीजा

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

Firebase Genkit, Firestore, और Vertex AI का इस्तेमाल करके, आपने अपनी पसंद के हिसाब से छुट्टियों के लिए एक "फ़्लो" तैयार किया है. इसका सुझाव, ऐप्लिकेशन इस्तेमाल करने वाले लोगों की पसंद और प्रेरणा के साथ-साथ ऐप्लिकेशन के डेटा के आधार पर दिया जाता है.

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

  • प्रॉम्प्ट मैनेजमेंट
  • मल्टीमोडल कॉन्टेंट
  • इनपुट/आउटपुट स्कीमा
  • वेक्टर स्टोर
  • डेटा वापस पाना
  • रिकवर करने वाली ऑगमेंटेड जनरेशन (आरएजी)
  • "फ़्लो" इंस्ट्रुमेंटेशन

ध्यान दें कि Firebase Genkit में डिप्लॉयमेंट के कई विकल्प होते हैं. इनके बारे में इस कोडलैब में नहीं बताया गया है:

अपने (package.json) नोड फ़ोल्डर में नीचे दिया गया तरीका चलाकर, सबसे अच्छा विकल्प चुनें:

npx genkit init

अगले चरण