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

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

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

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

  • Node.js और JavaScript की जानकारी

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

  • भाषा और वीडियो इनपुट को प्रोसेस करने के लिए, एआई से जुड़े एक्सटेंशन इस्तेमाल करने का तरीका.
  • एक्सटेंशन के बीच एक पाइपलाइन बनाने के लिए, Firebase के लिए Cloud Functions इस्तेमाल करने का तरीका.
  • एक्सटेंशन से मिलने वाले आउटपुट को ऐक्सेस करने के लिए, JavaScript का इस्तेमाल कैसे करें.

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

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

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

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

समीक्षा करने वाला ऐप्लिकेशन

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

Reviewly ऐप्लिकेशन में, टी-शर्ट के लिए खरीदारों की समीक्षाओं और उनसे जुड़ी स्टार रेटिंग की खास जानकारी दी गई है

सेवा

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

Cloud Firestore

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

Firebase के सुरक्षा नियम

Firebase सेवाओं का ऐक्सेस सुरक्षित रखने के लिए, सुरक्षा नियम लागू करें.

Firebase के लिए Cloud Functions

वेब ऐप्लिकेशन में नकली समीक्षाएं जोड़ें.

Firebase एक्सटेंशन

Firestore में जोड़ी गई हर समीक्षा की खास जानकारी देने के लिए, PaLM API के साथ भाषा टास्क एक्सटेंशन को इंस्टॉल, कॉन्फ़िगर, और ट्रिगर करें

Chatbot ऐप्लिकेशन

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

एलएलएम का इस्तेमाल करने वाला चैटबॉट इंटरफ़ेस

सेवा

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

Firebase से पुष्टि करने की सुविधा

उपयोगकर्ताओं को मैनेज करने के लिए, 'Google से साइन इन करें' सुविधा का इस्तेमाल करें.

Cloud Firestore

हर बातचीत का टेक्स्ट सेव करें; उपयोगकर्ताओं के मैसेज को किसी एक्सटेंशन के ज़रिए प्रोसेस किया जाता है.

Firebase के सुरक्षा नियम

Firebase सेवाओं का ऐक्सेस सुरक्षित रखने के लिए, सुरक्षा नियम लागू करें.

Firebase एक्सटेंशन

PaLM API के साथ चैटबॉट एक्सटेंशन को इंस्टॉल, कॉन्फ़िगर, और ट्रिगर करें, ताकि Firestore में नया मैसेज जोड़े जाने पर जवाब दिया जा सके

Firebase लोकल एम्युलेटर सुइट

ऐप्लिकेशन को स्थानीय तौर पर चलाने के लिए, Local Emulator Suite का इस्तेमाल करें.

फ़्रेमवर्क को लेकर जागरूकता बढ़ाने वाली Firebase होस्टिंग

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

वीडियो हिंट ऐप्लिकेशन

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

सेवा

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

Firebase से पुष्टि करने की सुविधा

उपयोगकर्ताओं को मैनेज करने के लिए, 'Google से साइन इन करें' सुविधा का इस्तेमाल करें.

Cloud Firestore

हर वीडियो की खास जानकारी का टेक्स्ट सेव करें.

Firebase के लिए Cloud Storage

वीडियो और JSON फ़ाइलों को, वीडियो के ब्यौरे के साथ सेव करें.

Firebase के सुरक्षा नियम

Firebase सेवाओं का ऐक्सेस सुरक्षित रखने के लिए, सुरक्षा नियम लागू करें.

Firebase एक्सटेंशन

विभिन्न एक्सटेंशन को इंस्टॉल, कॉन्फ़िगर और ट्रिगर करें (नीचे सूची देखें).

Firebase के लिए Cloud Functions

Cloud Functions की मदद से एक्सटेंशन के बीच एक पाइपलाइन बनाएं.

Firebase लोकल एम्युलेटर सुइट

ऐप्लिकेशन को स्थानीय तौर पर चलाने के लिए, Local Emulator Suite का इस्तेमाल करें.

फ़्रेमवर्क को लेकर जागरूकता बढ़ाने वाली Firebase होस्टिंग

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

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

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

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

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

डेटा स्टोर करने की जगह डाउनलोड करना

  1. अगर आपने git इंस्टॉल किया है, तो कोडलैब के GitHub रिपॉज़िटरी का क्लोन बनाएं:
    git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
    
  2. अगर आपने git इंस्टॉल नहीं किया है, तो GitHub रिपॉज़िटरी को ZIP फ़ाइल के तौर पर डाउनलोड करें.

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

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

फ़ोल्डर

जानकारी

reviewly-start

Reviewly वेब ऐप्लिकेशन के लिए स्टार्टर कोड

reviewly-end

Reviewly वेब ऐप्लिकेशन का समाधान कोड

chatbot-start

Chatbot वेब ऐप्लिकेशन के लिए स्टार्टर कोड

chatbot-end

Chatbot के वेब ऐप्लिकेशन के लिए सलूशन का कोड

video-hint-start

वीडियो हिंट वेब ऐप्लिकेशन के लिए स्टार्टर कोड

video-hint-end

वीडियो हिंट वाले वेब ऐप्लिकेशन के लिए सलूशन कोड

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

अगर आपको नहीं पता कि इस कोडलैब के दौरान दिए गए निर्देशों के मुताबिक, आपने कोड को सही तरीके से लागू किया है या नहीं, तो reviewly-end, chatbot-end, और video-hint-end फ़ोल्डर में इसका समाधान कोड देखा जा सकता है.

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

नीचे दिया गया कमांड चलाकर पुष्टि करें कि आपने Firebase सीएलआई इंस्टॉल किया है और वह v12.5.4 या उसके बाद का है:

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

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

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

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

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

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

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

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

Firebase सेवा खाता डाउनलोड करना

इस कोडलैब में बनाए गए कुछ वेब ऐप्लिकेशन, Next.js के साथ सर्वर साइड रेंडरिंग का इस्तेमाल करते हैं.

Node.js के लिए Firebase एडमिन SDK का इस्तेमाल करके यह पक्का किया जाता है कि सुरक्षा के नियम, सर्वर साइड कोड से काम करते हैं. Firebase एडमिन में एपीआई का इस्तेमाल करने के लिए, आपको Firebase कंसोल से Firebase सेवा खाता डाउनलोड करना होगा.

  1. Firebase कंसोल में, अपने प्रोजेक्ट सेटिंग में सेवा खाते पेज पर जाएं.
  2. नई निजी कुंजी जनरेट करें पर क्लिक करें > कुंजी जनरेट करें.
  3. अपने फ़ाइल सिस्टम में फ़ाइल डाउनलोड होने के बाद, उस फ़ाइल का पूरा पाथ पाएं.
    उदाहरण के लिए, अगर आपने फ़ाइल को डाउनलोड फ़ोल्डर में डाउनलोड किया है, तो पूरा पाथ इस तरह से दिख सकता है: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
  4. अपने टर्मिनल में, GOOGLE_APPLICATION_CREDENTIALS एनवायरमेंट वैरिएबल को डाउनलोड की गई निजी कुंजी के पाथ पर सेट करें. यूनिक्स एनवायरमेंट में, निर्देश इस तरह दिख सकता है:
    export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
    
  5. इस टर्मिनल को खुला रखें और कोडलैब के बाकी बचे हिस्से के लिए इसका इस्तेमाल करें. नया टर्मिनल सेशन शुरू करने पर, एनवायरमेंट वैरिएबल मिट सकता है.
    अगर कोई नया टर्मिनल सेशन खोला जाता है, तो आपको पिछले निर्देश को फिर से चलाना होगा.

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

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

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

हालांकि, ध्यान रखें कि इस कोडलैब के पूरा होने पर कोई असल शुल्क नहीं लगेगा.

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

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

