1. Introduction
Dans le monde numérique frénétique d'aujourd'hui, le temps est une denrée précieuse. YouTube est un vaste référentiel d'informations, mais les vidéos longues peuvent représenter un investissement de temps important. C'est là que les récapitulatifs YouTube deviennent inestimables. Ces outils condensent efficacement les vidéos longues en résumés concis, ce qui permet aux utilisateurs de saisir rapidement le contenu principal sans regarder la vidéo entière. Cette fonctionnalité est particulièrement utile pour les étudiants, les professionnels et toute personne qui souhaite extraire efficacement des informations clés à partir de contenus vidéo en ligne. En substance, les récapitulatifs YouTube permettent aux utilisateurs de maximiser leur apprentissage et leur absorption d'informations tout en minimisant le temps perdu.
À 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 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'occupera 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 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 avec 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>
- Assurez-vous que les API suivantes sont activées:
- Cloud Run
- Vertex AI
Vous pouvez également utiliser la console à l'aide de ce lien au lieu de la commande gcloud. Consultez la documentation pour connaître les commandes gcloud ainsi que leur utilisation.
Prérequis
- Savoir lire et écrire du code Python et HTML
- À l'aise avec l'API Gemini et le SDK Google Gen AI
- Connaissances de base en développement full stack
Points abordés
- Créer une API backend Gemini à l'aide de la bibliothèque d'API Flask
- Créer une application GenAI associer le front-end et le back-end
- 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. Autoriser si vous y êtes invité.
Cliquez sur ce projet actif dans la barre d'état, puis 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:
Attribuez un nom au projet (par exemple, "amazing-gemini-app"), puis cliquez sur OK:
Le modèle du nouveau projet que vous venez de configurer s'ouvre.
C'est aussi simple que cela 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 permettant à l'utilisateur de saisir un lien YouTube, une option permettant de choisir une autre famille de modèles, un champ de texte pour fournir une invite supplémentaire si nécessaire et un bouton permettant d'envoyer le formulaire.
Si vous aimez relever des 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 le remplacer par 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 bien 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 à l'adresse http://127.0.0.1:8080.
5. Créer le backend
Une fois l'interface définie, vous devez 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. Elle doit se présenter comme suit:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-genai==1.2.0
Deuxièmement, vous devez créer un environnement virtuel et installer les packages à partir de requirements.txt pour pouvoir exécuter le code backend.
- Cliquez sur les barres en haut à gauche, puis sélectionnez Terminal > Nouveau terminal.
2. Créez un environnement virtuel en saisissant une commande dans le terminal, puis attendez qu'il s'installe correctement.
python -m venv venv source venv/bin/activate pip install -r requirements.txt
N'hésitez pas à vous lancer et à créer vous-même un point de terminaison Gemini à l'aide de l'API Flask. Votre code doit ressembler à ce qui est indiqué 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:
Importe les bibliothèques nécessaires:
- Flask: pour créer l'application Web.
- os: pour l'accès aux variables d'environnement.
- google.genai: permet d'interagir avec l'IA Gemini de Google.
- google.genai.types: permet de définir des structures de données pour Gemini.
Initialisation du 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éfinition de la fonction generate:
- Cette fonction utilise un lien vers une vidéo YouTube, un ID de modèle Gemini et une invite supplémentaire en tant que données d'entrée. Il envoie ensuite la vidéo et la requête à Gemini, puis renvoie le texte récapitulatif généré.
Définition du chemin d'accès à la page d'accueil (/):
- Cette fonction génère le modèle index.html, qui affiche un formulaire permettant à l'utilisateur de saisir un lien YouTube.
Définition du chemin de synthèse (/summarize):
- Cette fonction gère les envois de formulaire. 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 de variables d'environnement et démarre le serveur Web Flask.
Vous pouvez tester le code en exécutant app.py à partir du terminal. Même méthode que pour tester l'interface utilisateur. Effectuez un clic droit sur app.py, puis sélectionnez Run Python File in Terminal (Exécuter le fichier Python dans le terminal).
Allez-y, testez votre application. Il devrait fonctionner comme prévu.
6. Déployer l'application Web
Maintenant que vous avez une 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'essayent.
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. Saisissez ensuite les commandes suivantes dans l'ordre indiqué, une par une:
cd amazing-gemini-app
gcloud run deploy --source .
Vous êtes alors invité à saisir un nom pour votre service, par exemple youtube-summarizer. Choisissez le numéro correspondant à la région us-central1. Dites "y" lorsqu'il vous est demandé si vous souhaitez autoriser les appels non authentifiés. Notez que nous autorisons l'accès non authentifié ici, 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 recevoir un lien semblable à celui-ci:
https://amazing-gemini-app-*******.a.run.app/
N'hésitez pas à utiliser votre application depuis la 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. 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 ne 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.