Dans les applications Web modernes, décharger la lourde logique d’IA générative du frontend vers le backend est une nécessité. Dans mon dernier projet, j'ai refactorisé une application Angular pour générer des vidéos de haute qualité à l'aide du modèle Veo 3.1, entièrement gérées via les services Firebase.
En déplaçant cette logique côté serveur, nous sécurisons nos clés API et pouvons mettre à jour les paramètres du modèle sans redéployer l'intégralité de l'interface utilisateur.
La stack technique du projet :
http://localhost:5001.L'API publique Google AI Studio est restreinte dans ma région (Hong Kong). Cependant, Vertex AI (Google Cloud) offre un accès d'entreprise qui fonctionne ici de manière fiable. J'ai donc choisi Vertex AI pour cette démo.
npm i -g outils FirebaseInstallez Firebase-tools globalement à l'aide de npm.
déconnexion de Firebaseconnexion à FirebaseDéconnectez-vous de Firebase et reconnectez-vous pour effectuer une authentification Firebase appropriée.
initialisation de FirebaseExécuterinitialisation de Firebaseet suivez les écrans pour configurer Firebase Cloud Functions, Firebase Emulator Suite, Firebase Cloud Storage et Firebase Remote Config.
Si vous avez un projet existant ou plusieurs projets, vous pouvez spécifier l'ID du projet sur la ligne de commande.
initialisation de Firebase --projetDans les deux cas, la CLI Firebase installe automatiquementfirebase-adminetfonctions Firebasedépendances.
Une fois les étapes de configuration terminées, les outils Firebase généreront l'émulateur Firebase Functions, des fonctions, un fichier de règles de stockage, des modèles de configuration à distance et des fichiers de configuration tels que .firebaserc et firebase.json.
npm je fais firebaseL'application Angular nécessite lebase de feudépendance pour initialiser une application Firebase, charger la configuration à distance et appeler Firebase Cloud Functions pour générer des vidéos.
npm je @cfworker/json-schema @google/genai @modelcontextprotocol/sdkInstallez les dépendances ci-dessus pour accéder à Gemini dans Vertex AI.@google/genaidépend de@cfworker/json-schemaet@modelcontextprotocol/sdk. Si je ne les installe pas, les fonctions cloud ne peuvent pas démarrer.
L'application frontend est construite avec Angular. Il s'appuie sur Firebase AI Logic pour générer des images à l'aide du modèle Gemini 3 Image Pro Preview. Ensuite, l'invite de texte et l'image sont soumises à une fonction Firebase Cloud pour créer une vidéo. Firebase AI Logic ne prend pas en charge la génération vidéo, la fonction cloud appelle donc l'API Gemini et le modèle Veo 3.1 pour la créer. De plus, l'API Gemini permet unsortieGcsUriparamètre qui est un chemin d'accès Google Cloud Storage valide avecgs://préfixe. La fonction stocke les vidéos générées dans le compartiment spécifié et renvoie l'URI GCS. Le client résout l'URI GCS en une URL HTTP et lit la vidéo dans un élément de lecteur vidéo HTML.
Je définis les variables d'environnement dans le projet Firebase. Cela garantit que les fonctions connaissent les régions de stockage et d'hébergement des fonctions, ainsi que le modèle Veo à utiliser pour la génération vidéo.
.env.exemple
GOOGLE_CLOUD_LOCATION="us-central1" GOOGLE_GENAI_USE_VERTEXAI=true GEMINI_VIDEO_MODEL_NAME="veo-3.1-fast-generate-001" IS_VEO31_USED="true" POLLING_PERIOD_MS="10000" GOOGLE_FUNCTION_LOCATION="us-central1" LISTE BLANCHE="http://localhost:4200" REFERER="http://localhost:4200/"| Variable | Description |
|---|---|
| GOOGLE_CLOUD_LOCATION | L'emplacement du seau. J'ai choisi us-central1 car le bucket est toujours gratuit dans cette région. |
| GOOGLE_GENAI_USE_VERTEXAI | Indique si Vertex AI est utilisé ou non. |
| GEMINI_VIDEO_MODEL_NAME | Le nom du modèle vidéo Gemini. |
| IS_VEO31... [Courte citation de 8% de l'article original] |