‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

הערות: יכול להיות שיעבור זמן מה אחרי האתחול של 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 כדי להריץ את קוד ה-backend בהצלחה.

לוחצים על הפסים בפינה הימנית העליונה ובוחרים באפשרות 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 על המשאבים שבהם השתמשתם ב-codelab הזה:

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