Firebase कंसोल में Firebase सेवाएं सेट अप करें

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

पुष्टि करने की सुविधा सेट अप करें

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

  1. Firebase कंसोल में, पुष्टि करने की सुविधा पर जाएं.
  2. शुरू करें पर क्लिक करें.
  3. अन्य कंपनी कॉलम में, Google > चालू करें.

Google साइन इन की सेवा देने वाली कंपनी

  1. प्रोजेक्ट को सभी के लिए उपलब्ध कराने वाला नाम टेक्स्ट बॉक्स में, याद रहने वाला कोई नाम डालें, जैसे कि My AI Extensions Codelab.
  2. प्रोजेक्ट के लिए सहायता ईमेल ड्रॉप-डाउन से, अपना ईमेल पता चुनें.
  3. सेव करें पर क्लिक करें.

Google प्रोवाइडर को कॉन्फ़िगर कर दिया गया है

Cloud Firestore सेट अप करना

आप तीनों ऐप्लिकेशन के साथ Firestore का इस्तेमाल करेंगे. याद रखें कि अगर आपको असली ऐप्लिकेशन बनाना है, तो हर ऐप्लिकेशन का अपना Firebase प्रोजेक्ट होना चाहिए.

  1. Firebase कंसोल में, Firestore पर जाएं.
  2. डेटाबेस बनाएं > परीक्षण मोड में प्रारंभ करें > अगला चरण.
    इस कोडलैब में, बाद में अपने डेटा को सुरक्षित रखने के लिए सुरक्षा के नियम जोड़े जा सकते हैं. अपने डेटाबेस के लिए सुरक्षा के नियम जोड़े बिना, किसी ऐप्लिकेशन को सार्वजनिक रूप से उपलब्ध करें या उसे सार्वजनिक न करें.
  3. डिफ़ॉल्ट जगह की जानकारी का इस्तेमाल करें या अपनी पसंद की जगह चुनें.
    असल ऐप्लिकेशन के लिए, आपको ऐसी जगह चुननी है जो आपके उपयोगकर्ताओं के आस-पास हो. ध्यान दें कि बाद में इस जगह की जानकारी को नहीं बदला जा सकता. यह अपने-आप आपके डिफ़ॉल्ट Cloud Storage बकेट की जगह पर सेव हो जाएगी (अगला चरण).
  4. हो गया पर क्लिक करें.

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

आपको वीडियो हिंट ऐप्लिकेशन के साथ Cloud Storage का इस्तेमाल करना होगा और टेक्स्ट को बोली में बदलें एक्सटेंशन (कोडलैब का अगला चरण) आज़माने के लिए भी इस्तेमाल करना होगा.

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

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

5. "PaLM API की मदद से भाषा टास्क" सेट अप करना के लिए एक्सटेंशन समीक्षा करने वाला ऐप्लिकेशन

PLM API के साथ भाषा Tasks एक्सटेंशन इंस्टॉल करें

  1. PLM API की मदद से, भाषा Tasks एक्सटेंशन पर जाएं.
  2. Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
  3. अपना Firebase प्रोजेक्ट चुनें.
  4. चालू किए गए एपीआई और बनाए गए संसाधनों की समीक्षा करें सेक्शन में, आपको सुझाई गई किसी भी सेवा के आगे चालू करें पर क्लिक करें:

सीक्रेट मैनेजर चालू करें

  1. अगला > आगे बढ़ें.
  2. कलेक्शन पाथ टेक्स्ट बॉक्स में, bot डालें.
  3. प्रॉम्प्ट टेक्स्ट बॉक्स में, {{ input }} डालें.
  4. वैरिएबल फ़ील्ड टेक्स्ट बॉक्स में, input डालें.
  5. रिस्पॉन्स फ़ील्ड के टेक्स्ट बॉक्स में, text डालें.
  6. Cloud Functions की जगह वाले ड्रॉप-डाउन से, Iowa (us-central1) या वह जगह चुनें जिसे आपने Firestore और Cloud Storage के लिए पहले चुना था.
  7. Language Model ड्रॉप-डाउन से, text-bison-001 चुनें.
  8. दूसरी सभी वैल्यू को डिफ़ॉल्ट वैल्यू के तौर पर रहने दें.
  9. एक्सटेंशन इंस्टॉल करें पर क्लिक करें. इसके बाद, एक्सटेंशन इंस्टॉल होने का इंतज़ार करें.

Palm API के साथ भाषा से जुड़े टास्क एक्सटेंशन आज़माएं

इस कोडलैब का मकसद किसी वेब ऐप्लिकेशन की मदद से, PaLM API के साथ भाषा टास्क एक्सटेंशन के साथ इंटरैक्ट करना है. हालांकि, Firebase कंसोल का इस्तेमाल करके एक्सटेंशन को ट्रिगर करने से, एक्सटेंशन के काम करने का तरीका समझने में मदद मिलती है. bot कलेक्शन में Cloud Firestore दस्तावेज़ जोड़े जाने पर एक्सटेंशन ट्रिगर होता है.

यह देखने के लिए कि Firebase कंसोल का इस्तेमाल करके एक्सटेंशन कैसे काम करता है, इन चरणों का पालन करें:

  1. Firebase कंसोल में, Firestore पर जाएं.
  2. bot कलेक्शन में, 2fa6870fd69bffce.png दस्तावेज़ जोड़ें पर क्लिक करें.
  3. दस्तावेज़ आईडी टेक्स्ट बॉक्स में, ऑटो-आईडी पर क्लिक करें.
  4. फ़ील्ड टेक्स्ट बॉक्स में, input डालें.
  5. वैल्यू टेक्स्ट बॉक्स में, Tell me about the moon डालें.
  6. सेव करें पर क्लिक करें और कुछ सेकंड इंतज़ार करें. bot कलेक्शन में मौजूद आपके दस्तावेज़ में अब आपकी क्वेरी का जवाब शामिल है.

Firestore कलेक्शन

6. Firebase का इस्तेमाल करने के लिए, Reviewly ऐप्लिकेशन सेट अप करें

Reviewly ऐप्लिकेशन को चलाने के लिए, आपको अपने ऐप्लिकेशन का कोड और Firebase सीएलआई सेट अप करना होगा, ताकि आप अपने Firebase प्रोजेक्ट के साथ इंटरैक्ट कर सकें.

अपने ऐप्लिकेशन के कोड में Firebase की सेवाएं और कॉन्फ़िगरेशन जोड़ें

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

