वेबसाइट ड्रॉ करें: Gemini मॉडल का इस्तेमाल करके, अपनी कल्पनाओं को वेबसाइट में बदलें!

1. परिचय

वेब डेवलपमेंट की दुनिया में, डिज़ाइन कॉन्सेप्ट को काम करने वाली वेबसाइट में बदलने की प्रोसेस में समय लग सकता है और यह मुश्किल भी हो सकती है. हालांकि, Gemini जैसे जनरेटिव एआई मॉडल के आने से, यह प्रोसेस ज़्यादा आसान और सुलभ हो गई है. हम एक ऐसा समाधान तैयार करेंगे जो हाथ से बनाए गए वायरफ़्रेम को वेबसाइट कोड में बदलने में माहिर होगा. यह दमदार टूल, डिज़ाइनर और डेवलपर को अपनी वेबसाइट के विज़न को आसानी से और बेहतर तरीके से पूरा करने में मदद करता है.

इस लैब में, हम एक ऐसा वेब ऐप्लिकेशन बनाएंगे जिसकी मदद से उपयोगकर्ता, वायरफ़्रेम और प्रॉम्प्ट से वेबसाइट का कोड (एचटीएमएल, सीएसएस, और JavaScript) जनरेट कर सकते हैं.इसके लिए, उन्हें Vertex AI के जनरेटिव एआई मॉडल (Gemini 1.5 Flash, Gemini 1.5 Pro वगैरह) का इस्तेमाल करना होगा. इस ऐप्लिकेशन को Flask का इस्तेमाल करके बनाया जाएगा. यह Python का एक लोकप्रिय वेब फ़्रेमवर्क है. साथ ही, यह जनरेटिव मॉडल सेवा के साथ इंटरैक्ट करने के लिए, Vertex AI क्लाइंट लाइब्रेरी का इस्तेमाल करेगा.

आपको क्या बनाने को मिलेगा

इस लैब के आखिर तक, आपके पास एक ऐसा वेब ऐप्लिकेशन होगा जो वायरफ़्रेम और प्रॉम्प्ट से इमेज जनरेट कर सकता है. साथ ही, आपको Vertex AI के जनरेटिव एआई मॉडल इस्तेमाल करने के तरीके के बारे में बेहतर जानकारी मिलेगी.

आपका वेब ऐप्लिकेशन ऐसा दिखेगा:

ऐप्लिकेशन का फ़्लो कैसा होता है

1. हाथ से बनाए गए वायरफ़्रेम की इमेज अपलोड करना: उपयोगकर्ता, हाथ से बनाए गए वायरफ़्रेम की इमेज को ऐप्लिकेशन में अपलोड कर सकते हैं.
2. कोई मॉडल चुनें: ऐप्लिकेशन में, पहले से ट्रेन किए गए Gemini के कई मॉडल उपलब्ध हैं. इन्हें अलग-अलग डिज़ाइन स्टाइल के लिए ऑप्टिमाइज़ किया गया है.
3. प्रॉम्प्ट देना: उपयोगकर्ता चाहें, तो मॉडल को जनरेट करने के लिए टेक्स्ट प्रॉम्प्ट दे सकते हैं.
4. वेबसाइट का कोड जनरेट करना: यह ऐप्लिकेशन, वायरफ़्रेम और प्रॉम्प्ट को Gemini पर भेजता है. इसके बाद, Gemini वेबसाइट का कोड जनरेट करता है.
5. नतीजा दिखाना: जनरेट किया गया कोड, ऐप्लिकेशन के जवाब वाले पेज पर दिखता है.

हम वायरफ़्रेम और प्रॉम्प्ट के बारे में बुनियादी जानकारी देकर शुरुआत करेंगे. साथ ही, हम यह भी बताएंगे कि इनका इस्तेमाल करके वेबसाइट का कोड कैसे जनरेट किया जा सकता है. इसके बाद, हम वेब ऐप्लिकेशन बनाने के चरणों के बारे में जानेंगे. इसमें उपयोगकर्ता के इनपुट को मैनेज करने, जवाब जनरेट करने, और नतीजे दिखाने का तरीका शामिल है.

