Firebase এক্সটেনশনের সাথে AI-চালিত ওয়েব অ্যাপ তৈরি করুন

1. আপনি শুরু করার আগে

এই কোডল্যাবে, আপনি শিখবেন কীভাবে AI-চালিত ওয়েব অ্যাপ তৈরি করতে হয় যা ফায়ারবেস এক্সটেনশনের সাথে ব্যবহারকারীর আকর্ষণীয় অভিজ্ঞতা প্রদান করে।

পূর্বশর্ত

• Node.js এবং JavaScript এর জ্ঞান

আপনি কি শিখবেন

• ভাষা এবং ভিডিও ইনপুট প্রক্রিয়া করার জন্য এআই-সম্পর্কিত এক্সটেনশনগুলি কীভাবে ব্যবহার করবেন।
• এক্সটেনশনগুলির মধ্যে একটি পাইপলাইন তৈরি করতে ফায়ারবেসের জন্য ক্লাউড ফাংশনগুলি কীভাবে ব্যবহার করবেন।
• এক্সটেনশন দ্বারা উত্পাদিত আউটপুট অ্যাক্সেস করতে জাভাস্ক্রিপ্ট কীভাবে ব্যবহার করবেন।

আপনি কি প্রয়োজন হবে

• আপনার পছন্দের একটি ব্রাউজার, যেমন Google Chrome
• একটি কোড এডিটর এবং টার্মিনাল সহ একটি উন্নয়ন পরিবেশ
• আপনার ফায়ারবেস প্রকল্প তৈরি এবং পরিচালনার জন্য একটি Google অ্যাকাউন্ট

2. ওয়েব অ্যাপ এবং তাদের Firebase পরিষেবাগুলি পর্যালোচনা করুন৷

এই বিভাগে আপনি এই কোডল্যাবে যে ওয়েব অ্যাপগুলি তৈরি করবেন এবং সেগুলি তৈরি করতে আপনি কোন Firebase ব্যবহার করবেন তা বর্ণনা করে৷

রিভিউলি অ্যাপ

একটি টি-শার্ট কোম্পানি তাদের একটি টি-শার্ট সম্পর্কে দীর্ঘ পর্যালোচনা দ্বারা অভিভূত এবং এর সামগ্রিক রেটিং সম্পর্কে অনিশ্চিত। সমাপ্ত রিভিউলি ওয়েব অ্যাপ প্রতিটি পর্যালোচনার সারসংক্ষেপ করে, প্রতিটি পর্যালোচনার জন্য একটি তারকা রেটিং প্রদান করে এবং পণ্যের জন্য একটি সামগ্রিক রেটিং অনুমান করতে প্রতিটি পর্যালোচনা ব্যবহার করে। ব্যবহারকারীরা মূল পর্যালোচনা দেখতে প্রতিটি সংক্ষিপ্ত পর্যালোচনা প্রসারিত করতে পারেন।

চ্যাটবট অ্যাপ

একটি স্কুলের শিক্ষণ কর্মীরা সাধারণ বিষয়গুলির পুনরাবৃত্তিমূলক প্রশ্নগুলির দ্বারা অভিভূত হয়, তাই তারা প্রতিক্রিয়াগুলি স্বয়ংক্রিয় করতে চায়৷ সম্পূর্ণ করা চ্যাটবট অ্যাপটি শিক্ষার্থীদের একটি কথোপকথনমূলক চ্যাটবট প্রদান করে যা একটি বড় ভাষা মডেল (LLM) দ্বারা চালিত এবং সাধারণ বিষয় সম্পর্কে প্রশ্নের উত্তর দিতে পারে। চ্যাটবটটির ঐতিহাসিক প্রেক্ষাপট রয়েছে, তাই এর প্রতিক্রিয়াগুলি একই কথোপকথনে ছাত্রদের জিজ্ঞাসা করা আগের প্রশ্নগুলির কারণ হতে পারে।

ভিডিও ইঙ্গিত অ্যাপ্লিকেশন

একটি সরকারী বিভাগ তার ভিডিওগুলি অ্যাক্সেসযোগ্যতা উন্নত করতে অডিও বিবরণ প্রদান করতে চায়, তবে তাদের কাছে টীকা করার জন্য শত শত ভিডিও রয়েছে এবং একটি সুবিন্যস্ত পদ্ধতির প্রয়োজন৷ সম্পূর্ণ ভিডিও ইঙ্গিত অ্যাপটি একটি প্রোটোটাইপ যা বিভাগটি এর কার্যকারিতা মূল্যায়ন করার জন্য পর্যালোচনা করবে।

ভিডিও ইঙ্গিত অ্যাপে ব্যবহৃত এক্সটেনশনগুলি হল:

• ক্লাউড ভিডিও এআই এক্সটেনশন সহ লেবেল ভিডিওগুলি — স্টোরেজে আপলোড করা প্রতিটি ভিডিও থেকে লেবেলগুলি বের করুন৷
• PaLM API এক্সটেনশন সহ ভাষার কাজগুলি — লেবেলগুলিকে একটি পাঠ্য বিবরণে সংক্ষিপ্ত করুন।
• টেক্সটকে স্পিচ এক্সটেনশনে রূপান্তর করুন — ভিডিওর বর্ণনার একটি অডিও সংস্করণ তৈরি করুন।

3. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

আপনার Node.js সংস্করণ যাচাই করুন

1. আপনার টার্মিনালে, আপনার Node.js v20.0.0 বা উচ্চতর ইনস্টল আছে কিনা যাচাই করুন:

   node -v
   

2. আপনার যদি Node.js v20.0.0 বা উচ্চতর না থাকে তবে এটি ডাউনলোড করে ইনস্টল করুন ।

সংগ্রহস্থল ডাউনলোড করুন

1. আপনি যদি গিট ইনস্টল করে থাকেন তবে কোডল্যাবের গিটহাব সংগ্রহস্থলটি ক্লোন করুন:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. আপনার যদি গিট ইনস্টল না থাকে তবে জিপ ফাইল হিসাবে গিটহাব সংগ্রহস্থলটি ডাউনলোড করুন ।

ফোল্ডার গঠন পর্যালোচনা

আপনার স্থানীয় মেশিনে, ক্লোন করা সংগ্রহস্থল খুঁজুন এবং ফোল্ডার কাঠামো পর্যালোচনা করুন। নিম্নলিখিত টেবিলে ফোল্ডার এবং তাদের বিবরণ রয়েছে:

প্রতিটি ফোল্ডারে একটি readme.md ফাইল রয়েছে যা স্ট্রীমলাইন নির্দেশাবলী ব্যবহার করে সংশ্লিষ্ট ওয়েব অ্যাপ চালানোর জন্য দ্রুত শুরু করার প্রস্তাব দেয়। যাইহোক, আপনি যদি প্রথমবারের মতো শিক্ষানবিস হন, তাহলে আপনার এই কোডল্যাবটি সম্পূর্ণ করা উচিত কারণ এতে নির্দেশাবলীর সবচেয়ে ব্যাপক সেট রয়েছে৷

আপনি যদি এই কোডল্যাব জুড়ে নির্দেশিত কোডটি সঠিকভাবে প্রয়োগ করেছেন কিনা তা নিশ্চিত না হন, তাহলে আপনি reviewly-end , chatbot-end এবং video-hint-end ফোল্ডারে সংশ্লিষ্ট অ্যাপের সমাধান কোড খুঁজে পেতে পারেন।

Firebase CLI ইনস্টল করুন

আপনি Firebase CLI ইনস্টল করেছেন এবং এটি v12.5.4 বা উচ্চতর তা যাচাই করতে নিম্নলিখিত কমান্ডটি চালান:

firebase --version

• আপনার যদি Firebase CLI ইনস্টল করা থাকে, কিন্তু এটি v12.5.4 বা উচ্চতর না হয়, তাহলে এটি আপডেট করুন:

  npm update -g firebase-tools
  

• আপনার যদি Firebase CLI ইনস্টল না থাকে, তাহলে এটি ইনস্টল করুন:

  npm install -g firebase-tools
  

অনুমতি ত্রুটির কারণে আপনি Firebase CLI ইনস্টল করতে না পারলে, npm ডকুমেন্টেশন দেখুন বা অন্য ইনস্টলেশন বিকল্প ব্যবহার করুন।

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 পরিষেবাগুলিও সক্ষম করবেন৷

একটি ফায়ারবেস প্রকল্প তৈরি করুন

1. ফায়ারবেস কনসোলে , প্রকল্প তৈরি করুন ক্লিক করুন।
2. আপনার প্রকল্পের নাম লিখুন টেক্সট বক্সে, AI Extensions Codelab (বা আপনার পছন্দের একটি প্রকল্পের নাম) লিখুন এবং তারপরে Continue এ ক্লিক করুন।
3. এই কোডল্যাবের জন্য, আপনার Google Analytics প্রয়োজন নেই, তাই এই প্রকল্পের জন্য Google Analytics সক্ষম করুন বিকল্পটি টগল করুন।
4. প্রকল্প তৈরি করুন ক্লিক করুন।
5. আপনার প্রজেক্টের প্রভিশনের জন্য অপেক্ষা করুন এবং তারপর Continue এ ক্লিক করুন।
6. আপনার ফায়ারবেস প্রকল্পে, প্রকল্প সেটিংসে যান। আপনার প্রকল্প আইডি নোট করুন কারণ আপনার এটি পরে প্রয়োজন। এই অনন্য শনাক্তকারী হল আপনার প্রকল্পটি কীভাবে চিহ্নিত করা হয় (উদাহরণস্বরূপ, Firebase CLI-তে)।

