একটি ওয়েবসাইট আঁকুন: মিথুন মডেল ব্যবহার করে আপনার কল্পনাকে একটি ওয়েবসাইটে রূপান্তর করুন!

১. ভূমিকা

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

এই ল্যাবে, আমরা এমন একটি ওয়েব অ্যাপ্লিকেশন তৈরি করব যা ব্যবহারকারীদেরকে Vertex AI-এর জেনারেটিভ এআই মডেল (Gemini 1.5 Flash, Gemini 1.5 Pro, ইত্যাদি) ব্যবহার করে তাদের দেওয়া ওয়্যারফ্রেম এবং প্রম্পট থেকে ওয়েবসাইট কোড (html, css, এবং javascript) তৈরি করার সুযোগ দেবে। অ্যাপ্লিকেশনটি একটি জনপ্রিয় পাইথন ওয়েব ফ্রেমওয়ার্ক Flask ব্যবহার করে তৈরি করা হবে এবং জেনারেটিভ মডেল সার্ভিসের সাথে যোগাযোগের জন্য Vertex AI ক্লায়েন্ট লাইব্রেরি ব্যবহার করবে।

আপনি যা তৈরি করবেন

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

আপনার ওয়েব অ্যাপ্লিকেশনটি দেখতে এইরকম হবে:

অ্যাপটি কীভাবে কাজ করে

1. হাতে আঁকা ওয়্যারফ্রেম আপলোড করুন: ব্যবহারকারীরা তাদের হাতে আঁকা ওয়্যারফ্রেমের একটি ছবি অ্যাপে আপলোড করতে পারবেন।
2. একটি মডেল নির্বাচন করুন: অ্যাপটি বিভিন্ন ডিজাইন শৈলীর জন্য অপ্টিমাইজ করা পূর্ব-প্রশিক্ষিত জেমিনি মডেলের একটি সংগ্রহ প্রদান করে।
3. একটি নির্দেশিকা দিন: ব্যবহারকারীরা চাইলে মডেলটি তৈরির প্রক্রিয়াকে নির্দেশনা দেওয়ার জন্য একটি টেক্সট নির্দেশিকা দিতে পারেন।
4. ওয়েবসাইট কোড তৈরি করুন: অ্যাপটি ওয়্যারফ্রেম এবং প্রম্পট জেমিনি-তে পাঠায়, যা সংশ্লিষ্ট ওয়েবসাইট কোডটি তৈরি করে।
5. ফলাফল প্রদর্শন: তৈরি হওয়া কোডটি অ্যাপের রেসপন্স পেজে দেখানো হয়।

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

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

1. গুগল ক্লাউড কনসোলের প্রজেক্ট সিলেক্টর পেজে, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন।
2. আপনার গুগল ক্লাউড প্রোজেক্টের জন্য বিলিং চালু আছে কিনা তা নিশ্চিত করুন। কোনো প্রোজেক্টে বিলিং চালু আছে কিনা তা কীভাবে পরীক্ষা করবেন, তা জানুন।
3. আপনি ক্লাউড শেল ব্যবহার করবেন, যা গুগল ক্লাউডে চলমান একটি কমান্ড-লাইন পরিবেশ। এটি অ্যাক্সেস করতে, গুগল ক্লাউড কনসোলের শীর্ষে থাকা ‘Activate Cloud Shell’-এ ক্লিক করুন।

4. ক্লাউড শেলে সংযুক্ত হওয়ার পর, আপনি নিম্নলিখিত কমান্ডটি ব্যবহার করে যাচাই করে নিন যে আপনি ইতিমধ্যেই প্রমাণীকৃত এবং প্রজেক্টটি আপনার প্রজেক্ট আইডিতে সেট করা আছে:

gcloud auth list

5. gcloud কমান্ডটি আপনার প্রজেক্ট সম্পর্কে অবগত আছে কিনা, তা নিশ্চিত করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান।

gcloud config list project

6. আপনার প্রজেক্টটি সেট করা না থাকলে, এটি সেট করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

gcloud config set project <YOUR_PROJECT_ID>

7. নিশ্চিত করুন যে নিম্নলিখিত API গুলি সক্রিয় করা আছে:

• ক্লাউড রান
• ভার্টেক্স এআই

gcloud কমান্ড ব্যবহার করার বিকল্প হলো এই লিঙ্কের মাধ্যমে কনসোলে যাওয়া। gcloud কমান্ড এবং এর ব্যবহার সম্পর্কে জানতে ডকুমেন্টেশন দেখুন।

৩. ধাপ ১: একটি পাইথন ক্লাউড রান ওয়েব অ্যাপ বুটস্ট্র্যাপ করুন

