1. शुरुआती जानकारी
वेब डेवलपमेंट की दुनिया में, किसी डिज़ाइन के सिद्धांत को काम करने वाली वेबसाइट में बदलने की प्रोसेस, समय लेने वाली और मुश्किल, दोनों हो सकती है. हालाँकि, Gemini जैसे जनरेटिव एआई मॉडल के आने की वजह से, यह प्रोसेस ज़्यादा आसान होती जा रही है और अब इसे ज़्यादा आसानी से ऐक्सेस किया जा सकता है. हम एक ऐसा समाधान बनाएंगे, जो हाथ से बने वायरफ़्रेम को वेबसाइट कोड में बदलने में माहिर होगा. यह कारगर टूल, डिज़ाइनर और डेवलपर, दोनों की मदद करता है. इससे वे अपनी वेबसाइट के विज़न को, बेहद आसान और बेहतर तरीके से पेश कर पाते हैं.
इस लैब में, हम एक ऐसा वेब ऐप्लिकेशन बनाएंगे जो लोगों को वायरफ़्रेम से वेबसाइट कोड (एचटीएमएल, css, और JavaScript) जनरेट करने की अनुमति देगा.साथ ही, वह व्यक्ति को Vertex AI के जनरेटिव एआई मॉडल (Gemini 1.5 Flash, Gemini 1.5 Pro वगैरह) इस्तेमाल करके डालने के प्रॉम्प्ट भी दे सकेगा. यह ऐप्लिकेशन, Python वेब फ़्रेमवर्क के मशहूर फ़्लास्क का इस्तेमाल करके बनाया जाएगा. साथ ही, यह जनरेटिव मॉडल सेवा से इंटरैक्ट करने के लिए Vertex AI क्लाइंट लाइब्रेरी का इस्तेमाल करेगा.
आपको क्या बनाना होगा
इस लैब के खत्म होने तक, आपका एक वेब ऐप्लिकेशन काम कर रहा होगा, जो वायरफ़्रेम और प्रॉम्प्ट से इमेज जनरेट कर सकेगा. इससे आपको Vertex AI के जनरेटिव एआई मॉडल को इस्तेमाल करने के बारे में भी बेहतर जानकारी मिलेगी.
आपका वेब ऐप्लिकेशन इस तरह दिखेगा:
ऐप्लिकेशन के काम करने का तरीका
- हाथ से बनाया गया वायरफ़्रेम अपलोड करें: उपयोगकर्ता, ऐप्लिकेशन में अपने हाथ से बने वायरफ़्रेम की इमेज अपलोड कर सकते हैं.
- मॉडल चुनें: इस ऐप्लिकेशन में, पहले से ट्रेन किए गए Gemini के कुछ मॉडल उपलब्ध होते हैं. इन्हें अलग-अलग डिज़ाइन स्टाइल के हिसाब से ऑप्टिमाइज़ किया जाता है.
- प्रॉम्प्ट दें: मॉडल के जनरेशन को गाइड करने के लिए, उपयोगकर्ता वैकल्पिक तौर पर कोई टेक्स्ट प्रॉम्प्ट दे सकते हैं.
- वेबसाइट कोड जनरेट करना: ऐप्लिकेशन, Gemini को वायरफ़्रेम और प्रॉम्प्ट भेजता है, जो उससे जुड़ा वेबसाइट कोड जनरेट करता है.
- नतीजा दिखाएं: जनरेट किया गया कोड, ऐप्लिकेशन के जवाब वाले पेज पर दिखता है.
हम वायरफ़्रेम और प्रॉम्प्ट की बुनियादी बातों के बारे में चर्चा करेंगे. साथ ही, यह भी बताएंगे कि वेबसाइट कोड जनरेट करने के लिए इनका इस्तेमाल कैसे किया जा सकता है. इसके बाद, हम वेब ऐप्लिकेशन बनाने के चरणों के बारे में बताएंगे. इसमें उपयोगकर्ता के इनपुट को मैनेज करने, रिस्पॉन्स जनरेट करने, और नतीजे दिखाने का तरीका भी शामिल है.
2. वेब कंटेनर इंस्टॉल करने से पहले
- Google Cloud Console में, प्रोजेक्ट सिलेक्टर पेज पर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
- पक्का करें कि आपके Google Cloud प्रोजेक्ट के लिए बिलिंग की सुविधा चालू हो. किसी प्रोजेक्ट के लिए बिलिंग की सुविधा चालू है या नहीं, यह देखने का तरीका जानें.
- आप Cloud Shell का इस्तेमाल करेंगे. यह Google Cloud में चलने वाला एक कमांड-लाइन एनवायरमेंट है. इसे ऐक्सेस करने के लिए, Google Cloud कंसोल में सबसे ऊपर मौजूद Cloud Shell चालू करें पर क्लिक करें.
- Cloud Shell से कनेक्ट करने के बाद, यह जांच लें कि आपकी पुष्टि पहले ही हो चुकी है. साथ ही, यह देखें कि प्रोजेक्ट को आपके प्रोजेक्ट आईडी पर सेट करने के लिए, नीचे दिए गए निर्देश का इस्तेमाल किया गया हो:
gcloud auth list
- Cloud Shell में यह कमांड चलाएं, ताकि यह पुष्टि की जा सके कि gcloud कमांड को आपके प्रोजेक्ट के बारे में जानकारी है.
gcloud config list project
- अगर आपका प्रोजेक्ट सेट नहीं है, तो इसे सेट करने के लिए नीचे दिए गए कमांड का इस्तेमाल करें:
gcloud config set project <YOUR_PROJECT_ID>
- पक्का करें कि नीचे दिए गए एपीआई चालू हों:
- Cloud Run
- Vertex AI
gcloud कमांड का इस्तेमाल करने का विकल्प इस लिंक का इस्तेमाल करके कंसोल से होकर जाता है. gcloud के लिए कमांड और इसके इस्तेमाल के बारे में जानने के लिए, दस्तावेज़ देखें.
3. पहला चरण: Python Cloud Run वेब ऐप्लिकेशन को बूटस्ट्रैप करना
हम सबसे पहले Cloud Shell से Python Cloud Run वेब ऐप्लिकेशन टेंप्लेट बनाएंगे.
Cloud Shell Terminal पर जाएं और 'एडिटर में खोलें' बटन पर क्लिक करें. 
पक्का करें कि Cloud Code प्रोजेक्ट, Cloud Shell एडिटर के सबसे नीचे बाएं कोने (स्टेटस बार) में सेट हो, जैसा कि नीचे दी गई इमेज में हाइलाइट किया गया है. साथ ही, प्रोजेक्ट को उस Google Cloud प्रोजेक्ट पर सेट करें जहां बिलिंग की सुविधा चालू है. अनुरोध किए जाने पर, अनुमति दें.
स्टेटस बार में जाकर, उस प्रोजेक्ट पर क्लिक करें जो चालू है. इसके बाद, Cloud Code के पॉप-अप के खुलने का इंतज़ार करें. पॉप-अप में "नया ऐप्लिकेशन" चुनें. 
ऐप्लिकेशन की सूची में से, Cloud Run ऐप्लिकेशन चुनें:
पेज 2/2 के लिए, Python फ़्लास्क टेंप्लेट चुनें:
अपनी पसंद के हिसाब से प्रोजेक्ट का नाम डालें (जैसे, "amazing-gemini-app") और OK पर क्लिक करें:
इससे उस नए प्रोजेक्ट का टेंप्लेट खुल जाएगा जिसे आपने अभी सेटअप किया है.
Google Cloud Shell की मदद से, किसी वेब ऐप्लिकेशन को बूटस्ट्रैप करना कितना आसान है.
4. दूसरा चरण: फ़्रंटएंड बनाएं
ऐसा करने के लिए, हमें एक एचटीएमएल पेज की ज़रूरत होगी. उस पेज में वह कोड होगा जो वेब ऐप्लिकेशन के लिए यूज़र इंटरफ़ेस को परिभाषित करता है. इसमें एक फ़ॉर्म शामिल है, जिसमें उपयोगकर्ताओं को हाथ से बने वायरफ़्रेम इमेज को अपलोड करने, जनरेटिव मॉडल चुनने, और टेक्स्ट प्रॉम्प्ट देने की सुविधा मिलती है. फ़ॉर्म सबमिट करने के बाद, नतीजा दूसरे टैब में दिखेगा.
नीचे दिया गया कोड कॉपी करें और टेंप्लेट फ़ोल्डर में अपनी 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>
जब कोई उपयोगकर्ता ऐप्लिकेशन से इंटरैक्ट करता है, तब ये कार्रवाइयां होती हैं:
- जब उपयोगकर्ता किसी वायरफ़्रेम इमेज को चुनता है, कोई मॉडल चुनता है, और प्रॉम्प्ट दर्ज करता है.
- जब उपयोगकर्ता "सबमिट करें" बटन पर क्लिक करता है, तब फ़ॉर्म का डेटा (इमेज, मॉडल, और प्रॉम्प्ट) एचटीटीपी पीओएसटी तरीके का इस्तेमाल करके, /response यूआरएल पर भेजा जाता है.
- app.py में लागू किया गया सर्वर साइड कोड, फ़ॉर्म के डेटा को प्रोसेस करता है. साथ ही, तय किए गए मॉडल और प्रॉम्प्ट का इस्तेमाल करके, फ़ॉर्म के डेटा को जनरेट करता है.
- जनरेट किया गया जवाब, नए टैब में दिखता है.
अब हम वेब ऐप्लिकेशन के फ़्रंट-एंड हिस्से के साथ तैयार हैं.
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')
कोड जो करता है, उसके बारे में नीचे बताया गया है:
- यह कोड, ऐप्लिकेशन के लिए ज़रूरी लाइब्रेरी इंपोर्ट करता है:
फ़्लास्क: Python के लिए एक लाइटवेट वेब फ़्रेमवर्क.
os: ऑपरेटिंग सिस्टम से इंटरैक्ट करने के लिए.
रैंडम: रैंडम नंबर जनरेट करने के लिए.
Vertexai: The Vertex AI क्लाइंट लाइब्रेरी.
GenerativeModel और इमेज: Vertex AI Generative मॉडल लाइब्रेरी में मौजूद क्लास.
- फ़्लास्क ऐप्लिकेशन शुरू करना:
इसके बाद, यह फ़्लास्क ऐप्लिकेशन शुरू करता है और अपलोड की गई इमेज के लिए ज़्यादा से ज़्यादा 16 एमबी का आकार सेट करता है.
- Vertex AI Client को शुरू करना
यह दिए गए प्रोजेक्ट आईडी और जगह के साथ, Vertex AI क्लाइंट लाइब्रेरी को शुरू करता है. YOUR_PROJECT_ID की जगह अपना प्रोजेक्ट आईडी डालना न भूलें.
- जनरेट फ़ंक्शन के बारे में जानकारी
इस फ़ंक्शन के लिए, एक वायरफ़्रेम इमेज, एक जनरेटिव मॉडल, और एक प्रॉम्प्ट को इनपुट के तौर पर इस्तेमाल किया जाता है. इसके बाद, यह बताए गए मॉडल और प्रॉम्प्ट का इस्तेमाल करके, वेबसाइट का एचटीएमएल जनरेट करता है. जनरेट किया गया रिस्पॉन्स, स्ट्रिंग के तौर पर दिखता है.
- होम पेज का रूट तय करना
यह फ़ंक्शन, होम पेज के रूट के बारे में बताता है. जब कोई उपयोगकर्ता ऐप्लिकेशन के रूट यूआरएल पर जाता है, तो यह फ़ंक्शन कॉल किया जाता है. यह index.html टेंप्लेट को रेंडर करता है, जो ऐप्लिकेशन का होम पेज होता है.
- जवाब का रूट तय किया जा रहा है
यह फ़ंक्शन, रिस्पॉन्स के रूट के बारे में बताता है. जब कोई उपयोगकर्ता होम पेज पर फ़ॉर्म सबमिट करता है, तो इस फ़ंक्शन को कॉल किया जाता है. यह अपलोड की गई इमेज, मॉडल, और प्रॉम्प्ट को प्रोसेस करता है. इसके बाद, वेबसाइट कोड जनरेट करता है. जनरेट किया गया जवाब, नए टैब में दिखता है.
- ऐप्लिकेशन चलाना
कोड का यह हिस्सा यह जांचता है कि स्क्रिप्ट को मुख्य प्रोग्राम के तौर पर चलाया जा रहा है या नहीं. अगर ऐसा है, तो यह एनवायरमेंट वैरिएबल से सर्वर पोर्ट हासिल करता है और ऐप्लिकेशन को तय किए गए पोर्ट पर चलाता है.
6. चौथा चरण: डिपेंडेंसी और Dockerfile तैयार करें
पक्का करें कि Essentials.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. चरण 5: वेब ऐप्लिकेशन को डिप्लॉय करें
अब हमने ऐप्लिकेशन के कॉम्पोनेंट बना लिए हैं, इसलिए ऐप्लिकेशन को डिप्लॉय करें.
Cloud Shell Terminal पर जाएं और पक्का करें कि मौजूदा प्रोजेक्ट, आपके ऐक्टिव प्रोजेक्ट पर कॉन्फ़िगर किया गया हो. अगर आपने प्रोजेक्ट आईडी सेट करने के लिए gcloud कॉन्फ़िगर कमांड का इस्तेमाल नहीं किया है, तो:
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 Cloud खाते पर शुल्क न लगे, इसके लिए यह तरीका अपनाएं:
- Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं.
- प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
- डायलॉग बॉक्स में, प्रोजेक्ट आईडी टाइप करें. इसके बाद, प्रोजेक्ट मिटाने के लिए, शट डाउन करें पर क्लिक करें.
- इसके अलावा, कंसोल पर Cloud Run पर जाकर, हाल ही में डिप्लॉय की गई सेवा को चुना जा सकता है और मिटाया जा सकता है.
9. बधाई
बधाई हो! आपने Cloud Run पर डिप्लॉय किए गए Python Flask में एक क्विक वेब ऐप्लिकेशन बना लिया है. यह ड्रॉइंग को वेबसाइटों में बदल देता है. रिफ़ंड की पूरी जानकारी यहां दी गई है. वेबसाइट ड्रॉ करने की सुविधा देने वाला यह ऐप्लिकेशन, वेब डेवलपमेंट की प्रोसेस को बेहतर बनाने के लिए, Gemini की बेहतरीन सुविधाओं के बारे में बताता है. एआई की मदद से, हम डिज़ाइनर और डेवलपर को सशक्त बना सकते हैं, ताकि वे तेज़ी, सटीक, और क्रिएटिविटी के साथ वेबसाइटें बना सकें. जनरेटिव एआई मॉडल में लगातार बदलाव हो रहे हैं. इसलिए, हम आने वाले समय में ऐप्लिकेशन को और बेहतर बनाने की उम्मीद कर सकते हैं.