इस कोडलैब के सैंपल ऐप्लिकेशन में, SDK टूल के लिए सभी ज़रूरी इंपोर्ट और शुरू करने के कोड पहले से ही शामिल हैं (reviewly-start/js/reviews.js देखें). इसलिए, आपको इन्हें जोड़ने की ज़रूरत नहीं है. हालांकि, सैंपल ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन के लिए सिर्फ़ प्लेसहोल्डर वैल्यू होती हैं (reviewly-start/js/firebase-config.js देखें). इसलिए, आपको अपने ऐप्लिकेशन के लिए Firebase कॉन्फ़िगरेशन की यूनीक वैल्यू पाने के लिए, अपने ऐप्लिकेशन को Firebase प्रोजेक्ट के साथ रजिस्टर करना होगा.

  1. Firebase कंसोल में, अपने Firebase प्रोजेक्ट में प्रोजेक्ट की खास जानकारी पर जाएं. इसके बाद, e41f2efdd9539c31.png वेब पर क्लिक करें.
    Firebase प्रोजेक्ट के सबसे ऊपर मौजूद वेब बटन
  2. ऐप्लिकेशन का कोई दूसरा नाम टेक्स्ट बॉक्स में, ऐप्लिकेशन के लिए कोई याद रखने लायक नाम डालें, जैसे कि My Reviewly app.
  3. इस ऐप्लिकेशन के लिए Firebase होस्टिंग की सुविधा भी सेट अप करें चेकबॉक्स को चुनें. कोडलैब में इन चरणों को बाद में पूरा किया जा सकेगा.
  4. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
  5. कंसोल, Firebase SDK टूल को ऐप्लिकेशन के हिसाब से बने Firebase कॉन्फ़िगरेशन ऑब्जेक्ट के साथ जोड़ने और शुरू करने के लिए, एक कोड स्निपेट दिखाता है. Firebase कॉन्फ़िगरेशन ऑब्जेक्ट में सभी प्रॉपर्टी कॉपी करें.
  6. अपने कोड एडिटर में, reviewly-start/js/firebase-config.js फ़ाइल खोलें.
  7. प्लेसहोल्डर वैल्यू को अभी-अभी कॉपी की गई वैल्यू से बदलें. अगर आपके पास Firebase सेवाओं के लिए ऐसी प्रॉपर्टी और वैल्यू हैं जिनका इस्तेमाल Reviewly ऐप्लिकेशन में नहीं किया जाता है, तो कोई बात नहीं.
  8. फ़ाइल सेव करें.
  9. Firebase कंसोल पर वापस जाकर, कंसोल पर जारी रखें पर क्लिक करें.

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

  1. अपने टर्मिनल में, उस ai-extensions-codelab फ़ोल्डर पर जाएं जिसे आपने पहले डाउनलोड किया था.
  2. reviewly-start वेब ऐप्लिकेशन फ़ोल्डर पर जाएं:
    cd reviewly-start
    
  3. Firebase सीएलआई को किसी खास Firebase प्रोजेक्ट के लिए निर्देश चलाएं:
    firebase use YOUR_PROJECT_ID
    

Reviewly वेब ऐप्लिकेशन चलाएं और देखें

वेब ऐप्लिकेशन को चलाने और देखने के लिए, इन चरणों का पालन करें:

  1. अपने टर्मिनल में, डिपेंडेंसी इंस्टॉल करें. इसके बाद, वेब ऐप्लिकेशन चलाएं:
    npm install
    
    # Include the parentheses in the following command.
    (cd functions && npm install)
    
    npm run dev
    
  2. अपने ब्राउज़र में, अपने टर्मिनल में दिखाए गए यूआरएल पर जाएं. उदाहरण के लिए: http://localhost:8080.

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

7. समीक्षा करने वाला ऐप्लिकेशन

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

सुरक्षा के नियम डिप्लॉय करें

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

firestore.rules और storage.rules फ़ाइलों में, इन नियमों को देखा जा सकता है.

  1. इन सुरक्षा नियमों को लागू करने के लिए, अपने टर्मिनल में इस निर्देश को चलाएं:
    firebase deploy --only firestore:rules,storage
    
  2. अगर आपसे यह पूछा जाता है कि: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", तो हां चुनें.

एक्सटेंशन को ट्रिगर करने के लिए ऐप्लिकेशन का कोड अपडेट करें

Reviewly ऐप्लिकेशन में, Firestore में जोड़ी गई एक नई समीक्षा, समीक्षा की खास जानकारी देने के लिए एक्सटेंशन ट्रिगर करती है.

  1. अपने कोड एडिटर में, functions/add-mock-reviews.js फ़ाइल खोलें.
  2. reviewWithPrompt वैरिएबल की जगह नीचे दिया गया कोड डालें. इससे भाषा के मॉडल को समीक्षा के लिए छोटा किया जा सकता है.
    const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
    
    Product name: "Blue t-shirt with cat picture". Review: """${review}"""
    
    Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
    
  3. reviewWithPrompt वैरिएबल के बाद, reviewDocument वैरिएबल को इस कोड से बदलें. इससे समीक्षा वाला एक दस्तावेज़ बनता है, ताकि इसे Firestore में जोड़ा जा सके.
    const reviewDocument = {
            input: reviewWithPrompt,
            originalReview: review,
            timestamp: Timestamp.now(),
    };
    
    getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
    
  4. फ़ाइल सेव करें.
  5. js/reviews.js फ़ाइल में, Insert code below, to import your Firebase Callable Cloud Function टिप्पणी के बाद, httpsCallable सहायता की मदद से अपना Firebase एचटीटीपी कॉल करने वाला फ़ंक्शन इंपोर्ट करें:
    const addMockReviews = httpsCallable(functions, "addMockReviews");
    
  6. Insert code below, to invoke your Firebase Callable Cloud Function टिप्पणी के बाद, अपने Firebase एचटीटीपी से कॉल करने लायक फ़ंक्शन को शुरू करें:
    await addMockReviews();
    
  7. फ़ाइल सेव करें.

नई समीक्षाएं जोड़ने के लिए फ़ंक्शन डिप्लॉय करें

Reviewly वेब ऐप्लिकेशन में, समीक्षाएं जोड़ने के लिए Cloud फ़ंक्शन का इस्तेमाल किया जाता है. हालांकि, फ़िलहाल Cloud फ़ंक्शन को डिप्लॉय नहीं किया गया है.

अपने फ़ंक्शन को Firebase सीएलआई के साथ डिप्लॉय करने के लिए, यह तरीका अपनाएं:

  1. reviewly-start फ़ोल्डर में रहते हुए अपने टर्मिनल में, सर्वर को बंद करने के लिए Control+C दबाएं.
  2. अपने फ़ंक्शन को डिप्लॉय करें:
    firebase deploy --only functions
    
  3. अगर आपको Permission denied while using the Eventarc Service Agent या इससे मिलती-जुलती गड़बड़ी दिखती है, तो कुछ मिनट इंतज़ार करें. इसके बाद, फिर से निर्देश देने की कोशिश करें.

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

Reviewly वेब ऐप्लिकेशन को फिर से चलाएं और देखें (अब यह काम करने की सुविधा के साथ उपलब्ध है)

अब काम कर रहे वेब ऐप्लिकेशन को चलाने और देखने के लिए, यह तरीका अपनाएं:

  1. अपने टर्मिनल में, सर्वर को फिर से चलाएं:
    npm run dev
    
  2. अपने ब्राउज़र में, अपने टर्मिनल में दिखाए गए यूआरएल पर जाएं. उदाहरण के लिए: http://localhost:8080.
  3. ऐप्लिकेशन में, नकली समीक्षाएं जोड़ें पर क्लिक करें और कुछ लंबी समीक्षाएं दिखने के लिए कुछ सेकंड इंतज़ार करें.
    बैकग्राउंड में, PLM API के साथ भाषा के टास्क एक्सटेंशन, नई समीक्षा को दिखाने वाले नए दस्तावेज़ के हिसाब से प्रतिक्रिया देता है. आपने जो प्रॉम्प्ट पहले जोड़ा था उसमें लैंग्वेज मॉडल से, कम शब्दों में खास जानकारी देने का अनुरोध किया जाता है.
  4. पूरी समीक्षा और समीक्षा के लिए इस्तेमाल किए गए प्रॉम्प्ट को देखने के लिए, किसी एक समीक्षा पर क्लिक करें. इसके बाद, PLM का अनुरोध दिखाएं को चुनें.

8. "PaLM API के साथ चैटबॉट" सेट अप करना के लिए एक्सटेंशन Chatbot ऐप्लिकेशन

