1. परिचय
आज की तेज़-तर्रार डिजिटल दुनिया में, समय सबसे कीमती चीज़ है. YouTube पर जानकारी का भंडार है, लेकिन लंबी अवधि के वीडियो देखने में काफ़ी समय लग सकता है. ऐसे में, YouTube वीडियो की खास जानकारी देने वाले टूल बहुत काम आते हैं. ये टूल, लंबी अवधि के वीडियो को कम समय में देखने लायक खास जानकारी में बदल देते हैं. इससे उपयोगकर्ता, पूरा वीडियो देखे बिना ही मुख्य कॉन्टेंट को आसानी से समझ पाते हैं. यह सुविधा, छात्र-छात्राओं, पेशेवरों, और ऑनलाइन वीडियो कॉन्टेंट से अहम जानकारी निकालने की कोशिश करने वाले लोगों के लिए खास तौर पर काम की है. असल में, YouTube वीडियो की खास जानकारी देने वाले टूल की मदद से, उपयोगकर्ता कम समय में ज़्यादा जानकारी हासिल कर पाते हैं.
इस कोडलैब को पूरा करने के बाद, आपके पास एक ऐसा वेब ऐप्लिकेशन होगा जो YouTube वीडियो की खास जानकारी जनरेट कर सकता है. साथ ही, आपको Gemini API और Google Gen AI SDK का इस्तेमाल करने के बारे में बेहतर जानकारी मिलेगी. इसके अलावा, आपको यह भी पता चलेगा कि वेब ऐप्लिकेशन बनाने के लिए, इन दोनों को एक साथ कैसे इंटिग्रेट किया जाता है.
आपका वेब ऐप्लिकेशन कुछ ऐसा दिखेगा:

आपको सिर्फ़ 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
- Cloud Shell में यह कमांड चलाकर पुष्टि करें कि gcloud कमांड को आपके प्रोजेक्ट के बारे में पता है या नहीं.
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 और HTML कोड पढ़ने और लिखने की क्षमता
- Gemini API और Google Gen AI SDK के साथ काम करने में आसानी
- बेसिक फ़ुल-स्टैक डेवलपमेंट की जानकारी
आपको क्या सीखने को मिलेगा
- Flask API लाइब्रेरी का इस्तेमाल करके, Gemini की सुविधा वाला बैक-एंड एपीआई बनाना
- GenAI ऐप्लिकेशन बनाना और फ़्रंट-एंड और बैक-एंड को एक साथ लिंक करना
- डेवलप किए गए GenAI ऐप्लिकेशन को Cloud Run पर डिप्लॉय करना
आपको इन चीज़ों की ज़रूरत होगी
- एक चालू कंप्यूटर और भरोसेमंद वाई-फ़ाई
- कुछ नया सीखने की इच्छा
3. Cloud Run पर Python Flask ऐप्लिकेशन बनाना
हम Cloud Run पर Python Flask ऐप्लिकेशन बनाएंगे. इसके लिए, सबसे पहले Cloud Shell से अपने-आप जनरेट हुए टेंप्लेट का इस्तेमाल करेंगे.
Cloud Shell टर्मिनल पर जाएं और एडिटर खोलें बटन पर क्लिक करें. 
पक्का करें कि Cloud Code प्रोजेक्ट, Cloud Shell एडिटर के निचले बाएं कोने (स्टेटस बार) में सेट हो. जैसा कि नीचे दी गई इमेज में हाइलाइट किया गया है. साथ ही, यह चालू Google Cloud प्रोजेक्ट पर सेट हो, जिसमें बिलिंग की सुविधा चालू हो. अगर आपसे अनुमति मांगी जाती है, तो अनुमति दें पर क्लिक करें.
ध्यान दें: Cloud Shell एडिटर के शुरू होने और ज़रूरी सभी प्लग-इन लोड होने में कुछ समय लग सकता है. इसके बाद ही
Cloud Code - Sign In
बटन दिखेगा. कृपया इंतज़ार करें

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

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

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

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

Google Cloud Shell की मदद से, Cloud Run पर Python Flask ऐप्लिकेशन बनाना इतना ही आसान है.
4. फ़्रंट-एंड बनाना
जैसा कि पहले बताया गया है, फ़ाइनल वेब ऐप्लिकेशन कुछ ऐसा दिखेगा:

इसमें, उपयोगकर्ता से YouTube लिंक लेने के लिए एक इनपुट फ़ील्ड, अलग-अलग मॉडल फ़ैमिली चुनने का विकल्प, ज़रूरत पड़ने पर अतिरिक्त प्रॉम्प्ट देने के लिए एक टेक्स्ट एरिया, और फ़ॉर्म सबमिट करने के लिए एक बटन शामिल है.
अगर आपको चुनौती पसंद है, तो अपना फ़ॉर्म डिज़ाइन करें या सीएसएस प्रॉपर्टी में बदलाव करें. आपके पास नीचे दिया गया कोड कॉपी करने और टेम्प्लेट फ़ोल्डर में मौजूद 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 पर राइट क्लिक करें और टर्मिनल में Python फ़ाइल चलाएं को चुनें.

