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

১. শুরু করার আগে

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

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

পূর্বশর্ত

  • Node.js, Next.js, এবং TypeScript সম্পর্কে জ্ঞান।

তুমি কি শিখবে

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

তোমার যা লাগবে

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

২. ওয়েব অ্যাপ, ফায়ারবেস পরিষেবা এবং এক্সটেনশনগুলি পর্যালোচনা করুন

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

ওয়েব অ্যাপ

এই কোডল্যাবে, আপনি Friendly Conf নামে একটি ওয়েব অ্যাপ তৈরি করবেন।

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

5364a56a230ff075.png সম্পর্কে

ফায়ারবেস পরিষেবা

এই কোডল্যাবে, আপনি অনেক Firebase পরিষেবা এবং বৈশিষ্ট্য ব্যবহার করবেন এবং তাদের জন্য বেশিরভাগ স্টার্টার কোড আপনার জন্য সরবরাহ করা হয়েছে। নিম্নলিখিত টেবিলে আপনি যে পরিষেবাগুলি ব্যবহার করবেন এবং সেগুলি ব্যবহারের কারণগুলি রয়েছে।

সেবা

ব্যবহারের কারণ

ফায়ারবেস প্রমাণীকরণ

আপনি ওয়েব অ্যাপের জন্য Google-এর সাথে সাইন-ইন কার্যকারিতা ব্যবহার করেন।

ক্লাউড ফায়ারস্টোর

আপনি ক্লাউড ফায়ারস্টোরে টেক্সট ডেটা সংরক্ষণ করেন, যা পরে ফায়ারবেস এক্সটেনশন দ্বারা প্রক্রিয়াজাত করা হয়।

Firebase এর জন্য ক্লাউড স্টোরেজ

আপনি ওয়েব অ্যাপের মধ্যে চিত্র গ্যালারি প্রদর্শনের জন্য ক্লাউড স্টোরেজ থেকে পড়তে এবং লিখতে পারেন।

ফায়ারবেস নিরাপত্তা নিয়ম

আপনার Firebase পরিষেবাগুলিতে অ্যাক্সেস সুরক্ষিত করতে আপনি নিরাপত্তা নিয়ম প্রয়োগ করেন।

ফায়ারবেস এক্সটেনশন

আপনি AI-সম্পর্কিত Firebase এক্সটেনশনগুলি কনফিগার এবং ইনস্টল করেন এবং ওয়েব অ্যাপের মধ্যে ফলাফলগুলি প্রদর্শন করেন।

বোনাস: ফায়ারবেস হোস্টিং

আপনি ঐচ্ছিকভাবে আপনার ওয়েব অ্যাপ পরিবেশন করার জন্য Firebase Hosting ব্যবহার করতে পারেন (GitHub রেপো ছাড়া)।

বোনাস: ফায়ারবেস অ্যাপ হোস্টিং

আপনি ঐচ্ছিকভাবে আপনার গতিশীল Next.js ওয়েব অ্যাপ (একটি GitHub রেপোর সাথে সংযুক্ত) পরিবেশন করার জন্য নতুন স্ট্রিমলাইনড ফায়ারবেস অ্যাপ হোস্টিং ব্যবহার করতে পারেন।

ফায়ারবেস এক্সটেনশন

এই কোডল্যাবে আপনি যে ফায়ারবেস এক্সটেনশনগুলি ব্যবহার করবেন সেগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

এক্সটেনশনগুলি কার্যকর কারণ এগুলি আপনার ফায়ারবেস প্রকল্পে ঘটে যাওয়া ইভেন্টগুলিতে প্রতিক্রিয়া দেখায়। এই কোডল্যাবে ব্যবহৃত দুটি এক্সটেনশনই ক্লাউড ফায়ারস্টোরের পূর্ব-কনফিগার করা সংগ্রহগুলিতে নতুন ডকুমেন্ট তৈরি করার সময় প্রতিক্রিয়া জানায়।

৩. আপনার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন

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

  1. আপনার টার্মিনালে, যাচাই করুন যে আপনার Node.js সংস্করণ 20.0.0 বা উচ্চতর ইনস্টল করা আছে:
    node -v
    
  2. যদি আপনার Node.js সংস্করণ 20.0.0 বা উচ্চতর না থাকে, তাহলে সর্বশেষ LTS সংস্করণটি ডাউনলোড করুন এবং এটি ইনস্টল করুন

কোডল্যাবের সোর্স কোডটি পান

যদি আপনার একটি GitHub অ্যাকাউন্ট থাকে:

  1. github.com/FirebaseExtended/codelab-gemini-api-extensions থেকে আমাদের টেমপ্লেট ব্যবহার করে একটি নতুন সংগ্রহস্থল তৈরি করুন। 65ef006167d600ab.png সম্পর্কে
  2. আপনার তৈরি করা কোডল্যাবের গিটহাব রিপোজিটরিটি ক্লোন করুন:
    git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
    

যদি আপনার গিট ইনস্টল না থাকে অথবা আপনি নতুন রেপো তৈরি করতে না চান:

জিপ ফাইল হিসেবে GitHub রিপোজিটরিটি ডাউনলোড করুন

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

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

