1. Introducción
En el acelerado mundo digital actual, el tiempo es un bien preciado. YouTube es un gran repositorio de información, pero los videos largos pueden requerir una inversión de tiempo considerable. Aquí es donde los resumidores de YouTube se vuelven invaluables. Estas herramientas condensan de manera eficiente los videos largos en resúmenes concisos, lo que permite a los usuarios comprender rápidamente el contenido principal sin mirar el video completo. Esto es particularmente útil para estudiantes, profesionales y cualquier persona que desee extraer de manera eficiente información clave del contenido de video en línea. En esencia, los resumidores de YouTube permiten que los usuarios maximicen su aprendizaje y la información que reciben, a la vez que minimizan el tiempo que dedican a ello.
Al final de este lab, tendrás una aplicación web funcional que puede generar resúmenes de videos de YouTube. También comprenderás mejor cómo usar la API de Gemini y el SDK de IA generativa de Google, y cómo integrarlos para crear una aplicación web.
Tu aplicación web se verá de la siguiente manera:
Lo único que debes hacer es proporcionar un vínculo al video de YouTube, y Gemini se encargará del resto.
2. Antes de comenzar
En este codelab, se supone que ya tienes un proyecto de Google Cloud con la facturación habilitada. Si aún no la tienes, puedes seguir las instrucciones que se indican a continuación para comenzar.
- En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.
- Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud. Obtén información sobre cómo verificar si la facturación está habilitada en un proyecto.
- Usarás Cloud Shell, un entorno de línea de comandos que se ejecuta en Google Cloud. Para acceder a ella, haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.
- Una vez que te conectes a Cloud Shell, verifica que ya te autenticaste y que el proyecto se configuró con tu ID del proyecto con el siguiente comando:
gcloud auth list
- En Cloud Shell, ejecuta el siguiente comando para confirmar que el comando gcloud conoce tu proyecto.
gcloud config list project
- Si tu proyecto no está configurado, usa el siguiente comando para hacerlo:
gcloud config set project <YOUR_PROJECT_ID>
Como alternativa, también puedes ver el ID de PROJECT_ID en la consola.
Haz clic en él y verás todos tus proyectos y el ID del proyecto en el lado derecho.
- Asegúrate de que las siguientes APIs estén habilitadas. Para ello, usa el siguiente comando:
- La API de Vertex AI
- API de Cloud Run Admin
- API de Cloud Build
- API de Cloud Resource Manager
gcloud services enable aiplatform.googleapis.com \
run.googleapis.com \
cloudbuild.googleapis.com \
cloudresourcemanager.googleapis.com
La alternativa a usar el comando de gcloud es acceder a la consola a través de este vínculo. Consulta la documentación para ver los comandos y el uso de gcloud.
Requisitos previos
- Puede leer y escribir códigos de Python y HTML.
- Comodidad para trabajar con la API de Gemini y el SDK de IA generativa de Google
- Conocimientos básicos sobre el desarrollo de pila completa
Qué aprenderás
- Cómo crear una API de backend potenciada por Gemini con la biblioteca de la API de Flask
- Cómo crear un vínculo de app de IA generativa que conecte el frontend y el backend
- Cómo implementar la aplicación de IA generativa desarrollada en Cloud Run
Requisitos
- Una computadora que funcione y una red Wi-Fi confiable
- Una mente curiosa
3. Crea una app de Flask en Python en Cloud Run
Primero, crearemos la app de Python Flask en Cloud Run con la plantilla generada automáticamente desde Cloud Shell.
Navega a la terminal de Cloud Shell y haz clic en el botón Abrir editor. 
Asegúrate de que el proyecto de Cloud Code esté configurado en la esquina inferior izquierda (barra de estado) del editor de Cloud Shell, como se destaca en la siguiente imagen, y que esté configurado en el proyecto activo de Google Cloud en el que tienes habilitada la facturación. Haz clic en Autorizar si se te solicita.
NOTAS: Es posible que tarde un tiempo después de que se inicialice el editor de Cloud Shell y se cargue todo el complemento requerido, por lo que
Cloud Code - Sign In
Aparecerá el botón, ten paciencia
Haz clic en ese proyecto activo en la barra de estado y espera a que se abra la ventana emergente de Cloud Code. En la ventana emergente, selecciona "New Application". 
En la lista de aplicaciones, elige Cloud Run Application:
Para la página 2/2, selecciona la plantilla de Python Flask:
Proporciona el nombre del proyecto como quieras (p.ej., "amazing-gemini-app") y haz clic en Aceptar:
Se abrirá la plantilla del proyecto nuevo que acabas de configurar.
Así de simple es crear una app de Flask en Python en Cloud Run con Google Cloud Shell.
4. Compila el frontend
Como se mencionó antes, así se verá la aplicación web final:
Contiene un campo de entrada para recibir un vínculo de YouTube del usuario, una opción para elegir una familia de modelos diferente, un área de texto para proporcionar instrucciones adicionales si es necesario y un botón para enviar el formulario.
Si te gusta el desafío, puedes diseñar tu propio formulario o editar las propiedades de CSS. También puedes copiar el siguiente código y reemplazar el contenido de tu archivo index.html en la carpeta 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>
Para probar si completaste este paso correctamente, haz clic con el botón derecho en app.py y elige Run Python File in Terminal.
Si todo salió bien, deberías poder acceder a tu aplicación web haciendo clic en el botón Web Preview en la parte superior derecha del editor de Cloud y seleccionando Preview on port 8080.
5. Compila el backend
Una vez que se haya configurado el frontend, deberás crear un servicio de backend que utilice el modelo de Gemini para resumir el video de YouTube proporcionado por el usuario. Ten en cuenta que sobrescribirás el archivo app.py para completar esta tarea.
Antes de cambiar el código, deberás crear un entorno virtual y, luego, instalar las bibliotecas necesarias para ejecutar los componentes de Gemini.
En primer lugar, deberás agregar la biblioteca del SDK de IA generativa de Google al archivo requirements.txt. Debería verse de la siguiente manera:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
En segundo lugar, debes crear un entorno virtual y, luego, instalar los paquetes de requirements.txt para que puedas ejecutar el código de backend correctamente.
- Haz clic en las barras de la esquina superior izquierda y elige Terminal > New Terminal ( como alternativa, puedes presionar
Ctrl + Shift + Cpara abrir una terminal nueva).
2. Escribe en la terminal para crear un entorno virtual y espera a que se instale correctamente.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Nuevamente, no dudes en desafiarte y crear un extremo de Gemini con la API de Flask por tu cuenta. El código en app.py debería ser similar al que se proporciona a continuación.
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')
En esencia, el código hace lo siguiente:
Importa las bibliotecas necesarias:
- Flask: Para crear la aplicación web
- os: Para acceder a las variables de entorno
- google.genai: Para interactuar con la IA de Gemini de Google
- google.genai.types: Para definir estructuras de datos para Gemini.
Inicializa el cliente de Gemini:
- Establece una conexión con Vertex AI de Google, lo que permite que la app use el modelo de IA de Gemini. Asegúrate de reemplazar "REPLACE_WITH_YOUR_PROJECT_ID" por el ID de tu proyecto.
Definición de la función generate:
- Esta función toma como entrada un vínculo de video de YouTube, un ID de modelo de Gemini y una instrucción adicional. Luego, envía el video y la instrucción a Gemini, y muestra el texto de resumen generado.
Cómo definir la ruta de la página principal (/):
- Esta función renderiza la plantilla index.html, que muestra un formulario para que el usuario ingrese un vínculo de YouTube.
Cómo definir la ruta de resumen (/summarize):
- Esta función controla los envíos de formularios. Recupera el vínculo, el modelo y la instrucción de YouTube del formulario, llama a la función de generación para obtener el resumen y, luego, muestra el resumen en la plantilla result.html.
Ejecuta la aplicación:
- Recupera el puerto del servidor de las variables de entorno y, luego, inicia el servidor web de Flask.
Para probar el código, ejecuta app.py desde la terminal. Es el mismo método que para probar el frontend. Haz clic con el botón derecho en app.py y elige Run Python File in Terminal.
Continúa y prueba tu aplicación. Debería funcionar según lo esperado.
6. Implementa la aplicación web
Ahora que tienes la aplicación de IA generativa en funcionamiento, implementémosla en Cloud Run para que puedas compartirla con tus amigos y colegas para que la prueben.
Navega a la terminal de Cloud Shell y asegúrate de que el proyecto actual esté configurado en tu proyecto activo. De lo contrario, deberás usar el comando gcloud config para establecer el ID del proyecto:
gcloud config set project [PROJECT_ID]
No olvides reemplazar [PROJECT_ID] por el ID de tu proyecto. Asegúrate de que tu directorio de trabajo actual en la terminal sea **amazing-gemini-app**. Luego, ingresa los siguientes comandos en ese orden, uno por uno:
gcloud run deploy --source .
Se te pedirá que ingreses un nombre para tu servicio, por ejemplo, "youtube-summarizer". Elige el número correspondiente a la región "us-central1". Di "y" cuando se te pregunte si quieres permitir invocaciones no autenticadas. Ten en cuenta que permitimos el acceso no autenticado aquí porque se trata de una aplicación de demostración. Se recomienda usar la autenticación adecuada para tus aplicaciones empresariales y de producción.
Una vez que se complete la implementación, deberías obtener un vínculo similar al siguiente:
https://amazing-gemini-app-*******.a.run.app/
Continúa y usa tu aplicación desde la ventana de incógnito o tu dispositivo móvil. Ya debería estar disponible.
7. Desafío
Ahora es tu momento de brillar. ¿Tienes lo que se necesita para cambiar el código y poder subir videos directamente desde tu computadora?
8. Limpia
Sigue estos pasos para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este codelab:
- En la consola de Google Cloud, ve a la página Administrar recursos.
- En la lista de proyectos, elige el proyecto que deseas borrar y haz clic en Borrar.
- En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
- Como alternativa, puedes ir a Cloud Run en la consola, seleccionar el servicio que acabas de implementar y borrarlo.