PaLM API के साथ Chatbot एक्सटेंशन इंस्टॉल करें

  1. PaLM API वाला चैटबॉट एक्सटेंशन पर जाएं.
  2. Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
  3. अपना Firebase प्रोजेक्ट चुनें.
  4. अगला > अगला > इसके बाद, जब तक आप एक्सटेंशन कॉन्फ़िगर करें सेक्शन पर न पहुंच जाएं.
  5. कलेक्शन पाथ टेक्स्ट बॉक्स में, users/{uid}/discussion/{discussionId}/messages डालें.
  6. Cloud Functions की जगह वाले ड्रॉप-डाउन से, Iowa (us-central1) या वह जगह चुनें जिसे आपने Firestore और Cloud Storage के लिए पहले चुना था.
  7. भाषा का मॉडल ड्रॉप-डाउन में जाकर, chat-bison चुनें.
  8. दूसरी सभी वैल्यू को डिफ़ॉल्ट वैल्यू के तौर पर रहने दें.
  9. एक्सटेंशन इंस्टॉल करें पर क्लिक करें. इसके बाद, एक्सटेंशन इंस्टॉल होने का इंतज़ार करें.

PaLM API वाला चैटबॉट एक्सटेंशन आज़माएं

इस कोडलैब का मकसद किसी वेब ऐप्लिकेशन के ज़रिए PaLM API के साथ Chatbot एक्सटेंशन के साथ इंटरैक्ट करना है. हालांकि, Firebase कंसोल का इस्तेमाल करके एक्सटेंशन को ट्रिगर करने से यह समझने में मदद मिलती है कि एक्सटेंशन कैसे काम करता है. जब users/{uid}/discussion/{discussionId}/messages कलेक्शन में Cloud Firestore दस्तावेज़ बनाया जाता है, तब एक्सटेंशन ट्रिगर होता है.

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

Firestore दस्तावेज़ में भाषा के मॉडल का जवाब

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

9. Firebase का इस्तेमाल करने के लिए, Chatbot ऐप्लिकेशन को सेट अप करना

Chatbot ऐप्लिकेशन चलाने के लिए, आपको ऐप्लिकेशन का कोड और Firebase सीएलआई सेट अप करना होगा, ताकि आप अपने Firebase प्रोजेक्ट के साथ इंटरैक्ट कर सकें.

अपने ऐप्लिकेशन के कोड में Firebase की सेवाएं और कॉन्फ़िगरेशन जोड़ें

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

इस कोडलैब के सैंपल ऐप्लिकेशन में, SDK टूल के लिए सभी ज़रूरी इंपोर्ट और शुरू करने के कोड पहले से ही शामिल हैं (chatbot-start/lib/firebase/firebase.js देखें). इसलिए, आपको इन्हें जोड़ने की ज़रूरत नहीं है. हालांकि, सैंपल ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन के लिए सिर्फ़ प्लेसहोल्डर वैल्यू होती हैं (chatbot-start/lib/firebase/firebase-config.js देखें). इसलिए, आपको अपने ऐप्लिकेशन के लिए Firebase कॉन्फ़िगरेशन की यूनीक वैल्यू पाने के लिए, अपने ऐप्लिकेशन को Firebase प्रोजेक्ट के साथ रजिस्टर करना होगा.

  1. Firebase कंसोल में, अपने Firebase प्रोजेक्ट में प्रोजेक्ट की खास जानकारी पर जाएं. इसके बाद, e41f2efdd9539c31.png वेब पर क्लिक करें. अगर आपने प्रोजेक्ट के साथ पहले से ही कोई ऐप्लिकेशन रजिस्टर किया हुआ है, तो ऐप्लिकेशन जोड़ें पर क्लिक करें.
  2. ऐप्लिकेशन का कोई दूसरा नाम टेक्स्ट बॉक्स में, ऐप्लिकेशन के लिए कोई याद रखने लायक नाम डालें, जैसे कि My Chatbot app.
  3. इस ऐप्लिकेशन के लिए Firebase होस्टिंग की सुविधा भी सेट अप करें चेकबॉक्स को चुनें. कोडलैब में इन चरणों को बाद में पूरा किया जा सकेगा.
  4. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
  5. कंसोल, Firebase SDK टूल को ऐप्लिकेशन के हिसाब से बने Firebase कॉन्फ़िगरेशन ऑब्जेक्ट के साथ जोड़ने और शुरू करने के लिए, एक कोड स्निपेट दिखाता है. Firebase कॉन्फ़िगरेशन ऑब्जेक्ट में सभी प्रॉपर्टी कॉपी करें.
  6. अपने कोड एडिटर में, chatbot-start/lib/firebase/firebase-config.js फ़ाइल खोलें.
  7. प्लेसहोल्डर वैल्यू को अभी-अभी कॉपी की गई वैल्यू से बदलें. अगर आपके पास Firebase सेवाओं के लिए ऐसी प्रॉपर्टी और वैल्यू हैं जिनका इस्तेमाल Chatbot ऐप्लिकेशन में नहीं किया जाता है, तो आपको परेशान होने की ज़रूरत नहीं है.
  8. फ़ाइल सेव करें.
  9. Firebase कंसोल पर वापस जाकर, कंसोल पर जारी रखें पर क्लिक करें.

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

  1. अपने टर्मिनल में, सर्वर को पिछला वेब ऐप्लिकेशन चलाने से रोकने के लिए Control+C दबाएं.
  2. अपने टर्मिनल में, chatbot-start वेब ऐप्लिकेशन फ़ोल्डर पर जाएं:
    cd ../chatbot-start
    
  3. Firebase सीएलआई को किसी खास Firebase प्रोजेक्ट के लिए निर्देश चलाएं:
    firebase use YOUR_PROJECT_ID
    

फ़्रेमवर्क को ध्यान में रखकर बनाई गई Firebase होस्टिंग का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन का कोड बेस सेट अप करें

यह कोडलैब, Chatbot के वेब ऐप्लिकेशन के साथ होस्टिंग के साथ वेब फ़्रेमवर्क (झलक) का इस्तेमाल करता है.

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

Chatbot का वेब ऐप्लिकेशन चलाएं और देखें

  1. अपने टर्मिनल में, डिपेंडेंसी इंस्टॉल करें. इसके बाद, वेब ऐप्लिकेशन चलाएं:
    npm install
    firebase emulators:start --only hosting
    
  2. अपने ब्राउज़र में, स्थानीय रूप से होस्ट किए गए होस्टिंग URL पर नेविगेट करें. ज़्यादातर मामलों में, यह http://localhost:5000/ या इससे मिलता-जुलता होता है.

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

वेब ऐप्लिकेशन चलाने से जुड़ी समस्या हल करना

अगर आपको वेब पेज में Error: Firebase session cookie has incorrect... से शुरू होने वाली गड़बड़ी दिखती है, तो आपको अपने लोकल होस्ट एनवायरमेंट में अपनी सभी कुकी मिटानी होंगी. ऐसा करने के लिए, कुकी हटाएं | DevTools दस्तावेज़..

कुकी सत्र की गड़बड़ीDevTools में कुकी मिटाना

10. में फ़ंक्शन जोड़ें Chatbot ऐप्लिकेशन

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

सुरक्षा के नियम डिप्लॉय करें

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

firestore.rules और storage.rules फ़ाइलों में, इन नियमों को देखा जा सकता है.

  1. इन सुरक्षा नियमों को लागू करने के लिए, अपने टर्मिनल में इस निर्देश को चलाएं:
    firebase deploy --only firestore:rules,storage
    
  2. अगर आपसे यह पूछा जाता है कि: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", तो हां चुनें.

Cloud Firestore में मैसेज जोड़ने के लिए कोड अपडेट करें