যদি আপনি নিশ্চিত না হন যে আপনি এই কোডল্যাব জুড়ে নির্দেশিত কোডটি সঠিকভাবে প্রয়োগ করেছেন কিনা, তাহলে আপনি সমাধান কোডটি end git শাখায় খুঁজে পেতে পারেন।

ফায়ারবেস সিএলআই ইনস্টল করুন

  1. যাচাই করুন যে আপনার Firebase CLI ইনস্টল করা আছে এবং এটির সংস্করণ 13.6 বা তার বেশি:
    firebase --version
    
  2. যদি আপনার Firebase CLI ইনস্টল করা থাকে, কিন্তু এটি ১৩.৬ বা তার বেশি সংস্করণ না থাকে, তাহলে এটি আপডেট করুন:
    npm update -g firebase-tools
    
  3. যদি আপনার Firebase CLI ইনস্টল না থাকে, তাহলে এটি ইনস্টল করুন:
    npm install -g firebase-tools
    

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

ফায়ারবেসে লগ ইন করুন

  1. আপনার টার্মিনালে, codelab-gemini-api-extensions ফোল্ডারে যান এবং Firebase এ লগ ইন করুন:
    cd codelab-gemini-api-extensions
    firebase login
    
    যদি আপনার টার্মিনালে লেখা থাকে যে আপনি ইতিমধ্যেই Firebase-এ লগ ইন করেছেন, তাহলে আপনি এই কোডল্যাবের "Set up your Firebase project" বিভাগে যেতে পারেন।
  2. আপনার টার্মিনালে, আপনি Firebase কে ডেটা সংগ্রহ করতে চান কিনা তার উপর নির্ভর করে, Y অথবা N লিখুন। (এই কোডল্যাবের জন্য যেকোনো বিকল্প কাজ করে)
  3. আপনার ব্রাউজারে, আপনার Google অ্যাকাউন্ট নির্বাচন করুন এবং অনুমতি দিন ক্লিক করুন।

৪. আপনার ফায়ারবেস প্রকল্প সেট আপ করুন

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

এই বিভাগের সমস্ত ধাপ Firebase কনসোলে সম্পাদিত হয়।

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

  1. আগের ধাপে যে Google অ্যাকাউন্টটি ব্যবহার করেছিলেন, সেই অ্যাকাউন্টটি ব্যবহার করে Firebase কনসোলে সাইন ইন করুন।
  2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, AI Extensions Codelab )।
  3. চালিয়ে যান ক্লিক করুন।
  4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
  5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
  6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন
  7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

Firebase এক্সটেনশন (এবং তাদের অন্তর্নিহিত ক্লাউড পরিষেবা) এবং Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি Cloud Billing অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

আরও মনে রাখবেন যে আপনার Firebase প্রকল্পে বিলিং সক্ষম থাকায়, এক্সটেনশনটি Gemini API-তে যে কল করবে তার জন্য আপনাকে চার্জ করা হবে (আপনি যে সরবরাহকারীই বেছে নিন না কেন, Google AI বা Vertex AI)। Google AI এবং Vertex AI- এর মূল্য সম্পর্কে আরও জানুন।

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

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

আপনার Firebase প্রকল্পে একটি ওয়েব অ্যাপ যোগ করুন

  1. আপনার Firebase প্রকল্পের প্রজেক্ট ওভারভিউ স্ক্রিনে নেভিগেট করুন, এবং তারপর ক্লিক করুন af10a034ec77938d.png ওয়েবফায়ারবেস প্রকল্পের শীর্ষে থাকা ওয়েব বোতামটি
  2. অ্যাপ ডাকনাম টেক্সট বক্সে, একটি স্মরণীয় অ্যাপ ডাকনাম লিখুন, যেমন My AI Extensions
  3. অ্যাপ নিবন্ধন করুন > পরবর্তী > পরবর্তী > কনসোলে চালিয়ে যান ক্লিক করুন।
    আপনি ওয়েব অ্যাপ ফ্লোতে "হোস্টিং" সম্পর্কিত সমস্ত ধাপ এড়িয়ে যেতে পারেন কারণ এই কোডল্যাবে পরে আপনাকে ঐচ্ছিকভাবে একটি হোস্টিং পরিষেবা সেট আপ করতে হবে।

Firebase প্রকল্পে তৈরি ওয়েব অ্যাপ

দারুন! আপনি এখন আপনার নতুন Firebase প্রকল্পে একটি ওয়েব অ্যাপ নিবন্ধিত করেছেন।

ফায়ারবেস প্রমাণীকরণ সেট আপ করুন

  1. বাম-নেভিগেশন ফলক ব্যবহার করে প্রমাণীকরণে নেভিগেট করুন।
  2. শুরু করুন ক্লিক করুন।
  3. অতিরিক্ত প্রদানকারী কলামে, Google > সক্ষম করুন এ ক্লিক করুন। 232b8f0336c25585.png সম্পর্কে
  4. প্রকল্পের টেক্সট বক্সের জন্য পাবলিক-ফেসিং নামে , একটি দরকারী নাম লিখুন, যেমন My AI Extensions Codelab
  5. প্রকল্পের জন্য সহায়তা ইমেল মেনুতে, আপনার ইমেল ঠিকানা নির্বাচন করুন।
  6. সংরক্ষণ করুন ক্লিক করুন।

