Gemini-basierten YouTube-Zusammenfassungsdienst erstellen

1. Einführung

In der schnelllebigen digitalen Welt von heute ist Zeit ein kostbares Gut. YouTube ist eine riesige Informationsquelle, aber lange Videos können viel Zeit in Anspruch nehmen. Hier sind YouTube-Zusammenfassungen unschätzbar wertvoll. 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, Studierende, Berufstätige und alle, die wichtige Informationen aus Online-Videoinhalten effizient extrahieren möchten. Mit YouTube-Zusammenfassungen können Nutzer also in möglichst kurzer Zeit möglichst viel lernen und Informationen aufnehmen.

Nach Abschluss dieses Labs haben Sie eine funktionierende Webanwendung, mit der Zusammenfassungen von YouTube-Videos erstellt werden können. Außerdem erhalten Sie ein besseres Verständnis dafür, wie Sie die Gemini API und das Google Gen AI SDK verwenden und in eine Webanwendung einbinden.

Ihre Webanwendung sieht dann so aus:

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 kein Konto haben, können Sie der Anleitung unten folgen, um eines zu erstellen.

Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist.
Sie verwenden 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.

Sobald die Verbindung mit der Cloud Shell hergestellt ist, können Sie mit dem folgenden Befehl prüfen, ob Sie bereits authentifiziert sind und für das Projekt schon Ihre Projekt-ID eingestellt ist:

gcloud auth list

Führen Sie den folgenden Befehl in Cloud Shell aus, um zu bestätigen, dass der gcloud-Befehl Ihr Projekt kennt.

gcloud config list project

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-ID auch in der Console sehen.

Klicken Sie darauf. Rechts sehen Sie dann alle Ihre Projekte und die Projekt-ID.

Achten Sie darauf, dass die folgenden APIs aktiviert sind. Verwenden Sie den folgenden Befehl, um sie zu aktivieren:

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 die Konsole über diesen Link verwenden. Informationen zu gcloud-Befehlen und deren Verwendung finden Sie in der Dokumentation.

Voraussetzungen

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

Lerninhalte

Gemini-basierte Back-End-API mit der Flask API-Bibliothek erstellen
So erstellen Sie eine GenAI-App und verknüpfen das Frontend und das Backend
Die entwickelte GenAI-Anwendung in Cloud Run bereitstellen

Voraussetzungen

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

3. Python-Flask-Anwendung in Cloud Run erstellen

Wir erstellen die Python Flask-App in Cloud Run. Dazu verwenden wir zuerst die automatisch generierte Vorlage aus Cloud Shell.

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

Achten Sie darauf, dass das Cloud Code-Projekt in der Statusleiste unten links im Cloud Shell-Editor festgelegt ist, wie im Bild unten dargestellt, und auf das aktive Google Cloud-Projekt festgelegt ist, in dem die Abrechnung aktiviert ist. Autorisieren, wenn Sie dazu aufgefordert werden.

HINWEISE: Es kann eine Weile dauern, bis der Cloud Shell-Editor initialisiert und alle erforderlichen Plug-ins geladen wurden.

Cloud Code - Sign In

Die Schaltfläche wird angezeigt. Bitte haben Sie etwas Geduld.

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.

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

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

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

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

So einfach lässt sich eine Python Flask-App in Cloud Run mit Google Cloud Shell erstellen.

4. Frontend erstellen

Wie bereits erwähnt, wird die fertige Webanwendung so aussehen:

Es enthält ein Eingabefeld für einen YouTube-Link, 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 den Code auch unten kopieren und damit den Inhalt Ihrer Datei index.html im Ordner templates 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 testen, ob Sie diesen Schritt korrekt ausgeführt haben, klicken Sie mit der rechten Maustaste auf app.py und wählen Sie Run Python File in Terminal (Python-Datei im Terminal ausführen) aus.

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

5. Backend erstellen

Nachdem das Front-End eingerichtet wurde, müssen Sie einen Back-End-Dienst erstellen, der das Gemini-Modell verwendet, um das vom Nutzer bereitgestellte YouTube-Video zusammenzufassen. Hinweis: Wenn Sie diese Aufgabe ausführen, überschreiben Sie die Datei app.py.

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 die Google Gen AI SDK-Bibliothek der Datei requirements.txt hinzufügen. Das 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.

Klicken Sie oben links 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.

2. Erstellen Sie eine virtuelle Umgebung, indem Sie im Terminal eingeben, und warten Sie, bis sie installiert wurde.

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 dem folgenden Beispiel ähneln.

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:

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

Funktion „generate“ definieren:

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

Route für die Startseite definieren (/):

Diese Funktion rendert die Vorlage „index.html“, in der ein Formular angezeigt wird, in das der Nutzer einen YouTube-Link eingeben kann.

Zusammenfassungsroute definieren (/summarize):

Diese Funktion verarbeitet Formulareingaben. Es 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 Run Python File in Terminal (Python-Datei im Terminal ausführen) aus.

Testen Sie Ihre Anwendung. Es sollte wie erwartet funktionieren.

6. Webanwendung bereitstellen

Nachdem Sie die funktionierende GenAI-Anwendung haben, können Sie sie in Cloud Run bereitstellen, 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 für Ihr aktives Projekt konfiguriert ist. Falls nicht, müssen Sie die Projekt-ID mit dem Befehl „gcloud configure“ festlegen:

gcloud config set project [PROJECT_ID]

Vergessen Sie nicht, [PROJECT_ID] durch Ihre eigene Projekt-ID zu ersetzen. Achten Sie darauf, dass Ihr aktuelles Arbeitsverzeichnis im Terminal **amazing-gemini-app** ist. Geben Sie dann die folgenden Befehle nacheinander 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. Sagen Sie y, wenn Sie gefragt werden, ob Sie nicht authentifizierte Aufrufe zulassen möchten. Hinweis: Wir erlauben hier den nicht authentifizierten Zugriff, da es sich um eine Demoanwendung handelt. Wir empfehlen, für Ihre Unternehmens- und Produktionsanwendungen eine geeignete 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 die Anwendung nun im Inkognitofenster oder auf Ihrem Mobilgerät verwenden. Sie sollte bereits aktiv sein.

7. Herausforderung

Jetzt ist es an der Zeit, zu glänzen. Hast du das Zeug dazu, den Code so zu ändern, dass du Videos direkt von deinem Computer hochladen kannst?

8. Bereinigen

So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen in Rechnung gestellt werden:

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