1. Introduzione
Nel frenetico mondo digitale di oggi, il tempo è una risorsa preziosa. YouTube è un vasto archivio di informazioni, ma i video lunghi possono richiedere un investimento di tempo significativo. È qui che i riepiloghi di YouTube diventano preziosi. Questi strumenti condensano in modo efficiente i video lunghi in riepiloghi concisi, consentendo agli utenti di comprendere rapidamente i contenuti principali senza guardare l'intero video. Questa funzionalità è particolarmente utile per studenti, professionisti e chiunque voglia estrarre in modo efficiente le informazioni chiave dai contenuti video online. In sostanza, i riassuntori di YouTube consentono agli utenti di massimizzare l'apprendimento e l'assorbimento di informazioni, riducendo al minimo il tempo trascorso.
Al termine del lab, avrai un'applicazione web funzionante in grado di generare riepiloghi dai video di YouTube. Avrai anche una migliore comprensione di come utilizzare l'API Gemini e l'SDK Google Gen AI e di come integrarli per creare un'applicazione web.
La tua applicazione web avrà questo aspetto:
Tutto quello che devi fare è fornire un link al video di YouTube e Gemini farà il resto.
2. Prima di iniziare
Questo codelab presuppone che tu disponga già di un progetto Google Cloud con la fatturazione abilitata. Se non l'hai ancora fatto, puoi seguire le istruzioni riportate di seguito per iniziare.
- Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
- Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto.
- Utilizzerai Cloud Shell, un ambiente a riga di comando in esecuzione in Google Cloud. Per accedervi, fai clic su Attiva Cloud Shell nella parte superiore della console Google Cloud.
- Una volta eseguita la connessione a Cloud Shell, verifica di essere già autenticato e che il progetto sia impostato sul tuo ID progetto utilizzando il seguente comando:
gcloud auth list
- Esegui questo comando in Cloud Shell per verificare che il comando gcloud conosca il tuo progetto.
gcloud config list project
- Se il progetto non è impostato, utilizza il seguente comando per impostarlo:
gcloud config set project <YOUR_PROJECT_ID>
In alternativa, puoi anche visualizzare l'ID PROJECT_ID nella console.
Fai clic e vedrai tutti i tuoi progetti e l'ID progetto sul lato destro.
- Assicurati che le seguenti API siano abilitate. Utilizza il seguente comando per impostarle:
- API Vertex AI
- API Cloud Run Admin
- API Cloud Build
- API Cloud Resource Manager
gcloud services enable aiplatform.googleapis.com \
run.googleapis.com \
cloudbuild.googleapis.com \
cloudresourcemanager.googleapis.com
L'alternativa all'utilizzo del comando gcloud è la console, utilizzando questo link. Per i comandi e l'utilizzo di gcloud, consulta la documentazione.
Prerequisiti
- In grado di leggere e scrivere codici Python e HTML
- Familiarità con l'API Gemini e l'SDK Google Gen AI
- Conoscenza di base dello sviluppo full stack
Cosa imparerai a fare
- Come creare un'API di backend basata su Gemini utilizzando la libreria API Flask
- Come creare un link per un'app di AI generativa che colleghi il front-end e il back-end
- Come eseguire il deployment dell'applicazione di AI generativa sviluppata su Cloud Run
Che cosa ti serve
- Un computer funzionante e una connessione Wi-Fi affidabile
- Una mente curiosa
3. Crea un'app Python Flask su Cloud Run
Creeremo l'app Python Flask su Cloud Run utilizzando prima il modello generato automaticamente da Cloud Shell.
Vai al terminale Cloud Shell e fai clic sul pulsante Apri editor. 
Assicurati che il progetto Cloud Code sia impostato nell'angolo in basso a sinistra (barra di stato) dell'editor di Cloud Shell, come evidenziato nell'immagine seguente, e che sia impostato sul progetto Google Cloud attivo in cui hai attivato la fatturazione. Autorizza, se richiesto.
NOTE: potrebbe essere necessario del tempo dopo l'inizializzazione dell'editor di Cloud Shell e il caricamento di tutti i plug-in richiesti, in modo che
Cloud Code - Sign In
pulsante, sii paziente
Fai clic sul progetto attivo nella barra di stato e attendi l'apertura del popup di Cloud Code. Nel popup, seleziona "Nuova applicazione". 
Dall'elenco delle applicazioni, scegli Applicazione Cloud Run:
Per la pagina 2/2, seleziona il modello Python Flask:
Fornisci il nome del progetto che preferisci (ad es. "amazing-gemini-app") e fai clic su Ok:
Si aprirà il modello per il nuovo progetto che hai appena configurato.
Ecco quanto è semplice creare un'app Python Flask su Cloud Run con Google Cloud Shell.
4. Crea il frontend
Come detto in precedenza, l'applicazione web finale avrà questo aspetto:
Contiene un campo di input per ricevere un link di YouTube dall'utente, un'opzione per scegliere una famiglia di modelli diversa, un'area di testo per fornire un prompt aggiuntivo, se necessario, e un pulsante per inviare il modulo.
Se ti piace la sfida, puoi progettare il tuo modulo o modificare le proprietà CSS. Puoi anche copiare il codice riportato di seguito e sostituire il contenuto del file index.html nella cartella 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>
Per verificare di aver eseguito correttamente questo passaggio, fai clic con il tasto destro del mouse su app.py e scegli Esegui file Python nel terminale.
Se tutto è andato bene, dovresti essere in grado di accedere alla tua applicazione web facendo clic sul pulsante Web Preview in alto a destra di Cloud Editor e selezionando Preview on port 8080.
5. Crea il backend
Una volta configurato il frontend, devi creare un servizio di backend che utilizzi il modello Gemini per riassumere il video di YouTube fornito dall'utente. Tieni presente che per completare questa attività sovrascriverai il file app.py.
Prima di modificare il codice, devi creare un ambiente virtuale e installare le librerie necessarie per eseguire i componenti di Gemini.
Innanzitutto, devi aggiungere la libreria dell'SDK Google Gen AI al file requirements.txt. Dovrebbe avere il seguente aspetto:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
In secondo luogo, devi creare un ambiente virtuale e installare i pacchetti da requirements.txt per poter eseguire correttamente il codice di backend.
- Fai clic sulle barre nell'angolo in alto a sinistra e scegli Terminale > Nuovo terminale ( in alternativa, puoi premere
Ctrl + Shift + Cper aprire un nuovo terminale).
2. Crea un ambiente virtuale digitando nel terminale e attendi l'installazione
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Ancora una volta, sentiti libero di metterti alla prova e creare tu stesso un endpoint Gemini utilizzando l'API Flask. Il codice in app.py dovrebbe essere simile a quello fornito di seguito.
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')
In sostanza, il codice esegue queste operazioni:
Importa le librerie necessarie:
- Flask: per creare l'applicazione web.
- os: per l'accesso alle variabili di ambiente.
- google.genai: per interagire con l'AI Gemini di Google.
- google.genai.types: per definire le strutture di dati per Gemini.
Inizializzazione del client Gemini:
- Configura una connessione a Vertex AI di Google, consentendo all'app di utilizzare il modello di AI Gemini. Assicurati di sostituire "REPLACE_WITH_YOUR_PROJECT_ID" con l'ID progetto.
Definizione della funzione generate:
- Questa funzione accetta come input un link a un video di YouTube, un ID modello Gemini e un prompt aggiuntivo. Quindi, invia il video e il prompt a Gemini e restituisce il testo del riepilogo generato.
Definizione della route della home page (/):
- Questa funzione esegue il rendering del modello index.html, che mostra un modulo in cui l'utente può inserire un link di YouTube.
Definizione della route di riepilogo (/summarize):
- Questa funzione gestisce l'invio dei moduli. Recupera il link, il modello e il prompt di YouTube dal modulo, chiama la funzione di generazione per ottenere il riepilogo e poi lo visualizza nel modello result.html.
Esecuzione dell'applicazione:
- Recupera la porta del server dalle variabili di ambiente e avvia il server web Flask.
Puoi testare il codice eseguendo app.py dal terminale. Stesso metodo utilizzato per testare il frontend. Fai clic con il tasto destro del mouse su app.py e scegli Esegui file Python nel terminale.
Procedi e testa l'applicazione. Dovrebbe funzionare come previsto.
6. Esegui il deployment dell'applicazione web
Ora che hai l'applicazione di AI generativa funzionante, esegui il deployment dell'app su Cloud Run in modo da poterla condividere con amici e colleghi.
Vai al terminale Cloud Shell e assicurati che il progetto attuale sia configurato sul tuo progetto attivo. In caso contrario, devi utilizzare il comando gcloud configure per impostare l'ID progetto:
gcloud config set project [PROJECT_ID]
Non dimenticare di sostituire [PROJECT_ID] con il tuo ID progetto. Assicurati che la directory di lavoro corrente nel terminale sia **amazing-gemini-app**, poi inserisci i seguenti comandi in ordine uno alla volta:
gcloud run deploy --source .
Ti verrà chiesto di inserire un nome per il servizio, ad esempio "youtube-summarizer". Scegli il numero corrispondente alla regione "us-central1". Di' "sì" quando ti viene chiesto se vuoi consentire chiamate non autenticate. Tieni presente che qui consentiamo l'accesso non autenticato perché si tratta di un'applicazione demo. Ti consigliamo di utilizzare l'autenticazione appropriata per le applicazioni aziendali e di produzione.
Una volta completato il deployment, dovresti ricevere un link simile a quello riportato di seguito:
https://amazing-gemini-app-*******.a.run.app/
Continua a utilizzare l'applicazione dalla finestra di navigazione in incognito o dal tuo dispositivo mobile. Dovrebbe essere già attivo.
7. La sfida
Ora è il tuo momento di brillare. Hai le competenze necessarie per modificare il codice in modo da poter caricare i video direttamente dal computer?
8. Esegui la pulizia
Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, segui questi passaggi:
- Nella console Google Cloud, vai alla pagina Gestisci risorse.
- Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
- Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.
- In alternativa, puoi andare a Cloud Run nella console, selezionare il servizio di cui hai appena eseguito il deployment ed eliminarlo.