37e54f32f8133be3.png সম্পর্কে

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

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

Firebase এর জন্য ক্লাউড স্টোরেজ সেট আপ করুন

  1. Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Storage নির্বাচন করুন।
  2. শুরু করুন ক্লিক করুন।
  3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি অবস্থান নির্বাচন করুন।
    US-WEST1 , US-CENTRAL1 , এবং US-EAST1 এর বাকেটগুলি Google ক্লাউড স্টোরেজের জন্য "সর্বদা বিনামূল্যে" স্তরের সুবিধা নিতে পারে। অন্যান্য সমস্ত অবস্থানের বাকেটগুলি Google ক্লাউড স্টোরেজের মূল্য এবং ব্যবহার অনুসরণ করে।
  4. পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
    এই কোডল্যাবে পরে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি সুরক্ষা নিয়ম যুক্ত করবেন। আপনার স্টোরেজ বাকেটের জন্য সুরক্ষা নিয়ম যুক্ত না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না
  5. তৈরি করুন ক্লিক করুন।

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

৫. "জেমিনি এপিআই দিয়ে চ্যাটবট তৈরি করুন" এক্সটেনশনটি সেট আপ করুন।

"জেমিনি এপিআই দিয়ে চ্যাটবট তৈরি করুন" এক্সটেনশনটি ইনস্টল করুন।

  1. "জেমিনি API দিয়ে চ্যাটবট তৈরি করুন" এক্সটেনশনে নেভিগেট করুন।
  2. Firebase কনসোলে Install এ ক্লিক করুন।
  3. আপনার Firebase প্রকল্পটি নির্বাচন করুন, এবং তারপর Next এ ক্লিক করুন।
  4. "Review APIs enabled and resources created" বিভাগে, আপনার কাছে প্রস্তাবিত যেকোনো পরিষেবার পাশে "Enable" এ ক্লিক করুন, এবং তারপর " Next" এ ক্লিক করুন। 8e58e717da8182a2.png সম্পর্কে
  5. আপনার কাছে প্রস্তাবিত যেকোনো অনুমতির জন্য, Grant নির্বাচন করুন, এবং তারপর Next এ ক্লিক করুন। 269e1c3c4123425c.png সম্পর্কে
  6. এক্সটেনশনটি কনফিগার করুন:
    1. জেমিনি এপিআই প্রোভাইডার মেনুতে, আপনি গুগল এআই থেকে জেমিনি এপিআই ব্যবহার করতে চান নাকি ভার্টেক্স এআই ব্যবহার করতে চান তা নির্বাচন করুন। ফায়ারবেস ব্যবহারকারী ডেভেলপারদের জন্য, আমরা Vertex AI ব্যবহার করার পরামর্শ দিচ্ছি।
    2. ফায়ারস্টোর কালেকশন পাথ টেক্সট বক্সে, লিখুন: users/{uid}/discussion/{discussionId}/messages
      এই কোডল্যাবের ভবিষ্যতের ধাপগুলিতে, এই সংগ্রহে নথি যোগ করলে এক্সটেনশনটি জেমিনি API কল করার জন্য ট্রিগার হবে।
    3. ক্লাউড ফাংশন লোকেশন মেনুতে, আপনার পছন্দের লোকেশন নির্বাচন করুন (যেমন Iowa (us-central1) অথবা আপনার ফায়ারস্টোর ডাটাবেসের জন্য পূর্বে নির্দিষ্ট করা লোকেশন)।
    4. অন্যান্য সমস্ত মানকে তাদের ডিফল্ট হিসাবে ছেড়ে দিন।
  7. ইন্সটল এক্সটেনশনে ক্লিক করুন এবং এক্সটেনশনটি ইন্সটল হওয়ার জন্য অপেক্ষা করুন।

"জেমিনি এপিআই দিয়ে চ্যাটবট তৈরি করুন" এক্সটেনশনটি ব্যবহার করে দেখুন।

যদিও এই কোডল্যাবের লক্ষ্য হল একটি ওয়েব অ্যাপের মাধ্যমে "Build Chatbot with the Gemini API" এক্সটেনশনের সাথে ইন্টারঅ্যাক্ট করা, তবে প্রথমে Firebase কনসোলে এটি ব্যবহার করে এক্সটেনশনটি কীভাবে কাজ করে তা শেখা সহায়ক।

