Gemini-basierten YouTube-Zusammenfassungsdienst erstellen

1. Einführung

In der schnelllebigen digitalen Welt von heute ist Zeit ein kostbares Gut. YouTube ist ein riesiges Informationsarchiv, aber lange Videos können viel Zeit in Anspruch nehmen. Hier kommen YouTube-Zusammenfassungstools ins Spiel. Mit diesen Tools lassen sich lange Videos effizient in kurze Zusammenfassungen umwandeln, sodass Nutzer die wichtigsten Inhalte schnell erfassen können, ohne sich das gesamte Video ansehen zu müssen. Das ist besonders nützlich für Schüler, Studenten, Berufstätige und alle, die wichtige Informationen aus Online-Videoinhalten effizient extrahieren möchten. YouTube-Zusammenfassungstools ermöglichen es Nutzern, ihr Lernpotenzial und die Informationsaufnahme zu maximieren und gleichzeitig den Zeitaufwand zu minimieren.

Nach Abschluss dieses Labs haben Sie eine funktionierende Webanwendung, mit der Sie Zusammenfassungen aus YouTube-Videos erstellen können. Außerdem wissen Sie besser, wie Sie die Gemini API und das Google Gen AI SDK verwenden und kombinieren können, um eine Webanwendung zu erstellen.

Ihre Webanwendung sieht so aus:

13a0825947f9892b.png

Sie müssen nur einen Link zum YouTube-Video angeben und Gemini erledigt den Rest.

2. Hinweis

In diesem Codelab wird davon ausgegangen, dass Sie bereits ein Google Cloud-Projekt mit aktivierter Abrechnung haben. Wenn Sie noch keines haben, folgen Sie der Anleitung unten, um loszulegen.

  1. Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
  2. Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist.
  3. Sie verwenden die Cloud Shell, eine Befehlszeilenumgebung, die in Google Cloud ausgeführt wird. Klicken Sie oben in der Google Cloud Console auf „Cloud Shell aktivieren“, um darauf zuzugreifen.

1829c3759227c19b.png

  1. Sobald die Verbindung mit der Cloud Shell hergestellt ist, prüfen Sie mit dem folgenden Befehl, ob Sie bereits authentifiziert sind und für das Projekt schon Ihre Projekt-ID eingestellt ist:
gcloud auth list
  1. Führen Sie in der Cloud Shell den folgenden Befehl aus, um zu prüfen, ob der gcloud-Befehl Ihr Projekt kennt.
gcloud config list project
  1. Wenn Ihr Projekt nicht festgelegt ist, verwenden Sie den folgenden Befehl, um es festzulegen:
gcloud config set project <YOUR_PROJECT_ID>

Alternativ können Sie die PROJECT_ID auch in der Console sehen.

4032c45803813f30.jpeg

Klicken Sie darauf. Auf der rechten Seite sehen Sie alle Ihre Projekte und die Projekt-ID.

2b4c041c426d8b29.jpeg

  1. Achten Sie darauf, dass die folgenden APIs aktiviert sind. Verwenden Sie den folgenden Befehl, um sie festzulegen:
  • 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

Alternativ zum gcloud-Befehl können Sie auch diesen Link verwenden, um die Console aufzurufen. Weitere Informationen finden Sie in der Dokumentation zu gcloud-Befehlen und ihrer Verwendung.

Voraussetzungen

  • Sie können Python- und HTML-Code lesen und schreiben.
  • Sie sind mit der Gemini API und dem Google Gen AI SDK vertraut.
  • Sie haben Grundkenntnisse in der Full-Stack-Entwicklung.

Lerninhalte

  • So erstellen Sie eine Gemini-basierte Back-End-API mit der Flask API-Bibliothek.
  • So erstellen Sie eine GenAI-Anwendung und verknüpfen das Front-End und das Back-End miteinander.
  • So stellen Sie die entwickelte GenAI-Anwendung in Cloud Run bereit.

Voraussetzungen

  • Ein funktionierender Computer und eine zuverlässige WLAN-Verbindung
  • Neugier

3. Python-Flask-Anwendung in Cloud Run erstellen

Wir erstellen die Python-Flask-Anwendung in Cloud Run zuerst mit der automatisch generierten Vorlage aus der Cloud Shell.