2. शुरू करने से पहले

1. Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर जाकर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
2. पक्का करें कि आपके Google Cloud प्रोजेक्ट के लिए बिलिंग चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें.
3. आपको Cloud Shell का इस्तेमाल करना होगा. यह Google Cloud में चलने वाला कमांड-लाइन एनवायरमेंट है. इसे ऐक्सेस करने के लिए, Google Cloud Console में सबसे ऊपर मौजूद, Cloud Shell चालू करें पर क्लिक करें.

4. Cloud Shell से कनेक्ट होने के बाद, यह देखने के लिए कि आपकी पुष्टि हो चुकी है और प्रोजेक्ट को आपके प्रोजेक्ट आईडी पर सेट किया गया है, इस निर्देश का इस्तेमाल करें:

gcloud auth list

5. यह पुष्टि करने के लिए कि gcloud कमांड को आपके प्रोजेक्ट के बारे में पता है, Cloud Shell में यह कमांड चलाएं.

gcloud config list project

6. अगर आपका प्रोजेक्ट सेट नहीं है, तो इसे सेट करने के लिए इस निर्देश का इस्तेमाल करें:

gcloud config set project <YOUR_PROJECT_ID>

7. पक्का करें कि ये एपीआई चालू हों:

• Cloud Run
• Vertex AI

gcloud कमांड का इस्तेमाल करने के बजाय, इस लिंक का इस्तेमाल करके कंसोल पर जाएं. gcloud कमांड और उनके इस्तेमाल के बारे में जानने के लिए, दस्तावेज़ देखें.

3. पहला चरण: Python Cloud Run वेब ऐप्लिकेशन को बूटस्ट्रैप करना

हम सबसे पहले Cloud Shell से, Python Cloud Run वेब ऐप्लिकेशन टेंप्लेट बनाएंगे.

Cloud Shell टर्मिनल पर जाएं और 'एडिटर खोलें' बटन पर क्लिक करें.

पक्का करें कि Cloud Code प्रोजेक्ट, Cloud Shell एडिटर के सबसे नीचे बाईं ओर (स्टेटस बार) में सेट हो. जैसा कि नीचे दी गई इमेज में हाइलाइट किया गया है. साथ ही, यह उस चालू Google Cloud प्रोजेक्ट पर सेट हो जिसमें आपने बिलिंग चालू की है. अगर कहा जाए, तो अनुमति दें पर क्लिक करें.

स्टेटस बार पर मौजूद उस चालू प्रोजेक्ट पर क्लिक करें. इसके बाद, Cloud Code पॉप-अप खुलने का इंतज़ार करें. पॉप-अप में, "नया ऐप्लिकेशन" चुनें.

ऐप्लिकेशन की सूची से, Cloud Run ऐप्लिकेशन चुनें:

दूसरे पेज के लिए, Python Flask टेंप्लेट चुनें:

प्रोजेक्ट का नाम अपनी पसंद के मुताबिक डालें.जैसे, "amazing-gemini-app". इसके बाद, OK पर क्लिक करें:

इससे, अभी सेट अप किए गए नए प्रोजेक्ट का टेंप्लेट खुल जाएगा.

Google Cloud Shell की मदद से, वेब ऐप्लिकेशन को बूटस्ट्रैप करना इतना आसान है.

4. दूसरा चरण: फ़्रंटएंड बनाना

इसके लिए, हमें एक एचटीएमएल पेज की ज़रूरत होगी. उस पेज में ऐसा कोड होगा जो वेब ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को तय करता है. इसमें एक फ़ॉर्म शामिल है. इसकी मदद से, उपयोगकर्ता हाथ से बनाए गए वायरफ़्रेम की इमेज अपलोड कर सकते हैं, जनरेटिव मॉडल चुन सकते हैं, और टेक्स्ट प्रॉम्प्ट दे सकते हैं. फ़ॉर्म सबमिट करने के बाद, नतीजे दूसरे टैब में दिखेंगे.