আমরা প্রথমে ক্লাউড শেল থেকে পাইথন ক্লাউড রান ওয়েব অ্যাপ্লিকেশন টেমপ্লেটটি তৈরি করব।

ক্লাউড শেল টার্মিনালে যান এবং ওপেন এডিটর বোতামে ক্লিক করুন।

নিশ্চিত করুন যে ক্লাউড শেল এডিটরের নিচের বাম কোণে (স্ট্যাটাস বারে) ক্লাউড কোড প্রজেক্টটি সেট করা আছে, যেমনটি নিচের ছবিতে হাইলাইট করা হয়েছে, এবং এটি সেই সক্রিয় গুগল ক্লাউড প্রজেক্টে সেট করা আছে যেখানে আপনার বিলিং চালু করা আছে। অনুরোধ করা হলে অনুমোদন করুন ।

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

অ্যাপ্লিকেশনগুলির তালিকা থেকে ক্লাউড রান অ্যাপ্লিকেশন নির্বাচন করুন:

পৃষ্ঠা ২/২-এর জন্য, পাইথন ফ্লাস্ক টেমপ্লেট নির্বাচন করুন:

আপনার ইচ্ছামতো প্রজেক্টের নাম দিন (যেমন 'amazing-gemini-app') এবং OK- তে ক্লিক করুন।

এটি আপনার সদ্য সেটআপ করা নতুন প্রজেক্টটির টেমপ্লেটটি খুলে দেবে।

গুগল ক্লাউড শেল দিয়ে একটি ওয়েব অ্যাপ্লিকেশন বুটস্ট্র্যাপ করা এতটাই সহজ।

৪. ধাপ ২: ফ্রন্টএন্ড তৈরি করুন

এর জন্য আমাদের একটি HTML পেজের প্রয়োজন হবে। সেই পেজটিতে ওয়েব অ্যাপ্লিকেশনটির ইউজার ইন্টারফেস নির্ধারণকারী কোড থাকবে। এতে একটি ফর্ম রয়েছে, যার মাধ্যমে ব্যবহারকারীরা হাতে আঁকা একটি ওয়্যারফ্রেম ইমেজ আপলোড করতে, একটি জেনারেটিভ মডেল নির্বাচন করতে এবং একটি টেক্সট প্রম্পট প্রদান করতে পারবেন। ফর্মটি সাবমিট করার পর, ফলাফলটি অন্য একটি ট্যাবে প্রদর্শিত হবে।

নিচের কোডটি কপি করে আপনার templates ফোল্ডারের 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>

যখন কোনো ব্যবহারকারী অ্যাপটির সাথে ইন্টারঅ্যাক্ট করেন, তখন নিম্নলিখিত ক্রিয়াগুলো ঘটে:

1. ব্যবহারকারী একটি ওয়্যারফ্রেম ছবি ও একটি মডেল নির্বাচন করেন এবং একটি প্রম্পট প্রবেশ করান।
2. যখন ব্যবহারকারী 'সাবমিট' বোতামে ক্লিক করেন, তখন HTTP POST পদ্ধতি ব্যবহার করে ফর্মের ডেটা (ছবি, মডেল এবং প্রম্পট) /response URL-এ পাঠানো হয়।
3. সার্ভার-সাইড কোড (যা app.py-তে প্রয়োগ করা হয়েছে) ফর্মের ডেটা প্রসেস করে এবং নির্দিষ্ট মডেল ও প্রম্পট ব্যবহার করে রেসপন্স তৈরি করে।
4. তৈরি হওয়া প্রতিক্রিয়াটি নতুন ট্যাবে প্রদর্শিত হয়।

আমরা এখন ওয়েব অ্যাপ্লিকেশনটির ফ্রন্ট-এন্ড অংশ নিয়ে প্রস্তুত।

৫. ধাপ ৩: ব্যাকএন্ড তৈরি করুন (জেনারেটিভ এআই)

চলুন এই ওয়েব অ্যাপ্লিকেশনটির মূল অংশটি লিখি। 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')

কোডটি মূলত নিম্নলিখিত কাজটি করে:

1. এই কোডটি অ্যাপ্লিকেশনটির জন্য প্রয়োজনীয় লাইব্রেরিগুলো ইম্পোর্ট করে:

ফ্লাস্ক: পাইথনের জন্য একটি হালকা ওয়েব ফ্রেমওয়ার্ক।

os: অপারেটিং সিস্টেমের সাথে যোগাযোগ করার জন্য।

random: এলোমেলো সংখ্যা তৈরি করার জন্য।

vertexai: ভার্টেক্স এআই ক্লায়েন্ট লাইব্রেরি।

GenerativeModel এবং Image: Vertex AI Generative Models লাইব্রেরির ক্লাসসমূহ।

