1. Einführung
In der heutigen schnelllebigen digitalen Welt ist Zeit ein kostbares Gut. YouTube ist eine riesige Informationsquelle, aber lange Videos können eine erhebliche Zeitinvestition erfordern. Hier kommen YouTube-Zusammenfassungen ins Spiel. Mit diesen Tools werden lange Videos effizient in prägnante Zusammenfassungen komprimiert, sodass Nutzer schnell den Kern der Inhalte erfassen können, ohne sich das gesamte Video anzusehen. Das ist besonders nützlich für Schüler, Studenten, Berufstätige und alle, die wichtige Informationen aus Online-Videoinhalten effizient extrahieren möchten. Im Grunde ermöglichen YouTube-Zusammenfassungen Nutzern, das Lernen und die Informationsaufnahme zu maximieren und gleichzeitig unnötige Zeit zu sparen.
Am Ende dieses Labs haben Sie eine funktionierende Webanwendung, mit der Zusammenfassungen aus YouTube-Videos erstellt werden können. Außerdem erfahren Sie, wie Sie die Gemini API und das Google Gen AI SDK verwenden und zusammen integrieren, um eine Webanwendung zu erstellen.
Ihre Webanwendung sieht dann so aus:
Sie müssen lediglich einen Link zum YouTube-Video angeben. 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 keine haben, können Sie der Anleitung unten folgen, um loszulegen.
- Wählen Sie in der Google Cloud Console auf der Seite der 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 dazu oben in der Google Cloud Console auf „Cloud Shell aktivieren“.
- Nachdem Sie eine Verbindung zu Cloud Shell hergestellt haben, prüfen Sie mit dem folgenden Befehl, ob Sie bereits authentifiziert sind und das Projekt auf Ihre Projekt-ID festgelegt ist:
gcloud auth list
- Führen Sie in Cloud Shell den folgenden Befehl aus, um zu prüfen, ob 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>
- Die folgenden APIs müssen aktiviert sein:
- Cloud Run
- Vertex AI
Alternativ können Sie die Console über diesen Link aufrufen. Informationen zu gcloud-Befehlen und deren Verwendung finden Sie in der Dokumentation.
Voraussetzungen
- Python- und HTML-Code lesen und schreiben
- Erfahrung mit der Gemini API und dem Google Gen AI SDK
- Grundlegende Kenntnisse der Full-Stack-Entwicklung
Aufgaben in diesem Lab
- Gemini-basierte Back-End-API mit der Flask API-Bibliothek erstellen
- So erstellen Sie eine GenAI-App und verknüpfen das Front-End mit dem Back-End
- Die entwickelte GenAI-Anwendung in Cloud Run bereitstellen
Voraussetzungen
- Einen funktionierenden 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 mit der automatisch generierten Vorlage zuerst in 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 unteren linken Ecke (Statusleiste) des Cloud Shell-Editors festgelegt ist, wie im Bild unten hervorgehoben. Es muss sich dabei um das aktive Google Cloud-Projekt handeln, in dem Sie die Abrechnung aktiviert haben. Klicken Sie auf Autorisieren, wenn Sie dazu aufgefordert werden.
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 die Option „Neue Anwendung“ aus. 
Wählen Sie in der Liste der Anwendungen Cloud Run-Anwendung aus:
Wählen Sie für Seite 2/2 die Python-Flask-Vorlage aus:
Geben Sie einen beliebigen Namen für das Projekt ein (z.B. „amazing-gemini-app“) und klicken Sie auf OK:
Daraufhin wird die Vorlage für das neue Projekt geöffnet, das Sie gerade eingerichtet haben.
So einfach ist es, mit der Google Cloud Shell eine Python-Flask-Anwendung in Cloud Run zu erstellen.
4. Frontend erstellen
Wie bereits erwähnt, sieht die endgültige Webanwendung so aus:
Es enthält ein Eingabefeld, in das der Nutzer einen YouTube-Link eingeben kann, eine Option zum Auswählen einer anderen Modellfamilie, ein Textfeld für zusätzliche Aufforderungen bei Bedarf und eine Schaltfläche zum Senden des Formulars.
Wenn Sie die Herausforderung annehmen möchten, können Sie Ihr eigenes Formular entwerfen oder die CSS-Eigenschaften bearbeiten. Sie können auch den Code unten kopieren und damit den Inhalt der 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 richtig ausgeführt haben, klicken Sie mit der rechten Maustaste auf app.py und wählen Sie Python-Datei im Terminal ausführen aus.
Wenn alles gut gelaufen ist, sollten Sie unter http://127.0.0.1:8080 auf Ihre Webanwendung zugreifen können.
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: Sie überschreiben app.py, um diese Aufgabe auszuführen.
Bevor Sie den Code ändern, müssen Sie eine virtuelle Umgebung erstellen und die erforderlichen Bibliotheken für die Ausführung der Gemini-Komponenten installieren.
Fügen Sie zuerst die Google Gen AI SDK-Bibliothek der Datei requirements.txt hinzu. 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 Back-End-Code ausführen können.
- Klicken Sie links oben auf die Balken und wählen Sie Terminal > Neues Terminal aus.
2. Erstellen Sie eine virtuelle Umgebung, indem Sie im Terminal tippen, 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 gerne selbst herausfordern und einen Gemini-Endpunkt mit der Flask API erstellen. Ihr Code sollte in etwa so aussehen:
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:
Importiert die erforderlichen Bibliotheken:
- Flask: Zum Erstellen der Webanwendung.
- os: Zugriff auf Umgebungsvariablen.
- google.genai: Damit können Sie mit der Gemini-KI von Google interagieren.
- google.genai.types: Zum Definieren von Datenstrukturen für Gemini.
Gemini-Client initialisieren:
- Es wird eine Verbindung zu Vertex AI von Google hergestellt, damit die App das Gemini-KI-Modell verwenden kann. Ersetzen Sie „REPLACE_WITH_YOUR_PROJECT_ID“ durch Ihre Projekt-ID.
Funktion „generate“ definieren:
- Diese Funktion nimmt einen YouTube-Videolink, eine Gemini-Modell-ID und einen zusätzlichen Prompt als Eingabe entgegen. Anschließend werden das Video und der Prompt an Gemini gesendet und die generierte Zusammenfassung zurückgegeben.
Startseitenpfad (/) definieren:
- Diese Funktion rendert die index.html-Vorlage, in der ein Formular angezeigt wird, in das der Nutzer einen YouTube-Link eingeben kann.
Zusammenfassungs-Route 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 abzurufen, und zeigt die Zusammenfassung dann in der Vorlage result.html an.
Anwendung ausführen
- Er ruft den Serverport aus den Umgebungsvariablen ab und startet den Flask-Webserver.
Sie können den Code testen, indem Sie app.py über das Terminal ausführen. Die gleiche Methode wie beim Testen des Front-Ends. Klicken Sie mit der rechten Maustaste auf app.py und wählen Sie Python-Datei im Terminal ausführen aus.
Testen Sie Ihre Anwendung. Es sollte wie erwartet funktionieren.
6. Webanwendung bereitstellen
Jetzt, da 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 auf Ihr aktives Projekt konfiguriert ist. Falls nicht, können Sie die Projekt-ID mit dem Befehl „gcloud configure“ festlegen:
gcloud config set project [PROJECT_ID]
Ersetzen Sie dabei [PROJECT_ID] durch Ihre Projekt-ID. Geben Sie dann die folgenden Befehle nacheinander ein:
cd amazing-gemini-app
gcloud run deploy --source .
Sie werden aufgefordert, einen Namen für Ihren Dienst einzugeben, z. B. youtube-summarizer. Wählen Sie die entsprechende Zahl für die Region us-central1 aus. Sagen Sie „y“, wenn Sie gefragt werden, ob Sie nicht authentifizierte Aufrufe zulassen möchten. Hinweis: Hier wird der nicht authentifizierte Zugriff zugelassen, 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 jetzt über das Inkognitofenster oder Ihr Mobilgerät verwenden. Sie sollte bereits verfügbar sein.
7. Herausforderung
Jetzt ist es an der Zeit, die Zuschauer zu begeistern. Haben Sie die nötigen Kenntnisse, um den Code so zu ändern, dass Sie Videos direkt von Ihrem Computer hochladen können?
8. Bereinigen
So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen in Rechnung gestellt werden:
- Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.
- 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 Cloud Run aufrufen, den gerade bereitgestellten Dienst auswählen und löschen.