1. Introdução
No mundo digital acelerado de hoje, o tempo é uma mercadoria preciosa. O YouTube é um repositório vasto de informações, mas os vídeos longos podem ser um investimento de tempo significativo. É aí que os resumos do YouTube são inestimáveis. Essas ferramentas condensam vídeos longos em resumos concisos, permitindo que os usuários entendam rapidamente o conteúdo principal sem assistir o vídeo inteiro. Isso é especialmente útil para estudantes, profissionais e qualquer pessoa que queira extrair informações importantes de conteúdo de vídeo on-line de forma eficiente. Essencialmente, os resumos do YouTube permitem que os usuários maximizem o aprendizado e a absorção de informações, minimizando o tempo perdido.
Ao final deste laboratório, você terá um aplicativo da Web funcional que pode gerar resumos de vídeos do YouTube. Você também vai entender melhor como usar a API Gemini e o SDK da IA generativa do Google e integrá-los para criar um aplicativo da Web.
O aplicativo da Web vai ficar assim:
Basta fornecer um link para o vídeo do YouTube, e o Gemini vai cuidar do resto.
2. Antes de começar
Este codelab pressupõe que você já tenha um projeto do Google Cloud com o faturamento ativado. Se você ainda não tem uma conta, siga as instruções abaixo para começar.
- No console do Google Cloud, na página de seletor de projetos, selecione ou crie um projeto do Google Cloud.
- Verifique se o faturamento está ativado para seu projeto do Google Cloud. Saiba como verificar se o faturamento está ativado em um projeto.
- Você vai usar o Cloud Shell, um ambiente de linha de comando executado no Google Cloud. Para acessar, clique em "Ativar o Cloud Shell" na parte de cima do console do Google Cloud.
- Depois de se conectar ao Cloud Shell, verifique se você já está autenticado e se o projeto está definido como seu ID usando o seguinte comando:
gcloud auth list
- Execute o comando a seguir no Cloud Shell para confirmar se o comando gcloud sabe sobre seu projeto.
gcloud config list project
- Se o projeto não estiver definido, use este comando:
gcloud config set project <YOUR_PROJECT_ID>
- Verifique se as seguintes APIs estão ativadas:
- Cloud Run
- Vertex AI
A alternativa ao uso do comando gcloud é acessar o console usando este link. Consulte a documentação para conferir o uso e os comandos do gcloud.
Pré-requisitos
- Saber ler e escrever códigos Python e HTML
- Ter experiência com a API Gemini e o SDK da IA generativa do Google
- Conhecimento básico de desenvolvimento full-stack
O que você vai aprender
- Como criar uma API de back-end com tecnologia Gemini usando a biblioteca de API Flask
- Como criar um app de IA generativa que conecte o front-end e o back-end
- Como implantar o aplicativo de IA generativa desenvolvido no Cloud Run
O que é necessário
- Um computador em funcionamento com uma rede Wi-Fi confiável
- Uma mente curiosa
3. Criar um app Flask do Python no Cloud Run
Vamos criar o app Python Flask no Cloud Run usando o modelo gerado automaticamente no Cloud Shell.
Navegue até o terminal do Cloud Shell e clique no botão "Abrir editor".
Verifique se o projeto do Cloud Code está definido no canto inferior esquerdo (barra de status) do editor do Cloud Shell, conforme destacado na imagem abaixo, e se está definido como o projeto ativo do Google Cloud em que você ativou o faturamento. Autorizar, se necessário.
Clique no projeto ativo na barra de status e aguarde a abertura do pop-up do Cloud Code. No pop-up, selecione "Novo aplicativo".
Na lista de aplicativos, escolha Aplicativo do Cloud Run:
Na página 2/2, selecione o modelo Python Flask:
Informe o nome do projeto (por exemplo, "amazing-gemini-app") e clique em OK:
O modelo do novo projeto que você acabou de configurar será aberto.
É assim que é simples criar um app Python Flask no Cloud Run com o Google Cloud Shell.
4. Criar o front-end
Como mencionado anteriormente, o aplicativo da Web final vai ficar assim:
Ele contém um campo de entrada para inserir um link do YouTube do usuário, uma opção para escolher uma família de modelos diferente, um campo de texto para fornecer mais instruções, se necessário, e um botão para enviar o formulário.
Se você gostar do desafio, crie seu próprio formulário ou edite as propriedades do CSS. Você também pode copiar o código abaixo e substituir o conteúdo do arquivo index.html na pasta 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 testar se você seguiu corretamente esta etapa, clique com o botão direito do mouse em app.py e escolha Run Python File in Terminal.
Se tudo der certo, você poderá acessar o aplicativo da Web em http://127.0.0.1:8080.
5. Criar o back-end
Depois de configurar o front-end, você vai precisar criar um serviço de back-end que use o modelo Gemini para resumir o vídeo do YouTube fornecido pelo usuário. Você vai substituir o app.py para concluir esta tarefa.
Antes de mudar o código, você precisa criar um ambiente virtual e instalar as bibliotecas necessárias para executar os componentes do Gemini.
Primeiro, adicione a biblioteca do SDK do Google Gen AI ao arquivo requirements.txt. Ele vai ficar assim:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
Em segundo lugar, você precisa criar um ambiente virtual e instalar os pacotes do requirements.txt para executar o código de back-end.
- Clique nas barras no canto superior esquerdo e escolha Terminal > Novo terminal.
2. Crie um ambiente virtual digitando no terminal e aguarde a instalação.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
Mais uma vez, sinta-se à vontade para criar um endpoint Gemini usando a API Flask. O código deve ser semelhante ao fornecido abaixo.
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')
Em essência, o código faz o seguinte:
Importa as bibliotecas necessárias:
- Flask: para criar o aplicativo da Web.
- os: para acesso à variável de ambiente.
- google.genai: para interagir com a IA Gemini do Google.
- google.genai.types: para definir estruturas de dados para o Gemini.
Inicializar o cliente Gemini:
- Ele configura uma conexão com a Vertex AI do Google, permitindo que o app use o modelo de IA Gemini. Substitua REPLACE_WITH_YOUR_PROJECT_ID pelo ID do projeto.
Como definir a função generate:
- Essa função recebe um link de vídeo do YouTube, um ID de modelo Gemini e uma solicitação extra como entrada. Em seguida, ele envia o vídeo e o comando para o Gemini e retorna o texto do resumo gerado.
Como definir a rota da página inicial ("/")
- Essa função renderiza o modelo index.html, que exibe um formulário para o usuário inserir um link do YouTube.
Como definir a rota de resumo ("/summarize"):
- Essa função lida com envios de formulários. Ele recupera o link, o modelo e o comando do YouTube do formulário, chama a função de geração para receber o resumo e exibe o resumo no modelo result.html.
Como executar o aplicativo:
- Ele recupera a porta do servidor das variáveis de ambiente e inicia o servidor da Web Flask.
Para testar o código, execute app.py no terminal. O mesmo método usado para testar o front-end. Clique com o botão direito do mouse em app.py e escolha Run Python File in Terminal.
Teste o aplicativo. Ele deve estar funcionando como esperado.
6. Implantar o aplicativo da Web
Agora que você tem o aplicativo GenAI funcionando, vamos implantar o app no Cloud Run para que você possa compartilhar com seus amigos e colegas.
Acesse o terminal do Cloud Shell e verifique se o projeto atual está configurado como o projeto ativo. Caso contrário, use o comando gcloud configure para definir o ID do projeto:
gcloud config set project [PROJECT_ID]
Não se esqueça de substituir [PROJECT_ID] pelo ID do seu projeto. Em seguida, digite os seguintes comandos nessa ordem, um por um:
cd amazing-gemini-app
gcloud run deploy --source .
Você vai precisar inserir um nome para o serviço, por exemplo, youtube-summarizer. Escolha o número correspondente para a região us-central1. Diga "y" quando for perguntado se você quer permitir invocações não autenticadas. Estamos permitindo o acesso não autenticado porque este é um aplicativo de demonstração. Recomendamos usar a autenticação adequada para seus aplicativos corporativos e de produção.
Quando a implantação for concluída, você vai receber um link semelhante ao abaixo:
https://amazing-gemini-app-*******.a.run.app/
Use o aplicativo na janela do modo de navegação anônima ou no dispositivo móvel. Ele já deve estar ativo.
7. Desafio
Agora é sua hora de brilhar. Você tem o que é preciso para mudar o código e enviar vídeos diretamente do seu computador?
8. Limpar
Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste codelab, siga estas etapas:
- No console do Google Cloud, acesse a página Gerenciar recursos.
- Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir.
- Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.
- Também é possível acessar o Cloud Run no console, selecionar o serviço que você acabou de implantar e excluir.