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

1. ভূমিকা

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

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

তুমি কী তৈরি করবে

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

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

অ্যাপটি কীভাবে প্রবাহিত হয়

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

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

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

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

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") এবং ঠিক আছে ক্লিক করুন:

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

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

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

এটি করার জন্য, আমাদের একটি 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>

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

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: অপারেটিং সিস্টেমের সাথে ইন্টারঅ্যাক্ট করার জন্য।

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

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

জেনারেটিভমডেল এবং ছবি: ভার্টেক্স এআই জেনারেটিভ মডেলস লাইব্রেরি থেকে ক্লাস।

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

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

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

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

4. জেনারেট ফাংশন সংজ্ঞায়িত করা হচ্ছে

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

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

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

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

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

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

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

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

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

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

এখন যেহেতু আমরা অ্যাপ্লিকেশন উপাদানগুলি তৈরি করেছি, আসুন অ্যাপটি স্থাপন করি।

ক্লাউড শেল টার্মিনালে নেভিগেট করুন এবং নিশ্চিত করুন যে বর্তমান প্রকল্পটি আপনার সক্রিয় প্রকল্পের সাথে কনফিগার করা আছে, যদি না হয় তবে আপনি প্রকল্প আইডি সেট করতে 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/

এগিয়ে যান এবং আপনার আবেদন পরীক্ষা করুন:

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

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

1. গুগল ক্লাউড কনসোলে, রিসোর্স পরিচালনা পৃষ্ঠায় যান।
2. প্রকল্পের তালিকায়, আপনি যে প্রকল্পটি মুছতে চান তা নির্বাচন করুন এবং তারপরে মুছুন ক্লিক করুন।
3. ডায়ালগে, প্রজেক্ট আইডি টাইপ করুন, এবং তারপর প্রজেক্টটি মুছে ফেলতে Shut down এ ক্লিক করুন।
4. বিকল্পভাবে আপনি কনসোলের ক্লাউড রানে যেতে পারেন, আপনার সবেমাত্র স্থাপন করা পরিষেবাটি নির্বাচন করতে পারেন এবং মুছে ফেলতে পারেন।

৯. অভিনন্দন

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