১. এই ল্যাবের উদ্দেশ্য
এই ব্যবহারিক ল্যাবে আপনি শিখবেন কিভাবে অ্যান্টিগ্রাভিটি ব্যবহার করে গুগল অ্যান্টিগ্রাভিটি ব্যবহার করে অ্যাপ্লিকেশন তৈরি করতে হয় এবং গুগল ক্লাউডে তা স্থাপন করতে হয়। এই ল্যাব আপনাকে স্পেক ড্রাইভেন ডেভেলপমেন্টের ধারণার সাথেও পরিচয় করিয়ে দেবে।
তুমি কি শিখবে
- গুগল অ্যান্টিগ্র্যাভিটির মূল বিষয়গুলি বুঝুন।
- স্পেক ড্রাইভেন ডেভেলপমেন্টের মূল বিষয়গুলি বুঝুন
- ক্লাউড রানে কীভাবে সহজেই অ্যাপ স্থাপন করবেন তা শিখুন।
চিত্র ১: অ্যান্টিগ্র্যাভিটি হল গুগলের তৈরি এজেন্ট ফার্স্ট ডেভেলপমেন্ট টুল।
2. পরিবেশ সেটআপ
- অ্যান্টিগ্র্যাভিটি ইনস্টল করুন:
👉Download the [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from [here](https://antigravity.google/).
👉আপনার পরিবেশে অ্যান্টিগ্র্যাভিটি ইনস্টল করুন।
👉আপনার অ্যান্টিগ্রাভিটি যে ফোল্ডারে ইনস্টল করা আছে সেখানে যান এবং ইনস্টলারটি খুলতে ডাবল ক্লিক করুন।
👉আপনার পরিবেশে অ্যান্টিগ্র্যাভিটি ইনস্টল করতে ইনস্টলারের নির্দেশাবলী অনুসরণ করুন।
- পাইথন ইনস্টল করুন
👉https: //www.python.org/downloads/ এ যান এবং আপনার সিস্টেমের জন্য Python ইনস্টল করুন।
- জিক্লাউড ইনস্টল করুন
👉gcloud হল একটি কমান্ড লাইন টুল যা আপনাকে Google Cloud-এ বিভিন্ন ক্রিয়াকলাপ সম্পাদন করতে দেয়। আপনার পরিবেশে gcloud ইনস্টল করতে এখানে নির্দেশাবলী অনুসরণ করুন।
👉ইনস্টল হয়ে গেলে, আপনার সিস্টেম টার্মিনাল খুলে gcloud টাইপ করে ইনস্টলেশন পরীক্ষা করুন। 
চিত্র ২: gcloud ইনস্টল করার পরে, আপনি আপনার টার্মিনালে gcloud টাইপ করে ইনস্টলেশন পরীক্ষা করতে পারেন।
৩. প্রকল্প সেটআপ
- যদি আপনার কাছে ইতিমধ্যেই এমন কোনও প্রকল্প না থাকে যা আপনি ব্যবহার করতে পারেন, তাহলে আপনাকে GCP কনসোলে একটি নতুন প্রকল্প তৈরি করতে হবে। প্রকল্প নির্বাচক (গুগল ক্লাউড কনসোলের উপরে বাম দিকে) থেকে প্রকল্পটি নির্বাচন করুন।
চিত্র ২: গুগল ক্লাউড লোগোর ঠিক পাশের বাক্সে ক্লিক করলে আপনি আপনার প্রকল্পটি নির্বাচন করতে পারবেন। নিশ্চিত করুন যে আপনার প্রকল্পটি নির্বাচিত হয়েছে।
- এই ল্যাবে, আমরা আমাদের কাজগুলি সম্পাদনের জন্য ক্লাউড শেল এডিটর ব্যবহার করব। ক্লাউড শেল খুলুন এবং ক্লাউড শেল ব্যবহার করে প্রকল্পটি সেট করুন।
- সরাসরি ক্লাউড শেল এডিটরে যেতে এই লিঙ্কে ক্লিক করুন।
- যদি টার্মিনালটি ইতিমধ্যে খোলা না থাকে, তাহলে মেনু থেকে Terminal>New Terminal এ ক্লিক করে এটি খুলুন। আপনি এই টিউটোরিয়ালে এই টিউটোরিয়ালে সমস্ত কমান্ড চালাতে পারেন।
- ক্লাউড শেল টার্মিনালে নিম্নলিখিত কমান্ড ব্যবহার করে আপনি প্রকল্পটি ইতিমধ্যেই প্রমাণীকরণ করা হয়েছে কিনা তা পরীক্ষা করতে পারেন।
gcloud auth list
- আপনার প্রকল্পটি নিশ্চিত করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান
gcloud config list project
- প্রকল্প আইডিটি অনুলিপি করুন এবং এটি সেট করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন
gcloud config set project <YOUR_PROJECT_ID>
- যদি আপনি আপনার প্রজেক্ট আইডি মনে রাখতে না পারেন, তাহলে আপনি আপনার সমস্ত প্রজেক্ট আইডি তালিকাভুক্ত করতে পারেন
gcloud projects list
৪. API গুলি সক্ষম করুন
এই ল্যাবটি চালানোর জন্য আমাদের কিছু API পরিষেবা সক্রিয় করতে হবে। ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান।
gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com
API গুলির সাথে পরিচয় করিয়ে দেওয়া হচ্ছে
- ভার্টেক্স এআই এপিআই (
aiplatform.googleapis.com) ভার্টেক্স এআই প্ল্যাটফর্মে অ্যাক্সেস সক্ষম করে, যা আপনার অ্যাপ্লিকেশনকে টেক্সট জেনারেশন, চ্যাট সেশন এবং ফাংশন কলিংয়ের জন্য জেমিনি মডেলের সাথে ইন্টারঅ্যাক্ট করার অনুমতি দেয়। - ক্লাউড রিসোর্স ম্যানেজার API (
cloudresourcemanager.googleapis.com) আপনাকে আপনার Google ক্লাউড প্রকল্পগুলির জন্য মেটাডেটা প্রোগ্রাম্যাটিকভাবে পরিচালনা করতে দেয়, যেমন প্রকল্প আইডি এবং নাম, যা প্রায়শই অন্যান্য সরঞ্জাম এবং SDK দ্বারা প্রকল্পের পরিচয় এবং অনুমতি যাচাই করার জন্য প্রয়োজন হয়।
৫. আপনার ক্রেডিট প্রয়োগ করা হয়েছে কিনা তা নিশ্চিত করুন।
প্রজেক্ট সেটআপ পর্যায়ে আপনি বিনামূল্যে ক্রেডিটের জন্য আবেদন করেছিলেন যা আপনাকে Google ক্লাউডে পরিষেবাগুলি ব্যবহার করতে সক্ষম করে। যখন আপনি ক্রেডিটগুলি প্রয়োগ করেন তখন "Google ক্লাউড প্ল্যাটফর্ম ট্রায়াল বিলিং অ্যাকাউন্ট" নামে একটি নতুন বিনামূল্যের বিলিং অ্যাকাউন্ট তৈরি হয়। ক্রেডিটগুলি প্রয়োগ করা হয়েছে কিনা তা নিশ্চিত করতে ক্লাউড শেল এডিটরে নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করুন।
curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3
যদি সফল হন, তাহলে আপনি নীচের মত ফলাফল দেখতে পাবেন: যদি আপনি "সফলভাবে লিঙ্ক করা প্রকল্প" দেখতে পান তবে আপনার বিলিং অ্যাকাউন্ট সঠিকভাবে সেট করা হয়েছে। উপরের ধাপটি সম্পাদন করে আপনি আপনার অ্যাকাউন্ট লিঙ্ক করা আছে কিনা তা পরীক্ষা করতে পারেন, যদি লিঙ্ক করা না থাকে তবে এটি আপনার জন্য লিঙ্ক করবে। যদি আপনি প্রকল্পটি নির্বাচন না করে থাকেন তবে এটি আপনাকে একটি প্রকল্প চয়ন করতে বলবে অথবা আপনি প্রকল্প সেটআপের ধাপগুলি অনুসরণ করে আগে থেকেই তা করতে পারেন। 
চিত্র ৩: বিলিং অ্যাকাউন্ট লিঙ্কযুক্ত নিশ্চিতকরণ
৬. গুগল অ্যান্টিগ্র্যাভিটির পরিচিতি
গুগল অ্যান্টিগ্রাভিটি হল গুগল ডিপমাইন্ড দ্বারা তৈরি একটি এআই প্রথম সফ্টওয়্যার ডেভেলপমেন্ট টুল। গুগল অ্যান্টিগ্রাভিটি ডেভেলপারদের জন্য একটি মসৃণ এবং নিরবচ্ছিন্ন এআই চালিত ডেভেলপমেন্ট অভিজ্ঞতা প্রদানের জন্য অত্যাধুনিক এআই-এর সাথে দীর্ঘ সময় ধরে সঞ্চিত সফ্টওয়্যার ডেভেলপমেন্ট জ্ঞানকে কাজে লাগায়।
গুগল অ্যান্টিগ্র্যাভিটির কিছু মূল বৈশিষ্ট্য এখানে দেওয়া হল।
নিচের চিত্রটি গুগল অ্যান্টিগ্র্যাভিটির মৌলিক উপাদানগুলি দেখায়।
- 👉ব্রাউজারটি খুলুন এবং ব্রাউজারের বিভিন্ন অংশ অন্বেষণ শুরু করুন।
চিত্র ৪: গুগল অ্যান্টিগ্র্যাভিটির মৌলিক উপাদান, টেবিল ১-এ বিস্তারিত
সারণী ১: গুগল অ্যান্টিগ্র্যাভিটির মৌলিক উপাদানগুলির বিশদ বিবরণ
| | |
| | |
| | |
| | |
| | |
| | |
| | |
- বিল্ট-ইন জেমিনি ৩ এবং ন্যানোবানানা মডেল : গুগল অ্যান্টিগ্রাভিটির সাহায্যে আপনি জেমিনি ৩ এবং ন্যানোবানানার মতো গুগলের সর্বশেষ ফ্ল্যাগশিপ মডেলগুলি ব্যবহার করতে পারেন। এই মডেলগুলির সাথে আপনি ক্লডের মতো তৃতীয় পক্ষের মডেলগুলিও ব্যবহার করতে পারেন।
চিত্র ৫: গুগল অ্যান্টিগ্র্যাভিটি ২-এ আপনার কাছে অনেক মডেল ব্যবহার করার বিকল্প আছে । এজেন্ট চালিত কোডিং : অ্যান্টিগ্র্যাভিটি একটি নেটিভ এজেন্ট চালিত কোডিং অভিজ্ঞতা প্রদান করে যা ডেভেলপারদের তাদের পথে বাধা না হয়েও উৎপাদনশীল থাকতে দেয়।
- পরিকল্পনা এবং পূর্ণ ব্যবহারকারীর নিয়ন্ত্রণ : এজেন্ট আপনার মতামত গ্রহণ করে এবং কাজটিকে এমন একটি পরিকল্পনায় রূপান্তরিত করে যা কার্যকর করার আগে এজেন্ট আপনার অনুমোদন চাইবে। এটি নিশ্চিত করে যে ব্যবহারকারী কাজটি কার্যকর করার আগে যেকোনো সময় এজেন্টের দিক পরিবর্তন করতে পারবেন।
- ব্যবহারকারীর প্রতিক্রিয়া : এজেন্ট কার্যকর করার সময় ব্যবহারকারী যদি এজেন্টকে অতিরিক্ত নির্দেশনা প্রদানের প্রয়োজন হয় তবে ব্যবহারকারী এজেন্টকে প্রতিক্রিয়া জানাতে পারেন।
- মাল্টি এজেন্ট : আপনি একসাথে বিভিন্ন কাজে কাজ করার জন্য একাধিক এজেন্ট তৈরি করতে পারেন। উদাহরণস্বরূপ, এজেন্ট A আপনার প্রমাণীকরণ লজিক রিফ্যাক্টর করতে পারে যখন এজেন্ট B একটি নতুন API এর জন্য ইউনিট পরীক্ষা লিখছে, এবং এজেন্ট C ব্যাকগ্রাউন্ডে একটি লাইব্রেরি নিয়ে গবেষণা করছে।
- এডিটর, টার্মিনাল এবং ব্রাউজার জুড়ে এজেন্ট : গুগল অ্যান্টিগ্র্যাভিটি এজেন্ট একাধিক পৃষ্ঠ জুড়ে কাজ করে।
- সম্পাদক : গুগল অ্যান্টিগ্র্যাভিটি এজেন্টরা কোডটি লিখে আপনাকে সম্পাদকে লিখিত কোডটি উপস্থাপন করে।
- টার্মিনাল : কাজের উপর নির্ভর করে গুগল অ্যান্টিগ্র্যাভিটি এজেন্টদের কিছু কমান্ড কার্যকর করার জন্য আপনার টার্মিনালে অ্যাক্সেসের প্রয়োজন হতে পারে। প্রয়োজনে এজেন্টরা আপনার জন্য কমান্ড কার্যকর করতে পারে।
- ব্রাউজার : এজেন্টরা আপনার ব্রাউজারের সাথেও কাজ করতে পারে। এটি বিশেষভাবে সহায়ক যদি আপনার ওয়েব অ্যাপ্লিকেশনগুলি পরীক্ষা করার প্রয়োজন হয়, এজেন্ট আপনার অ্যাপ্লিকেশনটি ওয়েব ব্রাউজারে চালাতে পারে, এটি পরীক্ষা করতে পারে এবং ডিবাগ করতে পারে।
৭. এআই স্পেক-চালিত উন্নয়নের ভূমিকা
স্পেক-ড্রিভেন ডেভেলপমেন্ট হল একটি উদীয়মান সফটওয়্যার ইঞ্জিনিয়ারিং প্যারাডাইম যা ডেভেলপমেন্ট লাইফসাইকেলের মূলে স্ট্রাকচার্ড স্পেসিফিকেশন এবং এআই এজেন্টদের স্থান দেয়। বেসিক এআই কোডিংয়ে প্রচলিত "প্রম্পট-এন্ড-প্যাচ" (ট্রায়াল এবং এরর) পদ্ধতির বিপরীতে, এসডিডি সূক্ষ্ম প্রয়োজনীয়তা সংগ্রহ, সিস্টেম/আর্কিটেকচার ডিজাইন এবং পরীক্ষা পরিকল্পনাকে অগ্রাধিকার দেয়। এটি ওয়াটারফল মডেলের ডিজাইন পর্বের কঠোরতা ধার করে কিন্তু অটোমেশনের মাধ্যমে এটিকে একটি আধুনিক, চটপটে পুনরাবৃত্তিমূলক লুপে একীভূত করে। যদিও প্রক্রিয়াটির জন্য আপনাকে আগে থেকেই সূক্ষ্ম পরিকল্পনা এবং ডকুমেন্টেশন করতে হয়, এটি আসলে একটি পুনরাবৃত্তিমূলক প্রক্রিয়া কারণ এআই এজেন্টরা দ্রুত বাস্তবায়ন এবং পরীক্ষা সক্ষম করে। এটি আপনাকে দ্রুত প্রতিক্রিয়া পেতে দেয় যা ডকুমেন্টেশন উন্নত করতে ব্যবহার করা যেতে পারে।
মূল দর্শন
এই মডেলে, মানব প্রকৌশলীরা "কোড লেখক" থেকে "সিস্টেম স্থপতি"-এ রূপান্তরিত হন। প্রাথমিক মানবিক দায়িত্ব হল সমস্যা এবং সমাধানের উচ্চ-বিশ্বস্ততার বর্ণনা। এই বিস্তারিত আউটপুটটি সত্যের একক উৎস (SSOT) হিসেবে কাজ করে, যা AI এজেন্টরা কোডবেস তৈরি, যাচাই এবং পরিমার্জন করতে ব্যবহার করে।
এসডিডি জীবনচক্র
এই প্রক্রিয়াটিতে নিম্নলিখিত উপাদানগুলি রয়েছে। ধাপ ১-৩ সম্পূর্ণরূপে মানব-কেন্দ্রিক, অন্যদিকে ধাপ ৪-৫ এআই এজেন্ট-কেন্দ্রিক। এটি একটি পুনরাবৃত্তিমূলক প্রক্রিয়া যেখানে একটি চক্র শেষ হওয়ার পরে প্রতিক্রিয়াটি স্পেসিফিকেশন উন্নত করতে ব্যবহার করা যেতে পারে।
- প্রয়োজনীয়তা সংগ্রহ: ব্যবসায়িক যুক্তি, ব্যবহারকারীর চাহিদা এবং সিস্টেমের সীমাবদ্ধতার সুনির্দিষ্ট সনাক্তকরণ।
- স্থাপত্য নকশা: সিস্টেম কাঠামো, ডেটা মডেল এবং ইন্টিগ্রেশন পয়েন্টগুলি সংজ্ঞায়িত করা।
- সিস্টেম এবং পরীক্ষার স্পেসিফিকেশন: মেশিন-পঠনযোগ্য (অথবা অত্যন্ত কাঠামোগত) নথি তৈরি করা যা সিস্টেমটি কী করে এবং কীভাবে এটি যাচাই করা হবে তা সংজ্ঞায়িত করে।
- স্বয়ংক্রিয় কোড জেনারেশন: এআই এজেন্টরা উৎপাদন-প্রস্তুত কোড তৈরির জন্য স্পেসিফিকেশন ব্যবহার করে।
- পরীক্ষা ও বৈধতা: স্বয়ংক্রিয় স্যুটগুলি পরীক্ষার স্পেসিফিকেশনের বিপরীতে জেনারেট করা কোড যাচাই করে।
মূল পরিচালনাগত নীতিমালা
- নকশা-বাস্তবায়ন চক্র
১ থেকে ৫ ধাপ কোন রৈখিক পথ নয় বরং একটি ধারাবাহিক প্রতিক্রিয়া লুপ । যেহেতু কোড জেনারেশন (ধাপ ৪) এবং টেস্টিং (ধাপ ৫) মূলত স্বয়ংক্রিয়, ইঞ্জিনিয়ারিং টিম তাদের বেশিরভাগ ব্যান্ডউইথকে প্রথম তিনটি পর্যায়ে স্থানান্তর করতে পারে। যখন কোনও বাগ পাওয়া যায় বা কোনও বৈশিষ্ট্য পরিবর্তিত হয়, তখন ইঞ্জিনিয়ার কোড নয়, স্পেসিফিকেশন আপডেট করেন এবং লুপটি আবার ট্রিগার করেন।
- মডুলার গ্রানুলারিটি
সিস্টেমের অখণ্ডতা বজায় রাখার জন্য, একশিলা ব্লকের পরিবর্তে সূক্ষ্ম-দানাযুক্ত মডিউলগুলিতে SDD প্রয়োগ করতে হবে।
- বিচ্ছিন্নতা: যদি কোনও নির্দিষ্ট মডিউল যাচাইকরণে ব্যর্থ হয়, তবে কেবল সেই মডিউলটি পুনরায় নির্দিষ্ট করে পুনরায় তৈরি করতে হবে।
- স্কেলেবিলিটি: ছোট, সু-সংজ্ঞায়িত মডিউলগুলি AI "হ্যালুসিনেশন" প্রতিরোধ করে এবং নিশ্চিত করে যে AI এজেন্টের প্রসঙ্গ উইন্ডোটি ফোকাসড এবং নির্ভুল থাকে।
- মান নিয়ন্ত্রণ
এই দৃষ্টান্তে, সিস্টেম স্পেসিফিকেশন হল নীলনকশা, এবং টেস্ট স্পেসিফিকেশন হল বিচারক। টেস্ট স্পেসিফিকেশন নিশ্চিত করে যে জেনারেট করা কোড সর্বদা পূর্বনির্ধারিত মানের প্রয়োজনীয়তা পূরণ করবে। পুরো প্রক্রিয়াটি বিদ্যমান CICD পাইপলাইনে নির্বিঘ্নে একত্রিত করা যেতে পারে যাতে নিশ্চিত করা যায় যে সামগ্রিক সিস্টেমের স্বাস্থ্যও মানের প্রয়োজনীয়তা পূরণ করে।
এই ল্যাবে আমরা গুগল অ্যান্টিগ্র্যাভিটি ব্যবহার করে স্পেক-চালিত ডেভেলপমেন্টের মূল বিষয়গুলি অন্বেষণ করব।
৮. গুগল অ্যান্টিগ্রাভিটি ব্যবহার করে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করা
এই ল্যাবে আমরা একটি সহজ ফটো গ্যালারি অ্যাপ্লিকেশন তৈরি করব। ন্যানোবানানা, ইমেজ জেনারেশন মডেল, গুগল অ্যান্টিগ্রাভিটির ভিতরে তৈরি। আমরা প্রয়োজনীয় ছবি তৈরি করতে ন্যানোবানানা ব্যবহার করব।
ওয়েব ব্রাউজার সেটআপ করুন
অ্যাপটির স্বয়ংক্রিয় পরীক্ষার জন্য ওয়েব ব্রাউজারটি ব্যবহার করা হবে। নিচের ধাপগুলিতে আমরা ব্রাউজারটি সেট আপ করব যাতে অ্যান্টিগ্রাভিটি স্বয়ংক্রিয়ভাবে অ্যাপ্লিকেশনটি পরীক্ষা করতে পারে।
- 👉উপরের ডান কোণায় সেটিংস বোতামে (গিয়ার আইকন) ক্লিক করুন এবং "অ্যান্টিগ্র্যাভিটি ব্যবহারকারী সেটিংস খুলুন" নির্বাচন করুন।
- 👉বাম ফলকে এজেন্ট ক্লিক করুন এবং ARTIFACT বিভাগে, নীতি পর্যালোচনা করুন "সর্বদা এগিয়ে যান" নির্বাচন করুন।
- 👉বাম ফলকে ব্রাউজারে ক্লিক করুন এবং নিশ্চিত করুন যে Enable Browser Tools সক্ষম করা আছে।
গুগল অ্যান্টিগ্রাভিটি দিয়ে অ্যাপ্লিকেশন তৈরি করুন
- 👉গুগল অ্যান্টিগ্রাভিটি আইকনে ক্লিক করে গুগল অ্যান্টিগ্রাভিটি খুলুন।
- 👉আপনার ব্যক্তিগত ফোল্ডার ফোল্ডারে, যেমন ডেস্কটপে " গ্যালারি " নামে একটি ফোল্ডার তৈরি করুন।
- 👉Antigravity তে Open Folder টিপুন এবং Gallery folder নির্বাচন করুন। এটি Gallery ফোল্ডারে একটি নতুন ওয়ার্কস্পেস খুলবে।
- 👉যদি এজেন্ট প্যানটি ইতিমধ্যে খোলা না থাকে, তাহলে " টগল এজেন্ট প্যান " বোতামে ক্লিক করে এটি খুলুন। চিত্র 4, বোতাম নং 2 দেখুন।
- 👉আপনি এজেন্ট প্যানে আপনার নির্দেশাবলী টাইপ করে কোডিং শুরু করতে পারেন। নির্দেশাবলী যতটা সম্ভব স্পষ্ট করা খুবই গুরুত্বপূর্ণ। এজেন্ট প্যানে নিম্নলিখিতগুলি লিখুন।
**English Version:**
Create a photo granary with following specs.
1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.
2. Photo Content
Quantity: The page will feature a total of 20 photos.
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos
3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.
4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.
5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation
জাপানি সংস্করণ:
以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。
2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。
3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。
4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。
5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
- 👉রান বোতামে ক্লিক করুন। একবার রান করলে এজেন্ট আপনাকে নিচের মত এক্সিকিউশন প্ল্যান দেখাবে।
চিত্র ৫: অ্যান্টিগ্র্যাভিটি এজেন্ট আপনাকে বাস্তবায়ন পরিকল্পনা দেখাবে
- 👉আপনাকে নিশ্চিত করার জন্য অনুরোধ করা হবে, অনুগ্রহ করে নীচের মত অনুরোধ করা হলে নিশ্চিত করুন। অ্যান্টিগ্র্যাভিটি স্বয়ংক্রিয়ভাবে কাজটি সম্পাদনের জন্য ন্যানোবানানা এবং নির্বাচিত LLM মডেল ব্যবহার করবে।
চিত্র ৬: অ্যান্টিগ্র্যাভিটি একটি কমান্ড চালাতে চায়, রান করার অনুমতি দিতে রান টিপুন।
চিত্র ৭: অনুরোধ করা হলে Accept all টিপুন।
- 👉কোডটি তৈরি হওয়ার পর, অ্যান্টিগ্রাভিটি ব্রাউজারটি খুলবে এবং পরীক্ষা শুরু করবে। পরীক্ষার পর এটি আপনাকে পরীক্ষার ফলাফল প্রদান করবে।
চিত্র ৮: অ্যান্টিগ্রাভিটি আপনাকে পরীক্ষার ফলাফল দেখাবে - 👉প্রম্পট দিলে এজেন্ট প্যানে তৈরি হওয়া সমস্ত কোড সংরক্ষণ করতে "সব গ্রহণ করুন" টিপুন।
- 👉অ্যান্টিগ্র্যাভিটির এক্সপ্লোরার প্যানে, আপনার নতুন তৈরি হওয়া কোডটি থাকা উচিত।
চিত্র ৯: চূড়ান্ত কোড - 👉অ্যাপ্লিকেশনটি পরীক্ষা করতে index.html-এ ডান ক্লিক করুন, ফাইলের পাথটি পান এবং ওয়েব ব্রাউজারের url বারে পাথটি পেস্ট করুন।
চিত্র ১০: অ্যাপটি পরীক্ষা করার জন্য, আপনার ওয়েব ব্রাউজারে index.html ফাইলের পাথটি কপি করুন।
৯. স্থাপনার জন্য পরিবেশ সেটআপ করুন
- 👉আপনার গুগল ক্লাউড প্রজেক্ট আইডি পান: https://console.cloud.google.com এ যান।
- 👉উপরের বাম দিকে ক্লিক করুন এবং আপনার প্রজেক্ট আইডি কোথাও কপি করুন, আমরা পরবর্তী ধাপে এটি ব্যবহার করব।
চিত্র ১১: আপনার প্রকল্পের আইডি কপি করুন এবং ভবিষ্যতের রেফারেন্সের জন্য কোথাও রাখুন। - 👉অ্যান্টিগ্র্যাভিটিতে মেনু থেকে টার্মিনাল->নতুন টার্মিনাল ক্লিক করে টার্মিনাল খুলুন।
- 👉আমাদের উইন্ডোজ এবং ম্যাক/লিনাক্সের জন্য ভিন্ন ভিন্ন পরিবেশগত ভেরিয়েবল সেট করতে হবে। "আপনার ক্লাউড প্রজেক্ট" কে ধাপ ২-এ উল্লেখিত ভেরিয়েবল দিয়ে প্রতিস্থাপন করুন। উইন্ডোজ পাওয়ারশেল ব্যবহারকারীদের জন্য দ্রষ্টব্য: অ্যাডমিন মোডে পাওয়ারশেল খুলুন।
#This is only for Powershell users.
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"
#For Windows Command Prompt follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"
#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"
- 👉প্রম্পট পেলে কনসোলে লগ ইন করুন, ব্রাউজারে আপনার গুগল ক্লাউডে লগ ইন করুন।
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT
চিত্র ১২: প্রমাণীকরণ সম্পাদন করুন
- 👉ক্লাউড রান এমসিপি সার্ভার ইনস্টল করুন। অ্যান্টিগ্র্যাভিটি উইন্ডোর উপরের ডানদিকে, "..." এ ক্লিক করুন। আপনি "এমসিপি সার্ভার" বিকল্পটি দেখতে পাবেন, এটিতে ক্লিক করুন। এমসিপি সার্ভারগুলি এজেন্টের এক্সটেনশনের মতো যা এজেন্টদের বহিরাগত ডেটা এবং সরঞ্জামগুলিতে অ্যাক্সেস করার অনুমতি দেয়।
- 👉সার্চ বক্সে "ক্লাউড রান" লিখুন এবং "ক্লাউড রান" এ ক্লিক করুন।
চিত্র ১৩: ক্লাউড রান এমসিপি সার্ভার - 👉 MCP সার্ভারের শিরোনামের পাশে থাকা back Arrow কী টিপে Agent Pane-এ ফিরে যান। এখন আমরা Google Cloud Run-এর সাথে ইন্টারঅ্যাক্ট করা শুরু করতে পারি। Agent Pane-এ নিম্নলিখিতটি লিখুন। এটি স্বয়ংক্রিয়ভাবে Cloud Run MCP সার্ভার ব্যবহার করবে এবং Cloud Run-এ চলমান পরিষেবাগুলির তালিকা আপনাকে দেখাবে।
Find me the list of services running in Cloud Run.
- 👉নিম্নলিখিত কমান্ড ব্যবহার করে অ্যাপটি স্থাপন করুন। আপনি কেবল প্রাকৃতিক ভাষা ব্যবহার করে স্থাপন করতে পারেন। অ্যান্টিগ্র্যাভিটি স্বয়ংক্রিয়ভাবে স্থাপনের জন্য MCP সার্ভার ব্যবহার করবে।
Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80
- 👉এজেন্ট আপনাকে দেখাবে যে অ্যাপটি কোথায় স্থাপন করা হয়েছে। যেমন https://photogallery-85469421903.us-central1.run.app । ক্লাউড এমসিপি সার্ভার আপনার ওয়েব অ্যাপটিকে ক্লাউড রানে স্থাপন করা খুব সহজ করে তোলে।
১০. পরিষ্কার করা
এবার আমরা যা তৈরি করেছি তা পরিষ্কার করা যাক।
- 👉আমাদের তৈরি করা Cloud Run অ্যাপটি মুছে ফেলুন। Cloud Run অ্যাক্সেস করে Cloud Run- এ যান। আগের ধাপে তৈরি করা অ্যাপটি আপনি দেখতে পাবেন। অ্যাপের পাশের বক্সে টিক চিহ্ন দিন এবং Delete বোতামে ক্লিক করুন।
চিত্র ৩৮: ক্লাউড রান অ্যাপটি মুছে ফেলা হচ্ছে
১১. উপসংহার
অভিনন্দন! আপনি স্পেক ড্রাইভেন ডেভেলপমেন্ট অনুশীলন অনুসরণ করে গুগল অ্যান্টিগ্রাভিটি ব্যবহার করে একটি অ্যাপ সফলভাবে তৈরি করেছেন। আপনি ক্লাউড রানে অ্যাপ্লিকেশনটি কীভাবে স্থাপন করবেন তাও শিখেছেন। এটি একটি উল্লেখযোগ্য অর্জন যা একটি আধুনিক ক্লাউড-নেটিভ অ্যাপ্লিকেশনের মূল জীবনচক্রকে কভার করে, আপনার নিজস্ব জটিল সিস্টেম স্থাপনের জন্য একটি শক্ত ভিত্তি প্রদান করে।
সংক্ষিপ্তসার
এই ল্যাবে আপনি শিখেছেন:
- গুগল অ্যান্টিগ্রাভিটি ব্যবহার করে মাল্টি এজেন্ট অ্যাপ্লিকেশন তৈরি করুন
- ক্লাউড রানে অ্যাপ্লিকেশনটি স্থাপন করুন
দরকারী সম্পদ