1. Introducción
En el acelerado mundo digital actual, el tiempo es un bien preciado. YouTube es un amplio repositorio de información, pero los videos largos pueden ser una inversión de tiempo significativa. Aquí es donde los resúmenes de YouTube son 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 especialmente útil para estudiantes, profesionales y cualquier persona que desee extraer información clave de manera eficiente del contenido de video en línea. En esencia, los resúmenes de YouTube permiten a los usuarios maximizar su aprendizaje y su ingesta de información, a la vez que minimizan el tiempo perdido.
Al final de este lab, tendrás una aplicación web en funcionamiento que puede generar resúmenes a partir 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:
Solo debes proporcionar un vínculo al video de YouTube, y Gemini hará el 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 lo 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 él, 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 hayas autenticado y que el proyecto esté configurado con tu ID de 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>
- Asegúrate de que las siguientes APIs estén habilitadas:
- Cloud Run
- Vertex AI
La alternativa al uso del comando gcloud es acceder a la consola mediante este vínculo. Consulta la documentación para ver los comandos y el uso de gcloud.
Requisitos previos
- Saber leer y escribir códigos HTML y Python
- Trabajar con API de Gemini y 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 compilar una app de IA generativa y vincular 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 Open 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. Autorizar si se te solicita.
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 "Nueva aplicación". 
En la lista de aplicaciones, elige Aplicación de Cloud Run:
En la página 2/2, selecciona la plantilla de Python Flask:
Proporciona el nombre del proyecto que quieras (p.ej., “amazing-gemini-app”) y haz clic en OK:
Se abrirá la plantilla del proyecto nuevo que acabas de configurar.
Así de simple es crear una app de Flask de Python en Cloud Run con Google Cloud Shell.
4. Compila el frontend
Como se indicó anteriormente, así se verá la aplicación web final:
Contiene un campo de entrada para ingresar 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, no dudes en diseñar tu propio formulario o editar las propiedades CSS. También puedes copiar el código que aparece a continuación y reemplazar el contenido de tu archivo index.html en la carpeta templates con él.
<!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 realizaste 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 en http://127.0.0.1:8080.
5. Compila el backend
Una vez que se haya configurado el frontend, deberás crear un servicio de backend que use el modelo Gemini para resumir el video de YouTube que proporcionó el usuario. Ten en cuenta que reemplazarás 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 Google Gen AI 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 poder ejecutar el código de backend correctamente.
- Haz clic en las barras de la esquina superior izquierda y elige Terminal > Nueva terminal.
2. Crea un entorno virtual escribiendo en la terminal y espera a que se instale correctamente.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
No dudes en desafiarte y crear un extremo de Gemini con la API de Flask. Tu código 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 el acceso 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 un vínculo de video de YouTube, un ID de modelo de Gemini y una instrucción adicional como entrada. Luego, envía el video y la instrucción a Gemini, y muestra el texto del resumen generado.
Definición de 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.
Definición de la ruta de resumen (/summarize):
- Esta función controla los envíos de formularios. Recupera el vínculo de YouTube, el modelo y la instrucción del formulario, llama a la función de generación para obtener el resumen y, luego, lo muestra 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 se usa 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 la aplicación. Debería funcionar como se espera.
6. Implementa la aplicación web
Ahora que tienes la aplicación de IA generativa en funcionamiento, implementemos la app en Cloud Run para que puedas compartirla con tus amigos y colegas y 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, usa el comando gcloud configure para establecer el ID del proyecto:
gcloud config set project [PROJECT_ID]
No olvides reemplazar [PROJECT_ID] por el ID de tu proyecto. Luego, ingresa los siguientes comandos en ese orden, uno por uno:
cd amazing-gemini-app
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 porque esta es 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 la aplicación desde la ventana de incógnito o tu dispositivo móvil. Ya debería estar publicado.
7. Desafío
Ahora es tu momento de brillar. ¿Tienes lo necesario 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.