वेबसाइट ड्रॉ करें: 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 पर भेजता है. इससे, वेबसाइट का कोड जनरेट होता है.
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. Cloud Shell में यह कमांड चलाकर पुष्टि करें कि gcloud कमांड को आपके प्रोजेक्ट के बारे में पता है.

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 Shell एडिटर के निचले बाएं कोने (स्टेटस बार) में, Cloud Code प्रोजेक्ट सेट हो. जैसा कि नीचे दी गई इमेज में हाइलाइट किया गया है. साथ ही, यह चालू Google Cloud प्रोजेक्ट पर सेट हो, जिसमें बिलिंग की सुविधा चालू हो. प्रॉम्प्ट मिलने पर, अनुमति दें.

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

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

पेज 2/2 के लिए, Python Flask टेंप्लेट चुनें:

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

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

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 जनरेटिव मॉडल लाइब्रेरी की क्लास.

2. Flask ऐप्लिकेशन को शुरू करना:

इसके बाद, यह 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 की ताकत दिखाता है. एआई का इस्तेमाल करके, हम डिज़ाइनर और डेवलपर को ज़्यादा तेज़ी, सटीक तरीके से, और क्रिएटिव तरीके से वेबसाइटें बनाने में मदद कर सकते हैं. जनरेटिव एआई मॉडल के बेहतर होने के साथ-साथ, हम आने वाले समय में और भी बेहतर ऐप्लिकेशन देख सकते हैं.