যখনই সংগ্রহের অধীনে একটি Firestore ডকুমেন্ট তৈরি করা হয় তখন এক্সটেনশনটি ট্রিগার হয় users/{uid}/discussion/{discussionId}/messages , যা আপনি Firebase কনসোলে করতে পারেন।

  1. Firebase কনসোলে, Firestore এ নেভিগেট করুন, এবং তারপর ক্লিক করুন 63873f95ceaf00ac.png সম্পর্কে প্রথম কলামের মধ্যেই সংগ্রহ শুরু করুন
  2. সংগ্রহ আইডি টেক্সট বক্সে, users লিখুন, এবং তারপর পরবর্তী ক্লিক করুন।
  3. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন, এবং তারপর সংরক্ষণ করুন ক্লিক করুন।
  4. users সংগ্রহে, ক্লিক করুন ডিসেম্বর৩১৮৮dd২d১aa০২.png সংগ্রহ শুরু করুনফায়ারস্টোরে একটি নতুন সংগ্রহ শুরু করুন
  5. সংগ্রহ আইডি টেক্সট বক্সে, messages লিখুন, এবং তারপর পরবর্তী ক্লিক করুন।
    1. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন।
    2. ফিল্ড টেক্সট বক্সে, prompt লিখুন
    3. মান টেক্সট বক্সে, Tell me 5 random fruits লিখুন
  6. সংরক্ষণ করুন ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন।

যখন আপনি এই ডকুমেন্টটি যোগ করলেন, তখন এটি জেমিনি API কল করার জন্য এক্সটেনশনটিকে ট্রিগার করল। আপনি যে ডকুমেন্টটি messages সংগ্রহে যোগ করেছেন তাতে এখন কেবল আপনার prompt নয়, বরং আপনার প্রশ্নের মডেলের response অন্তর্ভুক্ত রয়েছে।

একটি ফায়ারস্টোর ডকুমেন্টে একটি ভাষা মডেল প্রতিক্রিয়া

messages সংগ্রহে আরেকটি ডকুমেন্ট যোগ করে এক্সটেনশনটি আবার ট্রিগার করুন:

  1. messages সংগ্রহে, ক্লিক করুন ডিসেম্বর৩১৮৮dd২d১aa০২.png ডকুমেন্ট যোগ করুন
  2. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন।
  3. ফিল্ড টেক্সট বক্সে, prompt লিখুন
  4. Value টেক্সট বক্সে, And now, vegetables লিখুন।
  5. সংরক্ষণ করুন এ ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন। আপনি যে ডকুমেন্টটি messages সংগ্রহে যোগ করেছেন তাতে এখন আপনার প্রশ্নের response অন্তর্ভুক্ত রয়েছে।

    এই প্রতিক্রিয়া তৈরি করার সময়, অন্তর্নিহিত জেমিনি মডেলটি আপনার পূর্ববর্তী প্রশ্নের ঐতিহাসিক জ্ঞান ব্যবহার করেছে।

৬. ওয়েব অ্যাপ সেট আপ করুন

ওয়েব অ্যাপটি চালানোর জন্য, আপনাকে আপনার টার্মিনালে কমান্ড চালাতে হবে এবং আপনার কোড এডিটরের মধ্যে কোড যোগ করতে হবে।

আপনার Firebase প্রকল্পের বিপরীতে চালানোর জন্য Firebase CLI সেট আপ করুন।

আপনার টার্মিনালে, নিম্নলিখিত কমান্ডটি চালিয়ে CLI কে আপনার Firebase প্রকল্পটি ব্যবহার করতে বলুন:

firebase use YOUR_PROJECT_ID

ফায়ারস্টোর এবং ক্লাউড স্টোরেজের জন্য নিরাপত্তা নিয়ম স্থাপন করুন

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

  1. নিরাপত্তা নিয়ম স্থাপন করতে, আপনার টার্মিনালে এই কমান্ডটি চালান:
    firebase deploy --only firestore:rules,storage
    
  2. যদি জিজ্ঞাসা করা হয় যে ক্লাউড স্টোরেজকে ক্রস-সার্ভিস নিয়ম ব্যবহার করার জন্য IAM ভূমিকা প্রদান করা হবে কিনা, তাহলে Y অথবা N লিখুন। (এই কোডল্যাবের জন্য যেকোনো বিকল্প কাজ করে)

আপনার ওয়েব অ্যাপটিকে আপনার Firebase প্রোজেক্টের সাথে সংযুক্ত করুন

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

  1. আপনার Firebase কনফিগারেশনটি পান:
    1. Firebase কনসোলে, আপনার Firebase প্রকল্পের মধ্যে প্রকল্প সেটিংসে নেভিগেট করুন।
    2. আপনার অ্যাপস বিভাগে স্ক্রোল করুন এবং আপনার নিবন্ধিত ওয়েব অ্যাপটি নির্বাচন করুন।
    3. SDK সেটআপ এবং কনফিগারেশন প্যানে, firebaseConfig const সহ সম্পূর্ণ initializeApp কোডটি কপি করুন।
  2. আপনার ওয়েব অ্যাপের কোডবেসে আপনার Firebase কনফিগারেশন যোগ করুন:
    1. আপনার কোড এডিটরে, src/lib/firebase/firebase.config.js ফাইলটি খুলুন।
    2. ফাইলের সবগুলো সিলেক্ট করুন এবং আপনার কপি করা কোডটি দিয়ে প্রতিস্থাপন করুন।
    3. ফাইলটি সংরক্ষণ করুন।

