chenlikun2010/product-promo-video-skill

Compétence de création de vidéo promotionnelle de produit (Remotion)

Transformez un « dossier de ressources + idées créatives » en une vidéo promotionnelle MP4 prête à être lue. Le corps principal utilise Remotion (vidéo codée en React) pour un rendu local, reproductible et facilement ajustable ; le script, le TTS et quelques ajouts d'images sont prioritairement effectués via l'outil en ligne de commande Alibaba Cloud Bailian bl.

Convient pour : vidéos promotionnelles de type motion graphics principalement composées d'images/ photos de produits/ captures d'écran d'applications/ courtes vidéos, avec du texte, des animations et une voix off (pour halls d'exposition en boucle, présentations de produits, génériques de conférence). Ne convient pas pour : les plans nécessitant beaucoup de prises de vue réelles/ de mouvements de caméra complexes. Les quelques plans manquants peuvent être complétés par le modèle Happy Horse de Bai Lian, puis réintégrés dans Remotion pour le montage.

Prérequis d'environnement

• node (>=18) npm ffmpeg/ffprobe python3 (avec numpy, requests). Avant de commencer, vérifiez avec which node ffmpeg python3.
• L'interface CLI bl doit être installée et connectée : bl --version, bl auth status. Avant d'utiliser bl, vérifiez la version conformément aux règles de pré-vérification de la compétence bailian-cli.
• Nécessite une connexion Internet lors du rendu (premier chargement de la police Noto Sans SC).

