1. Wprowadzenie
W dzisiejszym dynamicznym świecie cyfrowym czas jest cenną walutą. YouTube to ogromne repozytorium informacji, ale długie filmy mogą wymagać sporo czasu. Właśnie w takich sytuacjach narzędzia do podsumowywania treści w YouTube stają się bezcenne. Te narzędzia skutecznie skracają długie filmy do zwięzłych podsumowań, dzięki czemu użytkownicy mogą szybko poznać najważniejsze treści bez oglądania całego filmu. Jest to szczególnie przydatne dla studentów, profesjonalistów i wszystkich, którzy chcą skutecznie wydobyć kluczowe informacje z filmów online. W podstawie funkcje podsumowujące w YouTube umożliwiają użytkownikom maksymalizację nauki i pozyskiwania informacji przy jednoczesnym minimalizowaniu marnowania czasu.
Na koniec tego ćwiczenia będziesz mieć działającą aplikację internetową, która będzie generować podsumowanie filmów w YouTube. Poznasz też, jak używać interfejsu Gemini API i pakietu Google Gen AI SDK oraz jak je integrować, aby tworzyć aplikacje internetowe.
Twoja aplikacja internetowa będzie wyglądać tak:
Wystarczy, że podasz link do filmu w YouTube, a Gemini zajmie się resztą.
2. Zanim zaczniesz
W tym laboratorium programowania zakładamy, że masz już projekt Google Cloud z włączonymi płatnościami. Jeśli jeszcze go nie masz, możesz zacząć od wykonania tych instrukcji.
- W konsoli Google Cloud na stronie selektora projektu wybierz lub utwórz projekt Google Cloud.
- Sprawdź, czy w projekcie Google Cloud włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności.
- Użyjesz Cloud Shell, czyli środowiska wiersza poleceń działającego w Google Cloud. Aby uzyskać do niego dostęp, u góry konsoli Google Cloud kliknij Aktywuj Cloud Shell.
- Po połączeniu z Cloud Shell sprawdź, czy jesteś już uwierzytelniony i czy projekt jest ustawiony na identyfikator Twojego projektu, używając tego polecenia:
gcloud auth list
- Aby sprawdzić, czy polecenie gcloud zna Twój projekt, uruchom w Cloud Shell to polecenie:
gcloud config list project
- Jeśli projekt nie jest ustawiony, użyj tego polecenia:
gcloud config set project <YOUR_PROJECT_ID>
- Sprawdź, czy te interfejsy API są włączone:
- Cloud Run
- Vertex AI
Alternatywą dla polecenia gcloud jest konsola, do której możesz przejść klikając ten link. Więcej informacji o poleceniach i użyciu gcloud znajdziesz w dokumentacji.
Wymagania wstępne
- umiejętność odczytywania i tworzenia kodu w Pythonie i HTML-u;
- swobodnie korzystać z Gemini API i Google Gen AI SDK;
- podstawy programowania full-stack;
Czego się nauczysz
- Jak utworzyć interfejs API back-end oparty na Gemini za pomocą biblioteki Flask API
- Jak połączyć front-end i back-end w aplikacji korzystającej z generatywnej AI
- Wdrażanie opracowanej aplikacji generatywnej AI w Cloud Run
Czego potrzebujesz
- działający komputer i stabilne połączenie Wi-Fi.
- ciekawy umysł,
3. Tworzenie aplikacji Python Flask w Cloud Run
Utworzymy aplikację Python Flask w Cloud Run, używając najpierw szablonu wygenerowanego automatycznie w Cloud Shell.
Przejdź do terminala Cloud Shell i kliknij przycisk Otwórz edytor. 
Sprawdź, czy w lewym dolnym rogu (pasek stanu) edytora Cloud Shell ustawiony jest projekt Cloud Code (jak na poniższym obrazku), który jest aktywnym projektem Google Cloud z włączonymi płatnościami. Jeśli pojawi się taka prośba, autoryzuj.
Na pasku stanu kliknij aktywny projekt i poczekaj, aż otworzy się wyskakujące okienko Cloud Code. W wyskakującym okienku wybierz „Nowa aplikacja”. 
Z listy aplikacji wybierz Aplikacja Cloud Run:
Na stronie 2/2 wybierz szablon Python Flask:
Podaj nazwę projektu (np. „amazing-gemini-app”) i kliknij OK:
Spowoduje to otwarcie szablonu nowego projektu, który właśnie skonfigurowałeś.
Tak łatwo można utworzyć aplikację Flask w Pythonie w Cloud Run za pomocą Google Cloud Shell.
4. Tworzenie frontendu
Jak już wspomnieliśmy, ostateczna aplikacja internetowa będzie wyglądać tak:
Zawiera ono pole tekstowe do wpisania linku do filmu w YouTube, opcję wyboru innej rodziny modeli oraz pole tekstowe do wpisania dodatkowej informacji, jeśli to konieczne, a także przycisk przesyłania formularza.
Jeśli chcesz się zmierzyć z wyzwaniem, możesz zaprojektować własny formularz lub edytować właściwości CSS. Możesz też skopiować kod z poziomu poniżej i zastąpić nim zawartość pliku index.html w folderze 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>
Aby sprawdzić, czy ten krok został wykonany prawidłowo, kliknij app.py prawym przyciskiem myszy i wybierz Uruchom plik Pythona w terminalu.
Jeśli wszystko przebiegło prawidłowo, powinieneś mieć dostęp do aplikacji internetowej pod adresem http://127.0.0.1:8080.
5. Tworzenie backendu
Po skonfigurowaniu interfejsu musisz utworzyć usługę back-end, która korzysta z modelu Gemini do podsumowywania filmów w YouTube udostępnianych przez użytkownika. Pamiętaj, że w tym celu musisz zastąpić plik app.py.
Zanim zmienisz kod, musisz utworzyć środowisko wirtualne i zainstalować niezbędne biblioteki do uruchamiania komponentów Gemini.
Najpierw musisz dodać do pliku requirements.txt bibliotekę pakietu SDK Google Gen AI. Powinien on wyglądać tak:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
Po drugie, musisz utworzyć środowisko wirtualne i zainstalować pakiety z pliku requirements.txt, aby można było uruchomić kod zaplecza.
- Kliknij pręty w lewym górnym rogu i wybierz Terminal > Nowy terminal.
2. Utwórz środowisko wirtualne, wpisując odpowiednie polecenia w terminalu, i zaczekaj, aż zostanie ono zainstalowane.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Ponownie zachęcamy do stworzenia punktu końcowego Gemini za pomocą interfejsu Flask API. Twój kod powinien być podobny do tego, który podano poniżej.
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')
Kod wykonuje te czynności:
Importuje niezbędne biblioteki:
- Flask: do tworzenia aplikacji internetowej.
- os: dostęp do zmiennych środowiskowych.
- google.genai: do interakcji z Gemini AI od Google.
- google.genai.types: służy do definiowania struktur danych dla Gemini.
Inicjowanie klienta Gemini:
- Konfiguruje połączenie z Vertex AI od Google, umożliwiając aplikacji korzystanie z modelu AI Gemini. Pamiętaj, aby zastąpić ciąg „REPLACE_WITH_YOUR_PROJECT_ID” identyfikatorem projektu.
Defining the generate Function:
- Ta funkcja przyjmuje jako dane wejściowe link do filmu w YouTube, identyfikator modelu Gemini i dodatkowy prompt. Następnie wysyła film i prompt do Gemini, a następnie zwraca wygenerowany tekst podsumowania.
Defining the Home Page Route (/):
- Ta funkcja renderuje szablon index.html, który wyświetla formularz umożliwiający użytkownikowi wpisanie linku do filmu w YouTube.
Defining the Summarization Route (/summarize):
- Ta funkcja obsługuje przesyłanie formularzy. Pobiera link do filmu w YouTube, model i prompt z formularza, wywołuje funkcję generowania, aby uzyskać podsumowanie, a potem wyświetla je w szablonie result.html.
Uruchamianie aplikacji:
- Pobiera port serwera z zmiennych środowiskowych i uruchamia serwer WWW Flask.
Kod możesz przetestować, uruchamiając plik app.py w terminalu. Ta sama metoda co w przypadku testowania frontendu. Kliknij app.py prawym przyciskiem myszy i wybierz Uruchom plik Pythona w terminalu.
Przetestuj aplikację. Powinien działać zgodnie z oczekiwaniami.
6. Wdrażanie aplikacji internetowej
Teraz, gdy aplikacja GenAI działa, wdroż ją w Cloud Run, aby udostępnić ją znajomym i współpracownikom.
Otwórz terminal Cloud Shell i sprawdź, czy bieżący projekt jest skonfigurowany jako aktywny. Jeśli nie, użyj polecenia gcloud configure, aby ustawić identyfikator projektu:
gcloud config set project [PROJECT_ID]
Pamiętaj, aby zastąpić parametr [PROJECT_ID] identyfikatorem swojego projektu. Następnie wpisz po kolei te polecenia:
cd amazing-gemini-app
gcloud run deploy --source .
Pojawi się prośba o wpisanie nazwy usługi, np. „youtube-summarizer”. Wybierz odpowiedni numer dla regionu „us-central1”. Gdy pojawi się pytanie, czy chcesz zezwolić na nieuwierzytelnione wywołania, odpowiedz „y”. Ponieważ jest to aplikacja demonstracyjna, zezwalamy na dostęp bez uwierzytelniania. Zalecamy stosowanie odpowiedniego uwierzytelniania w przypadku aplikacji korporacyjnych i produkcyjnych.
Po zakończeniu wdrażania powinien pojawić się link podobny do tego:
https://amazing-gemini-app-*******.a.run.app/
Użyj aplikacji z okna incognito lub z urządzenia mobilnego. Powinien być już dostępny.
7. Wyzwanie
Nadszedł Twój czas, aby zabłysnąć. Czy masz wszystko, czego potrzebujesz, aby zmienić kod, aby móc przesyłać filmy bezpośrednio z komputera?
8. Czyszczenie danych
Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby wykorzystane w tym ćwiczeniu, wykonaj te czynności:
- W konsoli Google Cloud otwórz stronę Zarządzanie zasobami.
- Na liście projektów wybierz projekt do usunięcia, a potem kliknij Usuń.
- W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.
- Możesz też przejść w konsoli do Cloud Run, wybrać właśnie wdrożony zasób i usunąć go.