আপনার ব্রাউজারে ওয়েব অ্যাপটির প্রিভিউ দেখুন

  1. আপনার টার্মিনালে, নির্ভরতা ইনস্টল করুন এবং তারপর ওয়েব অ্যাপটি চালান:
    npm install
    npm run dev
    
  2. আপনার ব্রাউজারে, ওয়েব অ্যাপটি দেখতে স্থানীয়ভাবে হোস্ট করা হোস্টিং URL-এ নেভিগেট করুন। উদাহরণস্বরূপ, বেশিরভাগ ক্ষেত্রে, URLটি http://localhost:3000/ বা অনুরূপ কিছু।

ওয়েব অ্যাপের চ্যাটবট ব্যবহার করুন

  1. আপনার ব্রাউজারে, স্থানীয়ভাবে চলমান Friendly Conf ওয়েব অ্যাপ সহ ট্যাবে ফিরে যান।
  2. "Google দিয়ে সাইন ইন করুন" এ ক্লিক করুন, এবং প্রয়োজনে আপনার Google অ্যাকাউন্ট নির্বাচন করুন।
  3. সাইন ইন করার পর, আপনি একটি খালি চ্যাট উইন্ডো দেখতে পাবেন।
  4. একটি শুভেচ্ছা (যেমন hi ) টাইপ করুন, এবং তারপর Send এ ক্লিক করুন।
  5. চ্যাটবট সাড়া দেওয়ার জন্য কয়েক সেকেন্ড অপেক্ষা করুন।

অ্যাপের চ্যাটবটটি একটি সাধারণ প্রতিক্রিয়ার সাথে সাড়া দেয়।

1929b9f465053ae7.png সম্পর্কে

অ্যাপটির জন্য চ্যাটবটকে বিশেষায়িত করুন

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

  1. আপনার ব্রাউজারের ওয়েব অ্যাপে, লাল "x" বোতামে (চ্যাট ইতিহাসের বার্তার পাশে) ক্লিক করে কথোপকথনটি সাফ করুন।
  2. আপনার কোড এডিটরে, src/app/page.tsx ফাইলটি খুলুন।
  3. নিচে স্ক্রোল করুন এবং ৯৩ নম্বর লাইনে বা তার কাছাকাছি কোডটি প্রতিস্থাপন করুন যেখানে লেখা আছে prompt: userMsg নিম্নলিখিতটি দিয়ে:
    prompt: preparePrompt(userMsg, messages),
  4. ফাইলটি সংরক্ষণ করুন।
  5. আপনার ব্রাউজারে চলমান ওয়েব অ্যাপে ফিরে যান।
  6. আবার, একটি শুভেচ্ছা টাইপ করুন (যেমন hi ), এবং তারপর Send এ ক্লিক করুন।
  7. চ্যাটবট সাড়া দেওয়ার জন্য কয়েক সেকেন্ড অপেক্ষা করুন।

6fbe972296fcb4d8.png সম্পর্কে

চ্যাটবটটি src/app/lib/context.md এ প্রদত্ত প্রেক্ষাপট অনুসারে জ্ঞানের সাথে সাড়া দেয়। যদিও আপনি কোনও নির্দিষ্ট অনুরোধ টাইপ করেননি, অন্তর্নিহিত জেমিনি মডেলটি এই প্রেক্ষাপটের পাশাপাশি বর্তমান তারিখ/সময়ের উপর ভিত্তি করে একটি ব্যক্তিগতকৃত সুপারিশ তৈরি করে। এখন আপনি পরবর্তী প্রশ্নগুলি নির্দিষ্ট করতে পারেন এবং আরও গভীরে যেতে পারেন।

এই বর্ধিত প্রসঙ্গটি চ্যাটবটের জন্য গুরুত্বপূর্ণ, তবে আপনার এটি ওয়েব অ্যাপের ব্যবহারকারীকে দেখানো উচিত নয়। এটি কীভাবে লুকাবেন তা এখানে:

  1. আপনার কোড এডিটরে, src/app/page.tsx ফাইলটি খুলুন।
  2. নিচে স্ক্রোল করুন এবং ৫৬ নম্বর লাইনে বা তার কাছাকাছি কোডটি প্রতিস্থাপন করুন যেখানে লেখা আছে ...doc.data(), নিম্নলিখিতটি দিয়ে:
    ...prepareMessage(doc.data()),
  3. ফাইলটি সংরক্ষণ করুন।
  4. আপনার ব্রাউজারে চলমান ওয়েব অ্যাপে ফিরে যান।
  5. পৃষ্ঠাটি পুনরায় লোড করুন।

আপনি ঐতিহাসিক প্রেক্ষাপটের সাথে চ্যাটবটের সাথে কথোপকথনের ক্ষমতাটিও চেষ্টা করে দেখতে পারেন:

  1. "একটি বার্তা টাইপ করুন " টেক্সট বক্সে, একটি প্রশ্ন জিজ্ঞাসা করুন: Any other interesting talks about AI? চ্যাটবটটি একটি উত্তর দেবে।
  2. "একটি বার্তা টাইপ করুন" টেক্সট বক্সে, পূর্ববর্তী প্রশ্নের সাথে সম্পর্কিত একটি পরবর্তী প্রশ্ন জিজ্ঞাসা করুন: Give me a few more details about the last one.

চ্যাটবট ঐতিহাসিক জ্ঞান দিয়ে সাড়া দেয়। যেহেতু চ্যাট ইতিহাস এখন প্রেক্ষাপটের অংশ, তাই চ্যাটবট পরবর্তী প্রশ্নগুলি বোঝে।