अगर सब कुछ ठीक रहा, तो Cloud Editor के सबसे ऊपर दाईं ओर मौजूद Web Preview बटन पर क्लिक करके और Preview on port 8080 को चुनकर, अपने वेब ऐप्लिकेशन को ऐक्सेस किया जा सकेगा

5. बैक-एंड बनाना
फ़्रंट-एंड सेट अप करने के बाद, आपको एक बैक-एंड सेवा बनानी होगी. यह सेवा, उपयोगकर्ता की ओर से दिए गए YouTube वीडियो की खास जानकारी देने के लिए, Gemini मॉडल का इस्तेमाल करती है. ध्यान दें कि इस टास्क को पूरा करने के लिए, आपको app.py को बदलना होगा.
कोड में बदलाव करने से पहले, आपको एक वर्चुअल एनवायरमेंट बनाना होगा. साथ ही, Gemini कॉम्पोनेंट चलाने के लिए ज़रूरी लाइब्रेरी इंस्टॉल करनी होंगी.
सबसे पहले, आपको requirements.txt फ़ाइल में Google Gen AI SDK लाइब्रेरी जोड़नी होगी. यह कुछ ऐसी दिखनी चाहिए:
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 AI मॉडल का इस्तेमाल कर पाता है. पक्का करें कि आपने "REPLACE_WITH_YOUR_PROJECT_ID" की जगह अपना प्रोजेक्ट आईडी डाला हो.
जनरेट फ़ंक्शन तय करना:
- यह फ़ंक्शन, इनपुट के तौर पर YouTube वीडियो का लिंक, Gemini मॉडल आईडी, और एक अतिरिक्त प्रॉम्प्ट लेता है. इसके बाद, यह वीडियो और प्रॉम्प्ट को Gemini को भेजता है. साथ ही, जनरेट किए गए खास जानकारी वाले टेक्स्ट को दिखाता है.
होम पेज का रूट (/):
- यह फ़ंक्शन, index.html टेंप्लेट को रेंडर करता है. इसमें उपयोगकर्ता के लिए YouTube लिंक डालने का एक फ़ॉर्म दिखता है.
खास जानकारी देने वाला रूट (/summarize):
- यह फ़ंक्शन, फ़ॉर्म सबमिट करने की प्रोसेस को मैनेज करता है. यह फ़ॉर्म से YouTube लिंक, मॉडल, और प्रॉम्प्ट को वापस लाता है. इसके बाद, खास जानकारी पाने के लिए जनरेट फ़ंक्शन को कॉल करता है. फिर result.html टेंप्लेट में खास जानकारी दिखाता है.
ऐप्लिकेशन चलाना:
- यह एनवायरमेंट वैरिएबल से सर्वर पोर्ट वापस लाता है और Flask वेब सर्वर शुरू करता है.
टर्मिनल से app.py चलाकर, कोड की जांच की जा सकती है. फ़्रंट-एंड की जांच करने का तरीका भी यही है. app.py पर राइट क्लिक करें और टर्मिनल में Python फ़ाइल चलाएं को चुनें.
अपने ऐप्लिकेशन की जांच करें. यह उम्मीद के मुताबिक काम करना चाहिए.
6. वेब ऐप्लिकेशन डिप्लॉय करना
अब आपके पास काम करने वाला GenAI ऐप्लिकेशन है. आइए, इस ऐप्लिकेशन को Cloud Run पर डिप्लॉय करें, ताकि इसे अपने दोस्तों और सहकर्मियों के साथ शेयर किया जा सके.
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/
Incognito विंडो या अपने मोबाइल डिवाइस से, अपने ऐप्लिकेशन का इस्तेमाल करें. यह पहले से ही लाइव होना चाहिए.
7. चुनौती
अब आपको लोगों तक पहुंचने से कोई नहीं रोक सकता. क्या आपके पास कोड में बदलाव करने की क्षमता है, ताकि वीडियो सीधे अपने कंप्यूटर से अपलोड किए जा सकें?
8. व्यवस्थित करें
इस कोडलैब में इस्तेमाल किए गए संसाधनों के लिए, अपने Google Cloud खाते से शुल्क न लिए जाने के लिए, यह तरीका अपनाएं:
- Google Cloud Console में, संसाधन मैनेज करें पेज पर जाएं.
- प्रोजेक्ट की सूची में, वह प्रोजेक्ट चुनें जिसे मिटाना है. इसके बाद, मिटाएं पर क्लिक करें.
- डायलॉग में, प्रोजेक्ट आईडी डालें. इसके बाद, प्रोजेक्ट मिटाने के लिए बंद करें पर क्लिक करें.
- इसके अलावा, कंसोल पर Cloud Run पर जाएं. इसके बाद, वह सेवा चुनें जिसे आपने अभी-अभी डिप्लॉय किया है और उसे मिटा दें.