Chatbot ऐप्लिकेशन में, उपयोगकर्ता का एक नया मैसेज Firestore में जोड़ा जाता है. यह मैसेज, जवाब जनरेट करने के लिए एक्सटेंशन को ट्रिगर करता है.

  1. अपने कोड एडिटर में, lib/firebase/firestore.js फ़ाइल खोलें.
  2. फ़ाइल के आखिर में, addNewMessage फ़ंक्शन ढूंढें. यह फ़ंक्शन, नए मैसेज जोड़ने का काम मैनेज करता है.
    फ़ंक्शन नीचे दिए गए ऑब्जेक्ट प्रॉपर्टी को पहले से ही इस्तेमाल कर लेता है:

    पैरामीटर

    जानकारी

    userId

    लॉग-इन किए हुए उपयोगकर्ता का आईडी

    discussionId

    बातचीत का वह आईडी जिसमें मैसेज जोड़ा गया है

    message

    मैसेज का टेक्स्ट

    db

    Firestore डेटाबेस इंस्टेंस

    ये वैरिएबल तैयार होने के बाद, नया मैसेज दिखाने के लिए Cloud Firestore दस्तावेज़ जोड़ा जा सकता है.
  3. // Insert your code below ⬇️ टिप्पणी के बाद addNewMessage फ़ंक्शन के मुख्य भाग में, यह कोड जोड़ें:
    await addDoc(
            collection(
                    db,
                    "users",
                    userId,
                    "discussion",
                    discussionId,
                    "messages"
            ),
            {
                    prompt: message,
                    createTime: serverTimestamp(),
            }
    );
    
    await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
            latestMessage: message,
            updatedTime: serverTimestamp(),
    });
    

क्वेरी बनाने के लिए कोड को अपडेट करें, ताकि मैसेज पाए जा सकें

  1. अब भी lib/firebase/firestore.js फ़ाइल में, getMessagesQuery फ़ंक्शन का पता लगाएं. इसे Cloud Firestore की क्वेरी के तौर पर दिखाना है, जो users/{uid}/discussion/{discussionId}/messages कलेक्शन पाथ में सेव किए गए मैसेज को ढूंढती है.
  2. पूरे getMessagesQuery फ़ंक्शन को नीचे दिए गए कोड से बदलें:
    function getMessagesQuery(db, userId, discussionId) {
            if (!userId || !discussionId) {
                    return null;
            }
            const messagesRef = collection(
                    db,
                    "users",
                    userId,
                    "discussion",
                    discussionId,
                    "messages"
            );
            return query(messagesRef, orderBy("createTime", "asc"));
    }
    

Cloud Firestore मैसेज दस्तावेज़ों को मैनेज करने के लिए कोड को अपडेट करें

  1. अब भी lib/firebase/firestore.js फ़ाइल में, handleMessageDoc फ़ंक्शन का पता लगाएं, जिसे Cloud Firestore दस्तावेज़ मिलता है. यह एक मैसेज दिखाता है.
    इस फ़ंक्शन को डेटा को ऐसे फ़ॉर्मैट और स्ट्रक्चर करने की ज़रूरत है जो Chatbot ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए सही हो.
  2. पूरे handleMessageDoc फ़ंक्शन को नीचे दिए गए कोड से बदलें:
    function handleMessageDoc(doc) {
            const data = doc.data();
            const item = {
                    prompt: data.prompt,
                    response: data.response,
                    id: doc.id,
                    createTime: formatDate(data.createTime.toDate()),
            };
    
            if (data?.status?.completeTime) {
                    item.completeTime = formatDate(data.status.completeTime.toDate());
            }
    
            return item;
    }
    
  3. फ़ाइल सेव करें.

Chatbot वेब ऐप्लिकेशन को फिर से चलाएं और देखें (अब यह सुविधा उपलब्ध है)

अब काम कर रहे वेब ऐप्लिकेशन को चलाने और देखने के लिए, यह तरीका अपनाएं:

  1. अपने ब्राउज़र में, Chatbot वेब ऐप्लिकेशन वाले टैब पर वापस आएं और पेज को फिर से लोड करें.
  2. Google से साइन इन करें पर क्लिक करें.
  3. अगर ज़रूरी हो, तो अपना Google खाता चुनें.
  4. साइन इन करने के बाद, पेज को फिर से लोड करें.
  5. अपना मैसेज डालें टेक्स्ट बॉक्स में, मैसेज डालें, जैसे कि Tell me about space.
  6. भेजें पर क्लिक करें. इसके बाद, Chatbot के वेब ऐप्लिकेशन का जवाब देने के लिए, कुछ सेकंड इंतज़ार करें.

PaLM API के साथ चैटबॉट एक्सटेंशन का एक और फ़ायदा है, बातचीत का इतिहास.

ऐतिहासिक कॉन्टेक्स्ट के साथ बातचीत करने की इसकी क्षमता का उदाहरण देखने के लिए, यह तरीका अपनाएं:

  1. अपना मैसेज डालें टेक्स्ट बॉक्स में, कोई सवाल पूछें, जैसे कि What are five random fruits?.
  2. अपना मैसेज डालें टेक्स्ट बॉक्स में, पिछले सवाल से जुड़ा अगला सवाल पूछें, जैसे कि And what about vegetables?.

Chatbot वेब ऐप्लिकेशन में जवाब देने के लिए, पुरानी जानकारी का इस्तेमाल किया जाता है. भले ही, आपने पिछले सवाल में पांच सब्जियों के बारे में नहीं बताया था, लेकिन PaLM API वाला चैटबॉट एक्सटेंशन, आगे के सवालों को समझ जाता है.

11. "टेक्स्ट को बोली में बदलें" सेट अप करें के लिए एक्सटेंशन वीडियो हिंट ऐप्लिकेशन

टेक्स्ट को बोली में बदलें एक्सटेंशन इंस्टॉल करें

  1. टेक्स्ट को बोली में बदलें एक्सटेंशन पर जाएं.
  2. Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
  3. अपना Firebase प्रोजेक्ट चुनें.
  4. आगे बढ़ें पर क्लिक करें.
  5. चालू किए गए एपीआई और बनाए गए संसाधनों की समीक्षा करें सेक्शन में, आपको सुझाई गई किसी भी सेवा के आगे चालू करें पर क्लिक करें:

Artifact Registry को चालू करना

  1. आगे बढ़ें पर क्लिक करें. इसके बाद, आपको सुझाई गई किसी भी अनुमति के बगल में मौजूद, अनुमति दें को चुनें.

Firebase सर्विस एजेंट को चालू करना

  1. आगे बढ़ें पर क्लिक करें.
  2. कलेक्शन पाथ टेक्स्ट बॉक्स में, bot डालें.
  3. स्टोरेज पाथ टेक्स्ट बॉक्स में, tts डालें.
  4. दूसरी सभी वैल्यू को उनके डिफ़ॉल्ट विकल्पों के तौर पर रहने दें.
  5. एक्सटेंशन इंस्टॉल करें पर क्लिक करें. इसके बाद, एक्सटेंशन इंस्टॉल होने का इंतज़ार करें.

लेख बोली एक्सटेंशन को बदलें

टेक्स्ट को बोली में बदलें एक्सटेंशन आज़माएं

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

यह देखने के लिए कि Firebase कंसोल का इस्तेमाल करके एक्सटेंशन कैसे काम करता है, इन चरणों का पालन करें:

  1. Firebase कंसोल में, Firestore पर जाएं
  2. 837c2b53003f1dd5.pngकलेक्शन शुरू करें पर क्लिक करें.
  3. कलेक्शन आईडी टेक्स्ट बॉक्स में, bot डालें.
  4. आगे बढ़ें पर क्लिक करें.

नया Firestore कलेक्शन शुरू करना

  1. दस्तावेज़ आईडी टेक्स्ट बॉक्स में, ऑटो-आईडी पर क्लिक करें.
  2. फ़ील्ड टेक्स्ट बॉक्स में, text डालें.
  3. वैल्यू टेक्स्ट बॉक्स में, The quick brown fox jumps over the lazy dog डालें.
  4. सेव करें पर क्लिक करें.

