১. এই ল্যাবের উদ্দেশ্য
এই হ্যান্ডস-অন ল্যাবে আপনি শিখবেন কীভাবে গুগল অ্যান্টিগ্র্যাভিটি ব্যবহার করে অ্যাপ্লিকেশন তৈরি করতে হয় এবং তা গুগল ক্লাউডে ডেপ্লয় করতে হয়। এই ল্যাবটি আপনাকে স্পেক ড্রাইভেন ডেভেলপমেন্ট ধারণার সাথেও পরিচয় করিয়ে দেবে।
আপনি যা শিখবেন
- গুগল অ্যান্টিগ্র্যাভিটির মূল বিষয়গুলো বুঝুন।
- স্পেক ড্রাইভেন ডেভেলপমেন্টের মূল বিষয়গুলো বুঝুন
- ক্লাউড রান- এ কীভাবে সহজে অ্যাপ ডেপ্লয় করা যায় তা জানুন।
চিত্র ১: অ্যান্টিগ্র্যাভিটি হলো গুগল কর্তৃক তৈরি এজেন্ট ফার্স্ট ডেভেলপমেন্ট টুল।
২. পরিবেশ সেটআপ
- অ্যান্টিগ্র্যাভিটি ইনস্টল করুন:
👉Download the [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from [here](https://antigravity.google/).
👉আপনার পরিবেশে অ্যান্টিগ্র্যাভিটি ইনস্টল করুন।
👉আপনার Antigravity যে ফোল্ডারে ইনস্টল করা আছে, সেখানে যান এবং ইনস্টলারটি খুলতে ডাবল ক্লিক করুন।
👉আপনার পরিবেশে Antigravity ইনস্টল করতে ইনস্টলারের নির্দেশাবলী অনুসরণ করুন।
- পাইথন ইনস্টল করুন
👉https ://www.python.org/downloads/ ওয়েবসাইটে গিয়ে আপনার সিস্টেমের জন্য পাইথন ইনস্টল করুন।
- gcloud ইনস্টল করুন
👉gcloud হলো একটি কমান্ড লাইন টুল যা আপনাকে গুগল ক্লাউডে বিভিন্ন অপারেশন সম্পাদন করতে সাহায্য করে। আপনার পরিবেশে 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
৪. এপিআই সক্রিয় করুন
এই ল্যাবটি চালানোর জন্য আমাদের কিছু এপিআই পরিষেবা সক্রিয় করতে হবে। ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান।
gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com
এপিআইগুলো চালু করা হচ্ছে
- ভার্টেক্স এআই এপিআই (
aiplatform.googleapis.com) ভার্টেক্স এআই প্ল্যাটফর্মে প্রবেশের সুযোগ করে দেয়, যার ফলে আপনার অ্যাপ্লিকেশন টেক্সট জেনারেশন, চ্যাট সেশন এবং ফাংশন কলিংয়ের জন্য জেমিনি মডেলের সাথে যোগাযোগ করতে পারে। - ক্লাউড রিসোর্স ম্যানেজার এপিআই (
cloudresourcemanager.googleapis.com) আপনাকে আপনার গুগল ক্লাউড প্রোজেক্টের মেটাডেটা, যেমন প্রোজেক্ট আইডি এবং নাম, প্রোগ্রাম্যাটিকভাবে পরিচালনা করার সুযোগ দেয়, যা প্রায়শই অন্যান্য টুল এবং এসডিকে-র প্রোজেক্টের পরিচয় ও অনুমতি যাচাই করার জন্য প্রয়োজন হয়।
৫. আপনার ক্রেডিটগুলো প্রয়োগ করা হয়েছে কিনা তা নিশ্চিত করুন।
প্রজেক্ট সেটআপ পর্যায়ে আপনি বিনামূল্যের ক্রেডিটের জন্য আবেদন করেছেন, যা আপনাকে গুগল ক্লাউডের পরিষেবাগুলো ব্যবহার করতে সক্ষম করে। আপনি যখন ক্রেডিটগুলো প্রয়োগ করেন, তখন 'গুগল ক্লাউড প্ল্যাটফর্ম ট্রায়াল বিলিং অ্যাকাউন্ট' নামে একটি নতুন বিনামূল্যের বিলিং অ্যাকাউন্ট তৈরি হয়। ক্রেডিটগুলো প্রয়োগ হয়েছে কিনা তা নিশ্চিত করতে, ক্লাউড শেল এডিটরে নিম্নলিখিত ধাপগুলো অনুসরণ করুন।
curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3
সফল হলে, আপনি নীচের মতো ফলাফল দেখতে পাবেন: যদি আপনি "প্রজেক্ট সফলভাবে লিঙ্ক করা হয়েছে" দেখতে পান, তাহলে আপনার বিলিং অ্যাকাউন্টটি সঠিকভাবে সেট করা আছে। উপরের ধাপটি অনুসরণ করে আপনি পরীক্ষা করতে পারেন আপনার অ্যাকাউন্টটি লিঙ্ক করা আছে কিনা; লিঙ্ক করা না থাকলে, এটি আপনার জন্য লিঙ্ক করে দেবে। আপনি যদি প্রজেক্ট নির্বাচন না করে থাকেন, তবে এটি আপনাকে একটি প্রজেক্ট বেছে নিতে বলবে, অথবা আপনি প্রজেক্ট সেটআপের ধাপগুলো অনুসরণ করে আগে থেকেই তা করে নিতে পারেন। 
চিত্র ৩: বিলিং অ্যাকাউন্ট লিঙ্ক করার নিশ্চিতকরণ
৬. গুগল অ্যান্টিগ্র্যাভিটির পরিচিতি
গুগল অ্যান্টিগ্র্যাভিটি হলো গুগল ডিপমাইন্ড দ্বারা তৈরি একটি এআই-ফার্স্ট সফটওয়্যার ডেভেলপমেন্ট টুল। গুগল অ্যান্টিগ্র্যাভিটি দীর্ঘদিনের সঞ্চিত সফটওয়্যার ডেভেলপমেন্ট জ্ঞানকে অত্যাধুনিক এআই-এর সাথে একত্রিত করে ডেভেলপারদের জন্য একটি মসৃণ এবং নির্বিঘ্ন এআই-চালিত ডেভেলপমেন্ট অভিজ্ঞতা প্রদান করে।
এখানে গুগল অ্যান্টিগ্র্যাভিটির কিছু প্রধান বৈশিষ্ট্য দেওয়া হলো।
নিচের চিত্রে গুগল অ্যান্টিগ্র্যাভিটির মৌলিক উপাদানগুলো দেখানো হয়েছে।
- 👉ব্রাউজারটি খুলুন এবং এর বিভিন্ন অংশ ঘুরে দেখতে শুরু করুন।
চিত্র ৪: গুগল অ্যান্টিগ্র্যাভিটির মৌলিক উপাদানসমূহ, বিস্তারিত বিবরণ সারণি ১-এ দেওয়া হলো।
সারণি ১: গুগল অ্যান্টিগ্র্যাভিটির মৌলিক উপাদানগুলোর বিবরণ
| | |
| | |
| | |
| | |
| | |
| | |
| | |
- অন্তর্নির্মিত জেমিনি ৩ এবং ন্যানোবানানা মডেল : গুগল অ্যান্টিগ্র্যাভিটির মাধ্যমে আপনি জেমিনি ৩ এবং ন্যানোবানানার মতো গুগলের সর্বাধুনিক ফ্ল্যাগশিপ মডেলগুলো ব্যবহার করতে পারবেন। এই মডেলগুলোর পাশাপাশি আপনি ক্লডের মতো থার্ড-পার্টি মডেলও ব্যবহার করতে পারবেন।
চিত্র ৫: গুগল অ্যান্টিগ্র্যাভিটি ২-এ আপনার অনেকগুলো মডেল ব্যবহার করার সুযোগ রয়েছে । এজেন্ট চালিত কোডিং : অ্যান্টিগ্র্যাভিটি একটি নেটিভ এজেন্ট চালিত কোডিং অভিজ্ঞতা প্রদান করে যা ডেভেলপারদের কাজে কোনো বাধা ছাড়াই উৎপাদনশীল থাকতে সাহায্য করে।
- পরিকল্পনা এবং ব্যবহারকারীর পূর্ণ নিয়ন্ত্রণ : এজেন্ট আপনার দেওয়া তথ্য গ্রহণ করে কাজটি একটি পরিকল্পনায় রূপান্তরিত করে এবং তা কার্যকর করার আগে আপনার অনুমোদন চায়। এর ফলে, ব্যবহারকারী কাজটি শুরু হওয়ার আগে যেকোনো সময় এজেন্টের কার্যনির্দেশনা পরিবর্তন করতে পারেন।
- ব্যবহারকারীর মতামত : এজেন্ট কার্য সম্পাদনের সময়, ব্যবহারকারীর যদি এজেন্টকে অতিরিক্ত নির্দেশনা দেওয়ার প্রয়োজন হয়, তবে তিনি মতামত জানাতে পারেন।
- একাধিক এজেন্ট : আপনি একই সাথে বিভিন্ন কাজ করার জন্য একাধিক এজেন্ট তৈরি করতে পারেন। উদাহরণস্বরূপ, এজেন্ট A আপনার অথেন্টিকেশন লজিক রিফ্যাক্টরিং করতে পারে, এজেন্ট B একটি নতুন API-এর জন্য ইউনিট টেস্ট লিখতে পারে এবং এজেন্ট C ব্যাকগ্রাউন্ডে একটি লাইব্রেরি নিয়ে গবেষণা করতে পারে।
- এডিটর, টার্মিনাল এবং ব্রাউজার জুড়ে এজেন্ট : গুগল অ্যান্টিগ্র্যাভিটি এজেন্টগুলো একাধিক প্ল্যাটফর্মে কাজ করে।
- এডিটর : গুগল অ্যান্টিগ্র্যাভিটি এজেন্টরা কোড লেখে এবং সেই লিখিত কোডটি এডিটরে আপনার সামনে উপস্থাপন করে।
- টার্মিনাল : কাজের ধরনের ওপর নির্ভর করে, কিছু কমান্ড কার্যকর করার জন্য গুগল অ্যান্টিগ্র্যাভিটি এজেন্টদের আপনার টার্মিনালে প্রবেশের প্রয়োজন হতে পারে। প্রয়োজনের সময় এজেন্টরা আপনার হয়ে কমান্ডগুলো কার্যকর করতে পারে।
- ব্রাউজার : এজেন্ট আপনার ব্রাউজারের সাথেও কাজ করতে পারে। এটি বিশেষত সহায়ক যদি আপনার ওয়েব অ্যাপ্লিকেশন পরীক্ষা করার প্রয়োজন হয়, কারণ এজেন্ট আপনার অ্যাপ্লিকেশনটি ওয়েব ব্রাউজারে চালিয়ে পরীক্ষা ও ডিবাগ করতে পারে।
৭. এআই স্পেক-ড্রাইভেন ডেভেলপমেন্টের ভূমিকা
স্পেক-ড্রাইভেন ডেভেলপমেন্ট (Spec-Driven Development) হলো একটি উদীয়মান সফটওয়্যার ইঞ্জিনিয়ারিং প্যারাডাইম, যা কাঠামোগত স্পেসিফিকেশন এবং এআই এজেন্টকে ডেভেলপমেন্ট লাইফসাইকেলের কেন্দ্রে স্থাপন করে। সাধারণ এআই কোডিংয়ে প্রচলিত "প্রম্পট-অ্যান্ড-প্যাচ" (ট্রায়াল অ্যান্ড এরর) পদ্ধতির বিপরীতে, এসডিডি পুঙ্খানুপুঙ্খভাবে রিকোয়ারমেন্ট সংগ্রহ, সিস্টেম/আর্কিটেকচার ডিজাইন এবং টেস্ট প্ল্যানিংকে অগ্রাধিকার দেয়। এটি ওয়াটারফল মডেলের ডিজাইন পর্বের কঠোরতাকে গ্রহণ করে, কিন্তু অটোমেশনের মাধ্যমে এটিকে একটি আধুনিক, অ্যাজাইল ইটারেটিভ লুপে একীভূত করে। যদিও এই প্রক্রিয়ায় আগে থেকেই পুঙ্খানুপুঙ্খ পরিকল্পনা এবং ডকুমেন্টেশন করার প্রয়োজন হয়, এটি আসলে একটি ইটারেটিভ প্রক্রিয়া, কারণ এআই এজেন্টগুলো দ্রুত ইমপ্লিমেন্টেশন এবং টেস্টিং সক্ষম করে। এর ফলে আপনি দ্রুত ফিডব্যাক পেতে পারেন, যা ডকুমেন্টেশন উন্নত করতে ব্যবহার করা যায়।
মূল দর্শন
এই মডেলে, মানব প্রকৌশলীরা 'কোড লেখক' থেকে 'সিস্টেম আর্কিটেক্ট'-এ রূপান্তরিত হন। মানুষের প্রধান দায়িত্ব হলো সমস্যা ও সমাধানের নির্ভুল বর্ণনা প্রদান করা। এই বিশদ আউটপুটটি তথ্যের একক উৎস (Single Source of Truth - SSOT) হিসেবে কাজ করে, যা এআই এজেন্টরা কোডবেস তৈরি, যাচাই এবং পরিমার্জন করতে ব্যবহার করে।
এসডিডি জীবনচক্র
প্রক্রিয়াটির নিম্নলিখিত উপাদানগুলো রয়েছে। ধাপ ১-৩ মূলত মানব-কেন্দ্রিক, অপরদিকে ধাপ ৪-৫ এআই এজেন্ট-কেন্দ্রিক। এটি একটি পুনরাবৃত্তিমূলক প্রক্রিয়া, যেখানে একটি চক্র শেষে প্রাপ্ত প্রতিক্রিয়া স্পেসিফিকেশন উন্নত করার জন্য ব্যবহার করা যেতে পারে।
- প্রয়োজনীয়তা সংগ্রহ: ব্যবসায়িক যুক্তি, ব্যবহারকারীর চাহিদা এবং সিস্টেমের সীমাবদ্ধতার সুনির্দিষ্ট শনাক্তকরণ।
- স্থাপত্য নকশা: সিস্টেমের কাঠামো, ডেটা মডেল এবং ইন্টিগ্রেশন পয়েন্ট নির্ধারণ করা।
- সিস্টেম ও টেস্ট স্পেসিফিকেশন: মেশিন-পাঠযোগ্য (বা অত্যন্ত সুসংগঠিত) নথি তৈরি করা, যা সিস্টেমটি কী কাজ করে এবং কীভাবে এর বৈধতা যাচাই করা হবে তা সংজ্ঞায়িত করে।
- স্বয়ংক্রিয় কোড তৈরি: এআই এজেন্টরা স্পেসিফিকেশনগুলো ব্যবহার করে প্রোডাকশন-উপযোগী কোড উৎপাদন করে।
- পরীক্ষণ ও যাচাইকরণ: স্বয়ংক্রিয় স্যুটগুলো টেস্ট স্পেসিফিকেশনের সাথে জেনারেট করা কোড যাচাই করে।
মূল পরিচালন নীতি
- ডিজাইন-বাস্তবায়ন চক্র
ধাপ ১ থেকে ৫ কোনো রৈখিক পথ নয়, বরং একটি অবিচ্ছিন্ন ফিডব্যাক লুপ । যেহেতু কোড জেনারেশন (ধাপ ৪) এবং টেস্টিং (ধাপ ৫) মূলত স্বয়ংক্রিয়, তাই ইঞ্জিনিয়ারিং টিম তাদের বেশিরভাগ মনোযোগ প্রথম তিনটি পর্যায়ে দিতে পারে। যখন কোনো বাগ খুঁজে পাওয়া যায় বা কোনো ফিচারে পরিবর্তন আসে, তখন ইঞ্জিনিয়ার কোড নয়, বরং স্পেসিফিকেশন আপডেট করেন এবং লুপটিকে আবার চালু করেন।
- মডুলার গ্র্যানুলারিটি
সিস্টেমের অখণ্ডতা বজায় রাখতে, এসডিডি একক ব্লকের পরিবর্তে সূক্ষ্ম মডিউলগুলিতে প্রয়োগ করতে হবে।
- বিচ্ছিন্নতা: যদি কোনো নির্দিষ্ট মডিউল যাচাইকরণে ব্যর্থ হয়, তবে শুধুমাত্র সেই মডিউলটিকেই পুনরায় নির্দিষ্ট এবং পুনরায় তৈরি করতে হবে।
- প্রসারণযোগ্যতা: ছোট, সুসংজ্ঞায়িত মডিউলগুলো এআই-এর 'বিভ্রম' প্রতিরোধ করে এবং নিশ্চিত করে যে এআই এজেন্টের প্রেক্ষাপট সুনির্দিষ্ট ও নির্ভুল থাকে।
- গুণমান নিয়ন্ত্রণ
এই কাঠামোতে, সিস্টেম স্পেসিফিকেশন হলো নকশা এবং টেস্ট স্পেসিফিকেশন হলো বিচারক। টেস্ট স্পেসিফিকেশন নিশ্চিত করে যে, উৎপাদিত কোড সর্বদা পূর্বনির্ধারিত গুণগত মানদণ্ড মেনে চলবে। এই সম্পূর্ণ প্রক্রিয়াটি বিদ্যমান CICD পাইপলাইনে নির্বিঘ্নে একীভূত করা যায়, যা নিশ্চিত করে যে সিস্টেমের সার্বিক স্বাস্থ্যও গুণগত মানদণ্ড পূরণ করে।
এই ল্যাবে আমরা গুগল অ্যান্টিগ্র্যাভিটি ব্যবহার করে স্পেক-ড্রাইভেন ডেভেলপমেন্টের মূল বিষয়গুলো অন্বেষণ করব।
৮. গুগল অ্যান্টিগ্র্যাভিটি ব্যবহার করে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করা
এই ল্যাবে আমরা একটি সাধারণ ফটো গ্যালারি অ্যাপ্লিকেশন তৈরি করব। ন্যানোবানানা নামক ইমেজ জেনারেশন মডেলটি গুগল অ্যান্টিগ্র্যাভিটির ভেতরে তৈরি করা হয়েছে। প্রয়োজনীয় ছবিগুলো তৈরি করতে আমরা ন্যানোবানানা ব্যবহার করব।
ওয়েব ব্রাউজার সেটআপ করুন
অ্যাপটির স্বয়ংক্রিয় পরীক্ষার জন্য ওয়েব ব্রাউজারটি ব্যবহার করা হবে। নিচের ধাপগুলোতে আমরা ব্রাউজারটি এমনভাবে সেট আপ করব যাতে অ্যান্টিগ্র্যাভিটি অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে পরীক্ষা করতে পারে।
- 👉উপরের ডান কোণায় থাকা সেটিংস বোতামে (গিয়ার আইকন) ক্লিক করুন এবং "ওপেন অ্যান্টিগ্র্যাভিটি ইউজার সেটিংস" নির্বাচন করুন।
- 👉বাম দিকের প্যানেলে Agent-এ ক্লিক করুন এবং ARTIFACT সেকশনে, Review Policy থেকে "Always Proceed" সিলেক্ট করুন।
- 👉বাম দিকের প্যানেলে ব্রাউজারে ক্লিক করুন এবং নিশ্চিত করুন যে ‘Enable Browser Tools’ অপশনটি চালু আছে।
গুগল অ্যান্টিগ্র্যাভিটি দিয়ে অ্যাপ্লিকেশন তৈরি করুন
- 👉 গুগল অ্যান্টিগ্র্যাভিটি আইকনে ক্লিক করে গুগল অ্যান্টিগ্র্যাভিটি খুলুন।
- 👉আপনার ব্যক্তিগত ফোল্ডারে (যেমন: ডেস্কটপ) " গ্যালারি " নামে একটি ফোল্ডার তৈরি করুন।
- 👉অ্যান্টিগ্র্যাভিটিতে ‘ওপেন ফোল্ডার’ চাপুন এবং ‘গ্যালারি’ ফোল্ডারটি নির্বাচন করুন। এটি ‘গ্যালারি’ ফোল্ডারের ভিতরে একটি নতুন ওয়ার্কস্পেস খুলবে।
- 👉যদি এজেন্ট পেইনটি আগে থেকে খোলা না থাকে, তাহলে " টগল এজেন্ট পেইন " বোতামে ক্লিক করে এটি খুলুন। চিত্র ৪-এর ২ নং বোতামটি দেখুন।
- 👉আপনি এজেন্ট প্যানে আপনার নির্দেশাবলী টাইপ করে কোডিং শুরু করতে পারেন। নির্দেশাবলী যতটা সম্ভব স্পষ্ট করা খুব জরুরি। এজেন্ট প্যানে নিম্নলিখিতগুলি লিখুন।
**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. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
- 👉রান বাটনে ক্লিক করুন। এজেন্টটি রান করলে নিচের মতো এক্সিকিউশন প্ল্যানটি দেখা যাবে।
চিত্র ৫: অ্যান্টিগ্র্যাভিটি এজেন্ট আপনাকে বাস্তবায়ন পরিকল্পনা দেখাবে।
- 👉আপনাকে নিশ্চিত করার জন্য অনুরোধ করা হবে, অনুগ্রহ করে নিচে দেখানো অনুযায়ী নিশ্চিত করুন। অ্যান্টিগ্র্যাভিটি কাজটি সম্পন্ন করার জন্য স্বয়ংক্রিয়ভাবে ন্যানোবানানা এবং নির্বাচিত এলএলএম মডেলটি ব্যবহার করবে।
চিত্র ৬: অ্যান্টিগ্র্যাভিটি একটি কমান্ড চালাতে চায়, চালানোর অনুমতি দিতে রান চাপুন।
চিত্র ৭: নির্দেশিত হলে 'সব গ্রহণ করুন' চাপুন।
- 👉কোড তৈরি হয়ে গেলে, অ্যান্টিগ্র্যাভিটি ব্রাউজার খুলে টেস্টিং শুরু করবে। টেস্টিং শেষে এটি আপনাকে পরীক্ষার ফলাফল জানিয়ে দেবে।
চিত্র ৮: অ্যান্টিগ্র্যাভিটি আপনাকে পরীক্ষার ফলাফল দেখাবে। - 👉প্রম্পট করা হলে, এজেন্ট প্যানে তৈরি হওয়া সমস্ত কোড সংরক্ষণ করতে "সব গ্রহণ করুন" চাপুন।
- 👉অ্যান্টিগ্র্যাভিটির এক্সপ্লোরার প্যানে নতুন তৈরি হওয়া কোডটি দেখতে পাবেন।
চিত্র ৯: চূড়ান্ত কোড - 👉অ্যাপ্লিকেশনটি পরীক্ষা করতে index.html-এর উপর রাইট ক্লিক করে ফাইলটির পাথ (path) নিন এবং ওয়েব ব্রাউজারের ইউআরএল বারে (url bar) সেই পাথটি পেস্ট করুন।
চিত্র ১০: অ্যাপটি পরীক্ষা করার জন্য, আপনার ওয়েব ব্রাউজারে index.html ফাইলের পাথটি কপি করুন।
৯. ডেপ্লয় করার জন্য পরিবেশ প্রস্তুত করুন
- 👉আপনার গুগল ক্লাউড প্রজেক্ট আইডি পেতে: https://console.cloud.google.com- এ যান।
- 👉উপরের বাম দিকে ক্লিক করে আপনার প্রজেক্ট আইডিটি কোথাও কপি করে রাখুন, আমরা পরবর্তী ধাপগুলোতে এটি ব্যবহার করব।
চিত্র ১১: আপনার প্রজেক্ট আইডিটি কপি করে ভবিষ্যতের জন্য কোথাও সংরক্ষণ করুন। - 👉অ্যান্টিগ্র্যাভিটিতে, মেনু থেকে Terminal->New Terminal- এ ক্লিক করে টার্মিনাল খুলুন।
- 👉আমাদের এনভায়রনমেন্ট ভেরিয়েবল সেট করতে হবে, যা Windows এবং Mac/Linux-এর জন্য আলাদা। "YOUR CLOUD PROJECT"-এর জায়গায় ধাপ ২-এ উল্লিখিত ভেরিয়েবলটি বসান। Windows Powershell ব্যবহারকারীদের জন্য দ্রষ্টব্য: Powershell অ্যাডমিন মোডে খুলুন।
#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
চিত্র ১২: প্রমাণীকরণ সম্পাদন করুন।
- 👉ক্লাউড রান এমসিপি সার্ভার ইনস্টল করুন। অ্যান্টিগ্র্যাভিটি উইন্ডোর উপরের ডানদিকে, "..." এ ক্লিক করুন। আপনি "এমসিপি সার্ভারস" অপশনটি দেখতে পাবেন, সেটিতে ক্লিক করুন। এমসিপি সার্ভারগুলো এজেন্টের এক্সটেনশনের মতো, যা এজেন্টদেরকে বাইরের ডেটা এবং টুলস অ্যাক্সেস করার সুযোগ দেয়।
- 👉সার্চ বক্সে "Cloud Run" লিখে "Cloud Run"-এ ক্লিক করুন।
চিত্র ১৩: ক্লাউড রান এমসিপি সার্ভার - 👉MCP সার্ভারস শিরোনামের পাশে থাকা ব্যাক অ্যারো কী চেপে এজেন্ট প্যানে ফিরে যান। এখন আমরা গুগল ক্লাউড রানের সাথে ইন্টারঅ্যাক্ট করা শুরু করতে পারি। এজেন্ট প্যানে নিম্নলিখিতটি লিখুন। এটি স্বয়ংক্রিয়ভাবে ক্লাউড রান MCP সার্ভার ব্যবহার করবে এবং ক্লাউড রানে চলমান পরিষেবাগুলির তালিকা আপনাকে দেখাবে।
Find me the list of services running in Cloud Run.
- 👉নিম্নলিখিত কমান্ডটি ব্যবহার করে অ্যাপটি ডেপ্লয় করুন। আপনি স্বাভাবিক ভাষা ব্যবহার করে সহজেই ডেপ্লয় করতে পারেন। Antigravity স্বয়ংক্রিয়ভাবে ডেপ্লয় করার জন্য 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 । ক্লাউড এমসিপি সার্ভার আপনার ওয়েব অ্যাপকে ক্লাউড রানে ডেপ্লয় করা অত্যন্ত সহজ করে তোলে।
১০. পরিষ্কার করুন
এবার আমরা যা তৈরি করেছি তা পরিষ্কার করে ফেলি।
- 👉এইমাত্র তৈরি করা ক্লাউড রান অ্যাপটি ডিলিট করুন। ক্লাউড রান -এ প্রবেশ করে সেখানে যান। আপনি আগের ধাপে তৈরি করা অ্যাপটি দেখতে পাবেন। অ্যাপটির পাশের বক্সে টিক চিহ্ন দিন এবং ডিলিট বোতামে ক্লিক করুন।
চিত্র ৩৮: ক্লাউড রান অ্যাপ মুছে ফেলা
১১. উপসংহার
অভিনন্দন! আপনি স্পেক-ড্রাইভেন ডেভেলপমেন্ট পদ্ধতি অনুসরণ করে গুগল অ্যান্টিগ্র্যাভিটি ব্যবহার করে সফলভাবে একটি অ্যাপ তৈরি করেছেন। আপনি ক্লাউড রান -এ অ্যাপ্লিকেশনটি কীভাবে ডেপ্লয় করতে হয়, তাও শিখেছেন। এটি একটি উল্লেখযোগ্য অর্জন যা একটি আধুনিক ক্লাউড-নেটিভ অ্যাপ্লিকেশনের মূল জীবনচক্রকে অন্তর্ভুক্ত করে এবং আপনার নিজস্ব জটিল সিস্টেম ডেপ্লয় করার জন্য একটি মজবুত ভিত্তি প্রদান করে।
পুনরালোচনা
এই ল্যাবে আপনি শিখেছেন:
- গুগল অ্যান্টিগ্র্যাভিটি ব্যবহার করে মাল্টি এজেন্ট অ্যাপ্লিকেশন তৈরি করুন
- অ্যাপ্লিকেশনটি ক্লাউড রানে স্থাপন করুন
দরকারী সম্পদ