একটি Firebase পরিষেবা অ্যাকাউন্ট ডাউনলোড করুন

এই কোডল্যাবে আপনি যে কয়েকটি ওয়েব অ্যাপ তৈরি করবেন তা Next.js এর সাথে সার্ভার সাইড রেন্ডারিং ব্যবহার করে।

Node.js-এর জন্য ফায়ারবেস অ্যাডমিন SDK সার্ভার সাইড কোড থেকে নিরাপত্তা বিধি কার্যকর হয় তা নিশ্চিত করতে ব্যবহার করা হয়। Firebase অ্যাডমিনে API ব্যবহার করতে, আপনাকে 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 মূল্য পরিকল্পনা আপগ্রেড করুন

ক্লাউড ফাংশন এবং ফায়ারবেস এক্সটেনশনগুলি ব্যবহার করার জন্য, আপনার ফায়ারবেস প্রকল্পটি ব্লেজ প্রাইসিং প্ল্যানে থাকতে হবে, যার মানে এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে যুক্ত৷

• একটি ক্লাউড বিলিং অ্যাকাউন্টের জন্য একটি অর্থপ্রদানের পদ্ধতি প্রয়োজন, যেমন একটি ক্রেডিট কার্ড৷
• আপনি Firebase এবং Google ক্লাউডে নতুন হলে, আপনি $300 ক্রেডিট এবং একটি বিনামূল্যের ট্রায়াল ক্লাউড বিলিং অ্যাকাউন্টের জন্য যোগ্য কিনা তা পরীক্ষা করুন।

যাইহোক, মনে রাখবেন যে এই কোডল্যাবটি সম্পূর্ণ করার জন্য কোনও প্রকৃত চার্জ নেওয়া উচিত নয়।

আপনার প্রকল্পকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
2. ডায়ালগে, ব্লেজ প্ল্যানটি নির্বাচন করুন এবং তারপরে একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে আপনার প্রকল্পটি সংযুক্ত করতে অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন৷
   আপনার যদি একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করতে আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হবে।

Firebase কনসোলে Firebase পরিষেবাগুলি সেট আপ করুন৷

এই বিভাগে, আপনি এই কোডল্যাবে ওয়েব অ্যাপস দ্বারা ব্যবহৃত বেশ কয়েকটি ফায়ারবেস পরিষেবার ব্যবস্থা এবং সেট আপ করবেন। মনে রাখবেন যে এই সমস্ত পরিষেবাগুলি প্রতিটি ওয়েব অ্যাপে ব্যবহৃত হয় না, তবে এই কোডল্যাবের মাধ্যমে কাজ করার জন্য এই মুহূর্তে এই সমস্ত পরিষেবাগুলি সেট আপ করা একটি সুবিধাজনক৷

প্রমাণীকরণ সেট আপ করুন

আপনি চ্যাটবট অ্যাপ এবং ভিডিও ইঙ্গিত অ্যাপ উভয়ের সাথেই প্রমাণীকরণ ব্যবহার করবেন। মনে রাখবেন, যদিও, আপনি যদি একটি বাস্তব অ্যাপ তৈরি করেন, প্রতিটি অ্যাপের নিজস্ব Firebase প্রকল্প থাকা উচিত ।

1. Firebase কনসোলে, প্রমাণীকরণে নেভিগেট করুন।
2. শুরু করুন ক্লিক করুন।
3. অতিরিক্ত প্রদানকারী কলামে, Google > সক্ষম করুন ক্লিক করুন।

4. প্রজেক্টের টেক্সট বক্সের জন-মুখী নামের মধ্যে, একটি স্মরণীয় নাম লিখুন, যেমন My AI Extensions Codelab ।
5. প্রকল্প ড্রপ-ডাউনের জন্য সমর্থন ইমেল থেকে, আপনার ইমেল ঠিকানা নির্বাচন করুন।
6. Save এ ক্লিক করুন।
   

ক্লাউড ফায়ারস্টোর সেট আপ করুন

আপনি তিনটি অ্যাপের সাথেই ফায়ারস্টোর ব্যবহার করবেন। মনে রাখবেন, যদিও, আপনি যদি একটি বাস্তব অ্যাপ তৈরি করেন, প্রতিটি অ্যাপের নিজস্ব Firebase প্রকল্প থাকা উচিত ।

1. Firebase কনসোলে, Firestore- এ নেভিগেট করুন।
2. ডেটাবেস তৈরি করুন > পরীক্ষা মোডে শুরু করুন > পরবর্তী ক্লিক করুন।
   পরে এই কোডল্যাবে, আপনি আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা নিয়ম যোগ করবেন। আপনার ডাটাবেসের জন্য নিরাপত্তা বিধি যোগ না করে সর্বজনীনভাবে কোনো অ্যাপ বিতরণ বা প্রকাশ করবেন না ।
3. ডিফল্ট অবস্থান ব্যবহার করুন বা আপনার পছন্দের একটি অবস্থান নির্বাচন করুন।
   একটি বাস্তব অ্যাপের জন্য, আপনি এমন একটি অবস্থান বেছে নিতে চান যা আপনার ব্যবহারকারীদের কাছাকাছি। মনে রাখবেন যে এই অবস্থানটি পরে পরিবর্তন করা যাবে না , এবং এটি স্বয়ংক্রিয়ভাবে আপনার ডিফল্ট ক্লাউড স্টোরেজ বাকেটের অবস্থান (পরবর্তী ধাপ) হবে।
4. সম্পন্ন ক্লিক করুন.

ফায়ারবেসের জন্য ক্লাউড স্টোরেজ সেট আপ করুন

আপনি ভিডিও হিন্ট অ্যাপের সাথে ক্লাউড স্টোরেজ ব্যবহার করবেন এবং কনভার্ট টেক্সট টু স্পিচ এক্সটেনশন (কোডল্যাবের পরবর্তী ধাপ) ব্যবহার করে দেখতে পাবেন।

1. Firebase কনসোলে, Storage- এ নেভিগেট করুন।
2. শুরু করুন > পরীক্ষা মোডে শুরু করুন > পরবর্তী ক্লিক করুন।
   পরে এই কোডল্যাবে, আপনি আপনার ডেটা সুরক্ষিত করতে নিরাপত্তা নিয়ম যোগ করবেন। আপনার স্টোরেজ বাকেটের জন্য নিরাপত্তা বিধি যোগ না করে সর্বজনীনভাবে কোনো অ্যাপ বিতরণ বা প্রকাশ করবেন না ।
3. আপনার বাকেটের অবস্থান ইতিমধ্যেই নির্বাচন করা উচিত (আগের ধাপে ফায়ারস্টোর সেট আপ করার কারণে)।
4. সম্পন্ন ক্লিক করুন.

এই কোডল্যাবের পরবর্তী বিভাগে, আপনি তিনটি ভিন্ন ওয়েব অ্যাপ কাজ করার জন্য এই কোডল্যাবের প্রতিটি নমুনা অ্যাপের কোডবেসগুলিকে এক্সটেনশন ইনস্টল করবেন এবং পরিবর্তন করবেন।

5. রিভিউলি অ্যাপের জন্য "PALM API সহ ভাষা কাজ" এক্সটেনশন সেট আপ করুন

PaLM API এক্সটেনশন সহ ভাষা কাজগুলি ইনস্টল করুন

1. PaLM API এক্সটেনশনের সাথে ভাষা কার্যগুলিতে নেভিগেট করুন।
2. Firebase কনসোলে Install এ ক্লিক করুন।
3. আপনার ফায়ারবেস প্রকল্প নির্বাচন করুন।
4. পর্যালোচনা APIs সক্রিয় এবং সংস্থান তৈরি বিভাগে, আপনাকে প্রস্তাবিত যেকোনো পরিষেবার পাশে সক্ষম ক্লিক করুন:

5. Next > Next ক্লিক করুন।
6. সংগ্রহ পথ পাঠ্য বাক্সে, bot লিখুন।
7. প্রম্পট টেক্সট বক্সে, লিখুন।
8. পরিবর্তনশীল ক্ষেত্র পাঠ্য বাক্সে, input লিখুন।
9. প্রতিক্রিয়া ক্ষেত্রের পাঠ্য বাক্সে, text লিখুন।
10. ক্লাউড ফাংশন লোকেশন ড্রপ-ডাউন থেকে, Iowa (us-central1) বা ফায়ারস্টোর এবং ক্লাউড স্টোরেজের জন্য আপনি পূর্বে যে অবস্থান নির্বাচন করেছিলেন সেটি নির্বাচন করুন।
11. ভাষা মডেল ড্রপ-ডাউন থেকে, পাঠ্য-বাইসন-001 নির্বাচন করুন।
12. অন্যান্য সমস্ত মানকে তাদের ডিফল্ট হিসাবে ছেড়ে দিন।
13. ইনস্টল এক্সটেনশন ক্লিক করুন এবং এক্সটেনশন ইনস্টল করার জন্য অপেক্ষা করুন।

PaLM API এক্সটেনশনের সাথে ভাষা কাজগুলি ব্যবহার করে দেখুন

