Vidéo UGC Auto — Pipeline complet avec Playwright
Cette compétence orchestre l'intégralité du pipeline de création de vidéo publicitaire UGC sur Higgsfield : générer une image de personnage → la sélectionner pour la vidéo → ajouter un prompt vidéo UGC → générer une vidéo Seedance 2.0. Le tout automatisé via Playwright.
Aperçu du pipeline
Étape 1 : Générer l'image du personnage → /image/soul-v2
Étape 2 : Naviguer vers la page vidéo → /create/video?model=seedance_2_0
Étape 3 : Sélectionner l'image dans la galerie → Boîte de dialogue de téléversement → onglet "Image Generations"
Étape 4 : Écrire le prompt vidéo UGC → Éditeur lexical (contenteditable)
Étape 5 : Configurer et générer → Cliquer sur Générer
Prérequis
- L'utilisateur doit être connecté à higgsfield.ai dans la session du navigateur Playwright
- Le plugin Playwright MCP doit être activé
- Charger chaque outil Playwright avec
ToolSearchavant la première utilisation
Exigences d'entrée
L'utilisateur fournit :
- Description du personnage OU un prompt d'image pré-fait (invoquer
/ugc-hot-girlpour en générer un) - Contexte du produit/marque — ce que la vidéo UGC publicitaire
- Style vidéo — témoignage, présentation produit, déballage, réaction, etc.
Paramètres facultatifs :
- Modèle d'image : Soul 2.0 (par défaut, idéal pour les portraits)
- Modèle vidéo : Seedance 2.0 (par défaut)
- Durée : 5s, 8s (par défaut), 10s
- Ratio : Auto, 16:9, 9:16 (TikTok/Reels), 1:1
- Résolution : 720p (par défaut), 1080p
Flux d'automatisation complet
Phase 1 : Générer l'image du personnage
Étape 1.1 : Naviguer vers la génération d'image
browser_navigate → url: "https://higgsfield.ai/image/soul-v2"
Attendre le chargement de la page, prendre une capture d'écran.
Étape 1.2 : Saisir le prompt de l'image
Trouver la zone de texte (ID Playwright : hf:tour-image-prompt, texte indicatif : "Describe the scene you imagine") :
browser_click → ref: <textbox_ref>, element: "Zone de texte du prompt d'image"
browser_type → ref: <textbox_ref>, text: "<prompt de l'image du personnage>"
Si l'utilisateur n'a pas fourni de prompt d'image, utilisez /ugc-hot-girl pour en générer un d'abord.
Étape 1.3 : Générer l'image
Trouver le bouton Générer (affiche "Generate XXXX free gens left") :
DEMANDER LA CONFIRMATION À L'UTILISATEUR — cela utilise des crédits/générations gratuites.
browser_click → ref: <generate_button_ref>, element: "Bouton Générer"
Étape 1.4 : Attendre la génération
browser_wait_for → time: 20
Prendre une capture d'écran. Vérifier que la nouvelle image apparaît comme premier élément dans la grille Historique. Confirmer en vérifiant que le innerHTML du premier élément de la grille contient une balise <img> avec une URL de ressource récente.
Phase 2 : Créer la vidéo à partir de l'image générée
Étape 2.1 : Naviguer vers la page vidéo Seedance 2.0
browser_navigate → url: "https://higgsfield.ai/create/video?model=seedance_2_0"
Attendre le chargement de la page, prendre une capture d'écran. Confirmer que "Seedance 2.0" apparaît dans le bouton Modèle.
Étape 2.2 : Ouvrir la boîte de dialogue de téléversement de média
Trouver la zone de téléversement — rechercher generic [cursor=pointer] contenant :
paragraph: Upload mediaparagraph: Image, Video or Audio
browser_click → ref: <upload_area_ref>, element: "Zone de téléversement de média"
Cela ouvre une boîte de dialogue avec des onglets : Uploads, Image Generations, Video Generations, Elements, Liked.
Étape 2.3 : Basculer vers l'onglet Image Generations
browser_click → ref: <image_gen_tab_ref>, element: "Onglet Image Generations"
Chercher button "Image Generations" dans la barre d'onglets de la boîte de dialogue.
Étape 2.4 : Sélectionner l'image générée
L'image la plus récemment générée est le premier élément de la grille.
Elle apparaît initialement comme un button "Check eligibility". Cliquer dessus :
browser_click → ref: <first_image_ref>, element: "Première image (génération la plus récente)"
Après avoir cliqué, le bouton se transforme en un generic [cursor=pointer] avec un aperçu de l'image et une coche verte — signifiant qu'elle est sélectionnée et éligible.
Important : Le premier bouton "Check eligibility" dans la liste est toujours l'image la plus récente. Après avoir cliqué, sa référence disparaît de la capture et est remplacée par un nouvel élément generic.
Étape 2.5 : Fermer la boîte de dialogue
browser_press_key → key: "Escape"
Prendre une capture d'écran. Vérifier :
- La zone de téléversement n'affiche plus le texte "Upload media"
- Elle affiche à la place un
generic [cursor=pointer]avec des éléments d'image imbriquées (vignettes de 48px) - Les anciens
paragraph: Upload mediaetparagraph: Image, Video or Audioont disparu
Étape 2.6 : Effacer tout prompt existant
La page vidéo utilise un éditeur de texte enrichi Lexical (div contenteditable), PAS une zone de texte standard. Pour l'effacer :
browser_evaluate → function: "() => { const el = document.querySelector('[data-lexical-editor]'); el.focus(); el.click(); }"
browser_press_key → key: "Control+a"
browser_press_key → key: "Backspace"
Prendre une capture d'écran. La zone de texte doit maintenant afficher le texte indicatif : "Describe your scene in detail. Use @ to reference assets"
Étape 2.7 : Saisir le prompt vidéo UGC
Après avoir effacé, prendre une capture d'écran pour obtenir la nouvelle référence de la zone de texte. Ensuite, taper lentement (nécessaire pour l'éditeur Lexical) :
browser_type → ref: <textbox_ref>, text: "<prompt vidéo UGC>", slowly: true
Modèles de prompt vidéo UGC (choisir selon le style) :
Témoignage / Talking Head :
La femme de @image1 parle directement à la caméra avec des gestes naturels des mains, un éclairage chaud de l'heure dorée, une ambiance authentique et décontractée. Elle parle avec enthousiasme, se penchant légèrement pour insister. Fond flou artistique, faible profondeur de champ. Texture de peau naturelle, mouvement des lèvres réaliste, style témoignage UGC TikTok. Caméra à main douce, 24ips.
Présentation produit :
La femme de @image1 tient un produit vers la caméra, le tournant pour montrer différents angles. Expression excitée et authentique, yeux écarquillés. Éclairage annulaire, fond propre. Elle montre les caractéristiques du produit en hochant la tête avec enthousiasme. Cadrage selfie en gros plan, qualité vidéo iPhone, sensation UGC authentique.
Réaction / Déballage :
La femme de @image1 ouvre un paquet avec une anticipation excitée, sortant un produit et réagissant avec un véritable ravissement. Expression surprise, bouche ouverte, puis se transformant en un large sourire. Éclairage naturel de chambre, cadre décontracté. Sensation de caméra à main, énergie de déballage authentique, style TikTok.
Avant/Après :
La femme de @image1 commence par avoir l'air sceptique, se touchant le visage d'un air dubitatif. Puis elle applique un produit, et son expression se transforme en émerveillement, touchant sa peau avec incrédulité. Doux éclairage annulaire, cadre miroir de salle de bain. Moment de transformation, réaction authentique, témoignage UGC.
Lifestyle / Journée dans la vie :
La femme de @image1 traverse un espace moderne et lumineux, interagissant décontractément avec un produit dans le cadre de sa routine. Lumière naturelle du matin, mouvement détendu, énergie authentique et spontanée. La caméra suit avec un mouvement doux, faible profondeur de champ. Contenu lifestyle ambitieux mais réaliste.
Étape 2.8 : Configurer les paramètres vidéo (facultatif)
Les paramètres par défaut conviennent à la plupart des UGC :
- Durée : 8s (bon pour les formats courts)
- Ratio : Auto (ou 9:16 pour TikTok/Reels)
- Résolution : 720p
Pour modifier le ratio pour le format vertical TikTok :
browser_click → ref: <ratio_button_ref>, element: "Sélecteur de ratio"
Puis sélectionner "9:16" dans le menu déroulant.
Étape 2.9 : Générer la vidéo
Prendre une capture d'écran montrant l'état final du formulaire.
DEMANDER LA CONFIRMATION À L'UTILISATEUR — la génération vidéo coûte plus de crédits que les images.
Le bouton Générer affiche le coût en crédits (ex. "Generate 30 20") :
browser_click → ref: <generate_button_ref>, element: "Bouton Générer la vidéo"
Étape 2.10 : Surveiller la génération
Après avoir cliqué sur Générer :
- La vidéo entre dans la file d'attente de génération
- Vérifier l'onglet Historique pour la progression
- Prendre périodiquement des captures d'écran pour montrer l'état
- Les vidéos Seedance 2.0 prennent généralement 1 à 3 minutes
Référence des motifs d'éléments clés
Page de génération d'image (/image/soul-v2)
| Élément | Motif |
|---|---|
| Zone de texte du prompt | textbox avec ID hf:tour-image-prompt |
| Sélecteur de modèle | group > button contenant "Soul 2.0" |
| Ratio d'aspect | button affichant "3:4" |
| Résolution | button affichant "2k" |
| Bouton Générer | button "Generate XXXX free gens left" |
| Premier résultat | Premier enfant generic dans la grille Historique |
Page de création vidéo (/create/video)
| Élément | Motif |
|---|---|
| Zone de téléversement (vide) | generic [cursor=pointer] avec paragraph: Upload media |
| Zone de téléversement (remplie) | generic [cursor=pointer] avec des vignettes d'image imbriquées, pas de texte "Upload media" |
| Boîte de dialogue de téléversement | dialog avec barre d'onglets : Uploads, Image Generations, etc. |
| Onglet Image Generations | button "Image Generations" dans la boîte de dialogue |
| Première image dans la galerie | Premier button "Check eligibility" dans la grille de la boîte de dialogue |
| Image sélectionnée | generic [cursor=pointer] avec img imbriquée (remplace le bouton Check eligibility) |
| Éditeur de prompt | div contenteditable [data-lexical-editor] |
| Zone de texte du prompt (dans la capture) | textbox [active] après avoir ciblé l'éditeur Lexical |
| Bouton Modèle | button "Model" contenant "Seedance 2.0" |
| Bouton Durée | button "Duration" |
| Bouton Ratio | button "Auto Ratio" |
| Bouton Résolution | button "720p Resolution" |
| Bouton Générer | button "Generate XX XX" avec le coût en crédits |
Gestion des erreurs
- Non connecté : Demander à l'utilisateur de se connecter (
! open https://higgsfield.ai) - Barre de prompt d'image manquante : Actualiser la page — c'est un bug intermittent de la plateforme
- "Check eligibility" ne se transforme pas : L'image peut ne pas être compatible avec Seedance 2.0. Essayer une autre image ou la régénérer
- L'éditeur Lexical ne s'efface pas : Essayer un triple-clic pour tout sélectionner, puis Backspace. Ou utiliser
browser_evaluatepour effacer le innerHTML - La boîte de dialogue ne se ferme pas avec Escape : Cliquer en dehors de la zone de la boîte de dialogue
- Crédits insuffisants : Avertir l'utilisateur avant de générer. La vidéo coûte plus que les images
- Références obsolètes : Toujours prendre une nouvelle capture d'écran avant chaque interaction. Les références changent après tout changement d'état de la page
Exemple de flux de bout en bout
Utilisateur : "Crée une vidéo publicitaire UGC avec une fille attirante faisant la promotion de mon nouveau sérum pour le visage"
1. Invoquer /ugc-hot-girl → génère un prompt d'image beauté/soin de la peau :
"Jeune femme attirante, début de la vingtaine, peau claire et lumineuse, cheveux
bruns foncés en chignon décoiffé... éclairage annulaire... photoréaliste, 4K..."
2. Phase 1 — Génération d'image :
→ Naviguer vers /image/soul-v2
→ Saisir le prompt d'image
→ Confirmer avec l'utilisateur → Cliquer sur Générer
→ Attendre 15-20s → L'image apparaît dans la grille ✓
3. Phase 2 — Création vidéo :
→ Naviguer vers /create/video?model=seedance_2_0
→ Cliquer sur la zone de téléversement → onglet Image Generations
→ Cliquer sur la première image (Check eligibility) → Escape
→ Image chargée dans le formulaire ✓
→ Effacer l'ancien prompt → Saisir le prompt de témoignage UGC :
"La femme de @image1 tient un petit flacon de sérum, l'examinant
avec une curiosité authentique. Elle applique une goutte sur son doigt, touche
sa joue, et son expression s'illumine de plaisir..."
→ Définir le ratio sur 9:16 pour TikTok
→ Confirmer avec l'utilisateur → Cliquer sur Générer
→ Vidéo en cours de génération... terminée ✓
4. Rapport : "Votre vidéo UGC est prête ! Vérifiez l'onglet Historique."
Référence des compétences du pipeline
| Étape | Compétence | Ce qu'elle fait |
|---|---|---|
| 1 | /ugc-hot-girl | Génère le prompt d'image du personnage |
| 2 | /higgsfield-image-auto | Automatise uniquement l'étape de génération d'image |
| 3 | /seedance-auto-generate | Automatise uniquement l'étape de génération vidéo (à partir d'un fichier local) |
| Complet | /ugc-video-auto | Cette compétence — exécute l'intégralité du pipeline de bout en bout |
Vous pouvez utiliser les compétences individuelles séparément, ou invoquer /ugc-video-auto pour tout exécuter en une seule fois.