Rufen Sie das Cloud Shell-Terminal auf und klicken Sie auf die Schaltfläche „Editor öffnen“. b16d56e4979ec951.png

Achten Sie darauf, dass das Cloud Code-Projekt in der unteren linken Ecke (Statusleiste) des Cloud Shell-Editors festgelegt ist, wie im Bild unten hervorgehoben. Es muss auf das aktive Google Cloud-Projekt festgelegt sein, für das die Abrechnung aktiviert ist. Klicken Sie bei Aufforderung auf Autorisieren.

HINWEIS: Nach der Initialisierung des Cloud Shell-Editors und dem Laden aller erforderlichen Plug-ins kann es eine Weile dauern, bis die Schaltfläche

Cloud Code - Sign In

angezeigt wird. Bitte haben Sie etwas Geduld.

f5003b9c38b43262.png

Klicken Sie in der Statusleiste auf das aktive Projekt und warten Sie, bis das Cloud Code-Pop-up geöffnet wird. Wählen Sie im Pop-up-Fenster „Neue Anwendung“ aus. 70f80078e01a02d8.png

Wählen Sie in der Liste der Anwendungen Cloud Run-Anwendung aus:

39abad102a72ae74.png

Wählen Sie auf Seite 2/2 die Python-Flask-Vorlage aus:

a78b3a0311403ad.png

Geben Sie den gewünschten Namen für das Projekt ein (z.B. „amazing-gemini-app“) und klicken Sie auf OK:

4d8f77279d9509cb.png

Dadurch wird die Vorlage für das neue Projekt geöffnet, das Sie gerade eingerichtet haben.

e85a020a20d38e17.png

So einfach können Sie mit der Google Cloud Shell eine Python-Flask-Anwendung in Cloud Run erstellen.

4. Frontend erstellen

Wie bereits erwähnt, sieht die fertige Webanwendung so aus:

13a0825947f9892b.png

Sie enthält ein Eingabefeld für einen YouTube-Link vom Nutzer, eine Option zur Auswahl einer anderen Modellfamilie, ein Textfeld für zusätzliche Prompts und eine Schaltfläche zum Senden des Formulars.

Wenn Sie sich der Herausforderung stellen möchten, können Sie Ihr eigenes Formular entwerfen oder die CSS-Eigenschaften bearbeiten. Sie können auch den Code unten kopieren und den Inhalt Ihrer index.html -Datei im Ordner templates damit ersetzen.

<!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>

Um zu prüfen, ob Sie diesen Schritt korrekt ausgeführt haben, klicken Sie mit der rechten Maustaste auf app.py und wählen Sie Python-Datei im Terminal ausführen aus.

690765473f94db9c.png

Wenn alles gut gelaufen ist, können Sie auf Ihre Webanwendung zugreifen, indem Sie rechts oben im Cloud Editor auf die Schaltfläche Web Preview klicken und Preview on port 8080 auswählen.

49cbdfdf77964065.jpeg

5. Backend erstellen

Nachdem Sie das Frontend eingerichtet haben, müssen Sie einen Backend-Dienst erstellen, der das Gemini-Modell verwendet, um das vom Nutzer bereitgestellte YouTube-Video zusammenzufassen. Beachten Sie, dass Sie die Datei app.py überschreiben, um diese Aufgabe abzuschließen.

Bevor Sie den Code ändern, müssen Sie eine virtuelle Umgebung erstellen und die erforderlichen Bibliotheken installieren, um die Gemini-Komponenten auszuführen.

Zuerst müssen Sie der Datei requirements.txt die Google Gen AI SDK-Bibliothek hinzufügen. Sie sollte so aussehen:

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0

Zweitens müssen Sie eine virtuelle Umgebung erstellen und die Pakete aus requirements.txt installieren, damit Sie den Backend-Code erfolgreich ausführen können.

  1. Klicken Sie links oben auf die Balken und wählen Sie Terminal > Neues Terminal aus. Alternativ können Sie auch Ctrl + Shift + C drücken, um ein neues Terminal zu öffnen.

2cda225f0cd71e7e.png 2. Geben Sie im Terminal ein, um eine virtuelle Umgebung zu erstellen, und warten Sie, bis die Installation abgeschlossen ist.

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

Sie können sich auch selbst herausfordern und einen Gemini-Endpunkt mit der Flask API erstellen. Ihr Code in app.py sollte in etwa so aussehen wie unten.

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')

