1। পরিচিতি
ওয়েব ডেভেলপমেন্টের জগতে, একটি ডিজাইন ধারণাকে একটি কার্যকরী ওয়েবসাইটে রূপান্তর করার প্রক্রিয়াটি সময়সাপেক্ষ এবং জটিল উভয়ই হতে পারে। যাইহোক, জেমিনির মতো জেনারেটিভ এআই মডেলের আবির্ভাবের সাথে, এই প্রক্রিয়াটি ক্রমশ সুগম এবং অ্যাক্সেসযোগ্য হয়ে উঠছে। আমরা একটি সমাধান তৈরি করব যা হাতে আঁকা ওয়্যারফ্রেমগুলিকে ওয়েবসাইট কোডে রূপান্তর করতে বিশেষজ্ঞ। এই শক্তিশালী টুলটি ডিজাইনার এবং ডেভেলপারদের একইভাবে তাদের ওয়েবসাইট ভিশনগুলিকে অভূতপূর্ব স্বাচ্ছন্দ্য এবং দক্ষতার সাথে জীবন্ত করার ক্ষমতা দেয়।
এই ল্যাবে, আমরা একটি ওয়েব অ্যাপ্লিকেশন তৈরি করব যা ব্যবহারকারীদের ওয়্যারফ্রেম থেকে ওয়েবসাইট কোড (html, css, এবং javascript) তৈরি করতে দেয় এবং ব্যবহারকারীরা Vertex AI-এর জেনারেটিভ এআই মডেলগুলি (জেমিনি 1.5 ফ্ল্যাশ, জেমিনি 1.5 প্রো, ইত্যাদি ব্যবহার করে প্রবেশ করার অনুরোধ জানায়৷ ) অ্যাপ্লিকেশনটি ফ্লাস্ক, একটি জনপ্রিয় পাইথন ওয়েব ফ্রেমওয়ার্ক ব্যবহার করে তৈরি করা হবে এবং জেনারেটিভ মডেল পরিষেবার সাথে যোগাযোগ করতে Vertex AI ক্লায়েন্ট লাইব্রেরি ব্যবহার করবে।
আপনি কি নির্মাণ করবেন
এই ল্যাবের শেষে, আপনার কাছে একটি কার্যকরী ওয়েব অ্যাপ্লিকেশন থাকবে যা ওয়্যারফ্রেম এবং প্রম্পট থেকে ছবি তৈরি করতে পারে। ভার্টেক্স এআই এর জেনারেটিভ এআই মডেলগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আপনার আরও ভাল ধারণা থাকবে।
আপনার ওয়েব অ্যাপ্লিকেশন এই মত দেখাবে:
অ্যাপটি কীভাবে প্রবাহিত হয়
- একটি হ্যান্ড-ড্রন ওয়্যারফ্রেম আপলোড করুন: ব্যবহারকারীরা তাদের হাতে আঁকা ওয়্যারফ্রেমের একটি ছবি অ্যাপে আপলোড করতে পারেন।
- একটি মডেল নির্বাচন করুন: অ্যাপটি বিভিন্ন ডিজাইন শৈলীর জন্য অপ্টিমাইজ করা প্রাক-প্রশিক্ষিত জেমিনি মডেলগুলির একটি নির্বাচন প্রদান করে।
- একটি প্রম্পট প্রদান করুন: ব্যবহারকারীরা ঐচ্ছিকভাবে মডেলের প্রজন্মকে গাইড করার জন্য একটি পাঠ্য প্রম্পট প্রদান করতে পারে।
- ওয়েবসাইট কোড তৈরি করুন: অ্যাপটি ওয়্যারফ্রেম এবং জেমিনিতে প্রম্পট পাঠায়, যা সংশ্লিষ্ট ওয়েবসাইট কোড তৈরি করে।
- ফলাফল প্রদর্শন করুন: জেনারেট করা কোডটি অ্যাপের প্রতিক্রিয়া পৃষ্ঠায় প্রদর্শিত হয়।
আমরা ওয়্যারফ্রেম এবং প্রম্পটগুলির মূল বিষয়গুলি এবং কীভাবে সেগুলি ওয়েবসাইট কোড তৈরি করতে ব্যবহার করা যেতে পারে তা নিয়ে আলোচনা করে শুরু করব। তারপরে আমরা ওয়েব অ্যাপ্লিকেশন তৈরির ধাপগুলি অতিক্রম করব, যার মধ্যে কীভাবে ব্যবহারকারীর ইনপুট পরিচালনা করা যায়, প্রতিক্রিয়া তৈরি করা যায় এবং ফলাফলগুলি প্রদর্শন করা যায়।
2. আপনি শুরু করার আগে
- Google ক্লাউড কনসোলে , প্রকল্প নির্বাচক পৃষ্ঠায়, একটি Google ক্লাউড প্রকল্প নির্বাচন করুন বা তৈরি করুন।
- আপনার Google ক্লাউড প্রকল্পের জন্য বিলিং সক্ষম করা আছে তা নিশ্চিত করুন৷ একটি প্রকল্পে বিলিং সক্ষম কিনা তা পরীক্ষা করতে শিখুন।
- আপনি Cloud Shell ব্যবহার করবেন, Google ক্লাউডে চলমান একটি কমান্ড-লাইন পরিবেশ। এটি অ্যাক্সেস করতে, Google ক্লাউড কনসোলের শীর্ষে সক্রিয় ক্লাউড শেল ক্লিক করুন।
- একবার ক্লাউড শেলের সাথে সংযুক্ত হয়ে গেলে, আপনি পরীক্ষা করে দেখুন যে আপনি ইতিমধ্যেই প্রমাণীকৃত হয়েছেন এবং নিম্নলিখিত কমান্ডটি ব্যবহার করে প্রকল্পটি আপনার প্রকল্প আইডিতে সেট করা আছে:
gcloud auth list
- gcloud কমান্ড আপনার প্রকল্প সম্পর্কে জানে তা নিশ্চিত করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান।
gcloud config list project
- যদি আপনার প্রজেক্ট সেট করা না থাকে, তাহলে এটি সেট করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
gcloud config set project <YOUR_PROJECT_ID>
- নিশ্চিত করুন যে নিম্নলিখিত API গুলি সক্রিয় করা হয়েছে:
- ক্লাউড রান
- ভার্টেক্স এআই
gcloud কমান্ড ব্যবহার করার বিকল্প এই লিঙ্কটি ব্যবহার করে কনসোলের মাধ্যমে যাচ্ছে। gcloud কমান্ড এবং ব্যবহারের জন্য ডকুমেন্টেশন পড়ুন।
3. ধাপ 1: একটি পাইথন ক্লাউড রান ওয়েব অ্যাপ বুটস্ট্র্যাপ করুন
আমরা প্রথমে ক্লাউড শেল থেকে পাইথন ক্লাউড রান ওয়েব অ্যাপ্লিকেশন টেমপ্লেট তৈরি করব।
ক্লাউড শেল টার্মিনালে নেভিগেট করুন এবং ওপেন এডিটর বোতামে ক্লিক করুন। 
নিশ্চিত করুন যে ক্লাউড কোড প্রকল্পটি ক্লাউড শেল সম্পাদকের নীচের বাম কোণে (স্ট্যাটাস বার) সেট করা আছে, যেমনটি নীচের ছবিতে হাইলাইট করা হয়েছে এবং সক্রিয় Google ক্লাউড প্রকল্পে সেট করা আছে যেখানে আপনি বিলিং সক্ষম করেছেন৷ অনুরোধ করা হলে অনুমোদন করুন ।
স্ট্যাটাস বারে সেই সক্রিয় প্রকল্পটিতে ক্লিক করুন এবং ক্লাউড কোড পপ আপ খোলার জন্য অপেক্ষা করুন। পপ আপে "নতুন অ্যাপ্লিকেশন" নির্বাচন করুন। 
অ্যাপ্লিকেশনের তালিকা থেকে, ক্লাউড রান অ্যাপ্লিকেশন নির্বাচন করুন:
পৃষ্ঠা 2/2-এর জন্য, পাইথন ফ্লাস্ক টেমপ্লেট নির্বাচন করুন:
আপনার ইচ্ছামতো প্রকল্পের নাম দিন (যেমন "আশ্চর্যজনক-জেমিনি-অ্যাপ") এবং ঠিক আছে ক্লিক করুন :
এটি আপনার সেটআপ করা নতুন প্রকল্পের টেমপ্লেট খুলবে।
গুগল ক্লাউড শেল দিয়ে একটি ওয়েব অ্যাপ্লিকেশন বুটস্ট্র্যাপ করা কতটা সহজ।
4. ধাপ 2: ফ্রন্টএন্ড তৈরি করুন
এটি করার জন্য, আমাদের একটি HTML পৃষ্ঠার প্রয়োজন হবে। সেই পৃষ্ঠাটিতে এমন কোড থাকবে যা ওয়েব অ্যাপ্লিকেশনের জন্য ব্যবহারকারীর ইন্টারফেসকে সংজ্ঞায়িত করে। এটিতে একটি ফর্ম রয়েছে যা ব্যবহারকারীদের একটি হাতে আঁকা ওয়্যারফ্রেম ছবি আপলোড করতে, একটি জেনারেটিভ মডেল নির্বাচন করতে এবং একটি পাঠ্য প্রম্পট প্রদান করতে দেয়৷ ফর্ম জমা দেওয়ার পরে, ফলাফল অন্য ট্যাবে প্রদর্শিত হবে।
নীচের কোডটি অনুলিপি করুন এবং টেমপ্লেট ফোল্ডারে আপনার index.html ফাইলটি প্রতিস্থাপন করুন:
<!DOCTYPE html>
<html>
<head>
<title>Draw a Website</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Ensure form is centered vertically */
background-color: #f4f4f4;
}
.container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="file"], textarea, select {
width: 100%;
padding:10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>Draw a Website</h2>
<form action="/response" target="_blank" method="post" enctype="multipart/form-data">
<input type="file" id="image-upload" name="image-upload" accept=".png, .jpg, .jpeg">
<select name="model">
<option value="gemini-1.5-flash-001">Gemini 1.5 Flash</option>
<option value="gemini-1.5-pro-001">Gemini 1.5 Pro</option>
<option value="gemini-1.0-pro-vision-001">Gemini 1.0 Pro Vision</option>
</select>
<textarea name="prompt" placeholder="Write your prompt here. For example: 'Convert this drawing into an html page'">Convert this drawing into an html page</textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
যখন একজন ব্যবহারকারী অ্যাপের সাথে ইন্টারঅ্যাক্ট করেন, তখন নিম্নলিখিত ক্রিয়াগুলি ঘটে:
- ব্যবহারকারী একটি ওয়্যারফ্রেম চিত্র নির্বাচন করে, একটি মডেল নির্বাচন করে এবং একটি প্রম্পট প্রবেশ করে।
- যখন ব্যবহারকারী "জমা দিন" বোতামে ক্লিক করেন, তখন ফর্ম ডেটা (ছবি, মডেল এবং প্রম্পট) HTTP POST পদ্ধতি ব্যবহার করে /response URL-এ পাঠানো হয়।
- সার্ভার-সাইড কোড (app.py-এ বাস্তবায়িত) ফর্ম ডেটা প্রক্রিয়া করে এবং নির্দিষ্ট মডেল এবং প্রম্পট ব্যবহার করে প্রতিক্রিয়া তৈরি করে।
- উত্পন্ন প্রতিক্রিয়া নতুন ট্যাবে প্রদর্শিত হয়।
আমরা এখন ওয়েব অ্যাপ্লিকেশনের ফ্রন্ট-এন্ড অংশ নিয়ে প্রস্তুত।
5. ধাপ 3: ব্যাকএন্ড তৈরি করুন (জেনারেটিভ এআই)
আসুন এই ওয়েব অ্যাপ্লিকেশনটির মূল অংশটি লিখি। app.py ফাইল যা ব্যবহারকারীর ইনপুট ছবি, মডেলের পছন্দ এবং প্রম্পট নেয় এবং এটিকে ওয়েবসাইট কোডে রূপান্তর করে।
app.py এর জন্য সম্পূর্ণ কোড কপি করুন:
# Import the necessary libraries.
import os
import random
from flask import (
Flask,
render_template,
request,
redirect
)
import vertexai
from vertexai.generative_models import (
GenerativeModel,
Image
)
# Initialize the Flask app.
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 16 MB per image
# TODO: Replace "YOUR_PROJECT_ID" before running
# Initialize the Vertex AI client library.
vertexai.init(project="YOUR_PROJECT_ID", location="us-central1")
# Define a function to generate response from a wireframe and a prompt.
def generate(wireframe, model, prompt):
'''Generates a response from a wireframe and a prompt.
Args:
wireframe: The wireframe image.
model: The generative model to use.
prompt: The prompt to use.
Returns:The generated response.
'''
# Create a GenerativeModel object.
model = GenerativeModel(model)
# Create a list of contents to pass to the model.
contents = [
wireframe,
prompt
]
# Generate the response.
responses = model.generate_content(
contents=contents,
stream=True,
)
# Concatenate the response text.
response = ""
for res in responses:
response += res.text.strip()
# Return the generated response.
return response
# Define the home page route.
@app.route('/', methods=['GET'])
def index():
'''Renders the home page.
Returns:The rendered template.
'''
return render_template('index.html')
# Define the response route.
@app.route('/response', methods=['GET', 'POST'])
def response():
'''Handles the response to the user's input.
Returns:The rendered template.
'''
# If the request is a POST request, process the form data.
if request.method == 'POST':
# Get the uploaded image from the request.
uploaded_image = request.files['image-upload']
# Convert the uploaded image to a wireframe image.
wireframe = Image.from_bytes(uploaded_image.read())
# Get the model and prompt from the request.
model = request.form['model']
prompt = request.form['prompt']
# Generate the response and render the response.
try:
response = generate(wireframe, model, prompt)
response = response.replace("```html", "").replace("```", "").strip()
return response
except ValueError as e:
raise e
# If the request is a GET request, redirect to the home page.
else:
return redirect('/')
# Run the app.
if __name__ == '__main__':
# Get the server port from the environment variables.
server_port = os.environ.get('PORT', '8080')
# Run the app.
app.run(debug=False, port=server_port, host='0.0.0.0')
কোডটি যা করে তা মূলত নিম্নলিখিতটি:
- এই কোডটি অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় লাইব্রেরি আমদানি করে:
ফ্লাস্ক: পাইথনের জন্য একটি হালকা ওয়েব ফ্রেমওয়ার্ক।
os: অপারেটিং সিস্টেমের সাথে ইন্টারঅ্যাক্ট করার জন্য।
random: এলোমেলো সংখ্যা তৈরি করার জন্য।
vertexai: Vertex AI ক্লায়েন্ট লাইব্রেরি।
জেনারেটিভ মডেল এবং ইমেজ: ভার্টেক্স এআই জেনারেটিভ মডেল লাইব্রেরি থেকে ক্লাস।
- ফ্লাস্ক অ্যাপ আরম্ভ করা হচ্ছে:
এর পরে, এটি ফ্লাস্ক অ্যাপ্লিকেশন শুরু করে এবং আপলোড করা চিত্রগুলির জন্য সর্বাধিক অনুমোদিত আকার 16 এমবি সেট করে।
- ভার্টেক্স এআই ক্লায়েন্ট শুরু করা হচ্ছে
এটি নির্দিষ্ট প্রকল্প আইডি এবং অবস্থান সহ ভার্টেক্স এআই ক্লায়েন্ট লাইব্রেরি শুরু করে। আপনার প্রকল্প আইডি দিয়ে YOUR_PROJECT_ID প্রতিস্থাপন করা নিশ্চিত করুন।
- জেনারেট ফাংশন সংজ্ঞায়িত করা
এই ফাংশনটি একটি ওয়্যারফ্রেম ইমেজ, একটি জেনারেটিভ মডেল এবং ইনপুট হিসাবে একটি প্রম্পট নেয়। এটি তারপর নির্দিষ্ট মডেল এবং প্রম্পট ব্যবহার করে ওয়েবসাইট html তৈরি করে। উত্পন্ন প্রতিক্রিয়া একটি স্ট্রিং হিসাবে ফেরত দেওয়া হয়.
- হোম পেজ রুট সংজ্ঞায়িত করা
এই ফাংশন হোম পেজ রুট সংজ্ঞায়িত করে। যখন একজন ব্যবহারকারী অ্যাপ্লিকেশনটির রুট URL পরিদর্শন করেন, তখন এই ফাংশনটি বলা হয়। এটি index.html টেমপ্লেট রেন্ডার করে, যা অ্যাপ্লিকেশনটির হোম পেজ।
- প্রতিক্রিয়া রুট সংজ্ঞায়িত করা
এই ফাংশন প্রতিক্রিয়া রুট সংজ্ঞায়িত করে. যখন একজন ব্যবহারকারী হোম পেজে ফর্ম জমা দেন, তখন এই ফাংশনটি বলা হয়। এটি আপলোড করা ছবি, মডেল এবং প্রম্পট প্রক্রিয়া করে এবং তারপর ওয়েবসাইট কোড তৈরি করে। উত্পন্ন প্রতিক্রিয়া নতুন ট্যাবে প্রদর্শিত হয়।
- অ্যাপ্লিকেশন চলমান
কোডের এই অংশটি চেক করে যে স্ক্রিপ্টটি মূল প্রোগ্রাম হিসাবে চালানো হচ্ছে কিনা। যদি তাই হয়, এটি পরিবেশের ভেরিয়েবল থেকে সার্ভার পোর্ট পায় এবং নির্দিষ্ট পোর্টে অ্যাপটি চালায়।
6. ধাপ 4: নির্ভরতা এবং ডকারফাইল প্রস্তুত করুন
আপনার requirements.txt ফাইলে নিম্নলিখিত নির্ভরতা আছে তা নিশ্চিত করুন:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38
নীচের সাথে ডকারফাইল সামগ্রী প্রতিস্থাপন করুন:
# Python image to use.
FROM python:3.11-slim
# Set the working directory to /app
WORKDIR /app
# copy the requirements file used for dependencies
COPY requirements.txt .
# Install any needed packages specified in requirements.txt
RUN pip install -r requirements.txt
# Copy the rest of the working directory contents into the container at /app
COPY . .
# Run app.py when the container launches
ENTRYPOINT ["python", "app.py"]
7. ধাপ 5: ওয়েব অ্যাপ্লিকেশন স্থাপন করুন
এখন যেহেতু আমরা অ্যাপ্লিকেশন উপাদান তৈরি করেছি, আসুন অ্যাপটি স্থাপন করি।
ক্লাউড শেল টার্মিনালে নেভিগেট করুন এবং নিশ্চিত করুন যে বর্তমান প্রকল্পটি আপনার সক্রিয় প্রকল্পে কনফিগার করা হয়েছে, যদি না আপনি প্রকল্প আইডি সেট করতে gcloud configure কমান্ড ব্যবহার করেন:
gcloud config set project [PROJECT_ID]
তারপর এক এক করে সেই ক্রমে নিম্নলিখিত কমান্ডগুলি লিখুন:
cd draw-a-website
gcloud run deploy --source .
এটি আপনাকে আপনার পরিষেবার জন্য একটি নাম লিখতে অনুরোধ করবে, আসুন বলি " ড্র-ওয়েবসাইট "। " us-central1 " অঞ্চলের জন্য সংশ্লিষ্ট নম্বরটি বেছে নিন। " y " বলুন যখন এটি জিজ্ঞাসা করে যে আপনি অননুমোদিত আহ্বানের অনুমতি দিতে চান কিনা। মনে রাখবেন যে আমরা এখানে অননুমোদিত অ্যাক্সেসের অনুমতি দিচ্ছি কারণ এটি একটি ডেমো অ্যাপ্লিকেশন। আপনার এন্টারপ্রাইজ এবং উত্পাদন অ্যাপ্লিকেশনের জন্য উপযুক্ত প্রমাণীকরণ ব্যবহার করার জন্য সুপারিশ করা হয়।
একবার স্থাপনা সম্পূর্ণ হলে, আপনি নীচের অনুরূপ একটি লিঙ্ক পেতে হবে:
**https://draw-website-***** eua-uc.a.run.app/
এগিয়ে যান এবং আপনার আবেদন পরীক্ষা করুন:
8. পরিষ্কার করুন
এই কোডল্যাবে ব্যবহৃত সংস্থানগুলির জন্য আপনার Google ক্লাউড অ্যাকাউন্টে চার্জ এড়াতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- Google ক্লাউড কনসোলে, সম্পদ পরিচালনা পৃষ্ঠাতে যান।
- প্রকল্প তালিকায়, আপনি যে প্রকল্পটি মুছতে চান সেটি নির্বাচন করুন এবং তারপরে মুছুন ক্লিক করুন।
- ডায়ালগে, প্রজেক্ট আইডি টাইপ করুন এবং তারপরে প্রোজেক্ট মুছে ফেলতে শাট ডাউন ক্লিক করুন।
- বিকল্পভাবে আপনি কনসোলে ক্লাউড রানে যেতে পারেন, আপনি যে পরিষেবাটি স্থাপন করেছেন তা নির্বাচন করুন এবং মুছুন।
9. অভিনন্দন
অভিনন্দন! আপনি সফলভাবে পাইথন ফ্লাস্কে একটি দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করেছেন যা ক্লাউড রানে স্থাপন করা হয়েছে যা অঙ্কনগুলিকে ওয়েবসাইটগুলিতে রূপান্তরিত করে৷ সম্পূর্ণ রেপো এখানে । ড্র-এ-ওয়েবসাইট অ্যাপটি ওয়েব ডেভেলপমেন্ট প্রক্রিয়াকে স্ট্রিমলাইন করার ক্ষেত্রে মিথুনের রূপান্তরকারী শক্তি প্রদর্শন করে। AI ব্যবহার করে, আমরা ডিজাইনার এবং ডেভেলপারদের আরও বেশি গতি, নির্ভুলতা এবং সৃজনশীলতার সাথে ওয়েবসাইট তৈরি করার ক্ষমতা দিতে পারি। যেহেতু জেনারেটিভ এআই মডেলগুলি বিকশিত হতে থাকে, আমরা ভবিষ্যতে আরও যুগান্তকারী অ্যাপ্লিকেশন আশা করতে পারি।