Flux de travail standard (à exécuter dans l'ordre)

1. Évaluer les ressources et l'intention

• Demandez à l'utilisateur de fournir le dossier de ressources et les idées créatives/ points de vente. Listez d'abord le dossier : find <dir> -type f \( -iname '*.jpg' -o -iname '*.png' -o -iname '*.mp4' -o -iname '*.mov' \).
• Lisez chaque image clé (pour voir clairement le produit, les fonctionnalités, l'interface), utilisez ffprobe pour chaque vidéo afin d'obtenir la durée/ le codec/ la résolution.
• Identifiez les problèmes : ① les captures d'écran contenant des données défavorables (par exemple "taux de prise de médicaments à l'heure : 4 %") doivent être remplacées par des données positives dans la vidéo à l'aide de React ; ② pour un même produit avec plusieurs couleurs/ modèles, choisissez le visuel principal ; ③ éliminez les ressources non pertinentes.

2. Concevoir le storyboard, d'abord en alignement avec l'utilisateur (important)

• Utilisez AskUserQuestion pour confirmer : le style, la durée (pour une boucle en hall d'exposition, 60 à 90 secondes est recommandé), le format (paysage 1920×1080 / portrait 1080×1920), le mode de doublage.
• Donnez directement 3 préréglages de style prêts à l'emploi (voir styles/STYLES.md) : warm (chaleureux/familial) / guochao (tendance chinoise dynamique) / tech (technologique professionnel). Chacun a déjà ses couleurs, décorations et storyboards implémentés. Une fois choisi, utilisez-le directement à l'étape d'application du style, sans concevoir le visuel de zéro. Si un tout nouveau style est nécessaire, modifiez-en un des plus proches.
• Le ton du texte varie selon le style : récit émotionnel (warm/guochao) ou présentation d'entreprise/produit (tech).
• Vous pouvez rédiger un script/ storyboard avec Bai Lian, puis le finaliser manuellement :

bl text chat \
  --system "Répondre en 简体中文. Générer un storyboard condensé pour une vidéo promotionnelle de produit." \
  --message "À partir de ces ressources et points de vente, rédigez un storyboard de 60 secondes pour une vidéo promotionnelle : <liste des ressources + points de vente>"

• Produisez un tableau de storyboard : chaque segment (numéro de plan/ durée/ image/ texte sur grand écran/ voix off/ ressource utilisée). Principe pour une vidéo de hall d'exposition : compréhensible même sans son (texte sur grand écran principal), accrocheur en 3 secondes, la fin peut boucler sur le début.

3. Montage du projet à partir du template

PROJ="$HOME/<nom_du_film>"
cp -R ~/.claude/skills/product-promo-video/template "$PROJ"
cd "$PROJ" && npm install
mkdir -p public/assets public/audio out

Le template contient déjà : theme.ts (couleurs/ police/ SCENE_FRAMES), components.tsx (KenBurns/ BigTitle/ Subtitle/ Narration/ BgMusic/ PhoneMock/ Chip), Video.tsx (TransitionSeries avec fondu enchaîné), Root.tsx, scenes/AllScenes.example.tsx (exemple complet, à modifier et enregistrer sous AllScenes.tsx pour que Video le référence).

4. Traiter les ressources dans public/assets

• Conversion obligatoire HEVC en H.264 (Chromium instable avec HEVC) : ffmpeg -y -i in.mp4 -c:v libx264 -pix_fmt yuv420p -crf 20 -an public/assets/weather.mp4
• Copiez les images et renommez-les avec des noms de fichiers ASCII (staticFile instable avec les chemins chinois) : intro.jpg / device.jpg / app_home.jpg ....
• Les captures d'écran contenant des données défavorables sont copiées normalement, mais dans le composant de storyboard, dessinez une carte React par-dessus pour les couvrir.

5. Optionnel : Complétion d'images manquantes avec Happy Horse de Bailian

• Lorsque des plans clés manquent, vous pouvez utiliser bl video generate / bl video ref pour générer des compléments ; si les ressources sont suffisantes, passez cette étape et utilisez directement les effets Remotion.
• Ne limitez pas la durée de production vidéo Happy Horse dans cette compétence. Ajustez --duration en fonction des besoins de l'utilisateur, du budget et de la plage de prise en charge du modèle Bai Lian ; pour une vidéo plus longue, générez plusieurs segments et assemblez-les avec Remotion/ ffmpeg.
• Pour réduire les coûts d'essais, lors du premier test, utilisez un petit échantillon en 720P et 5 secondes pour valider la direction, puis ajustez les paramètres pour la production finale.
• Exemple de génération texte-vers-vidéo (petit échantillon à faible coût, durée ajustable) :

bl video generate \
  --model happyhorse-1.1-t2v \
  --prompt "Dans un hall d'exposition moderne et lumineux, un appareil de santé intelligent tourne lentement sous un éclairage doux, texture technologique et professionnelle, sans texte, sans logo" \
  --ratio 16:9 \
  --resolution 720P \
  --duration 5 \
  --download public/assets/ai_device_5s.mp4

• Exemple de génération image-vers-vidéo (petit échantillon à faible coût ; l'image locale peut être directement passée à --image, le CLI la téléchargera automatiquement en fichier temporaire) :

bl video generate \
  --model happyhorse-1.1-i2v \
  --image public/assets/device.jpg \
  --prompt "Conserver l'apparence du produit, la caméra avance légèrement, fond propre, reflets doux, sans texte" \
  --ratio 16:9 \
  --resolution 720P \
  --duration 5 \
  --download public/assets/device_i2v_5s.mp4

• Après génération, utilisez ffprobe pour vérifier la durée/ codec ; s'il s'agit de HEVC ou si le navigateur est instable, convertissez en H.264 selon l'étape 4.

6. Rédaction du script + Doublage avec Alibaba Bailian (recommandé en priorité)

• Écrivez la voix off dans narration.json : {"s1":"...","s2":"..."}, les clés correspondent aux segments du storyboard, cohérentes avec Narration file="s1.mp3". Les phrases séparées par des virgules aident le TTS à faire des pauses naturelles.
• Priorité à CosyVoice de Bailian :

source ~/.claude/skills/product-promo-video/config/bailian.env
python3 ~/.claude/skills/product-promo-video/scripts/gen_tts_bailian.py \
  --script narration.json --out public/audio

• Pour générer une seule phrase directement avec le CLI :

bl speech synthesize \
  --text "Une phrase de voix off pour une vidéo promotionnelle de produit" \
  --voice longanwen_v3 \
  --language zh \
  --instruction "Voix off pour vidéo promotionnelle technologique et professionnelle, ton confiant, clair, chaleureux, débit modéré" \
  --format mp3 \
  --out public/audio/s1.mp3

• Volcengine en option de secours :

source ~/.claude/skills/product-promo-video/config/volcano.env
python3 ~/.claude/skills/product-promo-video/scripts/gen_tts_volcano.py \
  --script narration.json --out public/audio

• En cas d'erreur code 3001 resource not granted = autorisation côté compte non accordée : activez « Synthèse vocale » dans la console Volcengine, ajoutez la voix à cet appid, vérifiez le couple appid/token. La première requête peut encore échouer après activation du service ; le script intègre déjà une logique de réessai. Relancez individuellement ceux qui n'ont pas réussi.
• Sans réseau/ autorisation : solution de repli : scripts/gen_tts_say.sh narration.json public/audio (commande macOS say, qualité moyenne, pour occuper l'espace).
• Voix de grand modèle (plus naturelle, recommandée) : si vous utilisez des voix comme *_bigtts / saturn_* / *_uranus_*, passez par l'interface v3 : après source config/seed.env, exécutez python3 scripts/gen_tts_seed.py --script narration.json --out public/audio. Pour changer de voix, il suffit de export SEED_SPEAKER=<ID_voix>. Il s'agit d'une authentification par clé API (X-Api-Key), retour en streaming, service et facturation différents de v1 (voix BV).
  • Resource-Id utilisez seed-tts-2.0 (valeur par défaut dans seed.env). Les voix saturn_* et *_uranus_* l'utilisent en test ; en cas d'erreur (comme seed-tts-1.0/volc.megatts.default), vous obtiendrez code 55000000 resource ID is mismatched with speaker.
  • Des RemoteDisconnected peuvent survenir en cas de problème réseau/proxy ; le script intègre déjà la capture d'exception + réessai (--retry 5).

7. Calibrer la durée des plans en fonction de la durée audio réelle (crucial, sinon coupure)

~/.claude/skills/product-promo-video/scripts/measure_audio.sh public/audio

Dans theme.ts pour SCENE_FRAMES, assurez-vous que chaque segment :

Le nombre d'images du plan ≥ delayFrames de Narration + ceil(secondes audio × fps) + espace blanc de fin (≥15 images recommandé) Après modification des durées, vérifiez le nombre total d'images dans Video.tsx (somme automatique, généralement pas besoin de modification).

8. Appliquer un style / Écrire les composants du storyboard

• Priorité : Appliquer un préréglage de style existant (styles/STYLES.md). Copiez le theme.ts, les modules de décoration et AllScenes.tsx du style choisi dans le dossier src/ correspondant, puis modifiez le texte des grands écrans en fonction du script de la vidéo. Trois styles : warm/ guochao/ tech.
• Si vous écrivez/ ajustez manuellement le storyboard : utilisez BigTitle (grand texte), KenBurns, Subtitle, PhoneMock (supporte crop), Chip, FeatureCard de components.tsx ; ajoutez des éléments décoratifs respectifs (sceau/ carte vitre/ coin/ HUD) pour les styles guochao/ tech.
• Placez un <Narration file="sX.mp3" delayFrames={..} /> par segment.
• Pour couvrir les données défavorables : superposez une carte React sur le PhoneMock correspondant (voir exemple MedsBadge).

9. Musique de fond

python3 ~/.claude/skills/product-promo-video/scripts/gen_bgm.py \
  --duration <durée_vidéo_secondes+2> --out public/audio/bgm.mp3   # Optionnel : --semitones transposition --gain volume

Video.tsx contient déjà <BgMusic base={0.85} />, qui se fond automatiquement en fin de vidéo et reste en dessous de la voix off. Si trop fort, réduisez base.

10. Rendu + Auto-vérification

npx remotion render Promo "out/<nom_du_film>.mp4" --concurrency=2
~/.claude/skills/product-promo-video/scripts/verify.sh "out/<nom_du_film>.mp4"

• Utilisez --concurrency=2 : une concurrence élevée (4) peut provoquer des crashes Node occasionnels (la sortie ne montre que la fin de la stack Node.js v22.x, sans fichier final). En cas de plantage, réduisez la concurrence et relancez en avant-plan, cela passe généralement.
• Lors d'un rendu en arrière-plan, un plantage peut aussi retourner exit 0, assurez-vous donc de vérifier que le mp4 dans out/ est réellement généré, ne vous fiez pas uniquement au code de sortie. Utilisez ensuite Read pour voir /tmp/vchk(vérifier chinois/ emoji/ mise en page), vérifiez le volume dans verify.sh (mean environ -18~-23 dB normal, pas de silence). Si nécessaire, utilisez silencedetect pour vérifier qu'une phrase de voix off est correctement prononcée.

11. Livraison et variantes

Indiquez le chemin/ format/ durée du fichier final. Ajouts courants : intégration d'une courte vidéo réelle, version portrait (modifier les dimensions dans Root.tsx + réagencer la mise en page), modifier le script/ les couleurs/ la musique et relancer le rendu. Vous pouvez aussi lancer npm run dev pour prévisualiser en temps réel avec Remotion Studio.

Pièges à éviter impérativement

• La voix off doit être placée dans <Sequence from={delayFrames}>. N'utilisez pas if(frame<delay) return null pour « différer » — cela ne retarde pas le début de la lecture, mais saute le début de l'audio pendant 'delay' secondes, coupant ainsi le début de chaque phrase (symptôme typique : « les médicaments de maman et papa » devient « de maman et papa »). Le Narration du template est déjà écrit correctement.
• Convertissez les vidéos HEVC en H.264 avant <OffthreadVideo>, sinon Chromium affiche un écran noir/ erreur lors du rendu.
• Utilisez des noms de fichiers ASCII pour les ressources dans public/assets, référencez-les avec staticFile('assets/xx.jpg').
• Police chinoise : utilisez @remotion/google-fonts/NotoSansSC (déjà configuré dans theme.ts du template, fallback PingFang) ; les emojis colorés s'affichent correctement dans Chromium, vous pouvez les utiliser comme icônes en toute confiance.
• Après génération de la voix off, mesurez toujours la durée et recalibrez SCENE_FRAMES : différentes voix/ débits changent la durée, sinon la fin de la phrase sera coupée.
• Ne présentez pas l'échantillon de 5 secondes comme une limite de production. La durée --duration pour Happy Horse est déterminée par les besoins de l'utilisateur, le budget et la plage de prise en charge du modèle ; un film plus long peut être assemblé à partir de plusieurs segments IA, de ressources réelles et de Remotion/ ffmpeg.
• Évitez le texte/ Logo dans les prompts de l'IA vidéo, car cela pourrait générer des caractères erronés ou des logos déformés. Les noms de marque, points de vente et sous-titres sont superposés via Remotion.
• L'erreur Volcengine 3001 est généralement un problème d'autorisation de compte, pas de code. Suivez les étapes de la section doublage pour le dépannage.
• Les identifiants Volcengine se trouvent dans config/volcano.env (contenant des clés, ne pas divulguer) ; la Secret Key n'est pas nécessaire pour cette interface HTTP.
• Tous les paquets remotion doivent être verrouillés exactement sur la même version (remotion / @remotion/cli / @remotion/transitions / @remotion/google-fonts tous en 4.0.xxx sans ^). L'ajout d'un caret pourrait faire installer une version plus récente à un sous-paquet, provoquant des erreurs de build comme export 'HtmlInCanvas' was not found in 'remotion'. Le template est déjà verrouillé ; après l'installation d'un nouveau paquet, utilisez node -e "..." pour vérifier la cohérence des versions.

Carte des fichiers

• scripts/gen_tts_bailian.py TTS CosyVoice Alibaba Bailian (recommandé en priorité, utilise bl speech synthesize)
• scripts/gen_tts_volcano.py TTS standard Volcengine (voix BV, interface v1, lit les identifiants depuis env, le script depuis JSON)
• scripts/gen_tts_seed.py TTS grand modèle Volcengine (voix bigtts/ saturn/ uranus, interface v3, authentification API Key, recommandé)
• scripts/gen_tts_say.sh Solution de repli hors ligne macOS pour le doublage
• scripts/gen_bgm.py Synthétise une musique de fond chaleureuse
• scripts/measure_audio.sh Mesure la durée de la voix off en images, calibre SCENE_FRAMES
• scripts/verify.sh Auto-vérification du fichier final (spécifications/ volume/ extraction d'images)
• config/bailian.env Paramètres TTS Bailian · config/volcano.env Identifiants TTS standard Volcengine · config/seed.env Identifiants TTS grand modèle
• config/narration.example.json Exemple de script narratif émotionnel · config/narration.corporate.example.json Exemple de script pour présentation d'entreprise/ produit
• styles/STYLES.md + styles/{warm,guochao,tech}/ Trois préréglages de style (couleurs + décoration + storyboard), une fois choisis, copiés dans le dossier src/ du projet
• template/ Squelette de projet Remotion directement copiable avec cp -R