פיתוח סיכום של סרטונים ב-YouTube באמצעות Gemini

1. מבוא

בעולם הדיגיטלי המהיר של היום, הזמן הוא משאב יקר. YouTube הוא מאגר עצום של מידע, אבל צפייה בסרטונים ארוכים יכולה להיות השקעה משמעותית של זמן. כאן נכנסים לתמונה כלי הסיכום של YouTube. הכלים האלה מאפשרים לצופים לקבל במהירות את עיקרי התוכן בלי לצפות בסרטון כולו, כי הם דוחסים ביעילות סרטונים ארוכים לתקצירים תמציתיים. התכונה הזו שימושית במיוחד לתלמידים, לאנשי מקצוע ולכל מי שרוצה לחלץ ביעילות מידע חשוב מתוכן וידאו באינטרנט. במילים אחרות, כלי הסיכום ב-YouTube מאפשרים למשתמשים ללמוד כמה שיותר מידע בזמן הקצר ביותר.

בסוף שיעור Lab הזה, תהיה לכם אפליקציית אינטרנט פעילה שיכולה ליצור סיכום מסרטונים ב-YouTube. בנוסף, תקבלו הסבר על השימוש ב-Gemini API וב-Google Gen AI SDK, ועל שילוב ביניהם כדי ליצור אפליקציית אינטרנט.

אפליקציית האינטרנט תיראה כך:

כל מה שצריך לעשות הוא לספק קישור לסרטון ב-YouTube, ו-Gemini יעשה את כל השאר.

‫2. לפני שמתחילים

ב-codelab הזה אנחנו יוצאים מנקודת הנחה שכבר יש לכם פרויקט בענן ב-Google Cloud עם חיוב מופעל. אם עדיין אין לכם חשבון, אתם יכולים לפעול לפי ההוראות שבהמשך כדי להתחיל.

ב-מסוף Google Cloud, בדף לבחירת הפרויקט, בוחרים או יוצרים פרויקט ב-Google Cloud.
מוודאים שהחיוב מופעל בפרויקט בענן שלכם ב-Google Cloud. כך בודקים אם החיוב מופעל בפרויקט
תשתמשו ב-Cloud Shell, סביבת שורת פקודה שפועלת ב-Google Cloud. כדי לגשת אליו, לוחצים על Activate Cloud Shell (הפעלת Cloud Shell) בחלק העליון של מסוף Google Cloud.

אחרי שמתחברים ל-Cloud Shell, אפשר לבדוק שכבר בוצע אימות ושהפרויקט מוגדר למזהה הפרויקט שלכם באמצעות הפקודה הבאה:

gcloud auth list

מריצים את הפקודה הבאה ב-Cloud Shell כדי לוודא שפקודת gcloud מכירה את הפרויקט.

gcloud config list project

אם הפרויקט לא מוגדר, משתמשים בפקודה הבאה כדי להגדיר אותו:

gcloud config set project <YOUR_PROJECT_ID>

אפשר גם לראות את המזהה PROJECT_ID במסוף

לוחצים עליו וכל הפרויקטים ומזהה הפרויקט יופיעו בצד שמאל.

מוודאים שממשקי ה-API הבאים מופעלים. כדי להגדיר אותם, משתמשים בפקודה הבאה:

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
הבנה של פיתוח בסיסי של Full-stack

מה תלמדו

איך ליצור API של קצה עורפי מבוסס-Gemini באמצעות ספריית Flask API
איך בונים קישור לאפליקציית AI גנרטיבי שמקשר בין החלק הקדמי והחלק האחורי
איך פורסים את אפליקציית ה-GenAI שפיתחתם ב-Cloud Run

מה תצטרכו

מחשב תקין וחיבור Wi-Fi אמין
ראש פתוח

3. יצירת אפליקציית Python Flask ב-Cloud Run

קודם ניצור את אפליקציית Python Flask ב-Cloud Run באמצעות התבנית שנוצרה אוטומטית מ-Cloud Shell.

עוברים אל Cloud Shell Terminal ולוחצים על הלחצן Open Editor (פתיחת העורך).

מוודאים שהפרויקט ב-Cloud Code מוגדר בפינה הימנית התחתונה (סרגל הסטטוס) של העורך ב-Cloud Shell, כפי שמודגש בתמונה שלמטה, ושהוא מוגדר לפרויקט הפעיל ב-Google Cloud שבו החיוב מופעל. אם מתבקשים, לוחצים על Authorize (אישור).