যদিও এই কোডল্যাবের লক্ষ্য হল একটি ওয়েব অ্যাপের মাধ্যমে PaLM API এক্সটেনশনের সাথে ল্যাঙ্গুয়েজ টাস্কগুলির সাথে ইন্টারঅ্যাক্ট করা, এটি Firebase কনসোল ব্যবহার করে এক্সটেনশনটি ট্রিগার করে এক্সটেনশনটি কীভাবে কাজ করে তা বোঝা সহায়ক। ক্লাউড ফায়ারস্টোর ডকুমেন্ট bot সংগ্রহে যোগ করা হলে এক্সটেনশনটি ট্রিগার হয়।

Firebase কনসোল ব্যবহার করে এক্সটেনশন কিভাবে কাজ করে তা দেখতে, এই ধাপগুলি অনুসরণ করুন:

1. Firebase কনসোলে, Firestore- এ নেভিগেট করুন।
2. bot সংগ্রহে, ক্লিক করুন ডকুমেন্ট যোগ করুন ।
3. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন।
4. ফিল্ড টেক্সট বক্সে, input লিখুন।
5. মান পাঠ্য বাক্সে, Tell me about the moon লিখুন।
6. Save এ ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন। bot সংগ্রহের মধ্যে আপনার নথিতে এখন আপনার প্রশ্নের একটি প্রতিক্রিয়া অন্তর্ভুক্ত রয়েছে।

6. Firebase ব্যবহার করতে Reviewly অ্যাপ সেট আপ করুন

রিভিউলি অ্যাপ চালানোর জন্য, আপনার ফায়ারবেস প্রোজেক্টের সাথে ইন্টারঅ্যাক্ট করার জন্য আপনাকে আপনার অ্যাপের কোড এবং Firebase CLI সেট আপ করতে হবে।

আপনার অ্যাপের কোডে 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 প্রজেক্টে, প্রজেক্ট ওভারভিউতে নেভিগেট করুন এবং তারপরে ক্লিক করুন ওয়েব
   
2. অ্যাপ ডাকনাম টেক্সট বক্সে, একটি স্মরণীয় অ্যাপ ডাকনাম লিখুন, যেমন My Reviewly app ।
3. এই অ্যাপের জন্য Firebase হোস্টিংও সেট আপ করুন চেকবক্স নির্বাচন করবেন না । আপনি কোডল্যাবে পরে এই পদক্ষেপগুলি করবেন৷
4. রেজিস্টার অ্যাপে ক্লিক করুন।
5. একটি অ্যাপ-নির্দিষ্ট Firebase কনফিগারেশন অবজেক্টের সাথে Firebase SDK যোগ এবং শুরু করার জন্য কনসোল একটি কোড স্নিপেট প্রদর্শন করে। Firebase কনফিগারেশন অবজেক্টের সমস্ত বৈশিষ্ট্য কপি করুন।
6. আপনার কোড এডিটরে, reviewly-start/js/firebase-config.js ফাইলটি খুলুন।
7. আপনি এইমাত্র কপি করেছেন এমন মানগুলির সাথে স্থানধারক মানগুলি প্রতিস্থাপন করুন৷ আপনার কাছে যদি Firebase পরিষেবাগুলির বৈশিষ্ট্য এবং মান থাকে যা আপনি Reviewly অ্যাপে ব্যবহার করেন না তা ঠিক আছে৷
8. ফাইলটি সংরক্ষণ করুন।
9. Firebase কনসোলে ফিরে, Continue to console এ ক্লিক করুন।

আপনার Firebase প্রকল্পের বিরুদ্ধে Firebase CLI কমান্ড চালানোর জন্য আপনার টার্মিনাল সেট আপ করুন

1. আপনার টার্মিনালে, ai-extensions-codelab ফোল্ডারে নেভিগেট করুন যা আপনি আগে ডাউনলোড করেছেন।
2. reviewly-start ওয়েব অ্যাপ ফোল্ডারে নেভিগেট করুন:

   cd reviewly-start
   

3. একটি নির্দিষ্ট ফায়ারবেস প্রকল্পের বিরুদ্ধে Firebase CLI রান কমান্ডগুলি তৈরি করুন:

   firebase use YOUR_PROJECT_ID
   

রিভিউলি ওয়েব অ্যাপটি চালান এবং দেখুন

ওয়েব অ্যাপ চালাতে এবং দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার টার্মিনালে, নির্ভরতা ইনস্টল করুন এবং তারপর ওয়েব অ্যাপ চালান:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. আপনার ব্রাউজারে, আপনার টার্মিনালে দেখানো URL-এ নেভিগেট করুন। উদাহরণস্বরূপ: http://localhost:8080 ।

পৃষ্ঠাটি লোড হওয়া উচিত, কিন্তু আপনি লক্ষ্য করবেন যে বিভিন্ন বৈশিষ্ট্য অনুপস্থিত। আমরা এই কোডল্যাবের পরবর্তী ধাপে এগুলি যোগ করব।

7. রিভিউলি অ্যাপে কার্যকারিতা যোগ করুন

এই কোডল্যাবের শেষ ধাপে, আপনি স্থানীয়ভাবে রিভিউলি অ্যাপটি চালিয়েছেন, কিন্তু এতে খুব বেশি কার্যকারিতা ছিল না এবং এখনও ইনস্টল করা এক্সটেনশনটি ব্যবহার করেনি। কোডল্যাবের এই ধাপে, আপনি এই কার্যকারিতা যোগ করবেন এবং এক্সটেনশনটি ট্রিগার করতে ওয়েব অ্যাপ ব্যবহার করবেন।

নিরাপত্তা বিধি স্থাপন করুন

এই কোডল্যাবের নমুনা অ্যাপটিতে Firestore এবং 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?" , হ্যাঁ নির্বাচন করুন।

এক্সটেনশনটি ট্রিগার করতে অ্যাপের কোড আপডেট করুন

রিভিউলি অ্যাপে, 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 HTTP কলযোগ্য ফাংশন আমদানি করুন:

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Insert code below, to invoke your Firebase Callable Cloud Function , আপনার Firebase HTTP কলযোগ্য ফাংশন আহ্বান করুন:

   await addMockReviews();
   

7. ফাইলটি সংরক্ষণ করুন।

নতুন পর্যালোচনা যোগ করতে একটি ফাংশন স্থাপন করুন

রিভিউলি ওয়েব অ্যাপ রিভিউ যোগ করতে একটি ক্লাউড ফাংশন ব্যবহার করে। কিন্তু বর্তমানে, ক্লাউড ফাংশন স্থাপন করা হয় না।

Firebase CLI এর সাথে আপনার ফাংশন স্থাপন করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. reviewly-start ফোল্ডারে থাকাকালীন আপনার টার্মিনালে, সার্ভার বন্ধ করতে Control+C টিপুন।
2. আপনার ফাংশন স্থাপন করুন:

   firebase deploy --only functions
   

3. Permission denied while using the Eventarc Service Agent দেখেন, কয়েক মিনিট অপেক্ষা করুন , এবং তারপর কমান্ডটি পুনরায় চেষ্টা করুন।

আপনি এইমাত্র ক্লাউড ফাংশনগুলির সাথে আপনার প্রথম কাস্টম ফাংশন স্থাপন করেছেন৷ Firebase কনসোল একটি ড্যাশবোর্ড অফার করে যেখানে আপনি আপনার Firebase প্রকল্পে যে সমস্ত ফাংশন স্থাপন করেন তা দেখতে পাবেন।

রিভিউলি ওয়েব অ্যাপ আবার চালান এবং দেখুন (এখন কার্যকারিতা সহ)

এখন কার্যকরী ওয়েব অ্যাপটি চালানো এবং দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার টার্মিনালে, আবার সার্ভার চালান:

   npm run dev
   

2. আপনার ব্রাউজারে, আপনার টার্মিনালে দেখানো URL-এ নেভিগেট করুন। উদাহরণস্বরূপ: http://localhost:8080 ।
3. অ্যাপে, কিছু মক রিভিউ যোগ করুন ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন কিছু দীর্ঘ রিভিউ প্রদর্শিত হওয়ার জন্য।
   পটভূমিতে, PaLM API এক্সটেনশন সহ ভাষা কার্যগুলি নতুন নথিতে প্রতিক্রিয়া দেখায় যা নতুন পর্যালোচনার প্রতিনিধিত্ব করে। আপনি আগে যে প্রম্পট যোগ করেছেন তা ভাষা মডেল থেকে একটি সংক্ষিপ্ত সারসংক্ষেপের অনুরোধ করে।
4. একটি সম্পূর্ণ পর্যালোচনা এবং পর্যালোচনার জন্য ব্যবহৃত প্রম্পট দেখতে, পর্যালোচনাগুলির একটিতে ক্লিক করুন এবং তারপরে PaLM প্রম্পট দেখান নির্বাচন করুন।

8. চ্যাটবট অ্যাপের জন্য "PALM API এর সাথে চ্যাটবট" এক্সটেনশন সেট আপ করুন

PaLM API এক্সটেনশন সহ চ্যাটবট ইনস্টল করুন