৭. "জেমিনি এপিআই সহ মাল্টিমোডাল টাস্ক" এক্সটেনশনটি সেট আপ করুন।

"মাল্টিমোডাল টাস্ক উইথ দ্য জেমিনি এপিআই" এক্সটেনশনটি জেমিনি এপিআইকে মাল্টিমোডাল প্রম্পট সহ কল ​​করে যার মধ্যে একটি টেক্সট প্রম্পট এবং একটি সমর্থিত ফাইল ইউআরএল বা ক্লাউড স্টোরেজ ইউআরএল থাকে (মনে রাখবেন যে গুগল এআই জেমিনি এপিআইও তার অন্তর্নিহিত ফাইল ইউআরএল অবকাঠামো হিসাবে একটি ক্লাউড স্টোরেজ ইউআরএল ব্যবহার করে)। এক্সটেনশনটি টেক্সট প্রম্পট কাস্টমাইজ করার জন্য ক্লাউড ফায়ারস্টোর ডকুমেন্ট থেকে মান প্রতিস্থাপন করার জন্য হ্যান্ডেলবার ভেরিয়েবলগুলিকেও সমর্থন করে।

আপনার অ্যাপে, যখনই আপনি একটি ক্লাউড স্টোরেজ বাকেটে একটি ছবি আপলোড করবেন, তখন আপনি একটি URL তৈরি করতে পারবেন এবং সেই URLটি একটি নতুন ক্লাউড ফায়ারস্টোর ডকুমেন্টে যুক্ত করতে পারবেন - এইভাবে এক্সটেনশনটি একটি মাল্টিমোডাল প্রম্পট তৈরি করতে এবং জেমিনি API কল করতে ট্রিগার করবে। এই কোডল্যাবের সোর্স কোডে, আমরা ইতিমধ্যেই একটি ছবি আপলোড করার এবং একটি ফায়ারস্টোর ডকুমেন্টে URL লেখার কোড প্রদান করেছি।

"জেমিনি এপিআই সহ মাল্টিমোডাল টাস্ক" এক্সটেনশনটি ইনস্টল করুন।

  1. "জেমিনি API সহ মাল্টিমোডাল টাস্ক" এক্সটেনশনে নেভিগেট করুন"
  2. Firebase কনসোলে Install এ ক্লিক করুন।
  3. আপনার Firebase প্রকল্পটি নির্বাচন করুন।
  4. পরবর্তী > পরবর্তী > পরবর্তী ক্লিক করুন, যতক্ষণ না আপনি কনফিগার এক্সটেনশন বিভাগে পৌঁছান।
    1. জেমিনি এপিআই প্রোভাইডার মেনুতে, আপনি গুগল এআই থেকে জেমিনি এপিআই ব্যবহার করতে চান নাকি ভার্টেক্স এআই ব্যবহার করতে চান তা নির্বাচন করুন। ফায়ারবেস ব্যবহারকারী ডেভেলপারদের জন্য, আমরা Vertex AI ব্যবহার করার পরামর্শ দিচ্ছি।
    2. ফায়ারস্টোর কালেকশন পাথ টেক্সট বক্সে, লিখুন: gallery
    3. প্রম্পট টেক্সট বক্সে, লিখুন: Please describe the provided image; if there is no image, say "no image"
    4. চিত্র ক্ষেত্রের পাঠ্য বাক্সে, লিখুন: image
    5. ক্লাউড ফাংশন লোকেশন মেনুতে, আপনার পছন্দের লোকেশন নির্বাচন করুন (যেমন Iowa (us-central1) অথবা আপনার ফায়ারস্টোর ডাটাবেসের জন্য পূর্বে নির্দিষ্ট করা লোকেশন)।
    6. অন্যান্য সমস্ত মানকে তাদের ডিফল্ট হিসাবে ছেড়ে দিন।
  5. ইন্সটল এক্সটেনশনে ক্লিক করুন এবং এক্সটেনশনটি ইন্সটল হওয়ার জন্য অপেক্ষা করুন।

"জেমিনি এপিআই সহ মাল্টিমোডাল টাস্ক" এক্সটেনশনটি ব্যবহার করে দেখুন।

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

যখনই collection users/{uid}/gallery এর অধীনে একটি Firestore ডকুমেন্ট তৈরি করা হয় তখন এক্সটেনশনটি ট্রিগার হয়, যা আপনি Firebase কনসোলে করতে পারেন। এক্সটেনশনটি তারপর Cloud Firestore ডকুমেন্টে Cloud Storage ইমেজ URL নেয় এবং Gemini API-তে কল করার সময় মাল্টিমোডাল প্রম্পটের অংশ হিসাবে এটি পাস করে।

