একটি বিদ্যমান অ্যাপ্লিকেশন অন্বেষণ এবং উন্নত করতে কিভাবে Gemini ব্যবহার করবেন

1. ওভারভিউ

একটি বিদ্যমান API ব্যাকএন্ডের উপরে একটি ক্লায়েন্ট অ্যাপ্লিকেশন তৈরি করতে কিভাবে Gemini ব্যবহার করতে হয় এই কোডল্যাবটি প্রদর্শন করবে।

যা শিখবেন

এই ল্যাবটি একটি বিদ্যমান অ্যাপ্লিকেশনের সাথে মিথুন ব্যবহার করে চিত্রিত করার উদ্দেশ্যে। এই ল্যাবে, আপনি নিম্নলিখিতগুলি কীভাবে করবেন তা শিখবেন:

• এআই/এমএল ইমেজ প্রসেসিং জাম্প স্টার্ট সলিউশন স্থাপন করুন
• API অ্যাপ্লিকেশন অন্বেষণ করতে Gemini ব্যবহার করুন
• API অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট তৈরি করতে Gemini ব্যবহার করুন

সেটআপ - একটি নতুন প্রকল্প তৈরি করুন

আপনার প্রতিষ্ঠানের নীতির উপর নির্ভর করে, আপনার কাছে এই সমাধানটি সঠিকভাবে স্থাপন করার ক্ষমতা নাও থাকতে পারে।

সুপারিশ: একটি অ্যাকাউন্ট ব্যবহার করুন যেখানে আপনার সম্পূর্ণ অনুমতি রয়েছে (যেমন একটি ব্যক্তিগত অ্যাকাউন্ট) একটি কোম্পানি বা স্কুল অ্যাকাউন্টের পরিবর্তে

দ্রষ্টব্য: আপনি যদি সম্প্রতি একটি প্রকল্প তৈরি করেন যেখানে আপনার সম্পূর্ণ অনুমতি রয়েছে এবং আপনি ইতিমধ্যেই সেই প্রকল্পে Gemini API সক্ষম করেছেন, তাহলে আপনি সেই প্রকল্পটি ব্যবহার করা চালিয়ে যেতে পারেন এবং এই পদক্ষেপটি এড়িয়ে যেতে পারেন। উদাহরণস্বরূপ, আপনি যদি সম্প্রতি অন্য একটি জেমিনি কোডল্যাব সম্পূর্ণ করে থাকেন, তাহলে আপনি এই ধাপটি এড়িয়ে যেতে পারেন।

1. গুগল ক্লাউড কনসোলে যান
2. বর্তমান প্রকল্প ড্রপডাউন ক্লিক করুন.
3. নতুন প্রকল্প ক্লিক করুন
4. একটি প্রকল্পের নাম যোগ করুন এবং তৈরি করুন ক্লিক করুন
   • সুপারিশ: একটি অনন্য প্রকল্পের নাম ব্যবহার করুন যাতে Project name এবং Project ID একই হয়

2. জাম্প স্টার্ট সমাধান স্থাপন করুন

জাম্প স্টার্ট সলিউশন হল Google ক্লাউড থেকে তৈরি পূর্ব-নির্মিত সমাধান টেমপ্লেট। এই ল্যাবটি একটি জাম্প স্টার্ট সলিউশন ব্যবহার করে তা প্রদর্শন করে যে মিথুন কীভাবে একটি পূর্ব-বিদ্যমান অ্যাপ্লিকেশনকে উন্নত করতে সাহায্য করতে পারে।

1. এআই/এমএল ইমেজ প্রসেসিং জাম্প স্টার্ট সলিউশন বিশদ পৃষ্ঠায় যান
   • হ্যামবার্গার মেনুতে ক্লিক করুন
   • পণ্য ও সমাধান সাবমেনুতে, জাম্প স্টার্ট সলিউশনে ক্লিক করুন
   • ক্লাউড ফাংশনে এআই/এমএল ইমেজ প্রসেসিং-এ ক্লিক করুন