अपनी बनाई गई MP3 फ़ाइल देखने और सुनने के लिए, यह तरीका अपनाएं:

  1. Firebase कंसोल में, स्टोरेज पर जाएं.
  2. जिस पैनल में फ़ाइलें अपलोड की जा सकती हैं उसमें, gs:// वैल्यू के बाद बकेट का नाम लिखें. यह इस प्रोजेक्ट के लिए आपके डिफ़ॉल्ट बकेट का नाम है. इस कोडलैब के दौरान, अलग-अलग टास्क के लिए आपको इसकी ज़रूरत पड़ेगी.

Firebase कंसोल में स्टोरेज बकेट का नाम

  1. Google Cloud Console में, Cloud Storage पर जाएं.
  2. अपना प्रोजेक्ट चुनें.
    अगर आपको हाल ही के प्रोजेक्ट की सूची में अपना प्रोजेक्ट नहीं दिखता है, तो प्रोजेक्ट पिकर में अपना प्रोजेक्ट ढूंढने के लिए, प्रोजेक्ट चुनें पर क्लिक करें.

Google Cloud में प्रोजेक्ट पिकर

  1. अपना डिफ़ॉल्ट स्टोरेज बकेट चुनें.
  2. tts/ फ़ोल्डर पर जाएं.
  3. MP3 फ़ाइल पर क्लिक करें.
  4. MP3 फ़ाइल के आखिर में, ca5c4283500a1df6.png पर क्लिक करें. इसके बाद, देखें कि आपके टेक्स्ट को स्पीच में बदला गया है.

12. "Cloud Video AI की मदद से वीडियो को लेबल करें" सेटिंग को सेट अप करना के लिए एक्सटेंशन वीडियो हिंट ऐप्लिकेशन

Cloud Video AI की मदद से वीडियो लेबल करें एक्सटेंशन को इंस्टॉल करें

  1. Cloud Video AI की मदद से वीडियो को लेबल करें एक्सटेंशन पर जाएं.
  2. Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
  3. अपना Firebase प्रोजेक्ट चुनें.
  4. अगला > अगला > इसके बाद, जब तक कि आप एक्सटेंशन कॉन्फ़िगर करें सेक्शन पर न पहुंच जाएं.
  5. Cloud Functions की जगह वाले ड्रॉप-डाउन से, इस्तेमाल की जा सकने वाली जगह चुनें (वह जगह जिसे आपने पहले Firestore और Cloud Storage के लिए चुना था या उसके आस-पास की कोई जगह). उन जगहों के लिए AnnotateVideoRequest में location_id सेक्शन देखें जहां यह सुविधा काम करती है.
  6. मॉडल ड्रॉप-डाउन से, सबसे नया चुनें.
  7. Stationary Camera ड्रॉप-डाउन मेन्यू से, नहीं चुनें.
  8. दूसरी सभी वैल्यू को डिफ़ॉल्ट वैल्यू के तौर पर रहने दें.
  9. एक्सटेंशन इंस्टॉल करें पर क्लिक करें. इसके बाद, एक्सटेंशन इंस्टॉल होने का इंतज़ार करें.

एक्सटेंशन इंस्टॉल करना

Cloud Video AI की मदद से वीडियो को लेबल करें एक्सटेंशन को आज़माएं

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

यह देखने के लिए कि Firebase कंसोल का इस्तेमाल करके एक्सटेंशन कैसे काम करता है, इन चरणों का पालन करें:

  1. अपने Firebase प्रोजेक्ट में स्टोरेज पर जाएं > 5a7f105b51da6f38.png फ़ोल्डर बनाएं.
  2. फ़ोल्डर का नाम टेक्स्ट बॉक्स में, video_annotation_input डालें.

Firebase कंसोल में फ़ोल्डर बनाना

  1. फ़ोल्डर जोड़ें पर क्लिक करें.
  2. video_annotation_input फ़ोल्डर में, फ़ाइल अपलोड करें पर क्लिक करें.
  3. आपने जिस ai-extensions-codelab/video-hint-start/public/videos फ़ोल्डर को पहले क्लोन किया है या डाउनलोड किया है उसमें पहली वीडियो फ़ाइल चुनें.
  4. अपने ब्राउज़र पर वापस Google Cloud Console में, Cloud Storage पर जाएं.
  5. अपना डिफ़ॉल्ट स्टोरेज बकेट चुनें, जिसे आपने पहले नोट किया हो.
  6. video_annotation_output फ़ोल्डर पर क्लिक करें.
    अगर आपको video_annotation_output फ़ोल्डर नहीं दिखता है, तो कुछ सेकंड इंतज़ार करें और पेज को रीफ़्रेश करें, क्योंकि हो सकता है कि Video Intelligence API अब भी वीडियो को प्रोसेस कर रहा हो.

वीडियो एनोटेशन आउटपुट फ़ोल्डर

  1. ध्यान दें कि एक JSON फ़ाइल मौजूद है, जो उस फ़ाइल के नाम से मिलती-जुलती है जिसे आपने पहले अपलोड किया था.
  2. 9d6c37bef22bdd95.png FILENAME को डाउनलोड करें पर क्लिक करें.
  3. डाउनलोड की गई JSON फ़ाइल को अपने कोड एडिटर में खोलें. इसमें Video Intelligence API से मिला रॉ आउटपुट शामिल होता है. इसमें, अपलोड किए गए वीडियो के पहचाने गए लेबल भी शामिल होते हैं.

Firebase स्टोरेज में JSON फ़ाइल

13. Firebase का इस्तेमाल करने के लिए, वीडियो हिंट ऐप्लिकेशन सेट अप करें

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

अपने ऐप्लिकेशन के कोड में Firebase की सेवाएं और कॉन्फ़िगरेशन जोड़ें

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

इस कोडलैब के सैंपल ऐप्लिकेशन में, SDK टूल के लिए सभी ज़रूरी इंपोर्ट और शुरू करने के कोड पहले से ही शामिल हैं (video-hint-start/lib/firebase/firebase.js देखें). इसलिए, आपको इन्हें जोड़ने की ज़रूरत नहीं है. हालांकि, सैंपल ऐप्लिकेशन में Firebase कॉन्फ़िगरेशन के लिए सिर्फ़ प्लेसहोल्डर वैल्यू होती हैं (video-hint-start/lib/firebase/firebase-config.js देखें). इसलिए, आपको अपने ऐप्लिकेशन के लिए Firebase कॉन्फ़िगरेशन की यूनीक वैल्यू पाने के लिए, अपने ऐप्लिकेशन को Firebase प्रोजेक्ट के साथ रजिस्टर करना होगा.

  1. Firebase कंसोल में, अपने Firebase प्रोजेक्ट में प्रोजेक्ट की खास जानकारी पर जाएं. इसके बाद, e41f2efdd9539c31.png वेब पर क्लिक करें. अगर आपने प्रोजेक्ट के साथ पहले से ही कोई ऐप्लिकेशन रजिस्टर किया हुआ है, तो ऐप्लिकेशन जोड़ें पर क्लिक करें.
  2. ऐप्लिकेशन का कोई दूसरा नाम टेक्स्ट बॉक्स में, ऐप्लिकेशन के लिए कोई याद रखने लायक नाम डालें, जैसे कि My Video Hint app.
  3. इस ऐप्लिकेशन के लिए Firebase होस्टिंग की सुविधा भी सेट अप करें चेकबॉक्स को चुनें. कोडलैब में इन चरणों को बाद में पूरा किया जा सकेगा.
  4. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
  5. कंसोल, Firebase SDK टूल को ऐप्लिकेशन के हिसाब से बने Firebase कॉन्फ़िगरेशन ऑब्जेक्ट के साथ जोड़ने और शुरू करने के लिए, एक कोड स्निपेट दिखाता है. Firebase कॉन्फ़िगरेशन ऑब्जेक्ट में सभी प्रॉपर्टी कॉपी करें.
  6. अपने कोड एडिटर में, video-hint-start/lib/firebase/firebase-config.js फ़ाइल खोलें.
  7. प्लेसहोल्डर वैल्यू को अभी-अभी कॉपी की गई वैल्यू से बदलें. अगर आपके पास Firebase सेवाओं के लिए ऐसी प्रॉपर्टी और वैल्यू हैं जिनका इस्तेमाल वीडियो हिंट ऐप्लिकेशन में नहीं किया जाता, तो आपको परेशान होने की ज़रूरत नहीं है.
  8. फ़ाइल सेव करें.
  9. Firebase कंसोल पर वापस जाकर, कंसोल पर जारी रखें पर क्लिक करें.

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

  1. अपने टर्मिनल में, सर्वर को पिछला वेब ऐप्लिकेशन चलाने से रोकने के लिए Control+C दबाएं.
  2. अपने टर्मिनल में, video-hint-start वेब ऐप्लिकेशन फ़ोल्डर पर जाएं:
    cd ../video-hint-start
    
  3. Firebase सीएलआई को किसी खास Firebase प्रोजेक्ट के लिए निर्देश चलाएं:
    firebase use YOUR_PROJECT_ID
    