यहां दिए गए कोड को कॉपी करें और इसे 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. जब उपयोगकर्ता "सबमिट करें" बटन पर क्लिक करता है, तो फ़ॉर्म डेटा (इमेज, मॉडल, और प्रॉम्प्ट) को एचटीटीपी पोस्ट करने के तरीके का इस्तेमाल करके /response यूआरएल पर भेजा जाता है.
3. सर्वर-साइड कोड (app.py में लागू किया गया) फ़ॉर्म के डेटा को प्रोसेस करता है. साथ ही, तय किए गए मॉडल और प्रॉम्प्ट का इस्तेमाल करके जवाब जनरेट करता है.
4. जनरेट किया गया जवाब, नए टैब में दिखता है.

अब हम वेब ऐप्लिकेशन के फ़्रंट-एंड वाले हिस्से के साथ तैयार हैं.

5. तीसरा चरण: बैकएंड (जनरेटिव एआई) बनाना

अब इस वेब ऐप्लिकेशन का मुख्य हिस्सा लिखते हैं. यह 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. यह कोड, ऐप्लिकेशन के लिए ज़रूरी लाइब्रेरी इंपोर्ट करता है:

Flask: यह Python के लिए एक लाइटवेट वेब फ़्रेमवर्क है.

os: इसका इस्तेमाल ऑपरेटिंग सिस्टम के साथ इंटरैक्ट करने के लिए किया जाता है.

random: इसका इस्तेमाल, रैंडम नंबर जनरेट करने के लिए किया जाता है.

vertexai: Vertex AI क्लाइंट लाइब्रेरी.

GenerativeModel और Image: ये Vertex AI Generative Models लाइब्रेरी की क्लास हैं.

2. फ़्लास्क ऐप्लिकेशन को शुरू किया जा रहा है:

इसके बाद, यह Flask ऐप्लिकेशन को शुरू करता है और अपलोड की गई इमेज के लिए, ज़्यादा से ज़्यादा 16 एमबी का साइज़ सेट करता है.

3. Vertex AI क्लाइंट को शुरू करना

यह कोड, Vertex AI क्लाइंट लाइब्रेरी को दिए गए प्रोजेक्ट आईडी और जगह की जानकारी के साथ शुरू करता है. YOUR_PROJECT_ID की जगह अपना प्रोजेक्ट आईडी डालना न भूलें.

4. जनरेट फ़ंक्शन को तय करना

यह फ़ंक्शन, वायरफ़्रेम इमेज, जनरेटिव मॉडल, और प्रॉम्प्ट को इनपुट के तौर पर लेता है. इसके बाद, यह बताए गए मॉडल और प्रॉम्प्ट का इस्तेमाल करके, वेबसाइट का एचटीएमएल जनरेट करता है. जनरेट किए गए जवाब को स्ट्रिंग के तौर पर दिखाया जाता है.

5. होम पेज का रूट तय करना

यह फ़ंक्शन, होम पेज का रूट तय करता है. जब कोई उपयोगकर्ता ऐप्लिकेशन के रूट यूआरएल पर जाता है, तब इस फ़ंक्शन को कॉल किया जाता है. यह index.html टेंप्लेट को रेंडर करता है, जो ऐप्लिकेशन का होम पेज होता है.

6. जवाब पाने का तरीका तय करना

यह फ़ंक्शन, जवाब के रूट के बारे में बताता है. जब कोई उपयोगकर्ता होम पेज पर फ़ॉर्म सबमिट करता है, तब इस फ़ंक्शन को कॉल किया जाता है. यह अपलोड की गई इमेज, मॉडल, और प्रॉम्प्ट को प्रोसेस करता है. इसके बाद, वेबसाइट का कोड जनरेट करता है. जनरेट किया गया जवाब, नए टैब में दिखता है.