1. PaLM API এক্সটেনশন সহ চ্যাটবটে নেভিগেট করুন।
2. Firebase কনসোলে Install এ ক্লিক করুন।
3. আপনার ফায়ারবেস প্রকল্প নির্বাচন করুন।
4. পরবর্তী > পরবর্তী > পরবর্তী ক্লিক করুন, যতক্ষণ না আপনি কনফিগার এক্সটেনশন বিভাগে পৌঁছান।
5. কালেকশন পাথ টেক্সট বক্সে, users/{uid}/discussion/{discussionId}/messages লিখুন।
6. ক্লাউড ফাংশন লোকেশন ড্রপ-ডাউন থেকে, Iowa (us-central1) বা ফায়ারস্টোর এবং ক্লাউড স্টোরেজের জন্য আপনি পূর্বে যে অবস্থান নির্বাচন করেছিলেন সেটি নির্বাচন করুন।
7. ভাষা মডেল ড্রপ-ডাউন থেকে, চ্যাট-বাইসন নির্বাচন করুন।
8. অন্যান্য সমস্ত মানকে তাদের ডিফল্ট হিসাবে ছেড়ে দিন।
9. ইনস্টল এক্সটেনশন ক্লিক করুন এবং এক্সটেনশন ইনস্টল করার জন্য অপেক্ষা করুন।

PaLM API এক্সটেনশনের সাথে চ্যাটবট ব্যবহার করে দেখুন

যদিও এই কোডল্যাবের লক্ষ্য হল একটি ওয়েব অ্যাপের মাধ্যমে PaLM API এক্সটেনশনের সাথে চ্যাটবটের সাথে ইন্টারঅ্যাক্ট করা, এটি Firebase কনসোল ব্যবহার করে এক্সটেনশনটি ট্রিগার করে এক্সটেনশনটি কীভাবে কাজ করে তা বোঝা সহায়ক। users/{uid}/discussion/{discussionId}/messages সংগ্রহে ক্লাউড ফায়ারস্টোর ডকুমেন্ট তৈরি হলে এক্সটেনশনটি ট্রিগার হয়।

1. Firebase কনসোলে, Firestore- এ নেভিগেট করুন।
2. ক্লিক করুন সংগ্রহ শুরু করুন ।
   1. সংগ্রহ আইডি টেক্সট বক্সে, users লিখুন এবং তারপরে পরবর্তী ক্লিক করুন।
   2. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন এবং তারপর সংরক্ষণ করুন ক্লিক করুন।
3. users সংগ্রহে, ক্লিক করুন সংগ্রহ শুরু করুন ।
   
   1. কালেকশন আইডি টেক্সট বক্সে, discussion লিখুন এবং তারপর Next এ ক্লিক করুন।
   2. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন এবং তারপর সংরক্ষণ করুন ক্লিক করুন।
4. discussion সংগ্রহে, ক্লিক করুন সংগ্রহ শুরু করুন ।
   
   1. সংগ্রহ আইডি পাঠ্য বাক্সে, messages লিখুন এবং তারপরে পরবর্তী ক্লিক করুন।
   2. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন।
   3. ফিল্ড টেক্সট বক্সে, prompt লিখুন।
   4. মান পাঠ্য বাক্সে, Tell me 5 random fruits লিখুন।
   5. Save এ ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন। messages সংগ্রহে এখন একটি নথি অন্তর্ভুক্ত রয়েছে যাতে আপনার প্রশ্নের উত্তর রয়েছে।

5. messages সংগ্রহে, ক্লিক করুন ডকুমেন্ট যোগ করুন ।
   1. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন।
   2. ফিল্ড টেক্সট বক্সে, prompt লিখুন।
   3. মান টেক্সট বক্সে, And now, vegetables লিখুন।
   4. Save এ ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন। messages সংগ্রহে এখন একটি নথি অন্তর্ভুক্ত রয়েছে যাতে আপনার প্রশ্নের উত্তর রয়েছে।

9. Firebase ব্যবহার করতে Chatbot অ্যাপ সেট আপ করুন

চ্যাটবট অ্যাপ চালানোর জন্য, আপনার ফায়ারবেস প্রকল্পের সাথে ইন্টারঅ্যাক্ট করার জন্য আপনাকে আপনার অ্যাপের কোড এবং Firebase CLI সেট আপ করতে হবে।

আপনার অ্যাপের কোডে 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 প্রজেক্টে, প্রজেক্ট ওভারভিউতে নেভিগেট করুন এবং তারপরে ক্লিক করুন ওয়েব (অথবা আপনি যদি ইতিমধ্যে প্রকল্পের সাথে একটি অ্যাপ নিবন্ধন করে থাকেন তবে অ্যাপ যোগ করুন ক্লিক করুন)।
2. অ্যাপ ডাকনাম টেক্সট বক্সে, একটি স্মরণীয় অ্যাপ ডাকনাম লিখুন, যেমন My Chatbot app ।
3. এই অ্যাপের জন্য Firebase হোস্টিংও সেট আপ করুন চেকবক্স নির্বাচন করবেন না । আপনি কোডল্যাবে পরে এই পদক্ষেপগুলি করবেন৷
4. রেজিস্টার অ্যাপে ক্লিক করুন।
5. একটি অ্যাপ-নির্দিষ্ট Firebase কনফিগারেশন অবজেক্টের সাথে Firebase SDK যোগ এবং শুরু করার জন্য কনসোল একটি কোড স্নিপেট প্রদর্শন করে। Firebase কনফিগারেশন অবজেক্টের সমস্ত বৈশিষ্ট্য কপি করুন।
6. আপনার কোড এডিটরে, chatbot-start/lib/firebase/firebase-config.js ফাইলটি খুলুন।
7. আপনি এইমাত্র কপি করেছেন এমন মানগুলির সাথে স্থানধারক মানগুলি প্রতিস্থাপন করুন৷ আপনি যদি চ্যাটবট অ্যাপে ব্যবহার করেন না এমন ফায়ারবেস পরিষেবার বৈশিষ্ট্য এবং মান থাকে তাহলে ঠিক আছে।
8. ফাইলটি সংরক্ষণ করুন।
9. Firebase কনসোলে ফিরে, Continue to console এ ক্লিক করুন।

আপনার Firebase প্রকল্পের বিরুদ্ধে Firebase CLI কমান্ড চালানোর জন্য আপনার টার্মিনাল সেট আপ করুন

1. আপনার টার্মিনালে, সার্ভারটিকে আগের ওয়েব অ্যাপটি চালানো বন্ধ করতে Control+C টিপুন।
2. আপনার টার্মিনালে, chatbot-start ওয়েব অ্যাপ ফোল্ডারে নেভিগেট করুন:

   cd ../chatbot-start
   

3. একটি নির্দিষ্ট ফায়ারবেস প্রকল্পের বিরুদ্ধে Firebase CLI রান কমান্ডগুলি তৈরি করুন:

   firebase use YOUR_PROJECT_ID
   

ফ্রেমওয়ার্ক-সচেতন ফায়ারবেস হোস্টিং ব্যবহার করতে আপনার অ্যাপের কোডবেস সেট আপ করুন

এই কোডল্যাব চ্যাটবট ওয়েব অ্যাপের সাথে হোস্টিং (প্রিভিউ) সহ ওয়েব ফ্রেমওয়ার্ক ব্যবহার করে।

1. আপনার টার্মিনালে, Firebase হোস্টিং এর সাথে ওয়েব ফ্রেমওয়ার্ক সক্ষম করুন:

   firebase experiments:enable webframeworks
   

2. ফায়ারবেস হোস্টিং শুরু করুন:

   firebase init hosting
   

3. codebase in your current directory, should we use this? Detected an existing Next.js কোডবেস সনাক্ত করা হলে, আমরা কি এটি ব্যবহার করব? , 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. আপনার টার্মিনালে, নির্ভরতা ইনস্টল করুন এবং তারপর ওয়েব অ্যাপ চালান:

   npm install
   firebase emulators:start --only hosting
   

2. আপনার ব্রাউজারে, স্থানীয়ভাবে হোস্ট করা হোস্টিং URL-এ নেভিগেট করুন। বেশিরভাগ ক্ষেত্রে, এটি http://localhost:5000/ বা অনুরূপ কিছু।

পৃষ্ঠাটি লোড হওয়া উচিত, কিন্তু আপনি লক্ষ্য করবেন যে বিভিন্ন বৈশিষ্ট্য অনুপস্থিত। আমরা এই কোডল্যাবের পরবর্তী ধাপে এগুলি যোগ করব।

ওয়েব অ্যাপ চালানোর সমস্যা সমাধান করুন

আপনি যদি ওয়েব পৃষ্ঠায় ত্রুটি দেখতে পান যা এইভাবে শুরু হয়: Error: Firebase session cookie has incorrect... , আপনাকে আপনার লোকালহোস্ট পরিবেশে আপনার সমস্ত কুকি মুছে ফেলতে হবে৷ এটি করার জন্য, কুকিজ মুছে ফেলার নির্দেশাবলী অনুসরণ করুন | DevTools ডকুমেন্টেশন। .

10. চ্যাটবট অ্যাপে কার্যকারিতা যোগ করুন

এই কোডল্যাবের শেষ ধাপে, আপনি স্থানীয়ভাবে চ্যাটবট অ্যাপটি চালিয়েছেন, কিন্তু এতে খুব বেশি কার্যকারিতা ছিল না এবং এখনও ইনস্টল করা এক্সটেনশনটি ব্যবহার করেনি। কোডল্যাবের এই ধাপে, আপনি এই কার্যকারিতা যোগ করবেন এবং এক্সটেনশনটি ট্রিগার করতে ওয়েব অ্যাপ ব্যবহার করবেন।