প্রথমে, একটি ক্লাউড স্টোরেজ বাকেটে একটি ছবি আপলোড করুন:

  1. আপনার Firebase প্রকল্পের মধ্যে স্টোরেজে নেভিগেট করুন।
  2. ক্লিক করুন 17eeb1712828b84f.png সম্পর্কে ফোল্ডার তৈরি করুন
  3. ফোল্ডারের নাম টেক্সট বক্সে, gallery লিখুন ba63b07a7a04f055.png সম্পর্কে
  4. ফোল্ডার যোগ করুন ক্লিক করুন।
  5. gallery ফোল্ডারে, ফাইল আপলোড করুন এ ক্লিক করুন।
  6. আপলোড করার জন্য একটি JPEG ছবি ফাইল নির্বাচন করুন।

এরপর, একটি Firestore ডকুমেন্টে (যা এক্সটেনশনের ট্রিগার) ছবির জন্য ক্লাউড স্টোরেজ URL যোগ করুন:

  1. আপনার Firebase প্রকল্পের মধ্যে Firestore- এ নেভিগেট করুন।
  2. ক্লিক করুন 63873f95ceaf00ac.png সম্পর্কে প্রথম কলামের মধ্যেই সংগ্রহ শুরু করুন
  3. সংগ্রহ আইডি টেক্সট বক্সে, লিখুন: gallery , এবং তারপর Next এ ক্লিক করুন।
  4. সংগ্রহে একটি নথি যোগ করুন:
    1. ডকুমেন্ট আইডি টেক্সট বক্সে, অটো-আইডি ক্লিক করুন।
    2. ফিল্ড টেক্সট বক্সে, লিখুন: imageভ্যালু বক্সে আপনার আপলোড করা ছবির স্টোরেজ লোকেশন uri লিখুন। 3af50c4266c2a735.png সম্পর্কে
  5. ক্ষেত্র যোগ করুন ক্লিক করুন।
  6. ফিল্ড টেক্সট বক্সে, লিখুন: publishedটাইপ বক্সে boolean নির্বাচন করুন। ভ্যালু বক্সে true নির্বাচন করুন। 9cacd855ff370a9f.png সম্পর্কে
  7. সংরক্ষণ করুন ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন।

gallery সংগ্রহে এখন একটি নথি রয়েছে যাতে আপনার প্রশ্নের উত্তর রয়েছে।

  1. আপনার ব্রাউজারে, স্থানীয়ভাবে চলমান Friendly Conf ওয়েব অ্যাপ সহ ট্যাবে ফিরে যান।
  2. গ্যালারি নেভিগেশন ট্যাবে ক্লিক করুন।
  3. আপনি আপলোড করা ছবি এবং AI জেনারেটেড বর্ণনার একটি গ্যালারি দেখতে পাবেন। এতে আপনার স্টোরেজ বাকেটের gallery ফোল্ডারে আগে আপলোড করা ছবিটি থাকা উচিত।
  4. " আপলোড " বোতামে ক্লিক করুন এবং অন্য একটি JPEG ছবি নির্বাচন করুন।
  5. ছবিটি গ্যালারিতে প্রদর্শিত হওয়ার জন্য কয়েক সেকেন্ড অপেক্ষা করুন। কয়েক মুহূর্ত পরে, নতুন আপলোড করা ছবির জন্য AI জেনারেট করা বিবরণও প্রদর্শিত হবে।

এটি কীভাবে বাস্তবায়ন করা হয়েছে তার কোডটি বুঝতে চাইলে, ওয়েব অ্যাপের কোডবেসে src/app/gallery/page.tsx দেখুন।

৮. বোনাস: আপনার অ্যাপ্লিকেশনটি ব্যবহার করুন

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

  • বিকল্প ১: ফায়ারবেস হোস্টিং - যদি আপনি নিজের GitHub রেপো তৈরি না করার সিদ্ধান্ত নেন (এবং শুধুমাত্র আপনার মেশিনে স্থানীয়ভাবে আপনার সোর্স কোড সংরক্ষণ করেন) তাহলে এই বিকল্পটি ব্যবহার করুন।
  • বিকল্প ২: ফায়ারবেস অ্যাপ হোস্টিং - আপনার নিজস্ব গিটহাব রেপোতে যেকোনো সময় পরিবর্তন আনতে চাইলে এই বিকল্পটি ব্যবহার করুন। এই নতুন ফায়ারবেস পরিষেবাটি বিশেষভাবে গতিশীল Next.js এবং Angular অ্যাপ্লিকেশনের চাহিদা অনুসারে তৈরি করা হয়েছে।

বিকল্প ১: ফায়ারবেস হোস্টিং ব্যবহার করে স্থাপন করুন

আপনি যদি নিজের GitHub রেপো তৈরি না করার সিদ্ধান্ত নেন (এবং শুধুমাত্র আপনার মেশিনে স্থানীয়ভাবে আপনার সোর্স কোড সংরক্ষণ করেন) তাহলে এই বিকল্পটি ব্যবহার করুন।

  1. আপনার টার্মিনালে, এই কমান্ডগুলি চালিয়ে Firebase Hosting আরম্ভ করুন:
    firebase experiments:enable webframeworks
    firebase init hosting
    
  2. Detected an existing Next.js codebase in your current directory, should we use this? প্রম্পটের জন্য, Y টিপুন।
  3. প্রম্পটের জন্য: In which region would you like to host server-side content, if applicable? , ডিফল্ট অবস্থান অথবা এই কোডল্যাবে আগে ব্যবহৃত অবস্থান নির্বাচন করুন। তারপর Enter টিপুন (অথবা macOS-এ return )।
  4. Set up automatic builds and deploys with GitHub? প্রম্পটের জন্য, N টিপুন।
  5. এই কমান্ডটি চালিয়ে আপনার ওয়েব অ্যাপটি হোস্টিং-এ স্থাপন করুন:
    firebase deploy --only hosting
    