फ़्रेमवर्क को ध्यान में रखकर बनाई गई Firebase होस्टिंग का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन का कोड बेस सेट अप करें

यह कोडलैब, वीडियो हिंट वेब ऐप्लिकेशन के साथ, होस्टिंग के साथ वेब फ़्रेमवर्क (झलक) का इस्तेमाल करता है.

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

वीडियो संकेत वाला वेब ऐप्लिकेशन चलाएं और देखें

  1. अपने टर्मिनल में, video-hint-start और functions फ़ोल्डर में डिपेंडेंसी इंस्टॉल करें. इसके बाद, ऐप्लिकेशन चलाएं:
    npm install
    
    # Include the parentheses in the following command.
    (cd functions && npm install)
    
    firebase emulators:start --only hosting
    
  2. अपने ब्राउज़र में, स्थानीय रूप से होस्ट किए गए होस्टिंग URL पर नेविगेट करें. ज़्यादातर मामलों में, यह http://localhost:5000/ या इससे मिलता-जुलता होता है.

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

वेब ऐप्लिकेशन चलाने से जुड़ी समस्या हल करना

अगर आपको DevTools के कंसोल पैनल में, Error: The query requires an index. You can create it here: https://console.firebase.google.com जैसा गड़बड़ी का कोई मैसेज दिखता है, तो यह तरीका अपनाएं:

  1. दिए गए यूआरएल पर जाएं.

Firebase कंसोल में इंडेक्स बनाना

  1. सेव करें पर क्लिक करें और स्थिति को बिल्डिंग से चालू है में बदलने का इंतज़ार करें.

चालू होने के बाद Firestore इंडेक्स

14. वीडियो हिंट ऐप्लिकेशन

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

सुरक्षा के नियम डिप्लॉय करें

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

firestore.rules और storage.rules फ़ाइलों में, इन नियमों को देखा जा सकता है.

  1. इन सुरक्षा नियमों को लागू करने के लिए, अपने टर्मिनल में इस निर्देश को चलाएं:
    firebase deploy --only firestore:rules,storage
    
  2. अगर आपसे यह पूछा जाता है कि: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", तो हां चुनें.

फ़ंक्शन को जोड़ने के लिए, कोड को अपडेट करें

  1. अपने कोड एडिटर में, functions फ़ोल्डर को बड़ा करें.
    इस फ़ोल्डर में कई फ़ंक्शन हैं, जो मिलकर एक एक्सटेंशन पाइपलाइन बनाते हैं. यहां दी गई टेबल में, हर फ़ंक्शन के बारे में बताया गया है:

    फ़ंक्शन

    जानकारी

    functions/01-handle-video-upload.js

    एक्सटेंशन पाइपलाइन में पहला चरण. यह उपयोगकर्ता की अपलोड की गई वीडियो फ़ाइल को प्रोसेस करता है.

    functions/02-handle-video-labels.js

    एक्सटेंशन पाइपलाइन में दूसरा चरण. यह उस वीडियो-लेबल फ़ाइल को प्रोसेस करता है, जिसे storage-label-videos एक्सटेंशन से जनरेट किया गया था.

    functions/03-handle-audio-file.js

    एक्सटेंशन पाइपलाइन में तीसरा चरण. यह बोली को लेख में बदलने वाली ऑडियो फ़ाइल का इस्तेमाल करता है.

    हालांकि, आपको अब भी ऐसी फ़ाइल जोड़नी होगी जो इन फ़ंक्शन को एक साथ ग्रुप करती हो.
  2. functions/index.js फ़ाइल में, यह कोड जोड़ें:
    import { initializeApp } from "firebase-admin/app";
    
    export * from "./01-handle-video-upload.js";
    export * from "./02-handle-video-labels.js";
    export * from "./03-handle-audio-file.js";
    
    initializeApp();
    

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

वीडियो अपलोडिंग मैनेज करने के लिए कोड अपडेट करें

  1. अपने कोड एडिटर में, lib/firebase/storage.js फ़ाइल खोलें.
  2. uploadVideo फ़ंक्शन ढूंढें.
    इस फ़ंक्शन को userId, filePath, और file पैरामीटर मिलते हैं. यह डेटा, Cloud Storage में फ़ाइल अपलोड करने के लिए काफ़ी है.
  3. uploadVideo फ़ंक्शन के मुख्य भाग में, यह कोड जोड़ें:
    const storageRef = ref(storage, `video_annotation_input/${filePath}`);
    
    const uploadTask = uploadBytesResumable(storageRef, file, {
            customMetadata: {
                    uid: userId,
            },
    });
    
    return uploadTask;
    

फ़ंक्शन डिप्लॉय करना

अपने फ़ंक्शन को Firebase सीएलआई के साथ डिप्लॉय करने के लिए, यह तरीका अपनाएं:

  1. video-hint-start फ़ोल्डर में रहते हुए अपने टर्मिनल में, मौजूदा प्रोसेस को रोकने के लिए Control+C दबाएं.
  2. अपने फ़ंक्शन डिप्लॉय करें:
    firebase deploy --only functions
    
    अगर आपसे पहले के किसी Cloud Functions को मिटाने के लिए कहा जाता है, तो No चुनें.
  3. अगर आपको Permission denied while using the Eventarc Service Agent से मिलता-जुलता कोई मैसेज दिखता है, तो कुछ मिनट इंतज़ार करें और फिर से निर्देश देने की कोशिश करें.
  4. निर्देश खत्म होने के बाद, ऐप्लिकेशन को स्थानीय तौर पर फिर से चलाएं:
    firebase emulators:start --only hosting
    

वीडियो हिंट वाले वेब ऐप्लिकेशन को फिर से चलाएं और देखें (अब सुविधा के साथ)

अब काम कर रहे वेब ऐप्लिकेशन को चलाने और देखने के लिए, यह तरीका अपनाएं:

  1. अपने ब्राउज़र में, वह टैब ढूंढें जहां आपने http://localhost:5000 पर नेविगेट किया था.
  2. अगर ज़रूरी हो, तो Google से साइन इन करें पर क्लिक करें और अपना Google खाता चुनें.
  3. उदाहरण वीडियो #1 अपलोड करें पर क्लिक करें और वीडियो की खास जानकारी के नतीजे देखने के लिए, कुछ मिनट इंतज़ार करें.
  4. अगर वीडियो अपलोड करने के बाद आपको कोई नतीजा नहीं दिखता, तो इस कोडलैब के अन्य सेक्शन में, Cloud Functions से जुड़ी गड़बड़ियों को हल करना देखें.