2. ডিপ্লোয় ক্লিক করুন
   • আপনার প্রকল্পে বিলিং সক্ষম না থাকলে, বিলিং সক্ষম করুন ৷
   • প্রকল্পের নাম নিশ্চিত করুন এবং চালিয়ে যান ক্লিক করুন
   • অঞ্চল হিসাবে us-central1 (Iowa) নির্বাচন করুন।
   • অন্য ইনপুট জন্য অনুরোধ করা হলে, ডিফল্ট স্বীকার করুন.
   • ডিপ্লোয় ক্লিক করুন।
   • এটি 15 মিনিট পর্যন্ত সময় নিতে পারে৷
   • আপনাকে কোনো পরিবর্তন করতে হবে না, তবে নির্দ্বিধায় জাম্প স্টার্ট সলিউশন ডিপ্লয়মেন্ট অন্বেষণ করুন।

সমস্যা সমাধান

1. সমস্যা: আপনি একটি ত্রুটি দেখতে পাচ্ছেন যা বলে Partial deployment. ?
   • সমাধান: দুর্ভাগ্যবশত, এর অর্থ হল আপনার সম্ভবত স্থাপনাটি মুছে ফেলা উচিত এবং আবার শুরু করা উচিত। ডিলিট ডিপ্লয়মেন্ট বলে একটি বোতাম থাকা উচিত। সেই বোতামটি ক্লিক করুন এবং তারপরে জাম্প স্টার্ট সলিউশনটি পুনরায় স্থাপন করুন।

3. মিথুন সক্রিয় করুন

আপনার কোড সম্পাদনা পরিবেশ সেট আপ করুন এবং মিথুন সক্ষম করুন৷

1. ক্লাউড শেল এডিটরে যান
   • Google ক্লাউড কনসোলে ফিরে যান
   • সার্চ বারে Cloud Shell Editor টাইপ করুন এবং ড্রপডাউন থেকে ক্লাউড শেল এডিটরে ক্লিক করুন।
   • আপনি যদি লিগ্যাসি এডিটর ব্যবহার করেন তবে নতুন সম্পাদক চেষ্টা করুন ক্লিক করুন৷
     • দ্রষ্টব্য: আপনি যদি নতুন সম্পাদক চেষ্টা করুন বোতামটি দেখতে না পান তবে আপনি সম্ভবত ইতিমধ্যেই নতুন সম্পাদক ব্যবহার করছেন৷ লিগ্যাসি এডিটর কাজ করবে, কিন্তু ভিউ কিছুটা আলাদা দেখাবে।
   • ওপেন ইন নিউ উইন্ডো আইকনে ক্লিক করুন
2. অনুরোধ করা হলে, লগ ইন করুন বা আপনার অ্যাকাউন্ট অনুমোদন করুন।
   • আপনার সেটিংসের উপর নির্ভর করে, আপনাকে এই ল্যাব চলাকালীন একাধিকবার আপনার অ্যাকাউন্ট অনুমোদন করার জন্য অনুরোধ করা হতে পারে, যখন জিজ্ঞাসা করা হয়, প্রতিবার অনুমোদন নির্বাচন করুন।
3. ক্লাউড কোডে ক্লিক করুন - দেখানো হিসাবে নীচের স্ট্যাটাস বারে সাইন ইন বোতাম। নির্দেশিত হিসাবে প্লাগইন অনুমোদন করুন.
4. অনুরোধ করা হলে, একটি Google ক্লাউড প্রকল্প নির্বাচন করুন ক্লিক করুন তারপর আপনি যে প্রকল্পটি ব্যবহার করছেন সেটি নির্বাচন করুন৷
5. মিথুন সক্রিয় করুন
   • ক্লাউড কোডে ক্লিক করুন
     • দ্রষ্টব্য: আপনার স্ক্রিনের আকারের উপর নির্ভর করে, এটি এক ধাপ বা দুই ধাপ নিতে পারে।
   • হেল্প এবং ফিডব্যাক বিভাগে চেঞ্জ সেটিংস ক্লিক করুন
   • Gemini: Enable
   • চেকবক্স নির্বাচন করুন (যদি এটি ইতিমধ্যে নির্বাচিত না থাকে)
   • আপনার IDE পুনরায় লোড করুন।
   • এটি ক্লাউড কোডে জেমিনিকে সক্ষম করে এবং আপনার IDE-তে জেমিনি স্ট্যাটাস বার প্রদর্শিত হয়।
