1. Wprowadzenie
W dzisiejszym dynamicznym świecie cyfrowym czas jest na wagę złota. YouTube to ogromne repozytorium informacji, ale długie filmy mogą wymagać znacznego nakładu czasu. W takiej sytuacji nieocenione są narzędzia do podsumowywania filmów w YouTube. Te narzędzia skutecznie skracają długie filmy do zwięzłych podsumowań, dzięki czemu użytkownicy mogą szybko zrozumieć najważniejsze informacje bez oglądania całego filmu. Jest to szczególnie przydatne dla uczniów, profesjonalistów i wszystkich osób, które chcą skutecznie wyodrębniać kluczowe informacje z treści wideo online. Podsumowania w YouTube umożliwiają użytkownikom maksymalizowanie zdobywania wiedzy i informacji przy jednoczesnym minimalizowaniu czasu spędzonego na oglądaniu filmów.
Po zakończeniu tego laboratorium będziesz mieć działającą aplikację internetową, która może generować podsumowania filmów w YouTube. Dowiesz się też, jak używać interfejsu Gemini API i pakietu Google Gen AI SDK oraz jak je ze sobą zintegrować, aby utworzyć aplikację internetową.
Twoja aplikacja internetowa będzie wyglądać tak:
Wystarczy, że podasz link do filmu na YouTube, a Gemini zajmie się resztą.
2. Zanim zaczniesz
W tym samouczku zakładamy, że masz już projekt Google Cloud z włączonymi płatnościami. Jeśli jeszcze go nie masz, możesz zacząć, wykonując czynności opisane poniżej.
- W konsoli Google Cloud na stronie wyboru 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.
- Będziesz używać Cloud Shell, czyli środowiska wiersza poleceń działającego w Google Cloud. Aby uzyskać do niego dostęp, kliknij Aktywuj Cloud Shell u góry konsoli Google Cloud.
- Po połączeniu z Cloud Shell sprawdź, czy uwierzytelnianie zostało już przeprowadzone, a projekt jest już ustawiony na Twój identyfikator projektu, używając tego polecenia:
gcloud auth list
- Aby potwierdzić, że 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, aby go ustawić:
gcloud config set project <YOUR_PROJECT_ID>
Możesz też zobaczyć PROJECT_ID id w konsoli.
Kliknij go, a po prawej stronie zobaczysz wszystkie swoje projekty i identyfikator projektu.
- Sprawdź, czy te interfejsy API są włączone. Aby to zrobić, użyj tego polecenia:
- 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
Alternatywą dla użycia polecenia gcloud jest przejście przez konsolę za pomocą tego linku. Informacje o poleceniach gcloud i ich użyciu znajdziesz w dokumentacji.
Wymagania wstępne
- Umiejętność odczytywania i zapisywania kodu w Pythonie i HTML
- Umiejętność korzystania z Gemini API i pakietu Google Gen AI SDK.
- znajomość podstawowych zagadnień związanych z tworzeniem aplikacji full stack,
Czego się nauczysz
- Tworzenie interfejsu API backendu opartego na Gemini za pomocą biblioteki Flask API
- Jak połączyć aplikację korzystającą z generatywnej AI z interfejsem i backendem
- Jak wdrożyć opracowaną aplikację GenAI w Cloud Run
Czego potrzebujesz
- działający komputer i niezawodne połączenie Wi-Fi;
- Ciekawy umysł
3. Tworzenie aplikacji Python Flask w Cloud Run
Najpierw utworzymy aplikację Python Flask w Cloud Run za pomocą automatycznie wygenerowanego szablonu w Cloud Shell.
Otwórz terminal Cloud Shell i kliknij przycisk Otwórz edytor. 
Sprawdź, czy projekt Cloud Code jest ustawiony w lewym dolnym rogu (na pasku stanu) edytora Cloud Shell, jak pokazano na ilustracji poniżej, i czy jest ustawiony jako aktywny projekt Google Cloud, w którym masz włączone płatności. W razie potrzeby kliknij Autoryzuj.
UWAGI: po zainicjowaniu edytora Cloud Shell i wczytaniu wszystkich wymaganych wtyczek może minąć trochę czasu, zanim
Cloud Code - Sign In
przycisk, prosimy o cierpliwość
Kliknij aktywny projekt na pasku stanu i poczekaj na otwarcie wyskakującego okienka Cloud Code. W wyskakującym okienku wybierz „Nowa aplikacja”. 
Z listy aplikacji wybierz Cloud Run Application (Aplikacja Cloud Run):
Na stronie 2/2 wybierz szablon Python Flask:
Wpisz wybraną nazwę projektu (np. „amazing-gemini-app”) i kliknij OK:
Spowoduje to otwarcie szablonu nowego projektu, który właśnie został skonfigurowany.
Właśnie w ten prosty sposób możesz utworzyć aplikację Flask w języku Python w Cloud Run za pomocą Google Cloud Shell.
4. Tworzenie frontendu
Jak wspomnieliśmy wcześniej, gotowa aplikacja internetowa będzie wyglądać tak:
Zawiera pole do wprowadzania danych, w którym użytkownik może podać link do YouTube, opcję wyboru innej rodziny modeli, pole tekstowe, w którym w razie potrzeby można podać dodatkowy prompt, oraz przycisk przesyłania formularza.
Jeśli lubisz wyzwania, możesz zaprojektować własny formularz lub edytować właściwości CSS. Możesz też skopiować poniższy kod 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 prawym przyciskiem myszy plik app.py i wybierz Uruchom plik Pythona w terminalu.
Jeśli wszystko przebiegło prawidłowo, możesz uzyskać dostęp do aplikacji internetowej, klikając przycisk Web Preview w prawym górnym rogu Edytora Cloud i wybierając Preview on port 8080.
5. Tworzenie backendu
Po skonfigurowaniu frontendu musisz utworzyć usługę backendu, która korzysta z modelu Gemini do podsumowywania filmu na YouTube podanego przez użytkownika. Pamiętaj, że aby wykonać to zadanie, zastąpisz plik app.py.
Zanim zmienisz kod, musisz utworzyć środowisko wirtualne i zainstalować niezbędne biblioteki do uruchamiania komponentów Gemini.
Najpierw musisz dodać bibliotekę pakietu SDK Gen AI od Google do pliku requirements.txt. 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 móc uruchomić kod backendu.
- Kliknij paski w lewym górnym rogu i wybierz Terminal > New Terminal ( możesz też nacisnąć
Ctrl + Shift + C, aby otworzyć nowy terminal).
2. Utwórz środowisko wirtualne, wpisując w terminalu odpowiednie polecenie, i poczekaj na jego pomyślną instalację.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Możesz spróbować samodzielnie utworzyć punkt końcowy Gemini za pomocą interfejsu Flask API. Kod w pliku app.py powinien być podobny do tego 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')
W zasadzie 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 funkcjami AI od Gemini od Google.
- google.genai.types: do definiowania struktur danych dla Gemini.
Inicjowanie klienta Gemini:
- Ustanawia połączenie z Vertex AI od Google, dzięki czemu aplikacja może korzystać z funkcji AI od Gemini. Pamiętaj, aby zastąpić ciąg „REPLACE_WITH_YOUR_PROJECT_ID” identyfikatorem projektu.
Definiowanie funkcji generowania:
- Ta funkcja przyjmuje jako dane wejściowe link do filmu na YouTube, identyfikator modelu Gemini i dodatkowy prompt. Następnie wysyła film i prompt do Gemini i zwraca wygenerowany tekst podsumowania.
Definiowanie trasy strony głównej (/):
- Ta funkcja renderuje szablon index.html, który wyświetla formularz, w którym użytkownik może wpisać link do YouTube.
Określanie trasy podsumowania (/summarize):
- Ta funkcja obsługuje przesyłanie formularzy. Pobiera z formularza link do YouTube, model i prompt, wywołuje funkcję generowania, aby uzyskać podsumowanie, a następnie wyświetla je w szablonie result.html.
Uruchamianie aplikacji:
- Pobiera port serwera ze zmiennych środowiskowych i uruchamia serwer WWW Flask.
Możesz przetestować kod, uruchamiając plik app.py w terminalu. Ta sama metoda co w przypadku testowania interfejsu użytkownika. Kliknij prawym przyciskiem myszy plik app.py i wybierz Run Python File in Terminal (Uruchom plik Pythona w terminalu).
Przetestuj aplikację. Powinno działać zgodnie z oczekiwaniami.
6. Wdrażanie aplikacji internetowej
Aplikacja GenAI działa już prawidłowo, więc wdróżmy ją w Cloud Run, aby móc 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]
Nie zapomnij zastąpić [PROJECT_ID] identyfikatorem swojego projektu. Upewnij się, że bieżący katalog roboczy w terminalu to **amazing-gemini-app**. Następnie wpisz kolejno te polecenia:
gcloud run deploy --source .
Pojawi się prośba o wpisanie nazwy usługi, np. „youtube-summarizer”. Wybierz numer odpowiadający regionowi „us-central1”. Gdy pojawi się pytanie, czy chcesz zezwolić na nieuwierzytelnione wywołania, powiedz „tak”. Pamiętaj, że w tym przypadku zezwalamy na nieuwierzytelniony dostęp, ponieważ jest to aplikacja demonstracyjna. Zalecamy stosowanie odpowiedniego uwierzytelniania w przypadku aplikacji firmowych i produkcyjnych.
Po zakończeniu wdrażania powinien pojawić się link podobny do tego poniżej:
https://amazing-gemini-app-*******.a.run.app/
Możesz używać aplikacji w oknie incognito lub na urządzeniu mobilnym. Powinien być już widoczny.
7. Wyzwanie
Teraz masz szansę zabłysnąć. Czy masz umiejętności, które pozwolą Ci 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 użyte w tym laboratorium, wykonaj te czynności:
- W konsoli Google Cloud otwórz stronę Zarządzanie zasobami.
- Z listy 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ż otworzyć Cloud Run w konsoli, wybrać wdrożoną usługę i ją usunąć.