वीडियो हिंट ऐप्लिकेशन का उदाहरण

15. नतीजा

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

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

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

Firebase कंसोल का इस्तेमाल करके, एक्सटेंशन के साथ काम किया

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

एआई की मदद से काम करने वाले तीन ऐसे वेब ऐप्लिकेशन बनाए जो Firebase एक्सटेंशन का इस्तेमाल करते हैं

समीक्षा करना

Reviewly वेब ऐप्लिकेशन में, आपने PLM API के साथ भाषा से जुड़े टास्क एक्सटेंशन का इस्तेमाल करके, उन लंबी समीक्षाओं की खास जानकारी दी है जिन्हें उपयोगकर्ताओं ने टी-शर्ट वाले किसी प्रॉडक्ट के लिए छोड़ा है. आपने यह भी अनुरोध किया है कि भाषा के मॉडल से आपकी क्वेरी का जवाब JSON फ़ॉर्मैट में मिले. इसमें, JSON ने स्टार रेटिंग दी थी और लंबी अवधि के ओरिजनल समीक्षा की खास जानकारी दी थी.

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

चैटबॉट

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

वैकल्पिक कसरत: छात्र-छात्राएं, चैटबॉट से खुश हैं, लेकिन स्टाफ़ कुछ सुधार करना चाहता है. जवाब देने के बाद, छात्र-छात्राओं को सोचने पर मजबूर करने वाले सवाल पूछे जाने चाहिए. उदाहरण के लिए:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

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

वीडियो हिंट

वीडियो हिंट वेब ऐप्लिकेशन में, आपने टेक्स्ट को बोली में बदलें, PLM API की मदद से भाषा टास्क, और क्लाउड वीडियो की मदद से वीडियो लेबल करें एक्सटेंशन का इस्तेमाल करके, एक्सटेंशन पाइपलाइन बनाई. इससे वीडियो में टेक्स्ट और ऑडियो की जानकारी मिलती है.

वैकल्पिक तरीका: सरकारी विभाग को प्रोटोटाइप दिलचस्प लगा और अब वह चाहता है कि उपयोगकर्ता, टेक्स्ट वाले लेबल पर क्लिक करके, वीडियो में लेबल वाले हिस्से पर सीधे पहुंच सके.

16. अपेंडिक्स: Cloud Functions की गड़बड़ियों को हल करना

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

सार्वजनिक अप्रमाणित ऐक्सेस की अनुमति दें

अगर आपको Chrome DevTools के कंसोल पैनल में अनुमति से जुड़ी कोई भी गड़बड़ी दिखती है, तो यह तरीका अपनाएं:

  1. पुष्टि करने से जुड़ी खास जानकारी | Cloud Run पेज
  2. फ़ंक्शन को बिना पुष्टि वाले सार्वजनिक ऐक्सेस की अनुमति देने के लिए, ज़रूरी टास्क देखने और उन्हें पूरा करने के लिए, लिंक पर क्लिक करें.

Google Cloud फ़ंक्शन में AddMock Reviews

  1. Reviewly ऐप्लिकेशन पर वापस जाएं. उदाहरण के लिए: http://localhost:8080.
  2. कुछ चुनिंदा समीक्षाएं जोड़ें पर क्लिक करें और कुछ सेकंड इंतज़ार करें.
    • अगर समीक्षाएं दिखती हैं: तो आपको समस्या हल करने के लिए इन चरणों को पूरा करने की ज़रूरत नहीं है. आपके पास सीधे इस कोडलैब में, चैटबॉट का वेब ऐप्लिकेशन सेट अप करें सेक्शन पर जाने का विकल्प है..
    • अगर समीक्षाएं नहीं दिखती हैं, तो समस्या हल करने के इस सेक्शन को देखें.

अनुमति से जुड़ी ज़रूरी गड़बड़ियों को ठीक करना

  1. Firebase कंसोल में, Functions पर जाएं.
  2. addMockReviews फ़ंक्शन पर कर्सर घुमाएं और फिर 13cc3947e3a68145.png पर क्लिक करें > लॉग देखें.

Cloud Functions पर लॉग देखना

  1. लॉग पर तब तक स्क्रोल करें, जब तक आपको इनमें से किसी एक जैसी गड़बड़ी नहीं मिलती:
    Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
    
    0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
    
  2. Google Cloud Console में, आईएएम की अनुमतियों वाले पेज पर जाएं. इसके बाद, अपना प्रोजेक्ट चुनें.
  3. टेबल में, नाम कॉलम ढूंढें.
    IAM और एडमिन पेज पर, उपयोगकर्ताओं और उनकी भूमिकाओं की एक टेबल दिखती है. टेबल के नाम वाले कॉलम में, उपयोगकर्ता या प्रिंसिपल के बारे में जानकारी होती है. हो सकता है कि आपको कंप्यूट सेवा खाते का डिफ़ॉल्ट खाता एक मुख्य खाता असाइन किया गया हो.

अगर आपको कंप्यूट सेवा का डिफ़ॉल्ट खाता दिखता है, तो यह तरीका अपनाएं:

  1. ac9ea3c3f6d4559e.png प्रिंसिपल में बदलाव करें पर क्लिक करें.

Firebase सेवा खाते में बदलाव करना

  1. इस कोडलैब में, कंप्यूट सेवा खाते के डिफ़ॉल्ट वर्शन में भूमिकाएं जोड़ें सेक्शन के साथ आगे बढ़ें.

अगर आपको डिफ़ॉल्ट कंप्यूट सेवा खाता नहीं दिखता है, तो यह तरीका अपनाएं:

  1. ऐक्सेस दें पर क्लिक करें.
  2. प्रिंसिपल वाले नए टेक्स्ट बॉक्स में, compute डालें.
  3. इसके बाद, आपको अपने-आप सुझाव मिलने की सुविधा के मेन्यू में, डिफ़ॉल्ट कंप्यूट सेवा खाता चुनें.

डिफ़ॉल्ट कंप्यूट सेवा खाता

Compute के डिफ़ॉल्ट सेवा खाते में भूमिकाएं जोड़ें

कंप्यूट सेवा खाते के डिफ़ॉल्ट सेक्शन में, भूमिकाएं असाइन करें सेक्शन में:

  1. भूमिका चुनें मेन्यू को बड़ा करें.
  2. फ़िल्टर टेक्स्ट बॉक्स में Cloud Datastore User डालें.
  3. इसके बाद, अपने-आप मिलने वाले सुझावों के मेन्यू में, Cloud Datastore उपयोगकर्ता चुनें.
  4. f574446405d39fc7.png एक और भूमिका जोड़ें पर क्लिक करें.
    1. भूमिका चुनें मेन्यू को बड़ा करें.
    2. फ़िल्टर टेक्स्ट बॉक्स में Cloud Storage for Firebase Admin डालें.
    3. इसके बाद, अपने-आप मिलने वाले सुझावों के मेन्यू में, Firebase के लिए Cloud Storage एडमिन चुनें.
  5. f574446405d39fc7.png एक और भूमिका जोड़ें पर क्लिक करें.
    1. भूमिका चुनें मेन्यू को बड़ा करें.
    2. फ़िल्टर टेक्स्ट बॉक्स में Cloud Storage for Firebase Service Agent डालें.
    3. इसके बाद, अपने-आप मिलने वाले सुझावों के मेन्यू में, Firebase के लिए Cloud Storage सेवा एजेंट को चुनें.
  6. सेव करें पर क्लिक करें.

कंप्यूट सेवा खाते के उपयोगकर्ता की भूमिकाएं