সব শেষ! যদি আপনি আপনার অ্যাপটি আপডেট করেন এবং সেই নতুন সংস্করণটি স্থাপন করতে চান, তাহলে কেবল firebase deploy --only hosting পুনরায় চালান এবং Firebase Hosting আপনার অ্যাপটি তৈরি এবং পুনরায় স্থাপন করবে।

বিকল্প ২: ফায়ারবেস অ্যাপ হোস্টিং ব্যবহার করে স্থাপন করুন

আপনার নিজস্ব GitHub রেপোতে যেকোনো সময় পরিবর্তনগুলি পুশ করার জন্য স্বয়ংক্রিয় স্থাপনা চাইলে এই বিকল্পটি ব্যবহার করুন।

  1. আপনার পরিবর্তনগুলি GitHub-এ জমা দিন।
  2. Firebase কনসোলে, আপনার Firebase প্রকল্পের মধ্যে App Hosting- এ নেভিগেট করুন।
  3. শুরু করুন > GitHub-এ সংযোগ করুন ক্লিক করুন।
  4. আপনার GitHub অ্যাকাউন্ট এবং রিপোজিটরি নির্বাচন করুন। পরবর্তী ক্লিক করুন।
  5. ডিপ্লয়মেন্ট সেটিং > রুট ডিরেক্টরিতে , আপনার সোর্স কোড সহ ফোল্ডারের নাম লিখুন (যদি আপনার package.json আপনার রিপোজিটরির রুট ডিরেক্টরিতে না থাকে)।
  6. লাইভ শাখার জন্য, আপনার GitHub রেপোর প্রধান শাখাটি নির্বাচন করুন। পরবর্তী ক্লিক করুন।
  7. আপনার ব্যাকএন্ডের জন্য একটি আইডি লিখুন (উদাহরণস্বরূপ, chatbot )।
  8. Finish and Deploy এ ক্লিক করুন।

আপনার নতুন স্থাপনা প্রস্তুত হতে কয়েক মিনিট সময় লাগবে। আপনি Firebase কনসোলের অ্যাপ হোস্টিং বিভাগে স্থাপনার অবস্থা পরীক্ষা করতে পারেন।

এখন থেকে, আপনি যখনই আপনার GitHub রেপোতে কোনও পরিবর্তন আনবেন, তখনই Firebase অ্যাপ হোস্টিং স্বয়ংক্রিয়ভাবে আপনার অ্যাপ তৈরি এবং স্থাপন করবে।

9. উপসংহার

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

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

আপনি Firebase কনসোল ব্যবহার করে বিভিন্ন Firebase এক্সটেনশন কনফিগার এবং ইনস্টল করেছেন যা জেনারেটিভ AI ব্যবহার করে । Firebase এক্সটেনশন ব্যবহার করা সুবিধাজনক কারণ আপনাকে Google ক্লাউড পরিষেবাগুলির সাথে প্রমাণীকরণ পরিচালনা করার জন্য বা Firestore এবং Google ক্লাউড পরিষেবা এবং API গুলি শুনতে এবং ইন্টারঅ্যাক্ট করার জন্য ব্যাকএন্ড ক্লাউড ফাংশন লজিক সম্পর্কে প্রচুর বয়লারপ্লেট কোড সম্পর্কে জানতে এবং লিখতে হবে না।

Firebase কনসোল ব্যবহার করে এক্সটেনশনগুলি চেষ্টা করা হচ্ছে

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

একটি AI-চালিত ওয়েব অ্যাপ তৈরি করা

আপনি একটি AI-চালিত ওয়েব অ্যাপ তৈরি করেছেন যা Firebase এক্সটেনশন ব্যবহার করে জেমিনি মডেলের মাত্র কয়েকটি ক্ষমতা অ্যাক্সেস করে।

ওয়েব অ্যাপে, আপনি "Gemini API সহ Chatbot" এক্সটেনশন ব্যবহার করে ব্যবহারকারীকে একটি ইন্টারেক্টিভ চ্যাট ইন্টারফেস প্রদান করেন, যাতে কথোপকথনে অ্যাপ-নির্দিষ্ট এবং ঐতিহাসিক প্রেক্ষাপট অন্তর্ভুক্ত থাকে - যেখানে প্রতিটি বার্তা একটি Firestore নথিতে সংরক্ষণ করা হয় যা একটি নির্দিষ্ট ব্যবহারকারীর জন্য উন্মুক্ত।

আপলোড করা ছবির জন্য স্বয়ংক্রিয়ভাবে ছবির বিবরণ তৈরি করতে ওয়েব অ্যাপটি "জেমিনি এপিআই সহ মাল্টিমোডাল টাস্ক" এক্সটেনশনটিও ব্যবহার করেছে।

পরবর্তী পদক্ষেপ