6. দেখানো হিসাবে নীচের ডান কোণায় জেমিনি বোতামে ক্লিক করুন এবং সঠিক Google ক্লাউড প্রকল্প নির্বাচন করুন।
   • যদি আপনি একটি ত্রুটি দেখেন যে Gemini has not been enabled for your selected project । Gemini API সক্ষম করুন ক্লিক করুন
7. নিশ্চিত করুন যে আপনি বাম দিকে সঠিক Google ক্লাউড প্রজেক্ট দেখতে পাচ্ছেন (আপনি আপনার প্রোজেক্টের নাম দেখতে পাবেন) এবং ডানদিকে জেমিনি সক্ষম হয়েছে, স্ট্যাটাস বারে নীচে দেখানো হয়েছে:

4. ক্লাউড ফাংশন কোড ডাউনলোড করুন

কোড ডাউনলোড করুন এবং জাম্প স্টার্ট সলিউশন এবং আপনি যে কোডটি স্থাপন করেছেন সে সম্পর্কে আরও জানতে জেমিনি ব্যবহার করুন।

1. আপনি যদি দূরে নেভিগেট করে থাকেন তবে ক্লাউড কোডে ক্লিক করুন
2. ক্লাউড ফাংশন ক্লিক করুন
   • আপনি যদি একটি প্রকল্প নির্বাচন করুন বোতাম দেখতে পান তবে এটিতে ক্লিক করুন এবং আপনি যে প্রকল্পটির সাথে কাজ করছেন সেটি নির্বাচন করুন।
   • টীকা-http ফাংশন ক্লিক করুন
   • নতুন কর্মক্ষেত্রে ডাউনলোড করুন আইকনে ক্লিক করুন
3. ওয়ার্কস্পেস নাম হিসাবে annotate-http-1 ব্যবহার করুন (ডিফল্ট হওয়া উচিত) এবং ঠিক আছে ক্লিক করুন
4. main.py ফাইলটি খুলুন
   • এক্সপ্লোরার আইকনে ক্লিক করুন
   • এটি খুলতে main.py ফাইলটিতে ক্লিক করুন
5. মিথুন চ্যাট আইকনে ক্লিক করুন
   • দ্রষ্টব্য: আপনার স্ক্রিনের আকারের উপর নির্ভর করে, এটি এক ধাপ বা দুই ধাপ নিতে পারে।
6. মিথুন রাশিকে একটি প্রশ্ন জিজ্ঞাসা করার চেষ্টা করুন। একটি প্রম্পট লিখুন যেমন:
   • What is a Jump Start Solution in Google Cloud?
   • Explain this code.

মিথুন চ্যাট রিসেট করা হচ্ছে

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

5. বিদ্যমান ক্লাউড ফাংশন এন্ডপয়েন্ট কল করা

কোডটি অন্বেষণ করুন এবং জাম্প স্টার্ট সলিউশনে আপনি যে এন্ডপয়েন্টটি স্থাপন করেছেন তাতে কল করুন।

