Que fait Ajouter des cartes de contenu vidéo ?
Transformez des moments sémantiques approuvés en une superposition de graphiques HyperFrames cohérente. Utilisez les preuves partagées et la chronologie canonique ; ne retranscrivez ni ne réanalysez la source dans le cadre de cette compétence.
Dépendances
/video-understand est un prérequis. Exécutez-le d'abord pour que les cartes utilisent des preuves sémantiques validées et la chronologie canonique.
Avant de commencer, vérifiez qu'il est installé. S'il ne l'est pas, avertissez l'utilisateur que ce prérequis est manquant et arrêtez-vous avant de traiter le média.
Exigez ffmpeg dans le PATH, Python et Node.js >= 22 (pour npx hyperframes, téléchargé à la demande). hyperframes render/snapshot utilise un Chrome headless — il gère son propre chrome-headless-shell et se rabat sur un Chrome système (définissez CHROME pour le remplacer) lorsque le cache est inutilisable. Vérifiez tout cela avant de traiter le média.
Entrées
work/project.json: révisions des opérations et dépendanceswork/understand/understanding.json: moments sémantiques révisés et preuveswork/timeline.json: mappage source-à-programme, ou une timeline d'identité lorsqu'aucun cut n'existe- révision optionnelle de l'étalonnage couleur sélectionné lorsque le contraste ou la palette est jugé par rapport à ce look
La compétence est valide sans cut ni étalonnage. Lorsque les sous-titres sont actifs, exécutez-les d'abord, basez-vous sur leur révision actuelle et traitez leur région occupée comme une zone d'exclusion stricte. Les cartes de contenu doivent précéder le motion design graphique lorsque les deux sont actifs. Ces règles relatives s'appliquent à chaque paire sélectionnée. Déclarez uniquement les dépendances réellement consommées et enregistrez leurs révisions actuelles dans based_on.
Traitez le visage visible et la silhouette de la tête de chaque personne principale ou au premier plan, intervenant, présentateur, interviewé ou personne sémantiquement importante comme une zone d'exclusion stricte pendant toute la durée du signal de carte, y compris les entrées et sorties. Une personne d'arrière-plan accessoire qui n'est pas un récit ou un centre d'intérêt visuel est exemptée ; protégez les cas incertains. Si une carte intersecte un visage ou une tête protégé, repositionnez-la d'abord, puis redimensionnez-la ou reconcevez-la. Ignorez la carte lorsqu'aucun placement conforme n'existe.
Fichiers de travail
work/content-cards/cards-plan.json # plan éditorial durable
work/cache/content-cards/index.html # composition "le code est l'édition"
work/cache/content-cards-overlay.mov # contribution de rendu transparent
review/03-content-cards/card-stills/ # une image utile par carte
review/03-content-cards/content-cards-preview.mp4 # fenêtres de signal courtes optionnelles
review/03-content-cards/content-cards-summary.md
review/03-content-cards/content-cards-review.html # tableau de révision local des candidats
review/03-content-cards/content-cards-review-assets/ # une trame source par candidat
review/03-content-cards/content-cards-review.json # choix humains validés
La page de révision réutilisable est validée dans
skills/video-add-content-cards/assets/content-cards-review.html.
Le HTML peuplé, les captures d'écran, la superposition et les rendus d'aperçu sont reproductibles.
Conservez le plan en dehors de cache/. Il doit contenir chaque chaîne visible, timing, placement, valeur de traitement visuel, chemin de composition du moteur de rendu, chemin des actifs du moteur de rendu et FPS source nécessaires pour régénérer le HTML jetable et les actifs alpha après avoir supprimé work/cache/. Enregistrez un renderer_recipe au niveau du plan avec l'exemple/modèle source, le chemin de sortie de la composition, le moteur de rendu et le chemin de sortie, la version exacte, l'origine et le SHA-256 de chaque actif d'exécution local. Un fichier HTML mis en cache ou un script téléchargé sans recette durable ne satisfait pas à la régénération.
Flux de travail
1. Entretien avant la rédaction
Lisez d'abord understanding.json et la timeline active. Comptez les moments graphiques éligibles et calculez la recommandation du nombre de cartes cible avant d'interviewer :
min(moments éligibles, max(1, arrondi(minutes du programme / 0.75)))
C'est un objectif, pas une règle de troncature automatique. Avant de poser une question, ouvrez vous-même les exemples animés réels avec la commande native du système d'exploitation actuel. Exécutez exactement une :
# Windows PowerShell
Start-Process (Resolve-Path 'skills/video-add-content-cards/examples/gallery-animated.html')
# macOS
open skills/video-add-content-cards/examples/gallery-animated.html
# Bureau Linux
xdg-open skills/video-add-content-cards/examples/gallery-animated.html
Si la commande échoue, diagnostiquez et réessayez. Ne remplacez pas cette action par un URI ou ne demandez pas à l'utilisateur de trouver et de cliquer sur le fichier. La galerie compare les six thèmes et peut se concentrer sur une colonne avec son sélecteur natif :
| Thème | Caractère de départ |
|---|---|
almanac | crème chaud, sérif, réfléchi |
teal | diffusion sombre, accent cyan |
editorial | documentaire, encre et ambre |
dotgrid | pixel-mono, technique |
apex | sport à haute énergie, accent rouge |
air | typographie Lexend transparente, sans plaques de support ni voiles |
Posez exactement une question à la fois dans cet ordre :
- Quel thème cette édition devrait-elle utiliser ?
- Quel nombre de cartes cible cette édition devrait-elle utiliser ? Proposez la recommandation calculée comme valeur par défaut.
- Quels types de cartes doivent être inclus ? Proposez
intro,key-quote,stat,listetoutro; par défaut aucun.
Présentez + ARRÊTEZ après chaque question. Après la troisième réponse, résumez le thème, le nombre cible, les types requis et toutes les notes fournies par l'utilisateur ; demandez une confirmation. Si l'utilisateur annule, conservez l'analyse, laissez l'opération en brouillon et ne créez ni ne rendez de cartes.
2. Rédiger des cartes à partir d'une compréhension partagée
python skills/video-add-content-cards/scripts/build_cards_plan.py `
work/understand/understanding.json `
work/timeline.json `
work/content-cards/cards-plan.json `
--target-card-count 6 `
--theme editorial `
--must-include-type stat `
--notes "Conserver les noms de produits textuellement"
Le script mappe les moments sémantiques conservés dans le temps du programme et omet les moments supprimés par le cut. Il préserve les plages source et les références de preuve, limite la durée au clip contenant et marque la copie/le placement/le traitement visuel comme brouillon. Un stat commence par metric-spotlight ; une list commence par side-by-side ; la révision des candidats peut conserver la disposition normale ou passer une liste à parallel-columns.
L'entretien confirmé est stocké comme brief dans cards-plan.json. Répétez
--must-include-type pour plusieurs valeurs ; omettez les indicateurs qui ne s'appliquent pas. Les champs de brief optionnels plus anciens restent acceptés pour la compatibilité mais ne font pas partie de l'entretien normal.
3. Faire des choix éditoriaux
Lisez les preuves à chaque heure de carte. Corrigez les noms et les chiffres ASR, éliminez les candidats faibles, rédigez des textes concis, choisissez un placement qui dégage les visages protégés, les silhouettes de têtes visibles et les sous-titres, et approuvez le traitement visuel. Ne traitez jamais le texte de l'analyseur comme une copie finale.
Stockez toute copie à l'écran sous copy.display (par exemple eyebrow, title et detail), et non seulement un résumé ou un titre suggéré. Définissez placement.face_clearance sur verified uniquement après avoir examiné une image composite par rapport à la définition de visage et de tête protégée ci-dessus, et stockez le chemin relatif au protocole de cette image dans placement.review_still. Stockez la composition HyperFrames, l'actif alpha et les FPS rationnels exacts sous renderer.
Utilisez ces mappages comme point de départ :
| Type sémantique | Type de carte |
|---|---|
| hook | intro |
| key-point, quote, question | key-quote |
| stat | stat |
| list | list |
| cta | outro |
repetition, tangent et risk sont des preuves éditoriales, pas des cartes automatiques.
Conservez les cinq types de cartes canoniques. Stockez les dispositions optionnelles suivantes sous visual_treatment.layout plutôt que de créer de nouveaux types de cartes de premier niveau :
| Type de carte canonique | Disposition autorisée |
|---|---|
stat | default, metric-spotlight, bar-chart, pie-chart, line-chart |
list | default, side-by-side, parallel-columns |
Utilisez metric-spotlight uniquement lorsqu'un nombre, un pourcentage, un montant, un multiple, une année ou une durée étayé par des preuves mérite d'être mis en évidence. Placez le nombre entre un contexte supérieur et inférieur concis, adaptez les valeurs longues sans chevauchement et maintenez le nombre visuellement centré entre ces étiquettes.
Utilisez side-by-side ou parallel-columns pour deux à quatre concepts parallèles, contrastés, opposés ou correspondants courts. Privilégiez les phrases courtes ; utilisez la révision pour choisir l'orientation qui s'adapte aux séquences disponibles et qui dégage le sujet.
Utilisez un graphique uniquement lorsque la transcription conservée fournit un ensemble de données complet et étayé par des preuves.
Lisez reference/chart-data.md avant de créer les données du graphique. Stockez manuellement la dimension, la métrique, l'unité, la période, les points ordonnés et la preuve de transcription de chaque point sous data ; n'inférez jamais de valeurs à partir d'un résumé d'analyseur et ne combinez pas de points provenant de différentes vidéos. Utilisez bar-chart pour 2 à 6 catégories comparables, pie-chart pour 2 à 6 parties mutuellement exclusives d'un tout prouvé et line-chart pour 3 à 8 points ordonnés de manière significative. Lorsque les valeurs, les étiquettes, un dénominateur, un ordre temporel ou des unités requis sont manquants, utilisez metric-spotlight, une carte stat normale ou aucune carte.
Pour les dispositions de graphiques, compressez les longues explications en texte de support concis sans en modifier le sens. Le graphique doit principalement communiquer les valeurs clés et leur changement ou relation. N'énumérez pas et ne reformulez pas les valeurs, les étiquettes, les périodes ou les unités déjà visibles dans le graphique.
Conservez tous les candidats étayés par des preuves à ce stade. Visez le nombre de cartes cible du brief, mais permettez un ensemble plus fort ou plus clairsemé lorsque les preuves le justifient.
4. Examiner et appliquer les choix des candidats
Générez un examen de navigateur spécifique au projet après l'existence du plan candidat. Passez la vidéo source alignée sur source_range du plan et la timeline active. Le script limite chaque point médian de preuve à son clip retenu contenant, puis peuple le modèle validé avec une trame source correspondante par candidat :
python skills/video-add-content-cards/scripts/build_review_page.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.html `
--video input/source.mp4 `
--timeline work/timeline.json `
--captions-plan work/captions/captions-plan.json
Omettez --captions-plan lorsque le projet n'a pas d'opération de sous-titrage active. Avec un plan de sous-titrage actif, l'image de révision montre ses régions occupées réelles (haut, centre ou bas).
Ouvrez immédiatement la révision peuplée vous-même avec la commande native du système d'exploitation actuel. Exécutez exactement une :
# Windows PowerShell
Start-Process (Resolve-Path 'review/03-content-cards/content-cards-review.html')
# macOS
open review/03-content-cards/content-cards-review.html
# Bureau Linux
xdg-open review/03-content-cards/content-cards-review.html
Si la commande échoue, diagnostiquez et réessayez ; ne demandez pas à l'utilisateur de localiser le fichier. La page affiche chaque trame source, ID de carte, heure du programme, texte modifiable, traitement visuel et placement. Les dispositions de graphiques affichent également les données structurées modifiables et les références de preuve des points. Examinez chaque valeur par rapport à sa preuve affichée avant de l'approuver.
Chaque candidat commence non sélectionné avec un placement défini sur bottom. Changer le placement déplace un proxy de carte grise sur l'image réelle afin que le risque de collision soit visible avant l'approbation. L'utilisateur sélectionne les cartes, modifie le texte, choisit le traitement et le placement, clique sur Copier le résumé et colle le résumé visible dans la conversation.
Présentez + ARRÊTEZ. Attendez le résumé de sélection collé. Ne créez pas de code HTML à partir de candidats brouillons non vérifiés. Convertissez le résumé en review/03-content-cards/content-cards-review.json : écrivez une entrée pour chaque carte du plan, marquez les ID de résumé sélectionnés avec leur copie, leur traitement visuel et leur placement choisis, et marquez tous les autres ID comme non sélectionnés avec leur copie brouillon actuelle et un placement vide. Stockez le choix de révision comme un champ de chaîne nommé visual_treatment. Ensuite, appliquez la révision validée :
python skills/video-add-content-cards/scripts/apply_cards_review.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.json
L'étape d'application rejette les ID de carte inconnus, en double ou manquants, le texte sélectionné vide, le placement invalide et les traitements incompatibles avec le type de carte canonique sans modifier le plan. En cas de succès, elle conserve les cartes sélectionnées et marque leur copie, leur placement, leur traitement visuel et la révision de premier niveau comme approuvé. Lisez le nombre sélectionné résultant par rapport à l'objectif du brief avant de continuer.
Pour les dispositions de graphiques sélectionnées, l'étape d'application valide également les données structurées complètes et marque data.status comme approuvé. Tout graphique sélectionné invalide rejette l'ensemble de la révision avant la copie du plan. Le choix d'une disposition non graphique supprime les données de graphique brouillon inutilisées. Après l'application, la vérification du visage et des sous-titres reste en attente jusqu'à ce que la composition soit vérifiée par rapport aux images composites réelles.
5. Créer une composition HyperFrames
Utilisez un index.html et une timeline GSAP en pause. Chaque carte approuvée devient un .clip indexé par program_start_s et duration_s du plan. Maintenez les déplacements en sécurité de recherche et dérivez le timing des attributs de données plutôt que des minuteries murales.
Pour les signaux de graphiques, animez uniquement via cette timeline en pause à des heures de composition absolues. Les barres se révèlent à partir d'une seule ligne de base zéro ; les secteurs de diagramme circulaire se révèlent dans l'ordre des points avec une géométrie proportionnelle aux valeurs ; les chemins de ligne se dessinent dans l'ordre de l'axe X avant l'apparition de leurs points. Utilisez un dimensionnement relatif à la source et des boîtes de mise en page fixes afin que la recherche, les étiquettes et les valeurs dynamiques ne provoquent jamais de sauts de mise en page. Les durées suggérées sont de 5 à 6 secondes pour les barres et les diagrammes circulaires et de 6 à 8 secondes pour les lignes, toujours limitées au clip retenu.
Partez de l'exemple de référentiel le plus proche :
examples/index-almanac.htmlexamples/index-apex.htmlexamples/index-dotgrid.htmlexamples/index-editorial.htmlexamples/index-teal.htmlexamples/index-air.html
Conservez un langage visuel unique sur toutes les cartes, utilisez un dimensionnement relatif à la source et maintenez un contraste suffisant par rapport à l'étalonnage sélectionné. Les cinq thèmes à panneau opaque peuvent utiliser une carte ou un voile pour la lisibilité. air doit garder les conteneurs de scène et de texte transparents, pas de plaques de support, pas de voiles ; la typographie est blanche ; l'arrière-plan du conteneur est rgba(0,0,0,0). Pour air, toutes les cartes activent un contour de texte (stroke) et un flou d'ombre portée (drop-shadow blur) pour la lisibilité du texte sur la scène.
Définissez class="hyperframe" et data-match-media="all" sur la composition. Chaque clip a data-clip-id qui correspond à l'ID de la carte du plan, data-name pour l'outil de développement, data-program-start={program_start_s}, data-duration={duration_s}, data-clip-in=0, data-clip-out={duration_s}. Le format temporel du sous-titrage de scène utilise des s décimales comme "0.50".
Composition de l'aperçu SPÉCIFIQUE À LA CARTE :
skills/video-add-content-cards/scripts/preview_composition.py
Après avoir créé le HTML de composition, générez et ouvrez un aperçu de navigateur spécifique à la carte pour vérifier les animations et le contraste. Exécutez une commande avec --card-ids listant les ID de cartes séparés par des espaces ou omettez pour toutes les cartes. Passez éventuellement --grade pour un chemin d'étalonnage, --theme et --fps.
python skills/video-add-content-cards/scripts/preview_composition.py `
work/content-cards/cards-plan.json `
--cache work/cache/content-cards/index.html `
--card-ids card-002 card-005
Ouvrez immédiatement le résultat avec la commande native du système d'exploitation. C'est un seul fichier HTML autonome différent du fichier de composition principal. Il affiche une grille propre avec chaque carte de signal dans une colonne qui peut être lue individuellement. Le titre de l'onglet est le nom du projet. Corrigez les problèmes de superposition de texte ou de contraste d'arrière-plan et demandez des retours.
Présentez + ARRÊTEZ. Attendez que l'utilisateur examine l'aperçu.
6. Rendre la superposition alpha
npx hyperframes render work/cache/content-cards/index.html `
--output work/cache/content-cards-overlay.mov `
--size 1920x1080 `
--fps 30 `
--trim 00:00:00.0 --duration 120.0 `
--alpha transparent `
--motion-blur `
--progress
Après un rendu réussi, extrayez une image utile par carte dans le dossier de révision :
python skills/video-add-content-cards/scripts/extract_card_stills.py `
work/content-cards/cards-plan.json `
work/cache/content-cards-overlay.mov `
review/03-content-cards/card-stills/ `
--fps 30
Si un rendu propre ne parvient pas à se produire, enregistrez la trace et demandez un retour. Le répertoire work/cache/ est jetable ; son chemin de composition de rendu et les dépendances de rendu doivent tous être enregistrés sous renderer dans cards-plan.json. Vérifiez que renderer.alpha_asset.path existe et que son nom de fichier correspond au conteneur de sortie de rendu (overlay.mov ou le format réel), puis lisez ./skills/video-add-content-cards/reference/render-spec.md pour obtenir des conseils de dépannage.
7. Résumé de la révision
Écrivez un résumé du nombre de cartes, du thème, des modifications de texte notables, des ajustements de placement, des signatures de rendu, du nombre d'images clés et des FPS. Stockez-le dans le fichier de révision désigné.