7. ऐप्लिकेशन चलाना

कोड का यह हिस्सा यह जांच करता है कि स्क्रिप्ट को मुख्य प्रोग्राम के तौर पर चलाया जा रहा है या नहीं. अगर ऐसा है, तो यह एनवायरमेंट वैरिएबल से सर्वर पोर्ट की जानकारी लेता है और ऐप्लिकेशन को तय किए गए पोर्ट पर चलाता है.

6. चौथा चरण: डिपेंडेंसी और Dockerfile तैयार करना

पक्का करें कि 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"]

7. पाँचवाँ चरण: वेब ऐप्लिकेशन को डिप्लॉय करना

ऐप्लिकेशन के कॉम्पोनेंट बनाने के बाद, अब ऐप्लिकेशन को डिप्लॉय करते हैं.

Cloud Shell टर्मिनल पर जाएं. साथ ही, पक्का करें कि मौजूदा प्रोजेक्ट, आपके एक्टिव प्रोजेक्ट के लिए कॉन्फ़िगर किया गया हो. अगर ऐसा नहीं है, तो प्रोजेक्ट आईडी सेट करने के लिए, gcloud configure कमांड का इस्तेमाल करें:

gcloud config set project [PROJECT_ID]

इसके बाद, एक-एक करके इस क्रम में ये कमांड डालें:

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

यह आपसे अपनी सेवा के लिए कोई नाम डालने के लिए कहेगा. मान लें कि आपने "draw-website" नाम डाला है. "us-central1" क्षेत्र के लिए, उससे जुड़ा नंबर चुनें. जब आपसे पूछा जाए कि क्या आपको बिना पुष्टि किए गए अनुरोधों को अनुमति देनी है, तो "हां" कहें. ध्यान दें कि हम यहां बिना पुष्टि किए ऐक्सेस करने की अनुमति दे रहे हैं, क्योंकि यह एक डेमो ऐप्लिकेशन है. हमारा सुझाव है कि आप अपने एंटरप्राइज़ और प्रोडक्शन ऐप्लिकेशन के लिए, पुष्टि करने के सही तरीके का इस्तेमाल करें.

डप्लॉयमेंट पूरा होने के बाद, आपको यहां दिए गए लिंक जैसा लिंक मिलेगा:

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

आगे बढ़ें और अपने आवेदन की जांच करें:

8. व्यवस्थित करें

इस कोडलैब में इस्तेमाल किए गए संसाधनों के लिए, अपने Google Cloud खाते से शुल्क न लिए जाने के लिए, यह तरीका अपनाएं:

1. Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं.
2. प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे आपको मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
3. डायलॉग बॉक्स में, प्रोजेक्ट आईडी टाइप करें. इसके बाद, प्रोजेक्ट मिटाने के लिए बंद करें पर क्लिक करें.
4. इसके अलावा, कंसोल पर Cloud Run पर जाकर, अभी-अभी डिप्लॉय की गई सेवा को चुनें और उसे मिटाएं.

9. बधाई हो

बधाई हो! आपने Python Flask में एक वेब ऐप्लिकेशन बना लिया है. इसे Cloud Run पर डिप्लॉय किया गया है. यह ऐप्लिकेशन, ड्रॉइंग को वेबसाइटों में बदलता है. पूरा रेपो यहां है. Draw-a-website ऐप्लिकेशन, वेब डेवलपमेंट की प्रोसेस को आसान बनाने में Gemini की अहम भूमिका को दिखाता है. एआई का इस्तेमाल करके, हम डिज़ाइनर और डेवलपर को तेज़ी से, ज़्यादा सटीक तरीके से, और क्रिएटिविटी के साथ वेबसाइटें बनाने में मदद कर सकते हैं. जनरेटिव एआई मॉडल लगातार बेहतर हो रहे हैं. इसलिए, आने वाले समय में हम इस टेक्नोलॉजी के और भी बेहतरीन इस्तेमाल देख सकते हैं.