Im Wesentlichen führt der Code Folgendes aus:

Erforderliche Bibliotheken importieren

  • Flask: Zum Erstellen der Webanwendung.
  • os: Für den Zugriff auf Umgebungsvariablen.
  • google.genai: Für die Interaktion mit der Gemini AI von Google.
  • google.genai.types: Zum Definieren von Datenstrukturen für Gemini.

Gemini-Client initialisieren

  • Es wird eine Verbindung zu Vertex AI von Google hergestellt, sodass die App das Gemini AI-Modell verwenden kann. Ersetzen Sie "REPLACE_WITH_YOUR_PROJECT_ID" durch Ihre Projekt-ID.

Funktion „generate“ definieren

  • Diese Funktion verwendet einen YouTube-Videolink, eine Gemini-Modell-ID und einen zusätzlichen Prompt als Eingabe. Dann werden das Video und der Prompt an Gemini gesendet und der generierte Zusammenfassungstext wird zurückgegeben.

Route für die Startseite definieren (/):

  • Diese Funktion rendert die Vorlage „index.html“, die ein Formular enthält, in dem der Nutzer einen YouTube-Link eingeben kann.

Route für die Zusammenfassung definieren (/summarize):

  • Diese Funktion verarbeitet Formulareinsendungen. Sie ruft den YouTube-Link, das Modell und den Prompt aus dem Formular ab, ruft die Funktion „generate“ auf, um die Zusammenfassung zu erhalten, und zeigt die Zusammenfassung dann in der Vorlage result.html an.

Anwendung ausführen

  • Der Serverport wird aus Umgebungsvariablen abgerufen und der Flask-Webserver wird gestartet.

Sie können den Code testen, indem Sie app.py über das Terminal ausführen. Die Methode ist dieselbe wie beim Testen des Frontends. Klicken Sie mit der rechten Maustaste auf app.py und wählen Sie Python-Datei im Terminal ausführen aus.

Testen Sie Ihre Anwendung. Sie sollte wie erwartet funktionieren.

6. Webanwendung bereitstellen

Nachdem Sie die funktionierende GenAI-Anwendung erstellt haben, stellen Sie sie in Cloud Run bereit, damit Sie sie mit Freunden und Kollegen teilen können.

Rufen Sie das Cloud Shell-Terminal auf und prüfen Sie, ob das aktuelle Projekt auf Ihr aktives Projekt konfiguriert ist. Wenn nicht, verwenden Sie den Befehl „gcloud configure“, um die Projekt-ID festzulegen:

gcloud config set project [PROJECT_ID]

Ersetzen Sie [PROJECT_ID] durch Ihre eigene Projekt-ID. Achten Sie darauf, dass Ihr aktuelles Arbeitsverzeichnis im Terminal **amazing-gemini-app** ist. Geben Sie dann die folgenden Befehle in dieser Reihenfolge ein:

gcloud run deploy --source .

Sie werden aufgefordert, einen Namen für Ihren Dienst einzugeben, z. B. youtube-summarizer. Wählen Sie die entsprechende Nummer für die Region "us-central1" aus. Antworten Sie mit "y" auf die Frage, ob Sie nicht authentifizierte Aufrufe zulassen möchten. Beachten Sie, dass wir hier den nicht authentifizierten Zugriff zulassen, da es sich um eine Demoanwendung handelt. Für Ihre Unternehmens- und Produktionsanwendungen empfehlen wir, die entsprechende Authentifizierung zu verwenden.

Nach Abschluss der Bereitstellung sollten Sie einen Link ähnlich dem folgenden erhalten:

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

Sie können Ihre Anwendung jetzt im Inkognitomodus oder auf Ihrem Mobilgerät verwenden. Sie sollte bereits aktiv sein.

7. Herausforderung

Jetzt ist es an der Zeit, die Zuschauer zu begeistern. Können Sie den Code so ändern, dass Sie Videos direkt von Ihrem Computer hochladen können?

8. Bereinigen

Mit den folgenden Schritten vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen in Rechnung gestellt werden:

  1. Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
  2. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf Löschen.
  3. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden , um das Projekt zu löschen.
  4. Alternativ können Sie in der Console zu Cloud Run wechseln, den gerade bereitgestellten Dienst auswählen und löschen.