1. परिचय
आज की तेज़ी से बदलती डिजिटल दुनिया में, समय सबसे ज़्यादा कीमती है. YouTube पर जानकारी का भंडार मौजूद है. हालांकि, लंबी अवधि के वीडियो देखने में काफ़ी समय लग सकता है. ऐसे में, YouTube के वीडियो की खास जानकारी देने वाले टूल बहुत काम आते हैं. ये टूल, लंबी अवधि के वीडियो को कम शब्दों में खास जानकारी के तौर पर पेश करते हैं. इससे लोग, पूरा वीडियो देखे बिना ही मुख्य कॉन्टेंट को आसानी से समझ पाते हैं. यह सुविधा खास तौर पर छात्र-छात्राओं, पेशेवरों, और उन सभी लोगों के लिए मददगार है जो ऑनलाइन वीडियो कॉन्टेंट से ज़रूरी जानकारी आसानी से पाना चाहते हैं. असल में, YouTube पर वीडियो के बारे में जानकारी देने वाली सुविधा की मदद से, उपयोगकर्ता कम समय में ज़्यादा से ज़्यादा जानकारी पा सकते हैं और ज़्यादा से ज़्यादा सीख सकते हैं.
इस लैब के आखिर तक, आपके पास एक ऐसा वेब ऐप्लिकेशन होगा जो YouTube वीडियो से खास जानकारी जनरेट कर सकता है. आपको यह भी बेहतर तरीके से समझ आएगा कि Gemini API और Google के जनरेटिव एआई वाले एसडीके का इस्तेमाल कैसे किया जाता है. साथ ही, वेब ऐप्लिकेशन बनाने के लिए, इन दोनों को एक साथ इंटिग्रेट कैसे किया जाता है.
आपका वेब ऐप्लिकेशन ऐसा दिखेगा:
आपको बस YouTube वीडियो का लिंक देना है. बाक़ी काम Gemini कर देगा.
2. शुरू करने से पहले
इस कोडलैब में यह माना गया है कि आपके पास पहले से ही बिलिंग की सुविधा वाला Google Cloud प्रोजेक्ट है. अगर आपके पास यह सुविधा अभी नहीं है, तो इसे इस्तेमाल करने के लिए यहां दिया गया तरीका अपनाएं.
- Google Cloud Console में, प्रोजेक्ट चुनने वाले पेज पर जाकर, Google Cloud प्रोजेक्ट चुनें या बनाएं.
- पक्का करें कि आपके Google Cloud प्रोजेक्ट के लिए बिलिंग चालू हो. किसी प्रोजेक्ट के लिए बिलिंग चालू है या नहीं, यह देखने का तरीका जानें.
- आपको Cloud Shell का इस्तेमाल करना होगा. यह Google Cloud में चलने वाला कमांड-लाइन एनवायरमेंट है. इसे ऐक्सेस करने के लिए, Google Cloud Console में सबसे ऊपर मौजूद, Cloud Shell चालू करें पर क्लिक करें.
- Cloud Shell से कनेक्ट होने के बाद, यह देखने के लिए कि आपकी पुष्टि हो चुकी है और प्रोजेक्ट को आपके प्रोजेक्ट आईडी पर सेट किया गया है, इस कमांड का इस्तेमाल करें:
gcloud auth list
- यह पुष्टि करने के लिए कि gcloud कमांड को आपके प्रोजेक्ट के बारे में पता है, Cloud Shell में यह कमांड चलाएं.
gcloud config list project
- अगर आपका प्रोजेक्ट सेट नहीं है, तो इसे सेट करने के लिए इस निर्देश का इस्तेमाल करें:
gcloud config set project <YOUR_PROJECT_ID>
इसके अलावा, कंसोल में PROJECT_ID आईडी भी देखा जा सकता है
इस पर क्लिक करने से, आपको अपने सभी प्रोजेक्ट और प्रोजेक्ट आईडी दाईं ओर दिखेंगे
- पक्का करें कि ये एपीआई चालू हों. इन्हें चालू करने के लिए, इस निर्देश का इस्तेमाल करें:
- Vertex AI API
- Cloud Run Admin API
- Cloud Build API
- Cloud Resource Manager API
gcloud services enable aiplatform.googleapis.com \
run.googleapis.com \
cloudbuild.googleapis.com \
cloudresourcemanager.googleapis.com
gcloud कमांड का इस्तेमाल करने के बजाय, इस लिंक का इस्तेमाल करके कंसोल पर जाएं. gcloud कमांड और उनके इस्तेमाल के बारे में जानने के लिए, दस्तावेज़ देखें.
ज़रूरी शर्तें
- Python और एचटीएमएल कोड को पढ़ और लिख सकता हो
- Gemini API और Google के जनरेटिव एआई वाले एसडीके के साथ काम करने में आसानी हो
- फ़ुल-स्टैक डेवलपमेंट की बुनियादी बातों की जानकारी
आपको क्या सीखने को मिलेगा
- Flask API लाइब्रेरी का इस्तेमाल करके, Gemini की मदद से बैक-एंड एपीआई बनाने का तरीका
- जेन एआई ऐप्लिकेशन बनाने और उसके फ़्रंट-एंड और बैक-एंड को एक साथ लिंक करने का तरीका
- डेवलप किए गए जेन एआई ऐप्लिकेशन को Cloud Run पर डिप्लॉय करने का तरीका
आपको इन चीज़ों की ज़रूरत होगी
- काम करने वाला कंप्यूटर और भरोसेमंद वाई-फ़ाई
- जिज्ञासु मन
3. Cloud Run पर Python Flask ऐप्लिकेशन बनाना
हम Cloud Shell से, अपने-आप जनरेट हुए टेंप्लेट का इस्तेमाल करके, Cloud Run पर Python Flask ऐप्लिकेशन बनाएंगे.
Cloud Shell टर्मिनल पर जाएं और 'एडिटर खोलें' बटन पर क्लिक करें. 
पक्का करें कि Cloud Code प्रोजेक्ट, Cloud Shell एडिटर के सबसे नीचे बाईं ओर (स्टेटस बार) में सेट हो. जैसा कि नीचे दी गई इमेज में हाइलाइट किया गया है. साथ ही, यह उस चालू Google Cloud प्रोजेक्ट पर सेट हो जिसके लिए बिलिंग की सुविधा चालू है. अगर कहा जाए, तो अनुमति दें पर क्लिक करें.
ध्यान दें: Cloud Shell एडिटर के शुरू होने और सभी ज़रूरी प्लगिन लोड होने में कुछ समय लग सकता है, ताकि
Cloud Code - Sign In
बटन दिखेगा, कृपया इंतज़ार करें
स्टेटस बार पर मौजूद उस चालू प्रोजेक्ट पर क्लिक करें. इसके बाद, Cloud Code पॉप-अप खुलने का इंतज़ार करें. पॉप-अप में, "नया ऐप्लिकेशन" चुनें. 
ऐप्लिकेशन की सूची से, Cloud Run ऐप्लिकेशन चुनें:
दूसरे पेज के लिए, Python Flask टेंप्लेट चुनें:
प्रोजेक्ट का नाम अपनी पसंद के मुताबिक डालें.उदाहरण के लिए, "amazing-gemini-app". इसके बाद, OK पर क्लिक करें:
इससे, अभी सेट अप किए गए नए प्रोजेक्ट का टेंप्लेट खुल जाएगा.
Google Cloud Shell की मदद से, Cloud Run पर Python Flask ऐप्लिकेशन बनाना इतना आसान है.
4. फ़्रंट-एंड बनाना
जैसा कि पहले बताया गया है, फ़ाइनल वेब ऐप्लिकेशन कुछ ऐसा दिखेगा:
इसमें एक इनपुट फ़ील्ड होता है, ताकि उपयोगकर्ता से YouTube लिंक लिया जा सके. इसमें मॉडल फ़ैमिली चुनने का विकल्प भी होता है. साथ ही, इसमें एक टेक्स्ट एरिया होता है, ताकि ज़रूरत पड़ने पर अतिरिक्त प्रॉम्प्ट दिया जा सके. इसमें फ़ॉर्म सबमिट करने के लिए एक बटन भी होता है.
अगर आपको चुनौती पसंद है, तो बेझिझक अपना फ़ॉर्म डिज़ाइन करें या सीएसएस प्रॉपर्टी में बदलाव करें. आपके पास नीचे दिए गए कोड को कॉपी करके, templates फ़ोल्डर में मौजूद index.html फ़ाइल के कॉन्टेंट को इससे बदलने का विकल्प भी है.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Summarizer</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
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="text"], 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>YouTube Summarizer</h2>
<form action="/summarize" target="_blank" method="post">
<input type="text" name="youtube_link" placeholder="Enter YouTube Link">
<select name="model">
<option value="gemini-2.0-flash-001">Gemini 2.0 Flash</option>
</select>
<textarea name="additional_prompt" placeholder="Write your additional prompt here. For example: 'explain to me like I am five years old'"></textarea>
<button type="submit">Summarize</button>
</form>
</div>
</body>
</html>
यह जांचने के लिए कि आपने यह चरण सही तरीके से पूरा किया है या नहीं, app.py पर राइट क्लिक करें. इसके बाद, Run Python File in Terminal चुनें.
अगर सब कुछ ठीक रहा, तो आपको अपने वेब ऐप्लिकेशन को ऐक्सेस करने का विकल्प मिलेगा. इसके लिए, Cloud Editor के सबसे ऊपर दाईं ओर मौजूद Web Preview बटन पर क्लिक करें. इसके बाद, Preview on port 8080 को चुनें
5. बैक-एंड बनाना
फ़्रंट-एंड सेट अप करने के बाद, आपको एक बैक-एंड सेवा बनानी होगी. यह सेवा, Gemini मॉडल का इस्तेमाल करके, उपयोगकर्ता के दिए गए YouTube वीडियो की खास जानकारी देगी. ध्यान दें कि इस टास्क को पूरा करने के लिए, आपको app.py को फिर से लिखना होगा.
कोड में बदलाव करने से पहले, आपको एक वर्चुअल एनवायरमेंट बनाना होगा. साथ ही, Gemini के कॉम्पोनेंट चलाने के लिए ज़रूरी लाइब्रेरी इंस्टॉल करनी होंगी.
सबसे पहले, आपको Google Gen AI SDK लाइब्रेरी को requirements.txt फ़ाइल में जोड़ना होगा. यह ऐसा दिखना चाहिए:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
दूसरा, आपको एक वर्चुअल एनवायरमेंट बनाना होगा. साथ ही, requirements.txt से पैकेज इंस्टॉल करने होंगे, ताकि बैक-एंड कोड को सही तरीके से चलाया जा सके.
- सबसे ऊपर बाएं कोने में मौजूद बार पर क्लिक करें. इसके बाद, टर्मिनल > नया टर्मिनल चुनें. (इसके अलावा, नया टर्मिनल खोलने के लिए
Ctrl + Shift + Cदबाएं)
2. टर्मिनल में टाइप करके वर्चुअल एनवायरमेंट बनाएं और उसके इंस्टॉल होने का इंतज़ार करें
python -m venv venv source venv/bin/activate pip install -r requirements.txt
आपके पास खुद को चुनौती देने का विकल्प है. इसलिए, Flask API का इस्तेमाल करके खुद ही Gemini एंडपॉइंट बनाएं. app.py में मौजूद आपका कोड, यहाँ दिए गए कोड जैसा होना चाहिए.
import os
from flask import Flask, render_template, request
from google import genai
from google.genai import types
app = Flask(__name__)
PROJECT_ID = "REPLACE_WITH_YOUR_PROJECT_ID"
client = genai.Client(
vertexai=True,
project=PROJECT_ID,
location="us-central1",
)
# Define the home page route.
@app.route('/', methods=['GET'])
def index():
'''
Renders the home page.
Returns:The rendered template.
'''
return render_template('index.html')
def generate(youtube_link, model, additional_prompt):
# Prepare youtube video using the provided link
youtube_video = types.Part.from_uri(
file_uri=youtube_link,
mime_type="video/*",
)
# If addtional prompt is not provided, just append a space
if not additional_prompt:
additional_prompt = " "
# Prepare content to send to the model
contents = [
youtube_video,
types.Part.from_text(text="""Provide a summary of the video."""),
additional_prompt,
]
# Define content configuration
generate_content_config = types.GenerateContentConfig(
temperature = 1,
top_p = 0.95,
max_output_tokens = 8192,
response_modalities = ["TEXT"],
)
return client.models.generate_content(
model = model,
contents = contents,
config = generate_content_config,
).text
@app.route('/summarize', methods=['GET', 'POST'])
def summarize():
'''
Summarize the user provided YouTube video.
Returns: Summary.
'''
# If the request is a POST request, process the form data.
if request.method == 'POST':
youtube_link = request.form['youtube_link']
model = request.form['model']
additional_prompt = request.form['additional_prompt']
# Generate the summary.
try:
summary = generate(youtube_link, model, additional_prompt)
return summary
except ValueError as e:
raise e
# If the request is a GET request, redirect to the home page.
else:
return redirect('/')
if __name__ == '__main__':
server_port = os.environ.get('PORT', '8080')
app.run(debug=False, port=server_port, host='0.0.0.0')
असल में, यह कोड ये काम करता है:
ज़रूरी लाइब्रेरी इंपोर्ट करता है:
- Flask: वेब ऐप्लिकेशन बनाने के लिए.
- os: इसका इस्तेमाल एनवायरमेंट वैरिएबल को ऐक्सेस करने के लिए किया जाता है.
- google.genai: इसका इस्तेमाल Google के Gemini AI से इंटरैक्ट करने के लिए किया जाता है.
- google.genai.types: इसका इस्तेमाल Gemini के लिए डेटा स्ट्रक्चर तय करने के लिए किया जाता है.
Gemini क्लाइंट को शुरू करना:
- यह Google के Vertex AI से कनेक्शन सेट अप करता है, ताकि ऐप्लिकेशन Gemini एआई मॉडल का इस्तेमाल कर सके. "REPLACE_WITH_YOUR_PROJECT_ID" की जगह अपना प्रोजेक्ट आईडी डालना न भूलें.
generate फ़ंक्शन को तय करना:
- इस फ़ंक्शन में, YouTube वीडियो का लिंक, Gemini मॉडल का आईडी, और एक अतिरिक्त प्रॉम्प्ट को इनपुट के तौर पर लिया जाता है. इसके बाद, यह वीडियो और प्रॉम्प्ट को Gemini को भेजता है और जनरेट किए गए खास जानकारी वाले टेक्स्ट को वापस भेजता है.
होम पेज का रूट (/):
- यह फ़ंक्शन, index.html टेंप्लेट को रेंडर करता है. यह टेंप्लेट, उपयोगकर्ता को एक फ़ॉर्म दिखाता है, ताकि वह YouTube लिंक डाल सके.
खास जानकारी देने वाले रूट (/summarize) को तय करना:
- यह फ़ंक्शन, फ़ॉर्म सबमिट करने की प्रोसेस को मैनेज करता है. यह फ़ॉर्म से YouTube लिंक, मॉडल, और प्रॉम्प्ट को वापस लाता है. इसके बाद, खास जानकारी पाने के लिए जनरेट फ़ंक्शन को कॉल करता है. इसके बाद, result.html टेंप्लेट में खास जानकारी दिखाता है.
ऐप्लिकेशन चलाना:
- यह एनवायरमेंट वैरिएबल से सर्वर पोर्ट को फिर से हासिल करता है और Flask वेब सर्वर शुरू करता है.
टर्मिनल से app.py चलाकर, कोड की जांच की जा सकती है. फ़्रंट एंड की जांच करने का तरीका. app.py पर राइट क्लिक करें और Run Python File in Terminal को चुनें.
आगे बढ़ें और अपने ऐप्लिकेशन की जांच करें. इसे उम्मीद के मुताबिक काम करना चाहिए.
6. वेब ऐप्लिकेशन को डिप्लॉय करना
अब आपके पास काम करने वाला GenAI ऐप्लिकेशन है. इसलिए, आइए इस ऐप्लिकेशन को Cloud Run पर डिप्लॉय करें, ताकि आप इसे अपने दोस्तों और सहकर्मियों के साथ शेयर कर सकें.
Cloud Shell टर्मिनल पर जाएं. साथ ही, पक्का करें कि मौजूदा प्रोजेक्ट, आपके एक्टिव प्रोजेक्ट के लिए कॉन्फ़िगर किया गया हो. अगर ऐसा नहीं है, तो प्रोजेक्ट आईडी सेट करने के लिए, gcloud configure कमांड का इस्तेमाल करें:
gcloud config set project [PROJECT_ID]
[PROJECT_ID] की जगह अपना प्रोजेक्ट आईडी डालना न भूलें. पक्का करें कि टर्मिनल में आपकी मौजूदा वर्किंग डायरेक्ट्री **amazing-gemini-app** हो. इसके बाद, यहां दिए गए निर्देशों को एक-एक करके इसी क्रम में डालें:
gcloud run deploy --source .
इसके बाद, आपको अपनी सेवा का नाम डालने के लिए कहा जाएगा. मान लें कि आपने "youtube-summarizer" नाम डाला है. "us-central1" क्षेत्र के लिए, उससे जुड़ा नंबर चुनें. जब आपसे पूछा जाए कि क्या आपको बिना पुष्टि किए गए अनुरोधों को अनुमति देनी है, तो "हां" कहें. ध्यान दें कि हम यहां बिना पुष्टि किए ऐक्सेस करने की अनुमति दे रहे हैं, क्योंकि यह एक डेमो ऐप्लिकेशन है. हमारा सुझाव है कि आप अपने एंटरप्राइज़ और प्रोडक्शन ऐप्लिकेशन के लिए, पुष्टि करने के सही तरीके का इस्तेमाल करें.
डप्लॉयमेंट पूरा होने के बाद, आपको यहां दिए गए लिंक जैसा लिंक मिलेगा:
https://amazing-gemini-app-*******.a.run.app/
अब गुप्त विंडो या अपने फ़ोन या टैबलेट पर ऐप्लिकेशन का इस्तेमाल करें. यह पहले से ही लाइव होना चाहिए.
7. चुनौती
अब आपके पास अपनी पहचान बनाने का मौका है. क्या आपके पास कोड में बदलाव करने का तरीका है, ताकि वीडियो सीधे अपने कंप्यूटर से अपलोड किए जा सकें?
8. व्यवस्थित करें
इस कोडलैब में इस्तेमाल किए गए संसाधनों के लिए, अपने Google Cloud खाते से शुल्क न लिए जाने के लिए, यह तरीका अपनाएं:
- Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं.
- प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे आपको मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
- डायलॉग बॉक्स में, प्रोजेक्ट आईडी डालें. इसके बाद, प्रोजेक्ट मिटाने के लिए बंद करें पर क्लिक करें.
- इसके अलावा, कंसोल पर Cloud Run पर जाकर, अभी-अभी डिप्लॉय की गई सेवा को चुनें और उसे मिटाएं.