1. Introduzione
Nel mondo digitale frenetico di oggi, il tempo è una risorsa preziosa. YouTube è una vasta raccolta di informazioni, ma i video lunghi possono richiedere un investimento di tempo significativo. È qui che i riepilogatori di YouTube diventano preziosi. Questi strumenti condensano in modo efficiente i video lunghi in riepiloghi concisi, consentendo agli utenti di cogliere 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 riepiloghi di YouTube consentono agli utenti di massimizzare l'apprendimento e l'acquisizione di informazioni, riducendo al minimo il tempo perso.
Al termine di questo lab, avrai un'applicazione web funzionante in grado di generare un riepilogo dai video di YouTube. Inoltre, avrai 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:
Devi solo fornire un link al video di YouTube e Gemini farà il resto.
2. Prima di iniziare
Questo codelab presuppone che tu abbia già 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 è attivata in 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 connesso a Cloud Shell, verifica di aver già eseguito l'autenticazione e che il progetto sia impostato sul tuo ID progetto utilizzando il seguente comando:
gcloud auth list
- Esegui il seguente 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>
- Assicurati che le seguenti API siano abilitate:
- Cloud Run
- Vertex AI
L'alternativa all'utilizzo del comando gcloud è accedere alla 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
- Avere dimestichezza con l'API Gemini e l'SDK di AI generativa di Google
- Conoscenza di base dello sviluppo full stack
Cosa imparerai a fare
- Come creare un'API back-end basata su Gemini utilizzando la libreria API Flask
- Come creare un'app di IA generativa: collega il frontend e il backend
- Come eseguire il deployment dell'applicazione di IA generativa sviluppata su Cloud Run
Che cosa ti serve
- Un computer funzionante e una connessione Wi-Fi affidabile
- Una mente curiosa
3. Creare un'app Flask Python su Cloud Run
Creeremo l'app Flask Python 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 di seguito, e che sia impostato sul progetto Google Cloud attivo in cui hai attivato la fatturazione. Autorizza, se richiesto.
Fai clic sul progetto attivo nella barra di stato e attendi l'apertura del popup 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 affermato in precedenza, l'applicazione web finale avrà il seguente aspetto:
Contiene un campo di immissione per inserire un link di YouTube fornito 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, non esitare a progettare il tuo modulo o a modificare le proprietà CSS. Puoi anche copiare il codice riportato di seguito e sostituire i contenuti 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 in Terminal.
Se tutto è andato bene, dovresti essere in grado di accedere alla tua applicazione web all'indirizzo http://127.0.0.1:8080.
5. Crea il back-end
Una volta configurato il frontend, dovrai creare un servizio di backend che utilizzi il modello Gemini per riassumere il video di YouTube fornito dall'utente. Tieni presente che sovrascriverai app.py per completare questa attività.
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.
2. Crea un ambiente virtuale digitando nel terminale e attendi che venga installato correttamente
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Ti invitiamo ancora a metterti alla prova e a creare un endpoint Gemini utilizzando l'API Flask. Il codice 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 le seguenti operazioni:
Importa le librerie necessarie:
- Flask: per la creazione dell'applicazione web.
- os: per l'accesso alle variabili di ambiente.
- google.genai: per interagire con l'IA di Gemini di Google.
- google.genai.types: per definire le strutture di dati per Gemini.
Inizializza il client Gemini:
- Configura una connessione a Vertex AI di Google, consentendo all'app di utilizzare il modello di IA Gemini. Assicurati di sostituire "REPLACE_WITH_YOUR_PROJECT_ID" con il tuo ID progetto.
Definizione della funzione generate:
- Questa funzione prende in input un link a un video di YouTube, un ID modello Gemini e un prompt aggiuntivo. Invia quindi il video e il prompt a Gemini e restituisce il testo del riepilogo generato.
Definizione del percorso 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 del route di sintesi (/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 mostra 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.
Testa la tua applicazione. Dovrebbe funzionare come previsto.
6. Esegui il deployment dell'applicazione web
Ora che hai un'applicazione di AI generativa funzionante, esegui il deployment dell'app su Cloud Run in modo da poterla condividere con amici e colleghi per farla provare.
Vai al terminal Cloud Shell e assicurati che il progetto corrente sia configurato per il progetto attivo. In caso contrario, utilizza 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. Poi, inserisci i seguenti comandi nell'ordine indicato, uno alla volta:
cd amazing-gemini-app
gcloud run deploy --source .
Ti verrà chiesto di inserire un nome per il servizio, ad esempio "youtube-summarizer". Scegli il numero corrispondente per la regione "us-central1". Di' "y" quando ti viene chiesto se vuoi consentire le chiamate non autenticate. Tieni presente che stiamo consentendo l'accesso non autenticato perché si tratta di un'applicazione di dimostrazione. Ti consigliamo di utilizzare l'autenticazione appropriata per le tue applicazioni aziendali e di produzione.
Al termine del deployment, dovresti visualizzare un link simile al seguente:
https://amazing-gemini-app-*******.a.run.app/
Puoi utilizzare l'applicazione dalla finestra di navigazione in incognito o dal tuo dispositivo mobile. Dovrebbe essere già pubblicato.
7. La sfida
È 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 appena di cui hai eseguito il deployment ed eliminarlo.