הערות: יכול להיות שיעבור זמן מה אחרי האתחול של Cloud Shell Editor וטעינת כל הפלאגינים הנדרשים עד ש

Cloud Code - Sign In

כפתור יופיע, צריך להתאזר בסבלנות

לוחצים על הפרויקט הפעיל בסרגל הסטטוס ומחכים עד שייפתח החלון הקופץ של Cloud Code. בחלון הקופץ, בוחרים באפשרות 'אפליקציה חדשה'.

ברשימת האפליקציות, בוחרים באפשרות Cloud Run Application (אפליקציית Cloud Run):

בדף 2 מתוך 2, בוחרים בתבנית Python Flask:

מזינים את שם הפרויקט הרצוי (למשל, amazing-gemini-app) ולוחצים על OK (אישור):

הפעולה הזו תפתח את התבנית של הפרויקט החדש שהגדרתם.

ככה פשוט ליצור אפליקציית Python Flask ב-Cloud Run באמצעות Google Cloud Shell.

4. בניית הקצה הקדמי

כמו שציינו קודם, כך תיראה אפליקציית האינטרנט הסופית:

הוא מכיל שדה להזנת קלט לקבלת קישור ל-YouTube מהמשתמש, אפשרות לבחור משפחת מודלים אחרת, אזור טקסט להוספת הנחיה נוספת אם צריך וכפתור לשליחת הטופס.

אם אתם אוהבים אתגרים, אתם יכולים לעצב טופס משלכם או לערוך את מאפייני ה-CSS. אפשר גם להעתיק את הקוד שלמטה ולהחליף איתו את התוכן של הקובץ index.html בתיקייה templates.

<!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 (הפעלת קובץ Python בטרמינל).

אם הכול עבר בצורה חלקה, תוכלו לגשת לאפליקציית האינטרנט שלכם בלחיצה על הלחצן Web Preview בפינה השמאלית העליונה של Cloud Editor, ובחירה באפשרות 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 כדי להריץ את קוד ה-back-end בהצלחה.

לוחצים על הפסים בפינה הימנית העליונה ובוחרים באפשרות Terminal > New Terminal ( לחלופין, אפשר להקיש על Ctrl + Shift + C כדי לפתוח טרמינל חדש).

2. יוצרים סביבה וירטואלית על ידי הקלדה בטרמינל ומחכים שההתקנה תסתיים בהצלחה.

python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

אתם יכולים גם ליצור בעצמכם נקודת קצה של Gemini באמצעות Flask API. הקוד שלכם בקובץ 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: לאינטראקציה עם Gemini AI מבית Google.
‫google.genai.types: להגדרת מבני נתונים ל-Gemini.

הפעלת Gemini Client:

הוא מגדיר חיבור ל-Vertex AI של Google, כדי שהאפליקציה תוכל להשתמש במודל Gemini AI. חשוב להחליף את 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 (הפעלת קובץ Python בטרמינל).

אפשר לבדוק את הבקשה. היא אמורה לפעול כצפוי.

6. פריסת אפליקציית האינטרנט

עכשיו, אחרי שיש לכם אפליקציית AI גנרטיבי שעובדת, אפשר לפרוס את האפליקציה ב-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. אומרים y כשנשאלים אם רוצים לאפשר הפעלות לא מאומתות. שימו לב שאנחנו מאפשרים כאן גישה לא מאומתת כי זו אפליקציית הדגמה. מומלץ להשתמש באימות מתאים לאפליקציות הארגוניות ולאפליקציות הייצור.

אחרי שהפריסה תושלם, תקבלו קישור שדומה לקישור שבהמשך:

https://amazing-gemini-app-*******.a.run.app/

אפשר להשתמש באפליקציה מחלון פרטי או מהנייד. הוא כבר אמור להיות פעיל.

7. האתגר

עכשיו זה הזמן שלכם לזרוח. יש לך את היכולת לשנות את הקוד כדי שתוכל להעלות סרטונים ישירות מהמחשב?

8. הסרת המשאבים

כדי לא לצבור חיובים לחשבון Google Cloud על המשאבים שבהם השתמשתם ב-Code Lab הזה:

במסוף Google Cloud, עוברים לדף Manage resources.
ברשימת הפרויקטים, בוחרים את הפרויקט שרוצים למחוק ולוחצים על Delete.
כדי למחוק את הפרויקט, כותבים את מזהה הפרויקט בתיבת הדו-שיח ולוחצים על Shut down.
לחלופין, אפשר לעבור אל Cloud Run במסוף, לבחור את השירות שפרסתם ולמחוק אותו.