notasimrazzaq/AI-Video-Editor

Graphiques animés sur la propre vidéo de l'utilisateur

Couche de l'espace de travail sur les compétences HyperFrames installées. Pour les mécanismes HTML/timeline, chargez hyperframes-core (contrat de composition) et hyperframes-animation (règles GSAP) ; la route amont la plus proche est talking-head-recut. Cette compétence ajoute les règles de base du créateur, qui prévalent en cas de conflit.

Chemin rapide (éprouvé sur reel-sep30, reel 3:20 ourdou/anglais, Paper Cut)

1. powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name <n> -Video raw/<file> -Transcribe → transcription Deepgram en quelques secondes.
2. Extrayez transcript-words.txt (index:text@start) → lisez-le, résumez, choisissez les moments.
3. Légendes : captions-src.json (morceaux Roman Hinglish par index de mot) → node tools/build-captions.mjs projects/<n>.
4. Modèle de style : copiez kit/templates/paper-cut-vertical.html → index.html ; définissez les deux data-durations ; remplacez les appels EXEMPLE par les moments de cette vidéo.
5. lint → snapshot --at ... (2 lots d'environ 12 images) → visualisez les planches contact → corrigez.
6. Sons : écrivez sfx.json à partir du tableau des décalages dans mg-sound → node tools/sfx.mjs projects/<n> (AVANT le rendu, pour qu'un seul rendu les inclue).
7. Annoncez à l'utilisateur le temps de rendu à l'avance (voir mg-export : ~25–30 min par minute de vidéo 1080x1920 sur un ordinateur portable 4 cœurs), puis effectuez un rendu unique, copiez dans exports/.
8. Ajustements ultérieurs : audio uniquement → sfx.mjs --mix (secondes, pas de nouveau rendu). Ajustements visuels → d'abord un instantané, puis un seul nouveau rendu.

Ne faites pas : installer des modèles vocaux locaux, reprendre des téléchargements bloqués, effectuer un rendu pour "vérifier" quoi que ce soit (utilisez les instantanés), ou prévisualiser dans le lecteur de VS Code (pas d'audio AAC — utilisez VLC).

1. Configurer le projet

1. Si la vidéo n'est pas dans raw/, elle peut rester là où elle est. Choisissez un nom de projet court en kebab-case à partir du nom du fichier.
2. Exécutez (depuis la racine de l'espace de travail) :

   powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name "<nom>" -Video "<chemin>" -Transcribe
   

   • La transcription utilise Deepgram (nova-3, language=multi par défaut : gère l'alternance codique ourdou/hindi + anglais ; les mots hindi/ourdou peuvent revenir en devanagari — romanisez en hinglish, conservez les timings). Nécessite la variable d'environnement utilisateur DEEPGRAM_API_KEY ; si elle est manquante, demandez à l'utilisateur d'exécuter lui-même powershell -NoProfile -ExecutionPolicy Bypass -File tools/set-deepgram-key.ps1 (jamais dans le chat). Vidéo uniquement en anglais : -Language en. Nouvelle exécution seule : powershell -NoProfile -ExecutionPolicy Bypass -File tools/transcribe-deepgram.ps1 -Project projects/<nom>.
   • N'utilisez pas npx hyperframes transcribe avec whisper ou ne l'installez pas (trop lent/bruyant) ; utilisez Deepgram.
   • Produit projects/<nom>/ avec clip.mp4 (CFR H.264), audio.mp3, metadata.json, transcript.json, fonts/, sfx/, renders/.
   • Ajoutez -Screenshots "<dossier>" si l'utilisateur fournit des captures d'écran pour un moment.
3. Travaillez à l'intérieur de projects/<nom>/ à partir de maintenant (cd avant toute commande npx hyperframes).

2. Analyser vraiment la vidéo

• Lisez metadata.json (largeur, hauteur, fps = r_frame_rate, durée) et transcript.json (plat [{text,start,end}]).
• Corrigez les erreurs évidentes de RAP sur place, conservez les timestamps. La reconnaissance vocale peut être décalée d'environ 1 s : lorsqu'un moment compte, vérifiez avec ffmpeg -ss <t-0.5> -t 2 -i clip.mp4 ... ou des instantanés plutôt que de vous fier au nombre.
• Transcripts longs ou multilingues : extrayez une liste de mots indexés (index:text@start, une phrase par ligne) dans transcript-words.txt et lisez-la.

Légendes (quand l'utilisateur les souhaite)

• Écrivez captions-src.json : [[premierIndexMot, dernierIndexMot, "texte de la légende", ["mot","clé"]], ...], 3–7 mots par morceau, couvrant chaque mot. Parole ourdou/hindi/hinglish → écrivez le texte en Hinglish romanisé (ex. "ke 9 maah guzar gaye hain"), conservez les mots anglais tels quels, corrigez les erreurs d'écoute par contexte ("नौ मां" → 9 maah, "New York" → New Year).
• Construction : node tools/build-captions.mjs projects/<nom> → captions.js (window.CAPTIONS = [{s,e,text,key}]), avertit des mots non couverts. Chargez avec <script src="captions.js">.
• Trouvez où se trouve le visage : npx hyperframes snapshot n'est pas disponible avant qu'une composition n'existe, alors extrayez des images : ffmpeg -nostdin -v error -ss <t> -i clip.mp4 -frames:v 1 renders/_probe_<t>.png à 3–4 points et visualisez-les.
• Rédigez un résumé d'un paragraphe : de quoi parle la vidéo, et les 3–8 moments importants (chiffres, listes, avant/après, affirmation clé, appel à l'action).
• Demandez à l'utilisateur quel style s'il ne l'a pas dit (voir mg-styles). Par défaut : cartes givrées blanches et propres (Liquid Glass).

3. Planifier (montrer à l'utilisateur avant de construire si la vidéo dure > 30 s ou si le brief est vague)

Pour chaque moment : mot déclencheur + son start exact, type de graphique, contenu, zone, heure de sortie. Le type de graphique suit ce qui est dit :

• nombre → compteur · liste → coche de checklist · avant/après → comparaison · phrase clé → zoom avant ou grand texte
• captures d'écran / preuve → pop-ups en séquence (PROMPT 12) · nouveau sujet → recadrage (la vidéo rétrécit dans une carte) Le vocabulaire et les styles de mouvement résident dans la compétence mg-styles.

4. Règles de base (non négociables)

1. Gardez la vidéo exactement telle quelle : même taille, fps, audio, montage. data-width/height de la composition = taille de la vidéo, fps = fps de la vidéo, data-duration racine = durée de la vidéo (limité à celles de metadata.json). La vidéo est <video id="a-roll" class="clip" src="clip.mp4" data-has-audio="true" data-start="0" ...> sans muted, sans crossorigin.
2. Chaque graphique commence sur le mot exact (start de ce mot dans le transcript).
3. Un seul style pour toute la vidéo.
4. Rien dans les 3 premières secondes — c'est l'accroche.
5. Gardez les graphiques loin du visage, hors du tiers inférieur (légendes), et dans les 80% centraux de la largeur (marge de 10% à gauche/droite).
6. Polices uniquement depuis le dossier fonts/ du projet via @font-face (jamais d'URL Google Fonts) ; GSAP via <script src="vendor/gsap.min.js">.
7. Le verre dépoli nécessite quelque chose derrière ; sur des séquences, cela fonctionne, pour une exportation transparente, utilisez des cartes pleines.

5. Construire, vérifier, réviser

1. Écrivez index.html (composition autonome, une timeline GSAP en pause enregistrée sous window.__timelines["<id>"]). Style Paper Cut : commencez par kit/templates/paper-cut-vertical.html. Séquences téléphone basse résolution (ex. 480x864 WhatsApp) : rédigez quand même sur un canevas 1080x1920 pour que les graphiques/légendes restent nets ; la vidéo est mise à l'échelle en dessous.
2. npx hyperframes lint puis npx hyperframes check — corrigez chaque erreur.
3. npx hyperframes snapshot --at <t1>,<t2>,... au point médian de chaque graphique et visualisez les PNG — vérifiez le chevauchement visage/légende et le rognage du texte.
4. Effectuez un rendu d'ébauche : npx hyperframes render . -o renders/with-cards.mp4 (les rendus sont lents sur les PC typiques ; utilisez les instantanés pour itérer, effectuez le rendu uniquement lorsque les images semblent correctes).
5. Copiez le fichier final approuvé dans exports/<nom>.mp4.

6. Suivis (même session)

• Un seul endroit (PROMPT 12) : "Quand je dis , montre ". Trouvez la phrase dans le transcript, modifiez uniquement ce moment, conservez tout le reste identique, effectuez un nouveau rendu vers le même fichier.
• Son : utilisez la compétence mg-sound. Variantes d'exportation / transparent : compétence mg-export.
• Ajustements en langage clair (surface, couleur, type, mouvement, timing, disposition) → éditez uniquement cela, gardez tout le reste identique, effectuez un nouveau rendu.

Faites d'abord la base, puis un seul endroit à la fois. N'essayez pas de tout faire en une seule passe.