নিরাপত্তা বিধি স্থাপন করুন

এই কোডল্যাবের নমুনা অ্যাপটিতে Firestore এবং 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?" , হ্যাঁ নির্বাচন করুন।

ক্লাউড ফায়ারস্টোরে বার্তা যোগ করতে কোডটি আপডেট করুন

চ্যাটবট অ্যাপে, একজন ব্যবহারকারীর কাছ থেকে একটি নতুন বার্তা Firestore-এ যোগ করা হয় এবং এটি একটি প্রতিক্রিয়া তৈরি করতে এক্সটেনশনটিকে ট্রিগার করে।

1. আপনার কোড এডিটরে, lib/firebase/firestore.js ফাইলটি খুলুন।
2. ফাইলের শেষের কাছে, addNewMessage ফাংশনটি খুঁজুন, যা নতুন বার্তা যোগ করার কাজ পরিচালনা করে।
   ফাংশন ইতিমধ্যে নিম্নলিখিত অবজেক্ট বৈশিষ্ট্য গ্রহণ করে:
   

   প্যারামিটার	বর্ণনা
   userId	লগ ইন করা ব্যবহারকারীর আইডি
   discussionId	যে আলোচনা আইডিতে বার্তাটি যোগ করা হয়েছে
   message	বার্তা পাঠ্য বিষয়বস্তু
   db	একটি ফায়ারস্টোর ডাটাবেস উদাহরণ

   এই ভেরিয়েবলগুলি প্রস্তুত থাকলে, আপনি নতুন বার্তা উপস্থাপন করতে একটি ক্লাউড ফায়ারস্টোর নথি যোগ করতে পারেন।
3. addNewMessage ফাংশনের বডিতে // Insert your code below ⬇️ মন্তব্যের পরে, নিম্নলিখিত কোডটি যোগ করুন:

   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 ফাংশনটি সনাক্ত করুন, যা একটি ক্লাউড ফায়ারস্টোর ক্যোয়ারী ফেরত দিতে হবে যা 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"));
   }
   

ক্লাউড ফায়ারস্টোর বার্তা নথিগুলি পরিচালনা করতে কোডটি আপডেট করুন৷

1. এখনও lib/firebase/firestore.js ফাইলে, handleMessageDoc ফাংশনটি সনাক্ত করুন, যা একটি ক্লাউড ফায়ারস্টোর নথি পায় যা একটি একক বার্তা উপস্থাপন করে।
   এই ফাংশনটি এমনভাবে ডেটা ফর্ম্যাট এবং গঠন করতে হবে যা চ্যাটবট অ্যাপের UI এর জন্য অর্থপূর্ণ হয়।
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. ফাইলটি সংরক্ষণ করুন।

চ্যাটবট ওয়েব অ্যাপটি আবার চালান এবং দেখুন (এখন কার্যকারিতা সহ)

এখন কার্যকরী ওয়েব অ্যাপটি চালানো এবং দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার ব্রাউজারে, Chatbot ওয়েব অ্যাপ দিয়ে ট্যাবে ফিরে যান এবং পৃষ্ঠাটি পুনরায় লোড করুন।
2. Google এর সাথে সাইন ইন ক্লিক করুন।
3. প্রয়োজনে আপনার Google অ্যাকাউন্ট নির্বাচন করুন।
4. আপনি সাইন ইন করার পরে, পৃষ্ঠাটি পুনরায় লোড করুন৷
5. আপনার বার্তা লিখুন পাঠ্য বাক্সে, একটি বার্তা লিখুন, যেমন Tell me about space ।
6. Send এ ক্লিক করুন এবং চ্যাটবট ওয়েব অ্যাপের প্রতিক্রিয়া জানানোর জন্য কয়েক সেকেন্ড অপেক্ষা করুন।

PaLM API এক্সটেনশনের সাথে চ্যাটবটের আরেকটি সুবিধা হল এর কথোপকথনের ইতিহাস।

ঐতিহাসিক প্রেক্ষাপটের সাথে কথোপকথন করার ক্ষমতার একটি উদাহরণ দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার বার্তা লিখুন পাঠ্য বাক্সে, একটি প্রশ্ন জিজ্ঞাসা করুন, যেমন What are five random fruits? .
2. আপনার বার্তা লিখুন পাঠ্য বাক্সে, একটি ফলো-আপ প্রশ্ন জিজ্ঞাসা করুন যা পূর্ববর্তী প্রশ্নের সাথে সম্পর্কিত, যেমন And what about vegetables? .

চ্যাটবট ওয়েব অ্যাপ ঐতিহাসিক জ্ঞানের সাথে সাড়া দেয়। যদিও আপনার শেষ প্রশ্নে পাঁচটি এলোমেলো সবজি উল্লেখ করা হয়নি, তবে PaLM API এক্সটেনশন সহ চ্যাটবট ফলো-আপ প্রশ্ন বোঝে।

11. ভিডিও ইঙ্গিত অ্যাপের জন্য "কনভার্ট টেক্সট টু স্পিচ" এক্সটেনশন সেট আপ করুন

কনভার্ট টেক্সট টু স্পিচ এক্সটেনশন ইনস্টল করুন

1. কনভার্ট টেক্সট টু স্পিচ এক্সটেনশনে নেভিগেট করুন।
2. Firebase কনসোলে Install এ ক্লিক করুন।
3. আপনার Firebase প্রকল্প নির্বাচন করুন।
4. পরবর্তী ক্লিক করুন.
5. পর্যালোচনা APIs সক্রিয় এবং সংস্থান তৈরি বিভাগে, আপনাকে প্রস্তাবিত যেকোনো পরিষেবার পাশে সক্ষম ক্লিক করুন:

6. পরবর্তীতে ক্লিক করুন, এবং তারপরে আপনাকে প্রস্তাবিত যেকোনো অনুমতির পাশে অনুদান নির্বাচন করুন।

7. পরবর্তী ক্লিক করুন.
8. সংগ্রহ পথ পাঠ্য বাক্সে, bot লিখুন।
9. স্টোরেজ পাথ পাঠ্য বাক্সে, tts প্রবেশ করুন।
10. অন্যান্য সমস্ত মান তাদের ডিফল্ট বিকল্প হিসাবে ছেড়ে দিন।
11. এক্সটেনশন ইনস্টল ক্লিক করুন এবং এক্সটেনশনের জন্য ইনস্টল করার জন্য অপেক্ষা করুন।

কনভার্ট পাঠ্যটি স্পিচ এক্সটেনশনে চেষ্টা করে দেখুন

যদিও এই কোডল্যাবটির লক্ষ্যটি একটি ওয়েব অ্যাপের মাধ্যমে রূপান্তর পাঠ্যের সাথে স্পিচ এক্সটেনশনে ইন্টারঅ্যাক্ট করা, ফায়ারবেস কনসোলটি ব্যবহার করে এক্সটেনশানটি ট্রিগার করে কীভাবে এক্সটেনশনটি কাজ করে তা বুঝতে সহায়ক। bot সংগ্রহে ক্লাউড ফায়ারস্টোর ডকুমেন্ট তৈরি করা হলে এক্সটেনশন ট্রিগার করে।

ফায়ারবেস কনসোলটি ব্যবহার করে কীভাবে এক্সটেনশনটি কাজ করে তা দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. ফায়ারবেস কনসোলে, ফায়ারস্টোরে নেভিগেট করুন
2. ক্লিক করুন সংগ্রহ শুরু করুন ।
3. সংগ্রহ আইডি পাঠ্য বাক্সে, bot প্রবেশ করান।
4. পরবর্তী ক্লিক করুন.

5. ডকুমেন্ট আইডি পাঠ্য বাক্সে, অটো-আইডি ক্লিক করুন।
6. ক্ষেত্রের পাঠ্য বাক্সে, text প্রবেশ করুন।
7. মান পাঠ্য বাক্সে, The quick brown fox jumps over the lazy dog প্রবেশ করুন।
8. Save এ ক্লিক করুন।

আপনি যে এমপি 3 ফাইলটি তৈরি করেছেন তা দেখতে এবং শুনতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. ফায়ারবেস কনসোলে, স্টোরেজে নেভিগেট করুন।
2. যে ফলকে আপনি ফাইলগুলি আপলোড করতে পারেন সেখানে gs:// মানের পরে আপনার বালতি নামটি নোট করুন। এটি এই প্রকল্পের জন্য আপনার ডিফল্ট বালতিটির নাম। এই কোডল্যাব জুড়ে আপনার বিভিন্ন কাজে এটি দরকার।

3. গুগল ক্লাউড কনসোলে, ক্লাউড স্টোরেজে নেভিগেট করুন।
4. আপনার প্রকল্প নির্বাচন করুন.
   আপনি যদি প্রকল্পগুলির সাম্প্রতিক তালিকার মধ্যে আপনার প্রকল্পটি না দেখেন তবে প্রকল্পের বাছাইকারীর মধ্যে আপনার প্রকল্পটি সনাক্ত করতে প্রকল্প নির্বাচন করুন ক্লিক করুন।

5. আপনার ডিফল্ট স্টোরেজ বালতি নির্বাচন করুন।
6. tts/ ফোল্ডারে নেভিগেট করুন।
7. এমপি 3 ফাইলটি ক্লিক করুন।
8. এমপি 3 ফাইলের শেষে, ক্লিক করুন এবং লক্ষ্য করুন যে আপনার পাঠ্যটি বক্তৃতায় রূপান্তরিত হয়েছে।

