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 prendre beaucoup de temps. C'est là que les résumés YouTube deviennent indispensables. Ces outils permettent de condenser efficacement les longues vidéos en résumés concis, ce qui permet aux utilisateurs de saisir rapidement le contenu principal sans regarder l'intégralité de la vidéo. Cette fonctionnalité est particulièrement utile pour les élèves, les professionnels et toute personne souhaitant extraire efficacement des informations clés de contenus vidéo en ligne. En résumé, les résumés YouTube permettent aux utilisateurs de maximiser leur apprentissage et leur absorption 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 des résumés 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 suppose que vous disposez déjà d'un projet Google Cloud pour lequel la facturation est activée. Si vous ne l'avez pas encore, 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 allez utiliser 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 connaî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. Pour ce faire, exécutez la commande suivante :
- 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 passer par la console en utilisant ce lien. Consultez la documentation pour connaître les commandes gcloud ainsi que leur utilisation.
Prérequis
- Être capable de lire et d'écrire des codes Python et HTML
- Vous êtes à l'aise avec l'API Gemini et le SDK Google Gen AI.
- Connaissances de base du développement full stack
Points abordés
- Créer une API de backend optimisée par Gemini à l'aide de la bibliothèque Flask API
- Créer un lien entre le front-end et le back-end d'une application d'IA générative
- Déployer l'application d'IA générative 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 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, puis 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. Cliquez sur Autoriser 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 va s'afficher, veuillez patienter.
Cliquez sur le projet actif dans la barre d'état et attendez que le pop-up Cloud Code s'ouvre. Dans le pop-up qui s'affiche, 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 :
Donnez le nom de votre choix au projet (par exemple, "amazing-gemini-app"), puis cliquez sur OK :
Le modèle du nouveau projet que vous venez de configurer s'ouvre.
Vous voyez comme 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 :
Il contient un champ de saisie pour que l'utilisateur puisse saisir un lien YouTube, une option pour choisir une autre famille de modèles, une zone de texte pour fournir une invite 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.
<!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 correctement effectué cette étape, effectuez un clic droit sur app.py, puis sélectionnez Run Python File in Terminal (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 devrez créer un service de 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. Voici à quoi cela devrait ressembler :
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 pour pouvoir exécuter le code de 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 la commande dans le terminal et attendez que l'installation se termine correctement.
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 ressembler à ce qui est 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 substance, 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.
Initialisation du client Gemini :
- Il établit 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éfinition de la fonction de génération :
- Cette fonction utilise un lien vers une vidéo YouTube, un ID de modèle Gemini et une invite supplémentaire comme entrée. Il envoie ensuite la vidéo et la requête à Gemini, puis renvoie le texte récapitulatif 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 synthèse (/summarize) :
- Cette fonction gère les envois de formulaires. Il récupère le lien YouTube, le modèle et l'invite du formulaire, appelle la fonction de génération pour obtenir le résumé, puis affiche le résumé dans le modèle result.html.
Exécuter l'application
- Il 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 app.py depuis le terminal. La méthode est la même que pour tester l'interface. Effectuez un clic droit sur app.py, puis sélectionnez Run Python File in Terminal (Exécuter le fichier Python dans le terminal).
N'hésitez pas à tester votre application. Il devrait fonctionner comme prévu.
6. Déployer l'application Web
Maintenant que vous disposez de l'application d'IA générative 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 l'ID de votre projet. Assurez-vous que votre répertoire de travail actuel dans le terminal est **amazing-gemini-app**, puis saisissez les commandes suivantes dans l'ordre, une par une :
gcloud run deploy --source .
Vous serez invité à saisir un nom pour votre service, par exemple "youtube-summarizer". Choisissez le numéro correspondant à la région us-central1. Dites 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 une 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 depuis une fenêtre de navigation privée ou votre appareil mobile. Il devrait déjà être en ligne.
7. Défi
C'est le moment de briller. Pensez-vous pouvoir modifier le code pour 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.