1. প্রম্পট লিখুন:
   • গুরুত্বপূর্ণ নিচের প্রম্পটে my-project-with-duet আপনার প্রজেক্ট আইডি দিয়ে প্রতিস্থাপন করুন।
   • The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
   • আপনার একটি প্রতিক্রিয়া পাওয়া উচিত যাতে একটি কার্ল কমান্ড অন্তর্ভুক্ত থাকে:

     curl -X POST \
         -H "Authorization: Bearer $(gcloud auth print-access-token)" \
     ...
     

   • পরবর্তী ধাপে ব্যবহারের জন্য এই কার্ল কমান্ডটি অনুলিপি করুন
2. একটি নতুন টার্মিনালে কমান্ড পরীক্ষা করুন
   • হ্যামবার্গার মেনুতে ক্লিক করুন
   • টার্মিনাল ক্লিক করুন
   • নতুন টার্মিনালে ক্লিক করুন
   • টার্মিনালে আগের ধাপ থেকে কার্ল কমান্ড পেস্ট করুন এবং কমান্ডটি চালানোর জন্য Enter টিপুন
   • আপনি একটি প্রতিক্রিয়া পেতে হবে যা এই মত শুরু হয়:

     {
         "labelAnnotations": [
         {
         "mid": "/m/0csby",
         "description": "Cloud",
         "score": 0.97885925,
         "topicality": 0.97885925,
     ...
     

3. (ঐচ্ছিক) এমন কিছু দিয়ে ডুয়েট প্রম্পট করে সর্বজনীন ইন্টারনেট থেকে অন্য একটি চিত্রের সাথে এটি করুন:
   • Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg

সমস্যা সমাধান

নন-ডিটারমিনিজম সম্পর্কে দ্রষ্টব্য: জেমিনি এবং লার্জ ল্যাঙ্গুয়েজ মডেল (এলএলএম) দ্বারা চালিত অন্যান্য পণ্যগুলি অ-নির্ধারক: যার অর্থ একই ইনপুট দেওয়া হলে, আপনি বিভিন্ন আউটপুট পেতে পারেন। এমনকি আপনি নিখুঁতভাবে পদক্ষেপগুলি অনুসরণ করলেও, আপনি কার্যকরী কমান্ডগুলি নাও পেতে পারেন। এই সমস্যা সমাধানের পদক্ষেপগুলি তাদের মাধ্যমে কাজ করতে সহায়তা করবে।

তৈরি করা কার্ল কমান্ডটি এইরকম দেখতে হবে:

curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -d '{
  "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
  "features": "LABEL_DETECTION"
}' \
    "https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"

Gemini main.py ফাইলে TEST_IMAGE ব্যবহার করছে, যেটি আইফেল টাওয়ারের একটি ছবি ।

যদি কার্ল কমান্ডটি আপনার জন্য কাজ না করে, এখানে কয়েকটি জিনিস চেক করতে হবে:

1. সমস্যা: URL এন্ডপয়েন্ট কি .a.run.app অন্তর্ভুক্ত করে?
   • সমাধান: ডুয়েট মনে করতে পারে আপনি ক্লাউড রানে স্থাপন করছেন। সঠিক ক্লাউড ফাংশন এন্ডপয়েন্ট পেতে https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate এ আপনার প্রোজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করুন এবং এটির জন্য ব্যবহার করুন কার্ল কমান্ড।
2. সমস্যা: URL এন্ডপয়েন্ট কি my-project-with-duet অন্তর্ভুক্ত করে?
   • সমাধান: আপনার প্রজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করুন।
3. সমস্যা: ইউআরএল এন্ডপয়েন্ট কি us-central1 অনুপস্থিত?
   • সমাধান: নিশ্চিত করুন যে ইউআরএলটি us-central1 দিয়ে শুরু হয় যেমন: https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate আপনার প্রোজেক্ট আইডি দিয়ে।
4. সমস্যা: ব্যবহৃত প্রম্পটের উপর নির্ভর করে, কখনও কখনও তৈরি হওয়া এন্ডপয়েন্টটি cloudfunctions.net/annotate-http বা cloudfunctions.net/annotate এর মতো দেখাবে। ইউআরএল এন্ডপয়েন্টটি কি শেষে অনুপস্থিত /annotate-http/annotate ?
   • সমাধান: নিশ্চিত করুন যে URL এন্ডপয়েন্ট সম্পূর্ণ API অ্যাপ্লিকেশন পাথ দিয়ে শেষ হয়েছে cloudfunctions.net/annotate-http/annotate
5. সমস্যা: cURL অনুরোধ কাজ করে, কিন্তু এটি অনেক তথ্য ফিরে পাচ্ছে না। অনুরোধ বৈশিষ্ট্য অন্তর্ভুক্ত?
   • সমাধান: এটি একটি বড় সমস্যা নয়। আপনি কিছু পরিবর্তন না করে চালিয়ে গেলে বাকি ল্যাব এখনও কাজ করবে। আপনি যদি আরও তথ্য ফিরে পেতে চান, তাহলে আপনি ডুয়েটকে cURL অনুরোধে বৈশিষ্ট্য যোগ করতে বলতে পারেন।
6. সমস্যা: উত্তরগুলি ভুল বলে মনে হচ্ছে বা কোড-নির্দিষ্ট প্রসঙ্গের অভাব রয়েছে বলে মনে হচ্ছে। আপনি কি ক্লাউড শেল এডিটরের মধ্যে জেমিনি চ্যাট ব্যবহার করছেন?
   • সমাধান: আপনি ক্লাউড শেল এডিটরের মধ্যে জেমিনি চ্যাট ব্যবহার করার সময় main.py ফাইলটি খোলার চেষ্টা করুন এবং আপনার প্রম্পটের সাথে সম্পর্কিত কোডটি হাইলাইট করুন। Google ক্লাউড জুড়ে মিথুন সহকারীর আলাদা প্রসঙ্গ রয়েছে, যা বিভিন্ন উত্তরের দিকে নিয়ে যাবে।
7. সমস্যা: প্রম্পট প্রতিক্রিয়া এখনও পুরোপুরি সঠিক নয়।
   • সমাধান: একটি ভিন্ন প্রম্পট চেষ্টা করুন যেখানে আপনি মিথুন রাশিকে আরও বেশি দিকনির্দেশনা দেবেন যা আপনি এটি তৈরি করতে চান। আপনার প্রজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করতে ভুলবেন না। এখানে একটি উদাহরণ:

     Give me the curl command for:
     
     1- Cloud Function running in us-central1 and project my-project-with-duet
     2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
     3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
     

8. সমস্যা: এই সমস্ত সমস্যা সমাধানের পদক্ষেপের পরে, এটি এখনও কাজ করছে না।
   • সমাধান: LLM-এর অ-নির্ধারক প্রকৃতির কারণে, এটা সম্ভব যে Duet একটি প্রতিক্রিয়া তৈরি করেছে যা কাজ করবে না। যদি তা হয়, উপরের কার্ল কমান্ডটি অনুলিপি করুন এবং টার্মিনালে এটি চালানোর চেষ্টা করুন। আপনার প্রজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করতে ভুলবেন না।

6. API এর জন্য একটি ওয়েব অ্যাপ্লিকেশন ক্লায়েন্ট তৈরি করুন

একটি index.html ফাইল তৈরি করতে Gemini ব্যবহার করুন যা জাম্প স্টার্ট সলিউশন ক্লাউড ফাংশন এন্ডপয়েন্টকে কল করে। তারপর index.html ফাইলটিকে ফায়ারবেস হোস্টিং- এ স্থাপন করুন যাতে কোডটি কার্যকর হয়।

1. ক্লায়েন্ট-সাইড কোড জেনারেট করুন
   • মিথুন চ্যাট বক্সে ফিরে, প্রম্পট লিখুন:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
   • প্রতিক্রিয়াতে তৈরি করা index.html ফাইলটি অনুলিপি করুন।
     • দ্রষ্টব্য: আপনার পরে এই কোডের প্রয়োজন হবে, তাই এটিকে কোথাও সংরক্ষণ করুন যদি আপনি চিন্তিত হন যে আপনি এটি হারাতে পারেন৷
   • main.py বন্ধ করুন।
2. একটি নতুন frontend ডিরেক্টরি তৈরি করুন
   • আপনি মিথুন রাশিকে কিছু জিজ্ঞাসা করতে পারেন:
     • What are the console commands to create and navigate to a new frontend directory?
   • আপনি mkdir frontend এবং cd frontend মত ফলাফল দেখতে পাবেন।
   • আপনি এখনও annotate-http-1 ডিরেক্টরিতে আছেন তা নিশ্চিত করতে ক্লাউড শেল টার্মিনাল ব্যবহার করুন এবং সেই কমান্ডগুলি চালান:
     • cd ~/annotate-http-1
     • mkdir frontend
     • cd frontend
3. আপনি ক্লাউড শেল টার্মিনালে সঠিক প্রকল্পে লগ ইন করেছেন তা নিশ্চিত করুন
   • আপনি মিথুন রাশিকে কিছু জিজ্ঞাসা করতে পারেন:
     • What is the gcloud command to set my project?
   • আপনি একটি ফলাফল দেখতে হবে যেমন gcloud config set project my-project-with-duet
     • প্রজেক্ট আইডি সঠিক কিনা তা নিশ্চিত করুন, তারপর ক্লাউড শেল টার্মিনালে কমান্ডটি চালান।
4. Firebase সক্ষম করুন
   • একটি নতুন ট্যাবে (আপনার বর্তমান ক্লাউড শেল সম্পাদক খোলা রাখুন), https://console.firebase.google.com/ এ যান
   • প্রকল্প যোগ করুন ক্লিক করুন
   • আপনার প্রকল্প আইডি টাইপ করুন এবং ড্রপডাউনে এটি প্রদর্শিত হওয়ার জন্য অপেক্ষা করুন
   • আপনার প্রকল্প আইডি ক্লিক করুন
   • অবিরত ক্লিক করুন
   • পরিকল্পনা নিশ্চিত করুন ক্লিক করুন
   • অবিরত ক্লিক করুন
   • এই প্রকল্পের জন্য Google Analytics সক্ষম করুন নির্বাচন মুক্ত করুন
     • Firebase Google Analytics ব্যবহার করার পরামর্শ দেয়, কিন্তু সেগুলি এই অ্যাপ্লিকেশনে ব্যবহার করা হবে না।
   • অবিরত ক্লিক করুন
   • এই ট্যাবটি বন্ধ করুন এবং ক্লাউড শেল এডিটরে ফিরে যান
   • দ্রষ্টব্য: এই পদক্ষেপগুলি শুধুমাত্র সেই ব্যবহারকারীদের জন্য প্রয়োজন যারা আগে Firebase ব্যবহার করেননি, কিন্তু এটি প্রত্যেককে একই পথ অনুসরণ করতে দেয়৷ আপনি যদি ভবিষ্যতে এটি আবার করেন, আপনি এই ধাপটি এড়িয়ে যেতে পারেন।
5. ক্লাউড শেল-এ ফায়ারবেসে লগ ইন করুন
   • ক্লাউড শেল এডিটর টার্মিনালে, firebase login --no-localhost কমান্ডটি চালান
   • প্রদত্ত URL-এ যান
     • হ্যাঁ ক্লিক করুন, আমি এই কমান্ডটি চালিয়েছি
     • হ্যাঁ ক্লিক করুন, এটি আমার সেশন আইডি
     • অনুলিপি ক্লিক করুন
   • ক্লাউড শেল এডিটর টার্মিনালে ফিরে যান
   • টার্মিনালে কপি করা মানটি পেস্ট করুন যেখানে লেখা আছে: Enter authorization code:
   • Enter টিপুন
6. Firebase হোস্টিং-এ একটি নতুন ওয়েবসাইট স্থাপন করুন
   • একটি নতুন ফায়ারবেস প্রকল্প শুরু করুন
     • আপনি মিথুন রাশিকে কিছু জিজ্ঞাসা করতে পারেন:
       • What are the commands to initialize and deploy a new firebase application?
     • আপনি নির্দেশাবলী সহ firebase init এবং firebase deploy মত ফলাফল দেখতে পাবেন।
     • যেহেতু এটি করার অনেকগুলি সম্ভাব্য উপায় রয়েছে যা মিথুন আপনার পছন্দের উপর নির্ভর করে সুপারিশ করতে পারে, তাই আপনাকে অনুসরণ করার জন্য এখানে একটি নির্দিষ্ট সুপারিশ রয়েছে:
       • firebase init
         • Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
           • Space বার টিপুন
           • Enter টিপুন
         • Use an existing project করতে নিচের দিকে তীরচিহ্ন দিন
           • Enter টিপুন
         • আপনি যদি প্রকল্পগুলির একটি তালিকা দেখতে পান তবে আপনি আজ যে প্রকল্পটি ব্যবহার করছেন তার দিকে তীর চিহ্ন দিন
           • Enter টিপুন
         • যদি আপনাকে Please input the ID of the Google Cloud Project you would like to add Firebase:
           • আপনার প্রকল্পের জন্য প্রকল্প আইডি টাইপ করুন.
           • Enter টিপুন
         • সমস্ত অবশিষ্ট প্রম্পটের জন্য, Enter টিপুন
       • firebase deploy
7. ক্লাউড ফাংশন API এন্ডপয়েন্টে একটি কলের মাধ্যমে আপনার অ্যাপ্লিকেশন পুনরায় স্থাপন করুন
   • পূর্ববর্তী কমান্ডগুলি আপনার আগে তৈরি করা frontend ডিরেক্টরির ভিতরে একটি index.html ফাইল সহ একটি public ডিরেক্টরি তৈরি করা উচিত। ~/annotate-http-1/frontend/public/index.html ফাইলটি যেখানে আপনার পরবর্তী কয়েকটি পরিবর্তন করা উচিত।
   • index.html ফাইলটি খুলুন।
     • এক্সপ্লোরার আইকনে ক্লিক করুন
     • frontend ফোল্ডারে ক্লিক করুন
     • public ফোল্ডারে ক্লিক করুন
     • index.html ফাইলটিতে ক্লিক করুন
   • বিদ্যমান index.html ফাইলটি খালি করুন।
   • আপনি যে কোডটি আগে কপি করেছিলেন তা index.html ফাইলে আটকান
   • নতুন অ্যাপ্লিকেশন স্থাপন করতে firebase deploy চালান
   • এটি কাজ করে কিনা দেখতে ফায়ারবেস হোস্টিং ইউআরএলে যান!
     • দ্রষ্টব্য: আপনার আপডেটগুলি দেখতে আপনাকে সম্ভবত ওয়েবসাইটটির একটি হার্ড রিফ্রেশ করতে হবে।

সমস্যা সমাধান

index.html ফাইলটি এইরকম দেখতে হবে:

<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
    <label for="image-uri">Image URI:</label>
    <input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
    <br>
    <label for="features">Features:</label>
    <select id="features" name="features">
    <option value="LABEL_DETECTION">LABEL_DETECTION</option>
    <option value="TEXT_DETECTION">TEXT_DETECTION</option>
    <option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
    </select>
    <br>
    <input type="submit" value="Annotate">
</form>

<div id="result"></div>

<script>
    const form = document.getElementById('annotate-form');

    form.addEventListener('submit', (event) => {
    event.preventDefault();

    const imageUri = document.getElementById('image-uri').value;
    const features = document.getElementById('features').value;

    const data = {
        image_uri: imageUri,
        features: features,
    };

    fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then((response) => response.json())
        .then((result) => {
        const resultElement = document.getElementById('result');
        resultElement.innerHTML = JSON.stringify(result, null, 2);
        });
    });
</script>
</body>
</html>

ওয়েবসাইটটি যদি আপনার জন্য কাজ না করে, তাহলে এখানে কয়েকটি জিনিস চেক করতে হবে:

1. সমস্যা: 404 (নট ফাউন্ড) fetch পদ্ধতিতে ব্যবহৃত ইউআরএল কি my-project-with-duet অন্তর্ভুক্ত করে?
   • সমাধান: আপনার প্রজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করুন।
2. সমস্যা: 404 (নট ফাউন্ড) fetch পদ্ধতিতে ব্যবহৃত ইউআরএলটি কি সম্পূর্ণ ইউআরএল হারিয়েছে?
   • সমাধান: fetch পদ্ধতিতে সম্পূর্ণ URL অন্তর্ভুক্ত করতে ভুলবেন না। এটি দেখতে https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate এর মতো হওয়া উচিত
3. সমস্যা: প্রম্পট প্রতিক্রিয়া এখনও পুরোপুরি সঠিক নয়।
   • সমাধান: একটি ভিন্ন প্রম্পট চেষ্টা করুন যেখানে আপনি মিথুন রাশিকে আরও বেশি দিকনির্দেশনা দেবেন যা আপনি এটি তৈরি করতে চান। আপনার প্রজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করতে ভুলবেন না। এখানে একটি উদাহরণ:
     • Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
4. সমস্যা: আপনার সাইট স্থাপন করা হয়েছে, কিন্তু এটি কাজ করছে না?
   • সমাধান: LLM-এর অ-নির্ধারক প্রকৃতির কারণে, এটা সম্ভব যে Duet একটি প্রতিক্রিয়া তৈরি করেছে যা কাজ করবে না। যদি তা হয়, উপরের index.html উদাহরণটি অনুলিপি করুন এবং firebase deploy এর সাথে এটি পুনরায় স্থাপন করার চেষ্টা করুন। আপনার প্রজেক্ট আইডি দিয়ে my-project-with-duet প্রতিস্থাপন করতে ভুলবেন না।

7. (ঐচ্ছিক) ওপেন এক্সপ্লোরেশন

1. আপনার অ্যাপ্লিকেশনে CSS শৈলী যোগ করতে Gemini এবং ইন-এডিটর সহকারী ব্যবহার করুন এবং আপনার কাজ শেষ হয়ে গেলে আবার অ্যাপ্লিকেশনটি স্থাপন করুন! আপনি যদি অনুপ্রেরণা খুঁজছেন, এখানে একটি উদাহরণ প্রম্পট যা আপনি চেষ্টা করতে পারেন:
   • Make this index.html file use material design.
2. চেষ্টা করার জন্য অন্যান্য জিনিস:
   • উত্পন্ন ওয়েবসাইট যে কোনো পাবলিক http ইমেজ সঙ্গে কাজ করা উচিত. পৃষ্ঠায় ছবিটি প্রদর্শন করতে ডুয়েটের সাথে কাজ করুন।

8. (ঐচ্ছিক) প্রকল্পটি মুছুন

আপনি যদি আজ আপনার তৈরি করা সংস্থানগুলির জন্য চার্জ করা এড়াতে চান তবে আপনি ডুয়েটকে এটি কীভাবে করবেন তা জিজ্ঞাসা করতে পারেন।

1. প্রম্পট লিখুন:
   • How can I delete my project?
   • আপনি একটি ফলাফল দেখতে হবে যেমন gcloud projects delete my-project-with-duet ।
   • গুরুত্বপূর্ণ আপনার প্রজেক্ট আইডি দিয়ে আগের কমান্ডে my-project-with-duet প্রতিস্থাপন করুন।
2. আপনি আজ তৈরি করা সমস্ত সংস্থান মুছে ফেলতে gcloud projects delete কমান্ডটি চালান।