2. ফ্লাস্ক অ্যাপটি চালু করা হচ্ছে:

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

3. ভার্টেক্স এআই ক্লায়েন্ট শুরু করা হচ্ছে

এটি নির্দিষ্ট প্রজেক্ট আইডি এবং লোকেশন দিয়ে ভার্টেক্স এআই ক্লায়েন্ট লাইব্রেরিটি চালু করে। YOUR_PROJECT_ID-এর জায়গায় আপনার প্রজেক্ট আইডিটি বসিয়ে নিতে ভুলবেন না।

4. generate ফাংশন সংজ্ঞায়িত করা

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

5. হোম পেজ রুট নির্ধারণ করা

এই ফাংশনটি হোম পেজের রুট নির্ধারণ করে। যখন কোনো ব্যবহারকারী অ্যাপ্লিকেশনটির রুট ইউআরএল-এ যান, তখন এই ফাংশনটি কল করা হয়। এটি index.html টেমপ্লেটটি রেন্ডার করে, যা অ্যাপ্লিকেশনটির হোম পেজ।

6. প্রতিক্রিয়া পথ নির্ধারণ করা

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

7. অ্যাপ্লিকেশনটি চালানো হচ্ছে

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

৬. ধাপ ৪: ডিপেন্ডেন্সি এবং ডকারফাইল প্রস্তুত করুন

requirements.txt ফাইলে নিম্নলিখিত নির্ভরতাগুলো আছে কিনা তা নিশ্চিত করুন:

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38

Dockerfile-এর বিষয়বস্তু নিচের অংশ দিয়ে প্রতিস্থাপন করুন:

# 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"]

৭. ধাপ ৫: ওয়েব অ্যাপ্লিকেশনটি স্থাপন করুন

এখন যেহেতু আমরা অ্যাপ্লিকেশনের উপাদানগুলো তৈরি করে ফেলেছি, চলুন অ্যাপটি ডেপ্লয় করি।

ক্লাউড শেল টার্মিনালে যান এবং নিশ্চিত করুন যে বর্তমান প্রজেক্টটি আপনার সক্রিয় প্রজেক্ট হিসাবে কনফিগার করা আছে, যদি না থাকে তবে প্রজেক্ট আইডি সেট করার জন্য আপনাকে gcloud configure কমান্ডটি ব্যবহার করতে হবে:

gcloud config set project [PROJECT_ID]

তারপর নিচের কমান্ডগুলো ক্রমানুসারে এক এক করে প্রবেশ করান:

cd draw-a-website
gcloud run deploy --source .

এটি আপনাকে আপনার সার্ভিসের জন্য একটি নাম লিখতে বলবে, ধরা যাক " draw-website "। অঞ্চলের জন্য সংশ্লিষ্ট নম্বর " us-central1 " বেছে নিন। যখন এটি জিজ্ঞাসা করবে যে আপনি প্রমাণীকরণবিহীন ইনভোকেশন অনুমোদন করতে চান কিনা, তখন " y " বলুন। উল্লেখ্য যে, আমরা এখানে প্রমাণীকরণবিহীন অ্যাক্সেসের অনুমতি দিচ্ছি কারণ এটি একটি ডেমো অ্যাপ্লিকেশন। আপনার এন্টারপ্রাইজ এবং প্রোডাকশন অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত প্রমাণীকরণ ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।

ডেপ্লয়মেন্ট সম্পন্ন হলে, আপনি নীচের মতো একটি লিঙ্ক পাবেন:

**https://draw-website-***** eua-uc.a.run.app/

আপনার অ্যাপ্লিকেশনটি পরীক্ষা করে দেখুন:

৮. পরিষ্কার করুন

এই কোডল্যাবে ব্যবহৃত রিসোর্সগুলির জন্য আপনার গুগল ক্লাউড অ্যাকাউন্টে চার্জ হওয়া এড়াতে, এই ধাপগুলি অনুসরণ করুন:

1. গুগল ক্লাউড কনসোলে, রিসোর্স পরিচালনা (Manage resources) পৃষ্ঠায় যান।
2. প্রজেক্ট তালিকা থেকে, আপনি যে প্রজেক্টটি মুছতে চান সেটি নির্বাচন করুন এবং তারপর ডিলিট বোতামে ক্লিক করুন।
3. ডায়ালগ বক্সে প্রজেক্ট আইডি টাইপ করুন এবং তারপর প্রজেক্টটি মুছে ফেলার জন্য 'শাট ডাউন'-এ ক্লিক করুন।
4. বিকল্পভাবে, আপনি কনসোলে Cloud Run- এ গিয়ে, এইমাত্র ডেপ্লয় করা সার্ভিসটি নির্বাচন করে ডিলিট করে দিতে পারেন।

৯. অভিনন্দন

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