12 .. ভিডিও ইঙ্গিত অ্যাপ্লিকেশনটির জন্য "ক্লাউড ভিডিও এআই সহ লেবেল ভিডিওগুলি" এক্সটেনশন সেট আপ করুন

ক্লাউড ভিডিও এআই এক্সটেনশন সহ লেবেল ভিডিওগুলি ইনস্টল করুন

1. ক্লাউড ভিডিও এআই এক্সটেনশন সহ লেবেল ভিডিওগুলিতে নেভিগেট করুন।
2. ফায়ারবেস কনসোলে ইনস্টল ক্লিক করুন।
3. আপনার ফায়ারবেস প্রকল্পটি নির্বাচন করুন।
4. আপনি কনফিগার এক্সটেনশন বিভাগে পৌঁছা পর্যন্ত পরবর্তী> পরবর্তী> পরবর্তী ক্লিক করুন।
5. ক্লাউড ফাংশনগুলির অবস্থান ড্রপ-ডাউন থেকে, একটি সমর্থিত অবস্থান নির্বাচন করুন (হয় আপনি আগে ফায়ারস্টোর এবং ক্লাউড স্টোরেজের জন্য নির্বাচিত অবস্থান বা এর নিকটতমটি)। সমর্থিত অবস্থানের জন্য, AnnotateVideoRequest location_id বিভাগটি দেখুন।
6. মডেল ড্রপ-ডাউন থেকে, সর্বশেষ নির্বাচন করুন।
7. স্টেশনারি ক্যামেরা ড্রপ-ডাউন থেকে, নং নির্বাচন করুন।
8. অন্যান্য সমস্ত মান তাদের ডিফল্ট হিসাবে ছেড়ে দিন।
9. এক্সটেনশন ইনস্টল ক্লিক করুন এবং এক্সটেনশনের জন্য ইনস্টল করার জন্য অপেক্ষা করুন।

ক্লাউড ভিডিও এআই এক্সটেনশন সহ লেবেল ভিডিওগুলি ব্যবহার করে দেখুন

যদিও এই কোডল্যাবের লক্ষ্যটি একটি ওয়েব অ্যাপের মাধ্যমে ক্লাউড ভিডিও এআই এক্সটেনশনের সাথে লেবেল ভিডিওগুলির সাথে ইন্টারঅ্যাক্ট করা, এটি ফায়ারবেস কনসোলটি ব্যবহার করে এক্সটেনশনটি ট্রিগার করে কীভাবে এক্সটেনশনটি কাজ করে তা বুঝতে সহায়ক। যখন কোনও ভিডিও ফাইল আপনার স্টোরেজ বালতিতে আপলোড করা হয় তখন এক্সটেনশন ট্রিগার করে।

ফায়ারবেস কনসোলটি ব্যবহার করে কীভাবে এক্সটেনশনটি কাজ করে তা দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার ফায়ারবেস প্রকল্পের মধ্যে স্টোরেজ নেভিগেট করুন > ফোল্ডার তৈরি করুন ।
2. ফোল্ডারের নাম পাঠ্য বাক্সে, video_annotation_input লিখুন।

3. ফোল্ডার যুক্ত করুন ক্লিক করুন।
4. video_annotation_input ফোল্ডারে, ফাইল আপলোড ক্লিক করুন।
5. আপনি ক্লোন করেছেন বা আগে ডাউনলোড করেছেন এমন ai-extensions-codelab/video-hint-start/public/videos ফোল্ডারে প্রথম ভিডিও ফাইলটি নির্বাচন করুন।
6. আপনার ব্রাউজারে ফিরে গুগল ক্লাউড কনসোলে, ক্লাউড স্টোরেজে নেভিগেট করুন।
7. আপনার ডিফল্ট স্টোরেজ বালতি নির্বাচন করুন, যা আপনি আগে উল্লেখ করেছেন।
8. video_annotation_output ফোল্ডারে ক্লিক করুন।
   আপনি যদি video_annotation_output ফোল্ডারটি না দেখেন তবে কয়েক সেকেন্ড অপেক্ষা করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন কারণ ভিডিও গোয়েন্দা এপিআই এখনও ভিডিওটি প্রক্রিয়াজাত করছে।

9. আপনি আগে আপলোড করা ফাইলটির অনুরূপ নাম অনুসরণ করে এমন একটি জেএসএন ফাইল বিদ্যমান তা লক্ষ্য করুন।
10. ক্লিক করুন ফাইলের নাম ডাউনলোড করুন ।
11. আপনার কোড সম্পাদকটিতে ডাউনলোড করা জেএসএন ফাইলটি খুলুন। এটিতে ভিডিও ইন্টেলিজেন্স এপিআই থেকে কাঁচা আউটপুট রয়েছে, এতে আপনি যে ভিডিওটি আপলোড করেছেন তার সনাক্ত করা লেবেলগুলি অন্তর্ভুক্ত করে।

13। ফায়ারবেস ব্যবহার করতে ভিডিও ইঙ্গিত অ্যাপ্লিকেশন সেট আপ করুন

ভিডিও ইঙ্গিত অ্যাপ্লিকেশনটি চালানোর জন্য, আপনার ফায়ারবেস প্রকল্পের সাথে ইন্টারঅ্যাক্ট করতে আপনাকে আপনার অ্যাপ্লিকেশনটির কোড এবং ফায়ারবেস সিএলআই সেট আপ করতে হবে।

আপনার অ্যাপের কোডে ফায়ারবেস পরিষেবা এবং কনফিগারেশন যুক্ত করুন

ফায়ারবেস ব্যবহার করতে, আপনার অ্যাপ্লিকেশনটির কোডবেসগুলির জন্য আপনি যে পরিষেবাগুলি ব্যবহার করতে চান তার জন্য ফায়ারবেস এসডিকে এবং ফায়ারবেস কনফিগারেশন যা সেই এসডিকে জানায় যে কোন ফায়ারবেস প্রকল্পটি ব্যবহার করতে হবে।

