1. Introduction
Dans le monde numérique frénétique d'aujourd'hui, le temps est une ressource précieuse. YouTube est un vaste référentiel d'informations, mais les vidéos longues peuvent représenter un investissement en temps considérable. C'est là que les outils de résumé YouTube deviennent indispensables. Ces outils condensent efficacement les vidéos longues en résumés concis, ce qui permet aux utilisateurs de comprendre rapidement le contenu principal sans regarder l'intégralité de la vidéo. Cela est particulièrement utile pour les étudiants, les professionnels et toute personne souhaitant extraire efficacement des informations clés du contenu vidéo en ligne. En résumé, les outils de résumé YouTube permettent aux utilisateurs de maximiser leur apprentissage et leur assimilation d'informations tout en minimisant le temps passé.
À la fin de cet atelier, vous disposerez d'une application Web fonctionnelle capable de générer un résumé à partir de vidéos YouTube. Vous comprendrez également mieux comment utiliser l'API Gemini et le SDK Google Gen AI, et comment les intégrer pour créer une application Web.
Votre application Web se présentera comme suit :
Il vous suffit de fournir un lien vers la vidéo YouTube, et Gemini s'occupe du reste.
2. Avant de commencer
Cet atelier de programmation part du principe que vous disposez déjà d'un projet Google Cloud pour lequel la facturation est activée. Si ce n'est pas le cas, vous pouvez suivre les instructions ci-dessous pour commencer.
- Dans la console Google Cloud, sur la page du sélecteur de projet, sélectionnez ou créez un projet Google Cloud.
- Assurez-vous que la facturation est activée pour votre projet Google Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.
- Vous utiliserez Cloud Shell, un environnement de ligne de commande exécuté dans Google Cloud. Pour y accéder, cliquez sur Activer Cloud Shell en haut de la console Google Cloud.
- Une fois connecté à Cloud Shell, vérifiez que vous êtes déjà authentifié et que le projet est défini sur votre ID de projet à l'aide de la commande suivante :
gcloud auth list
- Exécutez la commande suivante dans Cloud Shell pour vérifier que la commande gcloud reconnaît votre projet.
gcloud config list project
- Si votre projet n'est pas défini, utilisez la commande suivante pour le définir :
gcloud config set project <YOUR_PROJECT_ID>
Vous pouvez également voir l'ID PROJECT_ID dans la console.
Cliquez dessus pour afficher tous vos projets et l'ID du projet sur la droite.
- Assurez-vous que les API suivantes sont activées. Utilisez la commande suivante pour les définir :
- 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
Vous pouvez également accéder à la console à l'aide de ce lien au lieu d'utiliser la commande gcloud. Consultez la documentation pour connaître les commandes gcloud ainsi que leur utilisation.
Prérequis
- Vous savez lire et écrire du code Python et HTML.
- Vous êtes à l'aise avec l'API Gemini et le SDK Google Gen AI.
- Vous comprenez les bases du développement full-stack.
Points abordés
- Créer une API backend optimisée par Gemini à l'aide de la bibliothèque d'API Flask
- Créer une application GenAI et lier le frontend et le backend
- Déployer l'application GenAI développée sur Cloud Run
Prérequis
- Un ordinateur qui fonctionne et un réseau Wi-Fi fiable
- Un esprit curieux
3. Créer une application Python Flask sur Cloud Run
Nous allons d'abord créer l'application Python Flask sur Cloud Run à l'aide du modèle généré automatiquement à partir de Cloud Shell.
Accédez au terminal Cloud Shell et cliquez sur le bouton "Ouvrir l'éditeur". 
Assurez-vous que le projet Cloud Code est défini en bas à gauche (barre d'état) de l'éditeur Cloud Shell, comme indiqué dans l'image ci-dessous, et qu'il est défini sur le projet Google Cloud actif pour lequel la facturation est activée. Autorisez si vous y êtes invité.
REMARQUES : L'initialisation de l'éditeur Cloud Shell et le chargement de tous les plug-ins requis peuvent prendre un certain temps.
Cloud Code - Sign In
Le bouton s'affiche. Veuillez patienter.
Cliquez sur ce projet actif dans la barre d'état et attendez que le pop-up Cloud Code s'ouvre. Dans le pop-up, sélectionnez "Nouvelle application". 
Dans la liste des applications, sélectionnez Application Cloud Run :
Sur la page 2/2, sélectionnez le modèle Python Flask :
Indiquez le nom du projet de votre choix (par exemple, "amazing-gemini-app"), puis cliquez sur OK :
Le modèle du nouveau projet que vous venez de configurer s'ouvre.
Vous voyez à quel point il est simple de créer une application Python Flask sur Cloud Run avec Google Cloud Shell.
4. Créer le frontend
Comme indiqué précédemment, voici à quoi ressemblera l'application Web finale :
Elle contient un champ de saisie pour recevoir un lien YouTube de l'utilisateur, une option permettant de choisir une autre famille de modèles, une zone de texte pour fournir une requête supplémentaire si nécessaire et un bouton pour envoyer le formulaire.
Si vous aimez les défis, n'hésitez pas à concevoir votre propre formulaire ou à modifier les propriétés CSS. Vous pouvez également copier le code ci-dessous et remplacer le contenu de votre fichier index.html dans le dossier templates par celui-ci.
<!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>
Pour vérifier que vous avez effectué cette étape correctement, effectuez un clic droit sur app.py , puis sélectionnez Exécuter le fichier Python dans le terminal.
Si tout s'est bien passé, vous devriez pouvoir accéder à votre application Web en cliquant sur le bouton Web Preview en haut à droite de l'éditeur Cloud, puis en sélectionnant Preview on port 8080.
5. Créer le backend
Une fois le frontend configuré, vous devez créer un service backend qui utilise le modèle Gemini pour résumer la vidéo YouTube fournie par l'utilisateur. Notez que vous allez écraser le fichier app.py pour effectuer cette tâche.
Avant de modifier le code, vous devez créer un environnement virtuel et installer les bibliothèques nécessaires pour exécuter les composants Gemini.
Tout d'abord, vous devez ajouter la bibliothèque du SDK Google Gen AI au fichier requirements.txt. Elle devrait se présenter comme suit :
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
Ensuite, vous devez créer un environnement virtuel et installer les packages à partir de requirements.txt afin de pouvoir exécuter le code backend.
- Cliquez sur les barres en haut à gauche, puis sélectionnez Terminal > Nouveau terminal ( vous pouvez également appuyer sur
Ctrl + Shift + Cpour ouvrir un nouveau terminal).
2. Créez un environnement virtuel en saisissant dans le terminal et attendez que l'installation soit terminée.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
N'hésitez pas à vous mettre au défi et à créer vous-même un point de terminaison Gemini à l'aide de l'API Flask. Votre code dans app.py doit être semblable à celui fourni ci-dessous.
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 résumé, le code effectue les opérations suivantes :
Importer les bibliothèques nécessaires :
- Flask : pour créer l'application Web
- os : pour accéder aux variables d'environnement
- google.genai : pour interagir avec l'IA Gemini de Google
- google.genai.types : pour définir les structures de données pour Gemini
Initialiser le client Gemini :
- Il configure une connexion à Vertex AI de Google, ce qui permet à l'application d'utiliser le modèle d'IA Gemini. Veillez à remplacer "REPLACE_WITH_YOUR_PROJECT_ID" par l'ID de votre projet.
Définir la fonction generate :
- Cette fonction prend en entrée un lien vidéo YouTube, un ID de modèle Gemini et une requête supplémentaire. Elle envoie ensuite la vidéo et la requête à Gemini, puis renvoie le texte de résumé généré.
Définir la route de la page d'accueil (/) :
- Cette fonction affiche le modèle index.html, qui présente un formulaire permettant à l'utilisateur de saisir un lien YouTube.
Définir la route de résumé (/summarize) :
- Cette fonction gère les envois de formulaires. Elle récupère le lien YouTube, le modèle et la requête à partir du formulaire, appelle la fonction generate pour obtenir le résumé, puis affiche le résumé dans le modèle result.html.
Exécuter l'application :
- Elle récupère le port du serveur à partir des variables d'environnement et démarre le serveur Web Flask.
Vous pouvez tester le code en exécutant le fichier app.py à partir du terminal. La méthode est la même que pour tester le frontend. Effectuez un clic droit sur app.py , puis sélectionnez Exécuter le fichier Python dans le terminal.
N'hésitez pas à tester votre application. Elle devrait fonctionner comme prévu.
6. Déployer l'application Web
Maintenant que vous disposez de l'application GenAI fonctionnelle, déployons-la sur Cloud Run afin que vous puissiez la partager avec vos amis et collègues pour qu'ils l'essaient.
Accédez au terminal Cloud Shell et assurez-vous que le projet actuel est configuré sur votre projet actif. Si ce n'est pas le cas, utilisez la commande gcloud configure pour définir l'ID du projet :
gcloud config set project [PROJECT_ID]
N'oubliez pas de remplacer [PROJECT_ID] par votre propre ID de projet. Assurez-vous que votre répertoire de travail actuel dans le terminal est **amazing-gemini-app**. Ensuite, saisissez les commandes suivantes dans cet ordre, une par une :
gcloud run deploy --source .
Vous serez invité à saisir un nom pour votre service. Disons "youtube-summarizer". Choisissez le numéro correspondant à la région "us-central1". Répondez "y" lorsque vous êtes invité à autoriser les appels non authentifiés. Notez que nous autorisons ici l'accès non authentifié, car il s'agit d'une application de démonstration. Nous vous recommandons d'utiliser l'authentification appropriée pour vos applications d'entreprise et de production.
Une fois le déploiement terminé, vous devriez obtenir un lien semblable à celui ci-dessous :
https://amazing-gemini-app-*******.a.run.app/
N'hésitez pas à utiliser votre application à partir d'une fenêtre de navigation privée ou de votre appareil mobile. Elle devrait déjà être en ligne.
7. Défi
C'est le moment de briller. Avez-vous les compétences nécessaires pour modifier le code afin de pouvoir importer des vidéos directement depuis votre ordinateur ?
8. Effectuer un nettoyage
Pour éviter que les ressources utilisées dans cet atelier de programmation soient facturées sur votre compte Google Cloud, procédez comme suit :
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
- Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.
- Vous pouvez également accéder à Cloud Run dans la console, sélectionner le service que vous venez de déployer, puis le supprimer.