এই কোডল্যাবের নমুনা অ্যাপ্লিকেশনটিতে ইতিমধ্যে এসডিকেএসের জন্য প্রয়োজনীয় সমস্ত আমদানি এবং সূচনা কোড অন্তর্ভুক্ত রয়েছে ( video-hint-start/lib/firebase/firebase.js তবে, নমুনা অ্যাপ্লিকেশনটিতে কেবল ফায়ারবেস কনফিগারেশনের জন্য স্থানধারক মান রয়েছে ( video-hint-start/lib/firebase/firebase-config.js আপনার অ্যাপ্লিকেশন জন্য।

1. ফায়ারবেস কনসোলে, আপনার ফায়ারবেস প্রকল্পে, প্রকল্পের ওভারভিউতে নেভিগেট করুন এবং তারপরে ক্লিক করুন ওয়েব (বা আপনি যদি ইতিমধ্যে প্রকল্পের সাথে কোনও অ্যাপ্লিকেশন নিবন্ধিত করেছেন তবে অ্যাপ্লিকেশন যুক্ত করুন ক্লিক করুন)।
2. অ্যাপ ডাকনাম পাঠ্য বাক্সে, My Video Hint app মতো একটি স্মরণীয় অ্যাপ ডাকনাম লিখুন।
3. এই অ্যাপ্লিকেশন চেকবক্সের জন্য ফায়ারবেস হোস্টিং সেট আপ করুন নির্বাচন করবেন না । আপনি এই পদক্ষেপগুলি পরে কোডল্যাব এ করবেন।
4. নিবন্ধ অ্যাপ্লিকেশন ক্লিক করুন।
5. কনসোলটি অ্যাপ্লিকেশন-নির্দিষ্ট ফায়ারবেস কনফিগারেশন অবজেক্টের সাথে ফায়ারবেস এসডিকে যুক্ত এবং সূচনা করার জন্য একটি কোড স্নিপেট প্রদর্শন করে। ফায়ারবেস কনফিগারেশন অবজেক্টে সমস্ত বৈশিষ্ট্য অনুলিপি করুন।
6. আপনার কোড সম্পাদকটিতে, video-hint-start/lib/firebase/firebase-config.js
7. আপনি সবেমাত্র অনুলিপি করা মানগুলির সাথে স্থানধারক মানগুলি প্রতিস্থাপন করুন। এটি ঠিক আছে যদি আপনার কাছে ফায়ারবেস পরিষেবাগুলির জন্য সম্পত্তি এবং মান থাকে যা আপনি ভিডিও ইঙ্গিত অ্যাপ্লিকেশনটিতে ব্যবহার করেন না।
8. ফাইলটি সংরক্ষণ করুন।
9. ফায়ারবেস কনসোলে ফিরে, কনসোলে চালিয়ে যান ক্লিক করুন।

আপনার ফায়ারবেস প্রকল্পের বিপরীতে ফায়ারবেস সিএলআই কমান্ডগুলি চালানোর জন্য আপনার টার্মিনাল সেট আপ করুন

1. আপনার টার্মিনালে, সার্ভারটিকে পূর্ববর্তী ওয়েব অ্যাপটি চালানো থেকে বিরত রাখতে Control+C টিপুন।
2. আপনার টার্মিনালে, video-hint-start ওয়েব অ্যাপ্লিকেশন ফোল্ডারে নেভিগেট করুন:

   cd ../video-hint-start
   

3. একটি নির্দিষ্ট ফায়ারবেস প্রকল্পের বিপরীতে ফায়ারবেস সিএলআই রান কমান্ডগুলি তৈরি করুন:

   firebase use YOUR_PROJECT_ID
   

ফ্রেমওয়ার্ক-সচেতন ফায়ারবেস হোস্টিং ব্যবহার করতে আপনার অ্যাপ্লিকেশনটির কোডবেস সেট আপ করুন

এই কোডল্যাব ভিডিও ইঙ্গিত ওয়েব অ্যাপ্লিকেশন সহ হোস্টিং (পূর্বরূপ) সহ ওয়েব ফ্রেমওয়ার্কগুলি ব্যবহার করে।

1. আপনার টার্মিনালে, ফায়ারবেস হোস্টিং সহ ওয়েব ফ্রেমওয়ার্কগুলি সক্ষম করুন:

   firebase experiments:enable webframeworks
   

2. ফায়ারবেস হোস্টিং আরম্ভ করুন:

   firebase init hosting
   

3. codebase in your current directory, should we use this? Detected an existing Next.js কোডবেস সনাক্ত করার সাথে অনুরোধ করা হলে, আমাদের কি এটি ব্যবহার করা উচিত? , প্রেস ওয়াই।
4. In which region would you like to host server-side content, if applicable? , ডিফল্ট অঞ্চল বা আপনি আগে ফায়ারস্টোর এবং ক্লাউড স্টোরেজের জন্য যে অবস্থানটি নির্বাচন করেছেন তা নির্বাচন করুন এবং তারপরে Enter টিপুন (বা ম্যাকোসে 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. আপনার ব্রাউজারে, স্থানীয়ভাবে হোস্ট করা হোস্টিং ইউআরএলে নেভিগেট করুন। বেশিরভাগ ক্ষেত্রে, এটি http: // লোকালহোস্ট: 5000/ অথবা অনুরূপ কিছু।

পৃষ্ঠাটি লোড হওয়া উচিত, তবে আপনি লক্ষ্য করবেন যে বিভিন্ন বৈশিষ্ট্য অনুপস্থিত। আমরা এই কোডল্যাবের পরবর্তী পদক্ষেপগুলিতে এগুলি যুক্ত করব।

ওয়েব অ্যাপ্লিকেশন চালানো সমস্যা সমাধান

আপনি যদি Error: The query requires an index. You can create it here: https://console.firebase.google.com ডিভটুলসের কনসোল ফলকে এই পদক্ষেপগুলি অনুসরণ করুন:

1. প্রদত্ত ইউআরএল নেভিগেট করুন।

2. সংরক্ষণ করুন ক্লিক করুন এবং বিল্ডিং থেকে সক্ষম হয়ে স্থিতি পরিবর্তনের জন্য অপেক্ষা করুন।

14 .. ভিডিও ইঙ্গিত অ্যাপ্লিকেশনটিতে কার্যকারিতা যুক্ত করুন

এই কোডল্যাবের শেষ ধাপে, আপনি স্থানীয়ভাবে ভিডিও হিন্ট অ্যাপটি চালিয়েছিলেন, তবে এটির খুব বেশি কার্যকারিতা নেই এবং এখনও ইনস্টল করা এক্সটেনশনটি ব্যবহার করেননি। কোডল্যাবের এই পদক্ষেপে, আপনি এই কার্যকারিতাটি যুক্ত করবেন এবং এক্সটেনশনটি ট্রিগার করতে ওয়েব অ্যাপ্লিকেশনটি ব্যবহার করবেন।

সুরক্ষা বিধি মোতায়েন করুন

এই কোডল্যাবের নমুনা অ্যাপ্লিকেশনটিতে ফায়ারস্টোরের জন্য এবং ফায়ারবেসের জন্য ক্লাউড স্টোরেজের জন্য সুরক্ষা বিধিগুলির সেট রয়েছে। আপনি এই সুরক্ষা বিধিগুলি আপনার ফায়ারবেস প্রকল্পে স্থাপন করার পরে, আপনার ডাটাবেসের ডেটা এবং আপনার বালতিটি অপব্যবহার থেকে আরও ভাল সুরক্ষিত।

আপনি এই নিয়মগুলি 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 ফাইল থেকে ফাংশনগুলি আমদানি ও রফতানি করতে জাভাস্ক্রিপ্ট মডিউলগুলি ব্যবহার করে যাতে সমস্ত ফাংশনের জন্য একটি কেন্দ্রীয় অবস্থান থাকে।

ভিডিও আপলোডিং পরিচালনা করতে কোডটি আপডেট করুন

1. আপনার কোড সম্পাদকটিতে, lib/firebase/storage.js ফাইলটি খুলুন।
2. uploadVideo ফাংশনটি সনাক্ত করুন।
   এই ফাংশনটি userId , filePath এবং file পরামিতি গ্রহণ করে। ক্লাউড স্টোরেজে কোনও ফাইল আপলোড করার জন্য এই ডেটা যথেষ্ট।
3. uploadVideo ফাংশনের দেহে, নিম্নলিখিত কোডটি যুক্ত করুন:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

আপনার ফাংশন স্থাপন করুন

ফায়ারবেস সিএলআই দিয়ে আপনার ফাংশনগুলি স্থাপন করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার টার্মিনালে video-hint-start ফোল্ডারে থাকাকালীন বর্তমান প্রক্রিয়াটি বন্ধ করতে Control+C টিপুন।
2. আপনার ফাংশন স্থাপন করুন:

   firebase deploy --only functions
   

   যদি আপনাকে পূর্ববর্তী কোনও ক্লাউড ফাংশন মুছে ফেলার বিষয়ে জিজ্ঞাসা করা হয় তবে No নির্বাচন করুন।
3. আপনি যদি Permission denied while using the Eventarc Service Agent অনুরূপ কোনও বার্তা দেখতে পান তবে কয়েক মিনিট অপেক্ষা করুন এবং তারপরে কমান্ডটি আবার চেষ্টা করুন।
4. কমান্ডটি শেষ হওয়ার পরে, স্থানীয়ভাবে অ্যাপটি আবার চালান:

   firebase emulators:start --only hosting
   

আবার চালান এবং ভিডিও ইঙ্গিত ওয়েব অ্যাপ্লিকেশনটি আবার দেখুন (এখন কার্যকারিতা সহ)

এখন কার্যকরী ওয়েব অ্যাপটি চালাতে এবং দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. আপনার ব্রাউজারে, আপনি যে ট্যাবটি http: // লোকালহোস্ট: 5000 এ নেভিগেট করেছেন তা সন্ধান করুন।
2. যদি প্রয়োজন হয় তবে গুগলের সাথে সাইন ইন ক্লিক করুন এবং আপনার গুগল অ্যাকাউন্ট নির্বাচন করুন।
3. উদাহরণ ভিডিও #1 আপলোড করুন ক্লিক করুন এবং ভিডিও সংক্ষিপ্তসার ফলাফলগুলি দেখতে কয়েক মিনিট অপেক্ষা করুন।
4. ভিডিওটি আপলোড করার পরে যদি আপনি কোনও ফলাফল না দেখেন তবে এই কোডেল্যাবের পরিশিষ্টে ক্লাউড ফাংশনগুলির সাথে সমস্যা সমাধানের ত্রুটিগুলি দেখুন।

15. উপসংহার

অভিনন্দন! আপনি এই কোডল্যাবটিতে অনেক অর্জন করেছেন!

ইনস্টল এবং কনফিগার করা ফায়ারবেস এক্সটেনশন

আপনি বিভিন্ন এআই এক্সটেনশনগুলি কনফিগার এবং ইনস্টল করতে ফায়ারবেস কনসোলটি ব্যবহার করেছেন। এক্সটেনশানগুলি ব্যবহার করা সুবিধাজনক কারণ আপনাকে প্রচুর বয়লারপ্লেট কোড লিখতে হবে না যা গুগল ক্লাউড পরিষেবাদিগুলির সাথে প্রমাণীকরণ, ফায়ারস্টোর থেকে পড়া এবং লেখা এবং গুগল ক্লাউড পরিষেবাদির সাথে আলাপচারিতা - এবং সেই কার্যগুলির সাথে জড়িত বিভিন্ন সূক্ষ্মতা।

ফায়ারবেস কনসোল ব্যবহার করে এক্সটেনশনের সাথে কাজ করেছেন

সরাসরি কোডে ঝাঁপ দেওয়ার পরিবর্তে, আপনি ফায়ারস্টোর বা ক্লাউড স্টোরেজে কনসোলের মাধ্যমে সরবরাহ করা একটি ইনপুটের ভিত্তিতে এআই এক্সটেনশনগুলি কীভাবে কাজ করে তা বুঝতে সময় নিয়েছিলেন। আপনার যদি এক্সটেনশন আউটপুট ডিবাগ করতে হয় তবে এই ধরণের মিথস্ক্রিয়াটি বিশেষত কার্যকর হতে পারে।

ফায়ারবেস এক্সটেনশনগুলি ব্যবহার করে এমন তিনটি এআই-চালিত ওয়েব অ্যাপ্লিকেশন তৈরি করা হয়েছে

পর্যালোচনা করে

পর্যালোচনা ওয়েব অ্যাপে, আপনি পাম এপিআই এক্সটেনশনের সাথে ভাষার কাজগুলি ব্যবহার করেছেন দীর্ঘ পর্যালোচনাগুলি সংক্ষিপ্ত করতে যা ব্যবহারকারীরা টি-শার্টের পণ্যটির জন্য রেখেছিলেন। আপনি আরও অনুরোধ করেছেন যে ভাষার মডেলটি আপনার ক্যোয়ারিতে একটি JSON প্রতিক্রিয়া সরবরাহ করে, যেখানে জেএসএন একটি তারকা রেটিং এবং মূল দীর্ঘ-ফর্ম পর্যালোচনার সংক্ষিপ্ত পর্যালোচনা সরবরাহ করে।

Al চ্ছিক অনুশীলন : টি-শার্ট সংস্থা সংক্ষিপ্ত পর্যালোচনাগুলিতে খুশি, তবে তারা ত্রুটির প্রকৃতির অতিরিক্ত সংক্ষিপ্তসার চেয়েছে। আপনি ত্রুটিটির সংক্ষিপ্তসারটি ফেরত দেওয়ার জন্য প্রম্পটটি সামঞ্জস্য করতে পারেন এবং তারপরে ওয়েব অ্যাপের ব্যবহারকারী ইন্টারফেসের মধ্যে সেই সংক্ষিপ্তসারটি অন্তর্ভুক্ত করতে পারেন?

চ্যাটবট

চ্যাটবট ওয়েব অ্যাপে, আপনি ব্যবহারকারীকে একটি ইন্টারেক্টিভ চ্যাট ইন্টারফেস সরবরাহ করতে পাম এপিআই এক্সটেনশনের সাথে চ্যাটবটটি ব্যবহার করেছেন, এতে কথোপকথনের historical তিহাসিক প্রসঙ্গ অন্তর্ভুক্ত রয়েছে - যেখানে প্রতিটি বার্তা একটি ফায়ারস্টোর ডকুমেন্টে সংরক্ষণ করা হয় যা কোনও নির্দিষ্ট ব্যবহারকারীর কাছে স্কোপ করা থাকে।

Al চ্ছিক অনুশীলন : শিক্ষার্থীরা চ্যাটবোটে সন্তুষ্ট হয়েছে, তবে কর্মীরা কয়েকটি বর্ধন করতে চান। শিক্ষার্থীদের তাদের উত্তর সরবরাহ করার পরে চিন্তা-চেতনামূলক প্রশ্ন দেওয়া উচিত। যেমন:

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?

ইঙ্গিত: এটি অর্জনের জন্য আপনি একটি কনফিগারযোগ্য প্রসঙ্গ বিকল্প ব্যবহার করতে পারেন।

ভিডিও ইঙ্গিত

ভিডিও হিন্ট ওয়েব অ্যাপে, আপনি রূপান্তর পাঠ্যটি স্পিচ , পাম এপিআই সহ ভাষার কাজগুলি এবং ক্লাউড ভিডিও এক্সটেনশনের সাথে লেবেল ভিডিওগুলি একটি এক্সটেনশন পাইপলাইন তৈরি করতে ব্যবহার করেছেন যা একটি ভিডিওর একটি পাঠ্য এবং অডিও বিবরণ দেয়।

Al চ্ছিক অনুশীলন : সরকারী বিভাগ প্রোটোটাইপকে আকর্ষণীয় বলে মনে করেছে এবং তারা এখন কোনও ব্যবহারকারীকে ভিডিওতে যেখানে লেবেলটি সনাক্ত করা হয়েছে সেখানে পয়েন্টে ঝাঁপিয়ে পড়ার জন্য কোনও পাঠ্য-ভিত্তিক লেবেলে ক্লিক করতে সক্ষম হবে।

16 ... পরিশিষ্ট: মেঘের ক্রিয়াকলাপগুলির সাথে ত্রুটিগুলি ত্রুটি

যদি আপনার ওয়েব অ্যাপটি প্রত্যাশার মতো কাজ না করে এবং আপনি মনে করেন এটি ফাংশনগুলির কারণে হতে পারে তবে এই সমস্যা সমাধানের পৃষ্ঠার পদক্ষেপগুলি অনুসরণ করুন।

জনসাধারণের অযৌক্তিক অ্যাক্সেসের অনুমতি দিন

আপনি যদি ক্রোম ডিভটুলসের কনসোল প্যানেলে কোনও অনুমতি-সম্পর্কিত ত্রুটিগুলি পান তবে এই পদক্ষেপগুলি অনুসরণ করুন:

1. প্রমাণীকরণ ওভারভিউ পড়ুন | ক্লাউড রান পৃষ্ঠা
2. ফাংশনটিতে জনসাধারণের অযৌক্তিক অ্যাক্সেসের অনুমতি দেওয়ার জন্য প্রয়োজনীয় কাজগুলি দেখার জন্য লিঙ্কটি ক্লিক করুন এবং সম্পূর্ণ করুন।

3. পর্যালোচনা অ্যাপ্লিকেশনটিতে ফিরে নেভিগেট করুন। উদাহরণস্বরূপ: http: // লোকালহোস্ট: 8080।
4. কিছু মক পর্যালোচনা যুক্ত করুন ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন।
   • যদি পর্যালোচনাগুলি উপস্থিত হয়: আপনার এই সমস্যা সমাধানের পদক্ষেপগুলি চালিয়ে যাওয়ার দরকার নেই এবং এই কোডল্যাবটিতে চ্যাটবট ওয়েব অ্যাপ বিভাগটি সেট আপ করতে সরাসরি লাফিয়ে উঠতে পারেন ..
   • যদি পর্যালোচনাগুলি উপস্থিত না হয়: এই সমস্যা সমাধানের বিভাগটি দিয়ে চালিয়ে যান।

অপর্যাপ্ত অনুমতি ত্রুটিগুলি পরিচালনা করুন

1. ফায়ারবেস কনসোলে, ফাংশনগুলিতে নেভিগেট করুন।
2. addMockReviews ফাংশনটির উপরে ঘুরে দেখুন এবং তারপরে ক্লিক করুন > লগ দেখুন ।

3. আপনি নিম্নলিখিতগুলির মধ্যে একটির অনুরূপ ত্রুটি না পাওয়া পর্যন্ত লগগুলির মাধ্যমে স্ক্রোল করুন:

   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).
   

4. গুগল ক্লাউড কনসোলে, আইএএম অনুমতি পৃষ্ঠায় নেভিগেট করুন এবং তারপরে আপনার প্রকল্পটি নির্বাচন করুন।
5. টেবিলে নাম কলামটি সন্ধান করুন।
   আইএএম এবং অ্যাডমিন পৃষ্ঠায় ব্যবহারকারী এবং ভূমিকাগুলির একটি সারণী রয়েছে। সারণীর নাম কলামটি ব্যবহারকারী বা অধ্যক্ষের জন্য কী তা বর্ণনা করে। ডিফল্ট গণনা পরিষেবা অ্যাকাউন্টের নাম সহ আপনার একটি অধ্যক্ষ থাকতে পারে।

আপনি যদি ডিফল্ট গণনা পরিষেবা অ্যাকাউন্টটি দেখেন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

1. ক্লিক করুন প্রিন্সিপাল সম্পাদনা করুন ।

2. এই কোডল্যাবের ডিফল্ট গণনা পরিষেবা অ্যাকাউন্ট বিভাগে অ্যাড রোলস দিয়ে চালিয়ে যান।

আপনি যদি ডিফল্ট গণনা পরিষেবা অ্যাকাউন্টটি না দেখেন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

1. গ্রান্ট অ্যাক্সেস ক্লিক করুন।
2. নতুন প্রিন্সিপাল টেক্সট বাক্সে, compute প্রবেশ করুন।
3. প্রদর্শিত অটোসুগেশনগুলির মেনুতে, ডিফল্ট গণনা পরিষেবা অ্যাকাউন্ট নির্বাচন করুন।

ডিফল্ট গণনা পরিষেবা অ্যাকাউন্টে ভূমিকা যুক্ত করুন

ডিফল্ট গণনা পরিষেবা অ্যাকাউন্টের অ্যাসাইন রোলস বিভাগে:

1. একটি ভূমিকা মেনু নির্বাচন করুন ।
2. ফিল্টার পাঠ্য বাক্সে, Cloud Datastore User প্রবেশ করান।
3. প্রদর্শিত অটোসুগেশনগুলির মেনুতে, ক্লাউড ডেটাস্টোর ব্যবহারকারী নির্বাচন করুন।
4. ক্লিক করুন অন্য ভূমিকা যুক্ত করুন ।
   1. একটি ভূমিকা মেনু নির্বাচন করুন ।
   2. ফিল্টার পাঠ্য বাক্সে, Cloud Storage for Firebase Admin প্রবেশ করান।
   3. প্রদর্শিত অটোসুগেশনগুলির মেনুতে, ফায়ারবেস অ্যাডমিনের জন্য ক্লাউড স্টোরেজ নির্বাচন করুন।
5. ক্লিক করুন অন্য ভূমিকা যুক্ত করুন ।
   1. একটি ভূমিকা মেনু নির্বাচন করুন ।
   2. ফিল্টার পাঠ্য বাক্সে, Cloud Storage for Firebase Service Agent লিখুন।
   3. প্রদর্শিত অটোসুগেশনগুলির মেনুতে, ফায়ারবেস পরিষেবা এজেন্টের জন্য ক্লাউড স্টোরেজ নির্বাচন করুন।
6. Save এ ক্লিক করুন।